LimeJS Helloworldその3

2012.01.16 Category：Javascript

LimeJSで画像を読み込んむサンプルを作ってみます。

先日投稿した記事LimeJS Helloworldその2に引き続きLimeJSのHelloworld3です。次のような画像を読み込ませてアニメーションさせるDEMOを作ります。
※スマートフォンでも動きます。

実装方法はActionScript3で言えば、GraphicsクラスのbeginBitmapFillメソッドと似ています。

※以下、コメント部分に説明を記述しています。

//Imageクラスをインポートします
goog.require('lime.fill.Image');
 
var imgURL = "hoge.jpg";
//画像のURLをImageクラスのコンストラクタに渡すだけ
var imgfill = new lime.fill.Image(imgURL);
 
//今回はSpriteインスタンスに画像を表示させます。
var sp = new lime.Sprite();
//ActionScript3のbeginBitmapFillメソッド的な所
sp.setFill(imgfill);

全体のソースはこちら

goog.provide('helloworld3');

goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.fill.Image');
goog.require('lime.Sprite');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.Easing');

helloworld3.start = function() {

	var director = new lime.Director(document.body, 1024, 768);
	var scene = new lime.Scene();

	//画像読み込み
	var imgfill = new lime.fill.Image('http://www.google.co.jp/logos/2012/steno12-hp.jpg');

	var animation = function()
	{
		//レイヤーを作成
		var layer = new lime.Layer().setPosition(512, 384);

		//Spriteを作成
		var sp = new lime.Sprite().setSize(280, 53).setFill(imgfill);

		//AS3で言うaddChild
		scene.appendChild(layer);
		layer.appendChild(sp);

		//各アニメーションを作成
		var setScale = new lime.animation.ScaleTo(Math.random()+0.3).addTarget(sp).setDuration(0);
		var alpha0 = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0);
		var setAlpha = new lime.animation.FadeTo(Math.random()+0.3).addTarget(sp).setDuration(0.3);
		var alpha1 = new lime.animation.FadeTo(1).addTarget(sp).setDuration(0.6);
		var afterAnim = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0.6);

		var xx = Math.random()*1024;
		var yy = Math.random()*384 + 384;

		//レイヤーの座標を設定する
		layer.setPosition(xx,yy);

		//座標計算
		var dX = 100;
		var tarX = xx + Math.random()*dX - dX*0.5;
		var tarY = -100;

		//移動するアニメーションを作成
		var moveAnim = new lime.animation.MoveTo(tarX,tarY).addTarget(sp).setDuration(1.2).setEasing(lime.animation.Easing.EASEIN);

		//シーケンス実行するアニメーションのインスタンスを作成
		var alphaAnimAnim = new lime.animation.Sequence(
			alpha0,
			setAlpha
      	);

      	//アニメーションをパラレル実行させる
      	layer.runAction(new lime.animation.Spawn(
	       alphaAnimAnim,
	       setScale,
	       moveAnim
      	));

      	//アニメーションが終了したら生成したインスタンスを削除（コレしないとめちゃ動作が重くなる)
      	setTimeout(function(){
			layer.removeAllChildren();
			scene.removeChild(layer);
		},1200);
	}
	//アニメーション開始
	var id = setInterval(animation,100);

	//シーンの更新
	director.replaceScene(scene);
}
goog.exportSymbol('helloworld3.start', helloworld3.start);

実際に動かす場合は、ビルド作業が必要です。以下の記事内の「5.ビルドする」が参考になると思います。
[訂正]LimeJS Hello World

イマイチ分からない部分