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);
このコードが何やってるかわからなかったんですね。この
チルダチルダ
いろいろ読んでいくつか解説しているページを見つけました。
なるほど。Math.floor使わないという方法があるのか。
いろいろありますなぁ〜。
ソースコードを読むのはとても勉強になりますね><