enchant.jsを触ってみた


目次

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

enchant.jsとは?

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

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

スプライトシート

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


スプライト

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

使い方

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

var kuma = new Sprite(32, 32);

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

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

kuma.frame = 0;

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

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

parapara

熊を走らせる

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

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

});


シーン

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


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