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


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

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

createjs_test2

サンプル

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

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

First Seed Material

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

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で切り出して使ったほうが多少は処理が軽いのではないか、と思って上記のような処理にしています。(実際のメモリ使用量等を計測したわけではありません)

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

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


詳解 ActionScript 3.0アニメーション

本題と外れますが、HTMLでボンバーマンできるゲームが凄いです!

Bombermine — Massively Bomberman Online with up to 1000 players on the single map

Canvas数個重ねて描画しているように見えます。ゲームとしても面白いので楽しみつつ参考にしたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です