こんにちは、石尾です。
今回は、Herlockによるアニメーションのアプリ開発について投稿します。
※前回同様に、Herlockはクローズドベータ版を利用しています。
enterFrameイベント
Herlockによるアニメーションの実装する場合、enterFrameイベントを利用します。Flashでアニメーションを実装したことがある方は、enterFrameなんだ！と思ったかも知れません。
enterFrameイベントで登録された処理は、フレームレートで決められた回数だけ繰り返し処理されます。
フレームレートは、単位時間あたり、何個フレーム(コマ)が処理されるかを示す値です。1秒あたりのフレーム数でfps（Frames Per Second）という単位で表します。たとえば、30fpsだと、1秒あたり30個のフレームが処理されます。
パラパラ漫画をイメージしてください。30fpsだと、30ページをパラパラしたようなイメージです。fpsの数値が増えると、より滑らかなアニメーションになるだろうとイメージできると思います。
Herlockのフレームレートは、StageオブジェクトのframeRateプロパティで設定されています。デフォルトは、60fpsです。
アニメーションサンプル
プロジェクト作成時のテンプレートを「AnimationSample」に設定すると、次のコードが実装されたプロジェクトが作成されます。
var stage = new Stage( 640, 640 );
addLayer( new Layer( stage ) );
var image = new Image();
image.src = "assets/images/image.png";
image.onload = function() {
var bd = new BitmapData( image );
var bitmap = new Bitmap( bd );
stage.addChild( bitmap );
stage.addEventListener( "enterFrame", function(){
bitmap.x += 20;
bitmap.y += 5;
if( bitmap.x > 640 ) bitmap.x = -bitmap.width;
if( bitmap.y > 640 ) bitmap.y = -bitmap.height;
} );
};
stageのイベント追加関数addEventListener()で、「enterFrame」イベントを設定しています。
その中で、画像の描画位置を変更しています。
※image.onload()で処理する理由として、読み込んだ画像からBitmapオブジェクトを生成するためです。
プロジェクトのファイル構成は以下のようになります。
{プロジェクトルートフォルダ}
│ main.js
│ README.md
├─app
│
└─assets
├─images
│ image.png
│
└─sounds
アプリの実行イメージは次のようになります。水色背景「IMAGE」画像が左上か右下に移動します。
※さらに滑らかにするため、フレームレートの数値を上げようと思うかも知れませんが、携帯端末ディスプレイのフレームレートは60fpsだそうです。
Androidプログラミングの館
感想
Flashでアニメーションを実装したことがある方からすると、Herlockの仕様は使いやすいかも知れません。
※この投稿を作成している間に、Herlockのメンテナンスが日中に行われ、ビルドなどが出来なくなりました。まだ業務で利用していないので大きな問題になりませんが、このような対応も改善してもらえたらと思います。
引き続き、アプリの実装に関してレポートしていきたいと思います。
