ここから本文です

【『アクションゲームツクールMV』超・初心者向け講座】第6回 キャラクターをアニメーションさせる(2)

12/7(金) 18:02配信

ファミ通.com

文:戸塚伎一

 現在、Steamでアーリーアクセス版配信中の2Dアクションゲーム制作ソフト『アクションゲームツクールMV』によるゲームの作りかたの基礎を学べる短期連載。第6回目は前回に引き続き、キャラクターをアニメーションさせる方法について、心温まる(?)ストーリーとともに紹介。

ライター・戸塚伎一
イラスト・どろみず
協力・KADOKAWA


目次
第1回 『アクションゲームツクールMV』ってどんなソフト?
第2回 “完成のイメージ”をどう持つか?
第3回 プロジェクトの初期状態を用意する
第4回 ゲームフィールドを作る
第5回 キャラクターをアニメーションさせる(1)
第6回 キャラクターをアニメーションさせる(2)
第7回 プレイヤーキャラを操作できるようにする(1)(12月21日更新予定)
第8回 プレイヤーキャラを操作できるようにする(2)(2019年1月18日更新予定)
第9回 最低限の“ルール”を実装する (2019年2月1日更新予定)
第10回 落下物(エネミー)を登場させひと通り遊べるものにする(2019年2月15日更新予定)
第11回 ゲームをより楽しいものにするための調整(2019年3月1日更新予定)
第12回 “パッケージソフト”としての体裁を整える(2019年3月15日更新予定)
第13回 ゲームを公開する(2019年3月29日更新予定)


これまでのあらすじ
 時は2018年。妻子のいる40代会社員・阿久津由也は、趣味でゲームを自作することを決意する。突如現れた“ゲームの精”に『アクションゲームツクールMV』を勧められ、2028年の世界から(無理やり)召喚された息子・創とともに同ソフトでゲーム制作にとりかかる。創は、10年前の父との共同作業のひとときを夢だと思い込んでいるが……。
登場人物


阿久津 由也(あくつ よしや)
アクションゲーム制作に目覚めた、1975年生まれの会社員。


阿久津 創(あくつ つくる)
由也の一人息子。元気いっぱいな7歳。なぜか10年後の創も登場。


ゲームの精
テレビゲームを愛する人だけに見える妖精。


※記事構成の演出上、ソフト内で閲覧できるチュートリアルやヘルプには触れていません。
※本記事で紹介しているツールの操作方法や画面写真は製品版で変更される可能性があります。


ディスコミュニケ―ションを打破せよ!

前回と同じ週末深夜、由也の書斎。


さてさて、キャラクターのアニメーション作りは、ここからが本番だよ。


よし、どこからでもかかってこい!


俺、スマホ借りてていいかな。


ドット絵描くのか?
ほら、自由に使ってどうぞ!


あの、さ。
背景のドット絵を作ったときは「横8ピクセルごとに使える色は透明も含めて2色まで」って聞いたんだけど、主人公はどう見てもそういう縛りなさそうだけど。


そこはアレだ、主人公キャラとか降ってくる障害物は“スプライト”で表示しているって設定だから、16×16ピクセル単位で使えるのは基本的に、指定の1色+透明。
ちなみにスプライトの透明は、背景色だけじゃなくてBGや下位のセル番号のスプライトも透過表示する優れものだぞ。
で、主人公キャラだけは特別に“スプライトを2枚重ね表示している”って設定なんだ!


……「説明しきった」みたいな雰囲気出してるけど、いきなり出てきた“スプライト”ってなんだよとか、余計意味がわからないんだが。


いや、だから、スプライトはスプライトじゃん。
MSXにもファミコンにもあった機能だし、もともとスプライトってのは“妖精”を意味する言葉で、それがつまり……俺、何を言いたいんだ!?


当人は自分の知っている知識と語彙でわかりやすく説明しているつもりでも、それが聞く側の知識ベースや“本当に知りたいこと”を踏まえたものでなければ、より難解になったという印象しか与えない。
相手が“10年後の未来の若者”となれば、なおさら……。
“超初心者向け”とか“◎◎(動物)でもわかる”とかを謳った講座をやっている人は、そういうところにも気をつけないとね♪


