【Herlock】アプリ開発（アニメーション）

こんにちは、石尾です。

今回は、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 );

    // animation
    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;
    } );
    // animation
};

stageのイベント追加関数addEventListener()で、「enterFrame」イベントを設定しています。
その中で、画像の描画位置を変更しています。
※image.onload()で処理する理由として、読み込んだ画像からBitmapオブジェクトを生成するためです。

プロジェクトのファイル構成は以下のようになります。

{プロジェクトルートフォルダ}
│  main.js
│  README.md
├─app
│      
└─assets
    ├─images
    │      image.png
    │      
    └─sounds

アプリの実行イメージは次のようになります。水色背景「IMAGE」画像が左上か右下に移動します。

※さらに滑らかにするため、フレームレートの数値を上げようと思うかも知れませんが、携帯端末ディスプレイのフレームレートは60fpsだそうです。
Androidプログラミングの館

感想

Flashでアニメーションを実装したことがある方からすると、Herlockの仕様は使いやすいかも知れません。

※この投稿を作成している間に、Herlockのメンテナンスが日中に行われ、ビルドなどが出来なくなりました。まだ業務で利用していないので大きな問題になりませんが、このような対応も改善してもらえたらと思います。

引き続き、アプリの実装に関してレポートしていきたいと思います。