Cocos2d-JSを触ってみた【BGM再生・キー入力・アニメーション・衝突判定】

今回もCocos2d-JSを色々と弄ってみます。

1. BGM再生

いつも通りresディレクトリ内に音声ファイルをぶちこんで、src/resource.jsを修正します。

あとはsrc/app.jsのLayerのctorに以下のコードを追記するだけで音楽が再生されます。

ちなみに、効果音再生は

って感じで行けます。

2. キー入力受付け

以下のようにcc.eventManagerにキーボード入力に対するイベントリスナーを追加するだけ。

あとは各キーコードに応じた処理をfunction内で定義すればOK。

3. アニメーション

RPGの歩行アニメーション的な永続的なアニメーションの場合は以下のようにして処理を書きます。

画像一枚32px * 32pxで横3縦4で配置されるキャラチップ画像を想定しています。

永続的なアニメーションなので、ループする画像のパターンを定義する必要があって

それがspritesの配列部分になります。

1→2→3→2→1→2→…と続くので1→2→3→2のループを定義しています。

キー入力とうまく組み合わせて、キャラの方向を検知して

アニメーションパターンを都度runActionで変更してあげればRPGっぽいキャラ移動が出来るようになります。

4. 衝突判定

前回やったタイルマップを使えば衝突判定を簡単に実装できます。

“レイヤー＞タイル・レイヤーの追加”からレイヤーを追加します。

レイヤーの名前はcollisionとかにしてください。

collisionレイヤーの衝突判定を付けたいところに適当なタイルセットで塗っていきます。

わかりやすくするために黒とかの単色タイルセットを作って塗っていくと

後で衝突設定した場所がわかりやすいです。

塗り終わったらレイヤーの透過度を0にします。

src/app.jsで以下のようにして衝突判定を設定したセルを判定することができます。

確認したところではPointで設定する値は左下基準でしたが、もしかしたら設定で変えれるのかも。