RPGツクール用キャラチップの作り方(5/5) キャラチップのアニメーション

 

nulluo.hatenablog.com 前回の記事はこちらです。

 

キャラチップを動かしてみよう

今回はキャラチップの歩行アニメーションの作り方を解説するとともに、EDGEのアニメーション機能の使い方などについて紹介します。

 

f:id:nulluo:20190810220359p:plain

前回で説明した通り、キャラチップは横に並んだ3枚のキャラクター画像が1セットとなって、各方向の歩行アニメーションを表現します。

 

f:id:nulluo:20190810220740p:plain

説明を簡単にするために、上図の超シンプルなキャラクターで歩行アニメーション(左向き)の作り方を説明していきます。

 

f:id:nulluo:20190810220913p:plain

EDGEのグリッドは48×48px単位に合わせています。まず、静止状態のキャラクターを

描きます。

 

f:id:nulluo:20190810221259p:plain

隣のグリッドにキャラをコピーします。(前回の記事で説明した通り、編集単位を使用してズレなくコピペしてください)

 

f:id:nulluo:20190810223727p:plain

いったん編集単位を解除して1ドット足の長さを縮めます。

 

f:id:nulluo:20190810221723p:plain

ここで「レイヤ機能」を使用します。

「レイヤ管理ウィンドウの表示/非表示」ボタンをクリックしてレイヤ管理ウィンドウを表示します。

 

f:id:nulluo:20190810222547p:plain

レイヤ管理ウインドウが表示されるのでレイヤの新規作成をクリックして新規レイヤを追加してください。(今までのレイヤの上に追加されます)

 

f:id:nulluo:20190810224747p:plain

足を縮めた画像をコピーして上のレイヤの同じ場所に張り付けてください。上図のような形になっていればOKです。

 

f:id:nulluo:20190810225747p:plain

レイヤ管理ウィンドウのレイヤの〇印をクリックすると〇が×に変わり、そのレイヤが非表示になります。下のレイヤを非表示にして一歩踏み出す動作を描きましょう。もう一度下レイヤの×アイコンをクリックするとレイヤが表示されますので、動きが不自然でないか、腕の長さが極端に変わってないか等の確認ができます。このように下レイヤの表示⇔非表示を切り替えながらアニメーションの動きを描いていきます。

 

f:id:nulluo:20190810230244p:plain

同様の手順で、一番右に3枚目の歩行アニメ用の画像を描きました。では実際にこのドット絵を動かして動作を確認しましょう。

EDGEでドット絵アニメーションを動かす方法

f:id:nulluo:20190810230535p:plain

「アニメーションフレームの表示/非表示」をクリックします。

 

f:id:nulluo:20190810230833p:plain

アニメーションフレームの「フレームの取り込み開始」をクリックします。

 

f:id:nulluo:20190810231306p:plain

「編集単位を使用」にチェックを入れます。

 

f:id:nulluo:20190810231421p:plain

この状態で①→②→③→②の順に各画像をクリックします。

 

f:id:nulluo:20190810233042p:plain

すると、アニメーションフレームにフレームが4枚が追加されます。

 

f:id:nulluo:20190810233246p:plain

「再生ウィンドウ表示/非表示」をクリックします。

 

f:id:nulluo:20190810233650g:plain

すると、先ほどの4枚の画像がアニメーションプレイヤで再生されます。

 

f:id:nulluo:20190810233910p:plain

画像サイズが小さすぎる(大きすぎる)ときは虫眼鏡アイコンをONにした後、画像をクリックしてサイズを変更してください。

アニメーションの速度が速すぎる(遅すぎる)ときはスライダでスピード調整ができます。

 

アニメーションで複数のレイヤを同時に再生する場合

さて、EDGEでアニメーションの再生をするときに1点注意すべき事があります。

それは次のようなケースです。

f:id:nulluo:20190810234555g:plain

ドット絵の編集画面ではちゃんとキャラクターを仕上げたつもりでしたが、アニメーションさせると、上図のように首無しのキャラが歩くアニメになってしまいました。

どうしてこんな事になったのでしょうか。

 

f:id:nulluo:20190810234333p:plain

これは、パーツごとにレイヤを分けて描いていたからです。服や頭など、パーツごとにレイヤを分けて絵を描くことは良くありますが、その場合デフォルトでは1つのレイヤしかアニメーションプレイヤでは再生されません。この場合は次のように設定を変更します。

 

f:id:nulluo:20190810235141p:plain

まず、「フレーム>全て選択」を実行して全フレームを選択します。

すべてのフレームが青色に反転すればOKです。

 

f:id:nulluo:20190810235305p:plain

「フレーム>プロパティ一括変更」を開きます。

 

f:id:nulluo:20190810235438p:plain

レイヤの左のチェックボックスにチェックを入れて、「可視」を選択します。

これで可視レイヤがすべてアニメーションに反映されるようになります。

 

SNS等に歩行アニメーションをアップする場合

f:id:nulluo:20190811000003p:plain

アニメーションフレーム画面で「ファイル>動画をアニメーションGIF形式で保存」を実行すると、歩行アニメーションをGIF動画として保存できます。

f:id:nulluo:20190811002423p:plain

設定項目が色々ありますが、ここは筆者はあまりいじらないのでよく分かっていません。とりあえず上図のような設定で出力しています。

 

これでGIF動画ができますが、例えばこれをシェアするためにTwitterにアップすると…

 

f:id:nulluo:20190811002555p:plain

こんな感じに劣化した画質になってしまい、かなり残念な見え方になります。

筆者もTwitterのGIF動画の詳しい仕様は分かっていませんが、小さいGIF動画は無理やりでかいサイズに引き伸ばされ、このような残念画質になってしまうようです。

TwitterやPixivにアップする場合は見栄えを意識して、GIF動画のサイズを拡大しましょう。でも、どうやって?

 

EDGEにもサイズ拡大機能はありますが、1フレームずつサイズ変更して、先ほど説明したアニメーション作成の手順を繰り返すのは面倒です。もしあなたがPhotoshopをお持ちであれば、GIF動画のサイズを超簡単に拡大することができます。

 

f:id:nulluo:20190811002648p:plain

EDGEから出力したGIF動画ファイルをPhotoshopで開いてください。

それから、「イメージ>画像解像度」を開きます。

 

f:id:nulluo:20190811002722p:plain

幅と高さを400%まで拡大します。(大体このぐらいがTwitterでシェアする時の適正サイズ。用途に合わせて拡大サイズは変更可ですが、100%の整数倍になるようにしてください)

また、「ニアレストネイバー法」を選ぶのを忘れないようにして下さい。(ドット絵に最適な拡大アルゴリズムです)

 

f:id:nulluo:20190811003312p:plain

画面下の各フレーム下の数値をクリックするとディレイ(何秒間そのフレームを表示するか)が選べます。0.2ぐらいが適切でしょう。

 

f:id:nulluo:20190811003702p:plain

さて、画像サイズ変更、ディレイの調整も終わったので「ファイル>Webおよびデバイス用に保存」を開いてGIF動画を出力しましょう。「保存」を押すとGIF動画として保存できます。

 

 このぐらいのサイズであればTwitterに投稿しても元画質を維持したまま再生することができます。

 

長らくおつきあいいただき、ありがとうございました。今回のシリーズ記事「RPGツクール用キャラチップの作り方」は以上となります。皆さんもどんどんキャラチップを作って動かしまくってください。その際、この記事が参考になれば幸いです。