【Herlock】アプリ開発（ボタン）

こんにちは、石尾です。

今回は、Herlockによるアプリ開発で、ボタンの実装について投稿します。

※前回同様に、Herlockはクローズドベータ版を利用しています。

ボタンサンプル

新規プロジェクトの作成で、テンプレートに[default]を選択し、main.jsに以下のコードを実装します。
※コードは、HerlockのWebIDEヘルプのチュートリアルを参考にしています。

var stage = new Stage( 640, 640 );
addLayer( new Layer( stage ) );

// ボタン画像の作成
var image = new Image();
image.src = "assets/images/btn_image.png";
image.onload = function() {
    // ビットマップの作成
    var bmd = new BitmapData( image );
    var bitmap = new Bitmap( bmd );

    // ボタンの作成
    var button = new Sprite();
    button.addChild( bitmap );
    stage.addChild( button );

    // ボタンイベントの設定
    button.addEventListener( "touchTap", function( event ) {
        console.log("tap button.");
    }, false );
}

Herlockでは、Androidアプリ開発のようなButtonのAPIはありません。
ボタンを作成する場合、Spriteオブジェクトにボタン画像を設定し、ボタンとして利用します。そのボタンのイベントにタッチイベントを生成し、ボタンのように処理します。

今回、ボタン画像は、assets/imagesに、btn_image.pngファイルを配置しています。assets/imagesフォルダを選択し、メニュー[ファイル][アップロード]をクリックします。アップロードポップアップが開きます。

そこで、btn_image.pngをドロップすれば、アップロードが出来ます。

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

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

アプリの実行イメージは次のようになります（左図）。デバッグ画面（右図）で、ボタンをタップすると、ログに"tap button"が出力されます。消しゴムのようなアイコンをタップすると、ログがクリアできます。
     

タッチイベント

上記では、touchTapをイベントとして利用しました。ほかにも、Herlockでは、タッチイベントをサポートしています。

touchTap(InteractiveObjectTouchEvent.TOUCH_TAP)	targetをタップ(タッチ開始から終了)
touchBegin(InteractiveObjectTouchEvent.TOUCH_BEGIN)	タッチ開始
touchEnd(InteractiveObjectTouchEvent.TOUCH_END)	タッチ終了
touchMove(InteractiveObjectTouchEvent.TOUCH_MOVE)	タッチ開始後移動時
touchRollOut(InteractiveObjectTouchEvent.TOUCH_ROLL_OUT)	target(子要素を含む)の中から外へ出た時
touchRollOver(InteractiveObjectTouchEvent.TOUCH_ROLL_OVER)	target(子要素を含む)の外から中へ入った時
touchOut(InteractiveObjectTouchEvent.TOUCH_OUT)	targetの中から外へ出た時
touchOver(InteractiveObjectTouchEvent.TOUCH_OVER)	targetの外から中へ入った時

※()内は、定数。touchRollOutとtouchOutとの違いは、Herlockのドキュメントでわかりやすい説明はありませんでした。子要素を含むかどうかの違いだけでしょうか？？

感想

ボタン用の画像ファイルなど、毎回アップロードしたりするのは、面倒ですね。
ボタンのような利用が多い部品は、デフォルトでサポートしてもらった方が使いやすくなると思います。
また、画像ファイルのサンプルも充実していると、UI部品を作成する手間も少なくなると思いました。

Herlockによるアプリ開発の基本的なところが段々と理解できてきました。引き続き、Herlockのサンプルアプリを参考にレポートして行こうと思います。