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

enchant.jsとは？

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

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

スプライトシート

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

スプライト

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

使い方

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

var kuma = new Sprite(32, 32);

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

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

kuma.frame = 0;

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

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

熊を走らせる

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

// シーンに毎フレームイベントを設定
scene.addEventListener(Event.ENTER_FRAME, function() {
    // 熊のフレームを1つずつ動かす
    kuma.frame ++;
    // 熊のフレームが3以上になったら0に戻す
    if (kuma.frame > 4) {
        kuma.frame = 0;
    }

});