enchant.js

design and usage

about me

• Ryo Tanaka
• Ruby, JavaScript, ActionScript

What is enchant.js?

• ゲームライブラリ
• HTML5 / JavaScript
• スマートフォンをターゲット

design

JavaScriptらしい書き方で

• Object Oriented Programming
• Event Driven

design - OOP

• 表示するグラフィック一つ一つがオブジェクト

表示オブジェクトツリーに登録、描画

var player = new Sprite(32, 48);
player.image = game.assets['player.png'];
var enemy = new Sprite(32, 32);
enemy.image = game.assets['enemy.png'];

// 描画ルートオブジェクト
var scene = game.currentScene;
scene.addChild(player);
scene.addChild(enemy);

design - Event Driven

addEventListenerを使った非同期処理

var man = new Sprite(32, 32);
// 毎フレームごとの処理
man.addEventListener('enterframe', function() {
    ...
});
// タッチされたときの処理
man.addEventListener('touchstart', function(e) {
    var x = e.localX;
    var y = e.localY;
    ...
});

design

(like ActionScript)

getting started

<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="game.js"></script>

game.js

// クラスのエクスポート
enchant();

window.onload = function() {
    var game = new Game(320, 320); // ゲームのスクリーンサイズ
    game.start();
};

getting started

game.js

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bear.gif'); // 画像をあらかじめ読み込んでおく
    game.onload = function() { // 画像読み込み終了時に呼ばれる
        var bear = new Sprite(20, 30);
        bear.image = game.assets['bear.gif'];
    };
    game.start();
};

bear.gif

getting started

game.js

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bear.gif');
    game.onload = function() {
        var bear = new Sprite(20, 30);
        bear.image = game.assets['bear.gif'];
        bear.addEventListener('enterframe', function() {
            this.x += 3; // 毎フレームごとに3ピクセル移動
        });
        game.rootScene.addChild(bear); // 表示オブジェクトツリーに追加
    };
    game.start();
};

class hierarchy

• enchant.Event
• enchant.EventTarget
  • enchant.Game
  • enchant.Node
    • enchant.Entity
      • enchant.Sprite
      • enchant.Label
      • enchant.Map
    • enchant.Group
      • enchant.Scene
• enchant.Surface
• enchant.Class

Game, Scene

• Game、ゲーム、メインループ管理、Scene管理

Node, Entity, Group

• Entity, GroupはそれぞれNodeを継承している
• Nodeは表示オブジェクトの基底クラス、これ自体は何も表示できないので使わない
• Entityは表示に用いるDOM上の実体(div)を持ったNode、だが具体的に何かグラフィックスを出す機能は持っていないので直接は使わない
• GroupはNodeを子に持つことができるNode、まとめて動かしたりするオブジェクトがあるとき使う
• SceneはGroupを継承しているので子Nodeを追加できる

Sprite, Surface

• Spriteは画像表示機能を持ったEntity
• Surfaceはcanvas要素のラッパ、Spriteに設定できる
• ActionScriptでいうBitmap, BitmapDataと対応するようなオブジェクト

game.js

var bear = new Sprite(20, 30);
bear.image = game.assets['bear.gif']; // assetsにはSurfaceが入っている

Label

• 文字表示できるEntity

game.js

var label = new Label();
label.text = 'label';

Map

• マップ表示できるEntity

game.js

var map = new Map(16. 16); // タイルサイズ
map.image = game.assets['map1.gif'];
map.loadData([
    [0, ...],
    [0, ...],
    [0, ...]
    ..
]);

map1.gif

Event, EventTarget

• DOM Event風味の独自イベント実装
• キャプチャフェーズ、パブリングフェーズ等の概念はなし

Game, NodeがEventTargetを継承しており、これらのメソッドを持つ

• addEventListener
• removeEventListener
• dispatchEvent

Event, EventTarget

イベントタイプの例1

• Event.ENTER_FRAME - 毎フレームごと (Game, Node)
• Event.LOAD - 画像のプリロードが終わったとき (Game)
• Event.TOUCH_START - タッチが始まったとき (Node)
• Event.TOUCH_MOVE - タッチが移動したとき (Node)
• Event.TOUCH_END- タッチが終わったとき (Node)

Event, EventTarget

イベントタイプの例2

• Event.LEFT_BUTTON_DOWN - 左ボタンが押されたとき (Game, Scene, Entity)

ある特定の入力を左ボタン入力として設定できる

Event, EventTarget

イベントタイプの例2

• Event.LEFT_BUTTON_DOWN - 左ボタンが押されたとき (Game, Scene, Entity)

キーの入力と左ボタンとして設定 (キーボード環境下)

game.keybind(keyCode, 'left');

Entityを左ボタンとして設定 (タッチ環境下)

entity.buttonMode = 'left';

Event, EventTarget

イベントタイプの例2

• Event.LEFT_BUTTON_DOWN - 左ボタンが押されたとき (Game, Scene, Entity)

設定された形に関わらずGame, Sceneは必ずこのイベントを受け取る

なお、デフォルトでArrow Keyはleft, right, up, downにバインド

Class

• prototype.jsのパターンを引用 (Class.create)
• classicalな継承
• ライブラリ内部でクラス定義に使用

Class

ライブラリのクラスを継承したクラスを定義したいときにも使える

var Ball = Class.create(Sprite, {
    initialize: function() {
        // スーパークラスのコンストラクタを適用
        Sprite.apply(this, arguments);
        ...
    }
});

// or..
var Ball = Class.create(Sprite);
Ball.prototype.initialize = function() {
    ...
};