enchant.js: Step1 – スプライトを表示してみよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ここでは, スプライトを表示します. ここが一番面倒な部分なのでここさえクリアすればあとは楽です.

SAMPLE

サンプルはこちらで見るこができます.

CODE

enchant.js におけるクラス定義の方法

var クラス名 = Class.create(継承したいクラス, {
    initialize : function() {
        // 親のコンストラクタを呼ぶ※忘れないようにね
        継承したいクラス.call(this);
        
        // TODO: 初期化時にする処理を書く
    }
});
    

Surface クラスを使って canvas に描画したものを画像として sprite に登録する

var sprite = new Sprite(32, 32);
var surface = new Surface(32, 32);
var c = surface.context;
c.fillStyle = "rgb(255, 0, 0)";
c.beginPath();
c.arc(16, 16, 16, 0, Math.PI*2, true);  // 円を描画
c.fill();
sprite.image = surface; // Surface を画像として登録
    

描画順番を調整

this._element.style.zIndex = 4;
    

コード全体

前回のStepから追加, 修正した箇所は太字になっています.

// enchant 初期化(global 領域に enchant を追加)
enchant();

/**
 * ロード
 */
window.onload = function()
{
    // ゲームクラスを生成
    var game = new Game(320, 320);
    
    game.onload = function(){
        
        // エネミーを生成
        for (var i=0; i<8; ++i) {
            var enemy = new EnemySprite();
            enemy.x = Math.random()*320;
            enemy.y = Math.random()*320;
            game.rootScene.addChild(enemy);
        }
        
    }
    
    // 背景表示
    game.rootScene.backgroundColor = 'rgb(240, 255, 255)';
    game.start();
}


/**
 * @scope   ArcSprite.prototype
 */
var ArcSprite = Class.create(Sprite, {
    /**
     * 円弧スプライトクラス
     * @memo    enchant の Sprite クラスを継承
     */
    initialize : function(radius){
        // 親のコンストラクタを呼び出す
        Sprite.call(this, radius*2, radius*2);
        
        // サーフィスを生成
        var surface = new Surface(radius*2, radius*2);
        var c = surface.context
        // サーフィスに円を描画
        c.fillStyle = "rgb(255, 0, 0)";
        c.beginPath();
        c.arc(radius, radius, radius, 0, Math.PI*2, true);
        c.fill();
        
        // スプライトにサーフィスをイメージとして登録
        this.image = surface;
    }
});

/**
 * @scope   EnemySprite.prototype
 */
var EnemySprite = Class.create(ArcSprite, {
    /**
     * エネミースプライトクラス
     */
    initialize : function(){
        // 親のコンストラクタを呼び出す
        ArcSprite.call(this, EnemySprite.RADIUS);
        
        // 移動する向きを設定(360度ランダムな方向に ENEMY_SPEED ずつ進む)
        var rad = Math.random()*360 * Math.PI/180;
        this.vx = Math.cos(rad) * EnemySprite.SPEED;
        this.vy =-Math.sin(rad) * EnemySprite.SPEED;
        
        // エフェクトと重複した際にタッチがきかなくなるので手前に表示するよう修正
        this._element.style.zIndex = 4;
    }
});
// static 
EnemySprite.RADIUS = 16;
EnemySprite.SPEED = 2;

    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT