アニメーション - 独学・低コストなゲームの作り方

キャラクター等の動かし方をざっくり

プログラミングで、キャラクター等のアニメーションを表示するには、まずはペンタブなどで普通にアニメーションを書きます。 それをプログラミング言語を使ってパラパラと一枚ずつ順番に画面に表示させるとアニメーションができます。
そして、方向キーを押したらその絵が動くとか、このキーを押すとアニメーションが始まるといったことをプログラミング言語で書いていきます。一つ一つはすごく簡単なことなので覚えればすぐにできます。

具体的な書き方は置いておいて、まずはざっくりと解説します。

アニメーションの作り方

ゲームのアニメーションに必要なイラストを無料で配布してるサイトもありますが、簡単なので自作もおすすめです。絵が下手でも動かすとそれっぽくなります。

アニメーションを書くのは非常に簡単です。殴るアニメーションなら、「構える」「腕を引く」「腕を伸ばす」「腕を引く」といった、動作の中の重要な絵をかきます。

こういった絵を適当に書いて、それぞれの間の絵を書けばいいのです。アニメーションを書くためのフリーソフトもあり、前後の絵を表示してくれるので、間の絵は機械的に書けます。

間の絵を描く前
間の絵を描いた後

パラパラと表示するには?

何枚かの一連のイラストができるはずです。たとえば、構えてからパンチして、構えに戻るといったような短いアニメーションなら、10枚くらいの絵を書けばいいでしょう。アニメソフトで、一枚ずつの画像ファイルとして保存します。
これらの絵をプログラミング言語で、例えば0.1秒ごととかでサイトに表示するとアニメーションができます。


//(1)画像を読み込む
(読み込みました)

//(2)変数 i に 0 を代入する。
var i=0;

//(3){}の中に処理Aの内容を書く 
function 処理A() {

表示していた画像を消す。
//(はじめは何も表示されていません。)


iが0の時は画像1を表示
iが1の時は画像2を表示
iが2の時は画像3を表示
・・・
と場合分けする //(if文やswitch文などを使う。簡単。)



//iを1増やす。
i=i+1;

}//処理Aここまで。
//処理A { ~  } を何度も繰り返すことになります。
//内容を書くだけで、まだ実行していません。

//(4)処理Aを100ミリ秒(=0.1秒)ごとに繰り返し実行する。
setInterval(処理A,100);

という風にすると、最初は i が0の状態で処理Aが実行されるので、画面には画像1が表示されます。処理Aの終わりに i に1が足されるので、0.1秒後に再び処理Aが実行されるときは i が1になっています。すると、まず表示されていた画像1が消えたあと、次は画像1ではなく画像2が表示される、という具合に一連の画像が順番に表示されます。

もっと良い書き方があるかもしれませんが、場合分けや繰り返しで何でもできるのがプログラミングです(たぶん!)

ところで、何枚もの画像を読み込むよりも、フリーの画像連結ソフトでそれらをつなげて一枚の画像にして、毎回その一枚の画像の一部分のみを表示するというようにした方が処理が軽くなりそうです。

画像ソフトで連結

(10枚の画像を連結させてできた1枚の大きな画像です。画像1を表示させたいときは、オレンジ色の部分だけを表示します。)

なので、場合分けで変えるのは表示する画像ではなく、一枚の大きな画像のどの部分を表示するか、にします。
画像を読み込むとか、画像のどの部分を表示するといったことをプログラミング言語で書きますが、一つ一つはすごく簡単ですぐに覚えられるので割愛します。

こんなゲームができる

これだとアニメーションが表示されるだけですが、十字キーで絵が動くとか、あるキーを押すとアニメーションがはじまり、敵に当たれば敵が消えて・・といった処理を追加していくとゲームっぽくなりました。

このゲームのプログラムは要するに、常に同じ処理を一定間隔で行っているのですが、その中で、キー入力があればこのアニメーションを表示するとか、このアニメーションが動いている間はこのキーは受け付けない、この画像の次はこの画像を表示、といった場合分けをしているだけで、結構簡単にかけてしまいます。

難しいのは?

難しいということはないですが、バグを治すときは少し面倒です。例えば、しゃがむアニメーションの途中で殴るアニメーションを入れると、殴り終わった後に、しゃがむアニメが途中から再開したりして、初めから一発でうまく動きません。一つ一つについて、例えば殴るアニメーションが入った時は、しゃがむアニメーションの状態をすべて初期化するというような対処をします。

殴る、飛ぶといった動作がたくさんあると、どこにバグがあるかわかりにくいので、雑に書いていくと後悔します。とりあえず出来たと思っても、下キーを押しながらスタートボタンを押すなど、想定外の操作でバグが見つかったりします。

といっても、簡単なゲームなら挫折することはないと思います。このゲームも結局は数日でできました。勉強して完璧にしてからというより、まずは作ってみた方がいいのかもしれません。

まとめ

要するに、プログラミングに慣れて、とりあえずアニメがかければゲームは簡単に作れます!





ゲームの作り方をとりあえずざっくり見る

具体的な方法はさておき、まずはだいたいのところを解説します。

プロフィール

猫ロモーフ
ねころもーふ
Unityでゲームを作っています。
@nekoromorph