HTML5+JavaScriptベースのゲームエンジンenchant.jsを触ってみて覚えておきたいことをまとめました。

enchant.jsとは?

ゲームやアプリを開発できるHTML5 + JavaScriptのフレームワークです。
わずか30KBのソースコードで、PC・iPhone・iPad・Android すべてで動作する、クロスプラットフォームなアプリケーションを開発することができます。

覚えておきたいキーワード

スプライトシート

複数の画像を1枚の画像にまとめ、タイル状に配置した画像のことです。
enchant.jsのフォルダの中に入っている、この画像がまさにスプライトシートです。
1


スプライト

操作する画像のことです。
スプライトシートの一部分を表示させているのもスプライトになります。

使い方

下記の記述でシートをどの範囲で区切るかを指定します。

イメージ的にはこんな感じ
2

表示したいキャラクターの位置指定は下記のようにします。

この数字は左上から横に012345…と数えて指定します。
3

これを応用してフレームをずらしていくコードを書けば
このように、熊を走らせたり、表情を変えたりすることができるようになります。

parapara

熊を走らせる

フレームイベントを追加し、そこにフレームを動かすコードを書くと熊が走るようになります

});


シーン

場面を表す単位です
enchant.jsではタイトル画面・スタート画面・プレイ画面・ゲーム終了画面といった単位で 関数を用意することが多いです。 enchant.jsゲーム作成の主な流れは、
「スプライトシートを用意する → シーンの関数を用意 → 関数の中でスプライトの操作などを書く」となります。


上記3点を抑えておけば、あとはどのようにしてゲームの内容を作っていくかになってきます。
今度ゲームを作った時はここで発表したいと思います!