同じことをしている相手には、つい「これくらい当然知ってるだろ」って前提で話しちゃうんだよな。
これ絶対、職場でもやってるわ……。
気をつけよう。


まあいいさ。
理由はさっぱりわからないけど要するに「主人公キャラのみ16×16ピクセルを2色+透明で組んでいい」ってことなんだろ?
これだけでもだいぶ絵作りの自由度が上がるな。


2028年の創がニッチな解放感を噛みしめているところで、由也は“アニメーション”ツールのメイン画面、もう一度確認しよっか。


左端の“アニメーション一覧”に表示されるアニメーションデータには、3つの“階層”があるの。
その構造を表しているのが、画面中央上に並んでいる、3つのリスト枠。
左側が上位階層で、右にいくほど、それぞれの具体的な中身の設定になっていくよ。


ひとつのアニメーションデータには、複数の“モーション”を設定できる。
各モーションには“表示方向”のバリエーションを用意でき、それらひとつひとつの中身を構成するのが“フレーム”……であると。


具体的な中身はさっぱりわかっていないだろうけど、考え方はそれでいい!
まずはそれぞれの関係性をわかりやすくする意図もこめて、アニメーションデータの名前を“animation001”から“主人公”に変更しておこうか。


アニメーションデータ名にカーソルを重ねてマウス右クリック→“名前の変更”だな。
データの名称変更って、気軽にしていいんだな。


そこはまあ、そういう風にできているツールだからね。
あーついでに、右端の領域についても説明しておこうか。
ここには、選択中のアニメーション階層の詳細設定項目が表示されるの。


いまは一番上に“アニメーションの設定”と書かれている。


これがアニメーションデータ“主人公”全般についての設定。
項目は“原点の設定”しかないけどね。


原点についての説明が書いてあるな。
“アニメーションを表示するときの基準位置”ってことだけど、ここどう設定しておけばいいんだろう?


由也が作ろうとしているのはオーソドックスなサイドビューアクションだから、とくにいじらなくても大きな問題はないんだけど……とりあえずえず“足元を原点”にしてみて。


はいよ。
お、赤い線の交差ポイントが、画像の左上端から中央の一番下に移動した!


『アクションゲームツクールMV』は、キャラクターの拡大・縮小や回転の処理を簡単に設定できるんだけど、“その時どこが中心でそうなるか”っていう基準は欲しいでしょ?
それをアニメーションデータ単位で設定できるってわけ。


ということは、この設定で拡大させると、足元からムクムクと……“スーパーなマリオ氏”的な見た目で大きくなっていくということか!


違うよ。



違うの!?


ここで設定したのはあくまでも“ゲームフィールド内の実体として存在させる際の基準”。
その時どきで実際どう見えるかは、アニメーションデータ内のバリエーションとして作成・設定する必要があるの。


“原点”が表面上の見た目に影響しないパラメータってことは、何となくわかった。
ということはつまり、キャラのグラフィックを拡大・縮小、回転表示させたかったら、それ用のパターン素材をいちいち作らなきゃいけないってことだよな。


いちいち作らなくてもいいよ。


いいのかよッ!?


『アクションゲームツクールMV』は、見た目上の“ちょっとした素材加工”も簡単にできるの。
拡大・縮小、回転表示はもちろん、色味だって変化させられるから、少ない素材でも工夫とセンス次第で多彩な表現ができるよ!


そのあたりは絵素材を表示する機会ごとに設定できるということか。
“マリオ氏に類似した色違いキャラ”だったら、すぐにも作れそうだな。


(なぜかマリオ氏にこだわるな……)


それはそうと、創もちょっとはツールの中身に興味が出てきたか?


絵関係はまあ、多少気になるけど。


気になることがあったらどんどん言ってくれ。
関係性は厄介だが、俺たちは小っちゃなゲームを作る仲間なんだ。
情報や疑問は共有していこう!



……ああ。


アニメーションを構成する“階層”に潜り込む!


で、アニメーションデータの最上階層にあるのが“モーション”というやつだけど。


