こんにちわ、ソニックムーブのネコ好きセイカイです。

前回「Herlockを用いたアプリ開発フローのご紹介」に引き続き弊社開発中のHerlockのご紹介になります。
今回はHerlockを用いたアプリ実装の初級編として、基本的な概念と、実装の触り部分の紹介です。

目次

  1. Herlockにおける基本的な概念
  2. 画像を表示してみる
  3. タッチイベントを扱う

Herlockにおける基本的な概念

まずは、Herlockにおける実装の基本的な概念の説明となります。以前ご紹介しましたが、Flash的な概念や、Javascript等Web開発者に、取っ付き易い感じになっています。

プログラムにおける基礎的な概念

Layer
Layerは描画コンテンツをスクリーンに投影するためのコンテナです。 主にスクリーンサイズの端末差異を吸収する役割を担います。
Stage
各レイヤーにおける表示ツリーのルート要素です。Flashでおなじみのstageから純粋に表示コンテナの概念を切出したものとして捉えて頂けば良いのではないでしょうか。
Sprite
基本となる表示オブジェクトの一つです。FlashにおけるSpriteと同じようなイメージになります。
Image
画像を扱う表示オブジェクトです。Imageは単体で扱うか、BitmapDataに変換して扱うのが基本的な使用方法となります。
Event
FlashやJsでおなじみのEventドリブンな実装を採用しています。addEventLstener,removeEventLstener等と合わせて使用します
続きを読む

画像を表示してみる

文字ばかりですと分かりにくいので、画像を表示するというコードの中で上記の概念を追ってみます。

コード

結果

下記の用に画像が表示されます。

IMG_1751

補足説明

表示位置に関して

Layer.scaleModeのデフォルトはshowAllになり、上記結果画像の様に配置される結果になります。Layer.scaleModeはFlashのStage.scaleModeど同等の概念となりますが、詳細はコチラをご覧下さい。

ImageとBitmapData

BitmapDataはFlashのBitmapDataと同等の概念を有していますが、BitmapData==OpenGLのテクスチャというようなイメージが分かり易いかもしれません。更にテクスチャは画像を元に作ると考えると、スムーズに理解出来るのではないでしょうか。

Eventに関して

上記ではaddEventListenerを使用したコードとなっていますが、下記の様にimage.onloadでリスナを設定する事も可能です。 尚、イベントリスナの取り回しに関しては、上記では省いていますが、設定したものは解放するということを意識した方が良いのはFlash等と同様です。ブラウザベースのJavascriptだと、意識する機会が少ないかもしれませんので、この辺は注意点でしょうか。

タッチイベントを扱う

上記を少し改変して、画像をタッチするとalertが出るようにしてみます。

コード

結果

IMG_1752

補足説明

タッチイベントを取得出来るのはInteractiveObjectが継承されたオブジェクトというのがポイントとなります。ということで、Bitmapを直接使うのはNGで、Spriteで包んでやる感じです。

とりあえず上記までで、一通りの要素を使用している感じですが、なんとなく扱えそうなイメージをして頂けたでしょうか。

次回以降は、ライブラリの利用やアニメーションの作成等にも触れていきたいと思います。

また、「ここどうなってんの?」等知りたい情報がありましたら、TwitterやFacebookでお問い合わせ待ってます!!Feedやblog記事にて可能な限り情報を公開していきますので、お気軽にご意見下さい。

興味を持って頂けた方は、ぜひ、 事前登録フォームからご登録いただいて、いち早く、Herlockの情報をキャッチしてください!!

API Documentも公開中ですので、興味を持たれた方は覗いてみると、なんとなく雰囲気や機能が分かるかもしれません。

あわせて読みたい記事

Sorry. No data so far.