CreateJSを試す2 キャラクタを配置してみる

前回に引き続きCreateJSを試してみています。

今回は、前回よりゲームっぽいものをということでキャラクタを配置してキーボードで動かせるようにしてみました。

PC限定ですが、カーソルキーで移動できます。

素材はFirstSeedMaterialさんの素材を透過部分など一部加工して使用しています(二次使用禁止)。(RPGツクールをやっていた方ならお馴染み？ですかね)

素材を切り取って配置する方法は以下のようにしています。

var el = $("#stage").get(0);
_stage = new createjs.Stage(el);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", loop);
var charData = {
    images:["images/chara01_a.png"],
    frames:{width:24, height:32}
};
_charSpr = new createjs.SpriteSheet(charData);
_userChar = new createjs.Bitmap(createjs.SpriteSheetUtils.extractFrame(_charSpr,0));

loop = function(){
    var animId = getCharacterAnim(0, _userDirection, ~~(_animIndex / CHAR_ANIM_FRAME));
    _userChar.image = createjs.SpriteSheetUtils.extractFrame(_charSpr,animId);
    _stage.update();
    if((++_animIndex) == CHAR_ANIM_MAX * CHAR_ANIM_FRAME){
        _animIndex = 0;
    }
};

詳しくはソースで！

SpriteSheetをBitmapAnimationとしてgotoAndStopする、という方法も使えそうですが、bitmapで切り出して使ったほうが多少は処理が軽いのではないか、と思って上記のような処理にしています。(実際のメモリ使用量等を計測したわけではありません)

現在は１歩で１マス分移動しているのですが、マス目はあるにせよ、もう少し細かい単位で動いたほうが綺麗に見えそうな気がするのでその辺次回試したいと思います。

昔買った詳解ActionScript3.0アニメーションのグリッドで当たり判定する方法を取れば行けそうな気がしています。

詳解 ActionScript 3.0アニメーション