モーションは、そのキャラクターの具体的なアクションのカテゴリー。
“ジャンプ”、“剣攻撃”、“銃攻撃”、“ダメージを受けた”みたいなやつね。
後で、具体的な動作命令と結びつけるから、わかりやすいなまえにしておくのがおすすめ!


その点、俺が作ろうとしているゲームの主人公の行動は左右方向への移動しかしないから、ラクだな。
グラフィック素材も2パターンあればいいし、用意するモーションはひとつで十分!


甘い!!
移動していないとき──“待機”だって専用のアニメーションが必要なアクションだし、“障害物に当たった”ときのリアクションだって、移動中といっしょってわけにはいかないでしょ?


そ、それは……。


なーんて、ちょっと困らせてみたりして。
アニメーション用のグラフィック素材はモーション単位であとから追加できるし、何なら、いまある素材の表示法をちょっと変えるだけでそこそこ賄えるから、ナーバスにならなくてもいいよ。
でも、どんなアクションをモーションとして追加すればいいかは、ある程度考えておいたほうがいいのは確かだよ☆


そうだな。
さしあたり最初からあったモーション“モーション001”を“移動”に改名しておこう。


そしたら右端に表示されている、モーションの詳細設定、見て。


“表示するフレーム数”は、後で説明する“フレーム”って階層の中に、新規で項目を追加した時にデフォルトで設定される表示時間のこと。
ちなみに1フレームは1/60秒ね。


“フレーム”項目内で表示させるフレーム数……単語が被っていてピンとこないな。


ツール固有の名称はある程度の慣れが必要だから、仕方ないね。
この数値はあとで個別で自由に変更できるから、とりあえずこのままでオーケー。



“ループ回数”の設定は、そのモーションが“一瞬の動作”なのか、“継続される状態”なのかってところによるだろうな。


ふむ。
その考えかたにしたがえば“移動”のモーションは後者だから、回数設定横の“無限ループ”のボックスにチェックを入れておいたほうがよさそうだ。


うんうん、いい感じ!
モーションに関してはこのくらいにして、つぎはその隣の“表示方向”の中にある“表示方向001”をクリックして。


詳細設定の領域に表示される内容がガラリと変わったな。


領域内のテキストで丁寧に説明されているからサラッと流すけど、ここでは“どの素材を“フレーム”項に配置できるようにするかを、移動方向のバリエーションとともに設定”するの。
よりザックリ言うと「こっち方向に移動中のとき、このモーションではこの絵をアニメーション表示させるよ」って、いちいち個別に指定するの、ここで。


なんか、面倒くさそう。


作ろうとしているゲームのタイプにもよるけど、由也のゲームの場合はチョー簡単だよ。
移動方向が左右のみで、元のグラフィックがどシンプルだから、素材データは1種類だけで問題なし!



簡単なのはありがたいけど……この絵だってまるでこだわりがないわけじゃないんだがなぁ。


まずは右方向用から作っていこうか。
とりあえず、元からある“表示方向001”の名前を“右”に変更して、“表示方向の設定”項の8つの矢印の中から“→”をクリック。
チェックしたら緑にハイライト表示されるはず!


なったなった。


下側の“フレームに設定する素材を選択”は……このアニメーションデータには“man.png”しか登録していないから選択の余地なしだね。


アニメーション用の素材は、あとで追加できるんだよな?


うん。
ここでは複数の素材データをまとめて選択することはできないから、追加登録する時も“一連のアクションの流れがひとつの素材データごとに完結した状態”でね。


わかった。


“フレーム”項はパラパラ漫画の要領で!?


ついにアニメーションデータの最下層……“フレーム”までたどり着いたぞ……。



最終決戦っぽい!
でも『アクションゲームツクールMV』の全体からしたら、ごくごく何でもない通過点だけど!


いやぁー、セルフで盛り上げるのもゲームを楽しく作る秘訣かなって。


(ほんと、いい気なもんだな……)


それはそれとして。
“フレーム”は、“どのグラフィックを/どのタイミングで/どのくらいの時間/(必要とあれば)どんなエフェクトとともに”表示するかを1フレーム──1/60秒単位で指定する項目なの。



難しそうに言ってはいるが、要するに“パラパラ漫画”用の紙束みたいなものだよな。
知ってるか、未来人の創?
パラパラ漫画。


