avater.enchat.jsでいろいろ遊んでみた

avater.enchant.jsがいい感じ

avater.enchant.jsがかなりイケてます。
簡単にキャラクタが表示できるというのは、絵心のないプログラマにはまさに福音！
これで「絵がかけないからゲームつくれない」なんてちょっと意味のわからない言い訳が聞けなくなりますね！

さて、このavater.enchant.js、好きなキャラメイクができるのもさることながら、デフォルトで何種類かの動きを備えています。

• stop
• run
• attack
• special
• damage
• dead
• demo

それぞれ、使いたいタイミングで player.action = "damage" とか指定してあげると

こんな風にダメージうけてくれるわけです。キャワイイ！

じゃぁ、なんか作りたいよね？

さて、こんな横向きで、走ったり攻撃したりするキャラクタがいるんだから、横スクロールシューティングゲームを作りたくなるのがゲーム屋の心情というやつですよね！

というわけで、とりあえず女の子が剣を降ると、弾がでるってのを作りましょうか。

クリックしたタイミングで、弾を出すようにしてみましょう。

あ、あれー？　コレじゃない感……。

こう、刀を抜いた時にズバーっと弾がでてほしいじゃないですか。

なのに、あれ？

コード読んでみる

avater.enchant.jsのコードを見てみると、attackの時のアニメーションのコマは

"attack": [ 0,2,9,10,11,5,0,0,0,-1], 

てな具合の定義がしてあります。
この配列の順序で画像を切り替えてアニメーションされるのですが、配列の先頭の0というのは、stopの時と同じ画像なんですね。

これ、配列4番目とか5番目とかその辺りで弾がでてくれたらカッコイイきがします。
なので、そのように書いてしまいましょう。JavaScriptの自由自在っぷりが発揮されます。

まず、そのキャラクタが今何のアクションをしているかはplayer.actionで取得できます。
よって、以下のようなコードで、攻撃アクション中かどうかをしることができます。

var player = new Avater("2:2:1:2076:21310:2206");

if(player.action === "attack") {
  // 攻撃中の処理をここに書く
}

これで取得できます！
さて、つぎは攻撃中のアニメーションの4コマ目あたりで弾を出したいなぁ……と思います。
また、avater.enchant.jsのコードを読むと、actionの指定がある場合、毎フレームごとにanimFrameという値を1増加させて、animPatternという配列に従って画像の表示を変えているようです。
つまり、animFrameの値 = action開始時からのフレーム数ということがわかります。
というわけで、以下のようなコードを書きました。

if(player.action === "attack"){
  if(player.animFrame === 4){
     game.rootScene.addChild(new Bullet());
  }  
}

これで、attack動作中で、4コマ目のときにBullet(弾)を表示するというコードが完成しました！
じゃぁ、動かしてみましょう！

ああ、いいですね！　ばっちりです。最高です！　捏造したかのような思い通りのスクリーンショットも取れました！

まとめ

avater.enchant.js のコードを読めば、大抵のことができる。

コード読んでてハマったとこ

var w = ~~(image.width/4);

このコードが何やってるかわからなかったんですね。このチルダチルダ
いろいろ読んでいくつか解説しているページを見つけました。

• ビット演算で小数点切り捨て - nullpo.printStackTrace();
• Math.floor を使わずに小数を整数にする - IT戦記

なるほど。Math.floor使わないという方法があるのか。

いろいろありますなぁ〜。

ソースコードを読むのはとても勉強になりますね＞＜