フロントエンド開発Blog

オレには鈍器がある

JavaScript , class , enchant.js , frame

オレには鈍器がある 作成途中のコードです。
前回からの違いは以下の通りです。

実装機能:
・Playerクラスに処理を分離しました
・wasdキー入力に対応しました
・移動時のframeアニメーションを追加しました

http://jsdo.it/oredon/ylt8

前回はひたすらmain.jsにつらつらと処理を書いていましたが、折角クラスという概念をenchant.jsが提供してくれているのでそれにのっとって作ってみます。

enchant.jsのSpriteクラスをベースにPlayerクラスを用意します

initializeというメンバ関数はどうやらコンストラクタとして、newでインスタンス生成された時点で呼び出される関数のようです。ひとまずこのinitializeの中で親クラスの関数を呼び出すために「親クラス.call()」しておきます。その後、インスタンス生成時にやっておきたい処理をひとまとめにしたreset()関数を呼び出しています。

reset()の中ではプレイヤーが保持するメンバ変数の初期設定等々を行っています

あとはPlayerクラスで処理させたい関数をぶら下げていくだけです。現状、以下のような関数を作っています。

開発途中のコードのため、使用していない関数も混ざってしまっていて正直皆様には申し訳ない気持ちで一杯ですが、以下の関数が今回の動作に使用されています。

  • changeAccel : Playerのagiステータスに応じて移動速度を変更する(this.accelが移動速度計算時のベース値となる)
  • controllInput : アナログパッドやキーボードによる入力に応じてPlayerの移動方向および可変速度を計算する
  • rotateImage : 移動方向に応じてPlayer画像をframeアニメーションさせる
  • calcMoveSpeed : このゲームには搭載していませんが、摩擦によって段階的減速を実施する場合の記述(ここではcontrollInputの値がそのまま速度として使われる)
  • moveByCollisionDetection : 前回でご紹介した衝突判定

このように5つほどの処理が移動時に実行されています。この中でmoveByCollisionDetectionは前回ご紹介した衝突判定になります。

全部見ていくとシンドイのでrotateImageをかいつまんでみていきたいと思います。

rotateImageはフレームアニメーションを実行するための関数です。いわばパラパラ漫画ですね。一枚の画像に複数のコマ分の画像をいっしょくたに配置している画像ファイルを使用します。テクスチャアトラスとか、スプライト画像とか言われることがあります。

画像の作りによってここの処理は可変しますが、私が使った画像は以下の通りでした


向き 停止 歩行1 歩行2 攻撃1 攻撃2 攻撃3
↓   0    1     2     3     4     5
←   6    7     8     9     10    11
→   12   13    14    15    16    17
↑   18   19    20    21    22    23

つまり、下方向の歩行は [0,1,2] 左方向は[6,7,8] 右方向は[12,13,14] 上方向は[18,19,20] というインデックス番号が順繰りに生成できればオッケー、ということが分かります。

ということは停止のコマインデックス(0,6,12,18)にcore.frameのような時間経過で継続的にインクリメントされる値を%3で導き出せばいいということに気付くかと思います。ということでベースとなる記述は

n + core.frame % 3

こうなります。あと、アナログパッドからの入力で低速度の場合はフレームアニメーションを低速にすることも視野に入れると

n + (core.frame % 9) /3

のように処理を分岐させる必要があります。あとはこれを加速度に合わせて上下左右分岐させればOKです。

こうしたフレームアニメーションを加えるとグッとゲーム開発っぽくなってきますね。

ページトップへ

関連ページ

ページトップへ