いや、2028年はパラパラ漫画が絶滅するほど未来じゃないって……。


創のコンセンサスも取れたってことで、パラパラ漫画の例えで説明していくよ!
初期状態では“とりあえずの絵”が紙束の1枚目……先頭の1フレーム目に書かれているってだけ。


アニメーションじゃなくて、静止画だな。


じゃ、手っ取り早くアニメーションにしよっか。
上部の“+”ボタンを押すなり、リストの空欄でマウス右クリック→“新規追加”を選択するなり、元からある項目をコピー&ペーストするなり、好きな方法でいいから、フレームの新しい項目を作ってみて。


作ったけど……同じ絵が増えただけじゃ、あまり意味がないな。


そこで詳細設定の出番ってわけ。
一番下の“フレームに表示する画像を選択”にご注目!


素材登録済みの画像データ“man.png”がフルで表示されていて、左の……厳密に言うと“画像データ左上端”のアニメーション用グラフィックが、赤い線で囲まれているよね。
これが、そのフレーム項目で表示するアニメーション用グラフィックってこと。
他のアニメーション用グラフィックをクリックすれば、一瞬で変えられるよ。


“他”といってももう1パターンしか用意していないわけだが……(カチッ)。


おー、変わった!
クリックした瞬間、すでにアニメーションっぽかったぞ!


これでひとまず、“総枚数2枚のパラパラ漫画・無限ループバージョン”の完成。
いまの状態でどんな風に見えるか、ツール画面中央の“プレビューエリア”で確認してみようか。


思ったより簡単にできたな。
えーと、エリア左下の、いかにも“アニメーション再生します!”って感じのボタン(?)を押せばいいんだよな。


うん!
その前に、画像の表示サイズを見やすい倍率にしたり、今回はまだ設定しない“フレームごとの各種判定”の表示をオフにしたりして、見やすくしておくといいよ。


はいはいっと。
さて、どんなものか……(カチッ)。


……。


腐ってやがる。
早すぎたんだ。


いや、腐ってはないだろ!
絵が切り替わる速度が、ちょーっとばかし早すぎるだけなんだ!!


そう。
アニメーションがちゃんと動いているように見えるかどうかは、パターンひとつひとつの表示時間次第ってわけ。
その調整はフレーム項目の詳細設定の一番上“表示するフレーム数”でできるよ。


1フレームがパラパラ漫画の紙1枚と考えると、“まったく同じ絵を何枚連続で表示させるか?”っていう便利設定とも考えられるな。


数値を変えると、実際の表示時間(秒)も表示されるから、それを目安にしながらしばらくトライ&エラーしてみて♪


じゃあ表示フレーム数を“6”……0.1秒に設定してプレビュー!
さっきとあまり変わってないような……ああ、もうひとつのフレーム項目の表示フレーム数も変えないとダメなのか!


じゃあ両方とも“6”に設定して、プレビュー。
だいぶましになったけど、まだバタバタしている印象だな。
じゃあそれぞれ“18”に設定して……遅すぎるッ!!
今度は、今度は……。


(10分後……)


足を閉じているほうのパターンを“12”、広げているほうのパターンを“15”でファイナル・アンサーです。


了解!
アニメーションのテンポって「これ!」っていう正解がないから、どこまで自身の気持ちよさ・納得感を突き詰められるかにかかっているんだよね~。


少ないパターン数でキャラクターの性格まで表現しきっていた名作レトロゲームたちがいかにすごいか、改めてわかったよ。
いい経験をさせてもらってありがとう!


ひと仕事終えた気でいるみたいだけど、表示方向“左”のぶんが残ってるんだからね。
やりかた覚えてる?
いちいちもう説明しないからね。


エッ……。


なーんて、ね。
コピー&ペーストでチョー簡単にできるから安心して☆


……俺のココロ、ストレスに強くないから、冗談でもそういうの、ヤメテ。


(……。)


寿命縮めちゃったかな、ゴメンゴメン。
じゃ、いま完成した表示方向“右”をマウス右クリック→“コピー”→リスト内でマウス右クリック“貼りつけ”でコピーしちゃって。
定番のショートカットキー“ctrl+C→ctrl+V”でもコピペできるよ。"


