YouTube動画やショート動画製作、WebサイトやSNS投稿、ゲーム制作などに
オリジナルなアニメーションを加えたいと思ったことはありませんか？
「Aseprite」というソフトを使うと
ドットアニメーションを簡単に作ることができます。
Asepriteを使って作成したアニメーションは
GIFなどの動画形式ファイルとして保存する以外にも
WEBP・BMP・JPEG・ICO・SVG形式の画像ファイルに出力することができますので
さまざまなアプリケーションで利用することができます。
AsepriteはSTEAMから購入できます。
Asepriteは、軽量で高機能なドットアニメーションツールです。
使い方は、Windowsペイントのようにシンプルなので、直感的な操作だけで
あらゆるドットアニメーションを作ることができます。
Asepriteの日本語化
Asepriteソフトは英語版ですが、日本語化の解説を「hakolife.net」様のサイトで
詳しく記載されていますので、ぜひ参考にして下さい。
また、この記事ではAsepriteの解説を、有志のメンバーによって日本語化されたアプリケーション画面を使用しています。
アニメーションサンプル「MINECRAFT」のクリーパーを作ってみる
今回の例では、上の画像のような、簡単なアニメーションGIFを作成します。
このキャラクターの簡単な説明
「MINECRAFT」というドット調のゲームに出てくる「クリーパー」というキャラクターで
主人公が近付くと「点滅し、爆発する敵」で有名です。
この画像は、クリーパーが爆発する寸前に、体が点滅するシーンを表現したものです。
記事の後半に、このアニメーション素材（GIF）のダウンロードボタンがあります。
動画やメールなどに貼り付けて「急いでいる！」「危ない！」といった表現に使うと面白いかもしれません。
ダウンロードした画像は、ご自由にお使い頂けます。
Asepriteを起動します（クリーパーの作り方）
ではAsepriteを使って、ドットアニメーションを作成してみましょう。
Asepriteを起動し、メニューから「ファイル」→「新規作成」を選択します。
画像のサイズ（幅・高さ）を入力したら、OKを押します。
画像サイズは大きくすることもできますが、この解説では32×32ピクセルにしています。
塗り潰しツールを使って、クリーパーの体を作ります
画面右側の描画ツールから「長方形（塗り潰し）」を選択して、キャラクターの大まかなイメージを描きます。
画面中央に「頭」・「胴体」・「足×2」の四角を描きます。
MINECRAFTのキャラクターは、角張った体が特徴で、ドットで表現されているため
クリーパーの体を、四角形で描いても違和感はありません。
また、実際のゲームに登場するキャラクターの身長は縦長ですが
画像サイズは、32×32ピクセルの範囲内でディフォルメしています。
なお色の選択は、画面左側のカラーパレットから色を選択しており
クリーパーの体の色は、緑の「暗い・普通・明るい」を使用します。
Asepriteツール一覧
Asepriteに搭載されている、各描画ツールの使い方についての解説は割愛させていただきますが
Asepriteのアプリケーション画面右側に表示されているツールボタンは、長押しすると
複数の機能が展開されますので、用途に応じて機能を切替えるて使用します。
細かい部品を追加します
クリーパーに、目と口を追加しました。
なお、この段階で、あまり細かく画像（ドット）を書き込むよりも
全体的なアニメーションを作成したあとで、細かい修正を加えた方が効率的です。
（この例では、体が点滅するだけですが）
Asepriteの画像編集機能
画像の移動や回転、色の変更、拡大・縮小、反転（上下左右）などがあります。
フレーム（タイムライン）を追加します
Asepriteは、ほかの動画編集ソフトと同様に「フレーム」を使ってアニメーションを生成することができます。
上の画像の赤い枠で囲まれた部分では、画像の「レイヤー」と「フレーム」を編集することができます。
先ほど描いた画像に、新しいフレームを追加するには
レイヤー名の右上に表示されている「1（数字）」の部分を右クリックし
「新規フレーム」を選択します。
新しく作成されたフレームには、自動的に前回使用していたフレームと同じ画像がコピーされます。
つまり、フレーム1とフレーム2の画像をアニメーションさせるには
フレーム1と2の画像が、少しでも変化していればOKです。
Asepriteのフレーム
フレームは、パラパラ漫画のように画像を次々に切替えて表示する機能で
描いた画像を「フレーム1」、続けて「フレーム2」・「フレーム3」の画像を描くことで
複数の画像を順番に表示して、画像が動いているように表現することができます。
Asepriteで、フレームの順序を変更するには
フレーム番号をクリックすると、フレームを選択する黄色の枠が表示されます。マウスを近付けるとカーソルが「上下の矢印」に変わりますので、その状態のまま、フレームをドラッグアンドドロップします。
Asepriteのフレームレート
「フレームレート」は画像の表示速度を表し、数値が低いと短く、数値が高いと長くなります。
Asepriteでフレームレートを調整するには、フレーム番号の上で、マウス右クリック→フレームのプロパティを選択して、数値を入力します。
Asepriteのレイヤー
画像ソフトなどの「レイヤー」は、画像・図形・オブジェクトの「重ね合わせの順番」です。
レイヤーは複数使用することができ、表示する順番を編集することも可能です。
Asepriteなどの画像ソフトでは、レイヤーの表示が上にあるものが、画像の重ね合わせの上位に表示され、下に重なったレイヤーは「隠れて表示」されます。
Asepriteでレイヤーを追加・削除するには、レイヤー名の上でマウス右クリック→「新規」または「レイヤーの削除」を選択します。
新しいフレームの画像を編集します
新規フレーム（2）が作成されたことを確認したら、クリーパーの体の色を少し明るくします。
フレーム1と2だけでもアニメーションしますが、2つの画像が交互に切り替わるだけでは
やや物足りないため、もうひとつだけフレームを追加していきます。
先ほどと同じ要領で、「フレーム3」を作成し、体の色をもう一段階明るくしてみました。
これによって、クリーパーの体の色が「暗い→中間→明るい」の3段階に変化するアニメーションを
表現することができます。
※ 実際のゲームでは、クリーパーの体の色が緑色→白色の2色の点滅を繰り返します。
アニメーションを確認します
画像が完成したら、アニメーションの具合を確認します。
「アニメーションを実行」ボタンを押すと、フレームが1→2→3→1・・の順番で切り替わります。
クリーパーが爆発しそうな気配が感じられるでしょうか？
画像を保存するには、ファイル→名前をつけて保存、または「エクスポート」を使って画像を保存します。
↓クリーパーの爆破寸前！（GIFファイル432バイト）
今回の例では、画像の色を編集して点滅しているアニメーションを作成しましたが
Asepriteでは、画像が滑らかに動くようなアニメーションを作ることも可能です。
例えば、キャラクターが歩いたり、回転する動作、立体的な表現など
さまざまなドットアニメーションを自在につくることができます。
コメント