steamやスマホでも使える「Pixel Studio for pixel art」を使ってgifアニメを作っていきます。
簡単にオリジナルgifアニメを作れるとても優れたツールなので、是非一度使ってみて下さい。
基本的なアプリの情報や使い方は過去記事にてご紹介しています。
今回steam版を使っていますので、説明がＰＣ基準になってしまう事をご了承下さい。
また本記事は私個人の作り方であって、他にも色々な作り方もあると思うので参考程度に。
最終完成形
今回紹介する方法でこのようなgifアニメが作れます。
ミニサイズなので、Twitchスタンプやアイコンなどで気軽に使えるサイズ。
左から 32×32 / 64×64 / 128×128。シンプルですが、最低限の動きはつけてあります。
事前準備
目指すドットアニメのイメージをする
「これを書きたい！こんな風に動かしたい！」というある程度全体のイメージをして下さい。
今回私の目指した物は、以前Twitchで使用していたこちらのアニメーション。
この左側の女の子部分（３３側）をドットアニメにしたい、という目標でした。
新規作成
今回は32×32サイズの小さいGIFアニメを作ります。
サイズは基本プリセットを使った方がいいと思います。
もっと大きいのが作りたい人は16の倍数で指定するといい。
同じソフトで静止ドットを作成してある場合は、その静止ドット絵を元にして新しくアニメーションをつける事も可能です。
アニメーションモードに変更
①のフィルムマークを押すと上側（②）にアニメーションツールバーが出てきます。
③はアニメーションに関する設定画面を開く。
必要に応じて「オニオンスキン」の設定
アニメーション設定画面内に「オニオンスキン」という項目があり、プルダウンで数値が選択出来ます。
このオニオンスキンはざっくり言うと、選択した数値分の前フレームをうっすらと表示してくれます。
↓今回は「１」を選択したので、前の１コマがうっすらと視覚化出来ます↓
勿論無効にしても問題ありませんし、数値を大きくすれば全体の動きが把握出来るようになります。
お好みで。それ以外の設定はとりあえず今はいじらないでおきます。
実際の作業工程
基準の１コマ目
アニメのスタートフレームです。
ループ対応のgifを作る場合、「最初の１コマと最後の１コマが同じになるように」するといいと思います。とりあえず基準となる１コマを描いてみましょう。
２コマ目
上記バーのプラスボタンを押して、新規フレームを追加します。
私の場合少しでも楽に作業したいので、アニメーション設定からフレームコピーやペーストを駆使しています。
↓まず目の瞬きを作りたいので、貼り付けた２コマ目に目を閉じる静止画を↓
こんな感じでどんどん新規フレームに１枚１枚動きを追加していきます。
３コマ目以降
あとはパラパラ漫画と同じ要領です。
オニオンスキンを１に設定してあるので、前のフレームがうっすらとガイドしてくれます。
ここまでが頭を下げる動作です。
↓逆に頭を上げる動作は、頭を下げる動作をコピペして髪の毛の揺れを少しいじっただけ↓
全体の調整
とりあえず素材の準備は終わりなので、ドット絵自体のバランス調整や全体の修正をします。
動きを確認したい場合は再生ボタンを押せばいつでもアニメモードで動きを確認出来ます。
アニメーション設定
アニメーションのフレーム設定をしていきます。
フレーム設定は画面右上のフィルムマークから開きます。
このフレーム設定はざっくり言うと１コマを表示する時間の長さや間隔だと思って下さい。
フレームを１つ選択し、選択したフレームに対し「このフレームは何秒間表示して下さい」という設定をします。この時間設定は、１フレームずつ行います。
１フレームの設定→２フレームの設定…と、全てのフレームに設定する必要があります。
↑今回の私の設定はこのような設定で、最終的に合計3秒アニメになる計算にしました↑
瞬きはぱちぱちとさせるので、0.1秒。
目を開いている部分や、お辞儀の深い部分（頭を下げ切った部分）は0.5秒前後にしています。
「全てのフレームに適用」という項目は作る物にもよりますが、あまりオススメしません。
今回のアニメ動作としては「瞬き・頭を下げる・頭を上げる」ですが、動きのメリハリも大事です。
↓仮に全フレームを0.2秒表示にさせるとこうなります↓
上記にも述べたようにいつでも再生して動きを確認出来るので、色々試してみよう。
保存＆出力し、完成！
原寸サイズは32×32ですが、プリセットで「２倍（64×64）」「３倍（128×128）」と選択出来ます。
任意サイズを選択、出力形式はGIFを選択、Sprite sheetはゲーム製作等で使う用なので今回はスルー。
あとは名前をつけて保存するだけです。
無事に完成です！おめでとう！
全体を通して、手描きでドットGIFアニメを作るコツや心構え
・手描きのgifアニメは所謂パラパラ漫画。コマ送り。この事を常に頭に入れておく！
・ポーズが分からない！という方は「自分でその動作をしてみる」と、意外にもよく分かる。
・コピー＆ペーストなどで楽が出来る場所は、思いっきり楽をしていい。
・たかがgifアニメといえど、動きの強弱は大事。
・１コマ１コマが「不自然かな？」と思っても、全体を見ると自然だったりするので、諦めない。
・小さいサイズのドットアニメでは、主線は描かない方がいい。
・大きいサイズのドットアニメでは、より精密に描く必要がある。（個人的に）
・とりあえず色々挑戦してみて、とにかく楽しく描く！
まとめ
オリジナルでドット絵アニメgifを作れるようになると、色んな場所で使えます！
実際に作ってみたら思っているより簡単に出来た！という事もあるので、是非挑戦してみて下さい。
↓Pixel Studio for pixel art のアプリの基本情報↓
コメント