名前を“右(1)”から"左”に変えて……詳細設定で“表示方向の設定”の矢印を“←”にチェックし直しておく……までは、何となくわかったぞ。


上出来、上出来!
グラフィックがシンメトリーだったらこれで終わりだけど、元の絵が若干右向きを意識したデザインだから、それなりに処理しておこうか。
ここでふたたび“フレーム”の詳細設定を確認して。


とりあえずどっちのでもいいんだよな。
確認しているぞ。


エリア真ん中の“表示関連”に、いい感じの設定項目があるはず。


……。


“左右反転”のチェックボックス、だな!


その通り!
“表示関連”では、ちょっとズラしたり拡大・縮小表示させたり色相をいじったりといった“ちょっとしたエフェクト”をかけられるの。
“左右反転表示”もそのひとつってわけ。
もうひとつのフレーム項目の方も、ちゃんとチェックしておいてね。


一括で反転できる操作でもあればもっと便利なんだろうけど、わざわざ左向き用の画像素材を作り直すよりははるかに楽だから、いいか。


よし、これでモーション“移動”のアニメーションは完成だ!!


主人公キャラのグラフィックの“原点”


達成感に浸っているところ悪いんだけど……俺も主人公の移動アニメ、作った。


なに!?
スマホのドット絵作成アプリででか!?


たしか『アクションゲームツクールMV』はアニメーションGIFファイルをそのまま突っ込めるって言ってたし、アプリがアニメーションGIF出力に対応していたから。


すごいな、お前。
この短時間でアニメーションGIFを独学でモノにしたか!



せっかくだからツールに入れて見てみよっか。
まずはアニメーションデータ“主人公”をマウスで右クリック→“アニメーションの設定”から、“素材の登録”ウィンドウを表示。
“登録素材の選択”項は“アニメ専用”をチェック。
そしたら“新規”ボタンを押して作ったGIFファイルを指定すれば、ダイレクト登録完了だよ!


どれどれ……“モーション”項の詳細設定“登録されている素材”の一覧に、“アニメ専用”素材としてちゃんと表示されているな。


“アニメ専用”素材を使ったモーションの作成は、“フレーム”項の詳細設定で“表示するフレーム数”の変更ができない点以外は、これまでやってきた方法と同じ。
さっきまで由也が作っていたデータに上書きするのはもったいないから、“表示方向”項に新規で項目を用意するといいよ!


(数分後……)


できたぞ。
プレビューしてみよう。


荒々しさの中に「一気に駆け抜けてやる!」という意志を感じる……いいアニメーションじゃないか!
ゲーム内容にも合っているし、こっちを使わせてもらうよ!


ふうん……好きにどうぞ。
俺は、これができた時点で、一応のキリはついたから。


「キリがついた」?


……アンタが作った、主人公キャラ。
見れば見るほど「もっとやりようがあったんじゃないか?」って思えたんだ、なぜか。


そうか?
俺にとっては最高傑作のひとつだぞ。
(ガサゴソ……)おお、あったあった。


これは……。


主人公キャラの“原画”さ。
いまの創が少し前に描いてくれた、俺の似顔絵なんだ。
すごく恥ずかしそうに渡してくれたんだぜ。


(……思い出した。)
(俺は昔、たしかにこんな絵を描いた。)
(親父が元気なさそうだったから、いきなりプレゼントしたら喜ぶかなと思って……)


何でもない時にいきなりだったから、感激しちゃってさ。
無理やり16×16ピクセルのゲームキャラで再現しちゃったよ。


(絵を受け取った親父の反応は……たしか……)


創、お前も10年前に書いたんだろ?
やっぱり喜んでいただろ、俺。


……覚えてない。
10年前なんて大昔だし。


そうか。
でも、嬉しいよ。
こうして10年後の創にも絵を描いてもらえたんだから。


……。


ありがとうな、創。


ああ。


描いてやるさ。
何度でも。


次回に続く

最終更新:12/11(火) 16:05
ファミ通.com

あなたにおすすめの記事

Yahoo!ニュースからのお知らせ