アニメーションをさせよう!その1

アニメーションをさせよう!その1




現状だとヒットマンはただのハリボテで動いちゃくれません。
これではまったくもってつまらんクソゲーだ!
って怒られそうなのでアニメーションをさせてみます。

まずはアニメーションをさせる方法を考えます。
アニメーションはパラパラ漫画の要領でできることはよく知られています。
例を見てみましょう。

ミリアお嬢様が歩くアニメの素

我らがミリアお嬢様を歩かせるための画像です。
このように一コマ一コマ微妙に違う絵を用意してそれを適当なフレームで切り替えていきます。

ミリアお嬢様を歩かせてみた

これで歩いているように見えますね。
では、プログラムの構成を考えてみましょう。

まず、一コマを表す情報が必要です。
これは画像の表示領域になります。

次に必要なのが一コマを何フレーム表示するかという情報です。
表示フレームを長くすれば遅く見え、表示フレームを短くすれば速くアニメーションしているように見えます。

そして、アニメーションは一つではダメです。
複数持たないとヒットマンが構える、撃つ、といったことが表現できなくなります。
また、ループする、しないといった情報も必要そうです。

これらの情報をどこに持つか・・・
自分はこのようにしてみました。

Modelクラス
一コマを表す情報
アニメーションごとの画像
Animクラス
一コマの表示フレーム
ループ情報
アニメの数

画像はモデルクラスで持っているので一コマの情報を持たせてみました。
こうすることで同じコマを使うときに一コマの場所を指定するだけでよくなります。
また、画像は一枚だけでなく複数持たせることにします。

一コマの表示フレームやループ情報といったアニメーションと思われる情報はアニメクラスに持たせます。

どんな感じになるのかを図にしてみました。

アニメーション情報の持ち方

なんかますますわかりにくくなったような・・・(^^;
アニメは左から右に進んでいきます。
緑の枠が一コマの表示領域です。
これはモデルクラスが持ちます。
赤い数字が表示フレーム数でこれはアニメクラスが持ちます。
オレンジ色の矢印はアニメがどのコマを参照するかを示しています。
水色の矢印がループした時にどこに戻るかを示しています。
これをアニメ毎に持たせます。

それでは次は実際にプログラムに書いてみましょう。



<前のページ
次のページ>