LimeJS Helloworldその2

2012.01.09 Category：Javascript

今回は次のようなDEMOを作ります。

LimeJSは、ActionScriptと書き方が似ていて、とっつきやすいです。
僕はFlashDeveloperなので、ASとの書き方と比べながらHelloworld2をやっていきます。
※ソース内のコメントに僕の今理解している範囲の解説を記述しています。

0.プロジェクト作成

ターミナル(Windowsの場合コマンドプロンプト)を起動して、以下のPythonコマンドを叩きます。

python bin/lime.py create helloworld2

プロジェクトの作成については、以下の記事を参考に。
LimeJS Hello World | reinit_creative log

1.クラスのインポート

//ネームスペース→自動的に生成されるので多分必要
goog.provide('helloworld2');
 
//使用するクラスをインポートする
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.RotateTo');

ちなみに、クラスを追加、削除した場合は、updateする必要があります。
以下のPythonコードを叩きます。

python bin/lime.py update

2.HTMLへのアタッチ

以下の例だとbodyタグにアタッチさせます。

var director = new lime.Director(document.body,1024,512)

3.表示オブジェクトを作成

//AS3の多分ステージ的なものを作成(LimeJSには別途Spriteというクラスが存在する)
scene = new lime.Scene(),
//AS3でいう多分Sprite的なものを作成
var layer = new lime.Layer()
	.setPosition(512,256)
//円を作成 ※AS3でいうGraphics的なものを作成
var circle = new lime.Circle()
	.setSize(150,150)
	.setFill(255,150,0);
//AS3でいう、多分TextFieldを作成
var tf = new lime.Label()
	.setSize(160,50)
	.setFontSize(36)
	.setText('CLICK!');

4.AS3で言うところのaddChildする

layer.appendChild(circle);
circle.appendChild(tf);
scene.appendChild(layer);

5.インタラクションを追加する

AS3的な所のaddEventListenerを追加します。

goog.events.listen(circle,['click','touchstart'],function(e){
	//クリックされたときの処理を記述する
});

6.アニメーションをさせる

layerに対して、アニメーションを実行します。
lime.animation.Spawnクラスを使うと、引数のアニメーションをパラレル実行します。

layer.runAction(new lime.animation.Spawn(
    new lime.animation.FadeTo(.5).setDuration(1.2),
    new lime.animation.ScaleTo(4.5).setDuration(1.2),
    new lime.animation.RotateTo(720).setDuration(1.2)
));

lime.animation.Sequenceクラスを使うと、引数のアニメーションを順番に実行します。

layer.runAction(new lime.animation.Sequence(
    new lime.animation.FadeTo(.5).setDuration(1.2),
    new lime.animation.ScaleTo(4.5).setDuration(1.2),
    new lime.animation.RotateTo(720).setDuration(1.2)
));

7.最後に全体ソース

【helloworld2.js】(コンパイル前のJavaScript)

//ネームスペース
goog.provide('helloworld2');

//使用するクラスをインポートする
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.RotateTo');

//ここから実装内容
helloworld2.start = function(){
	//htmlへのアタッチ部分
	var director = new lime.Director(document.body,1024,512),
		//AS3のステージ的なものを作成
		scene = new lime.Scene(),
		//AS3でいうコンテナ的なものを作成
		layer = new lime.Layer()
			.setPosition(512,256),
		//円を作成
		circle = new lime.Circle()
			.setSize(150,150)
			.setFill(255,150,0),
		//AS3でいう、TextField
		tf = new lime.Label()
			.setSize(160,50)
			.setFontSize(30).setText('TOUCH ME!');

    //コンテナに円をAS3でいうaddChildをする
    layer.appendChild(circle);
	circle.appendChild(tf);
    scene.appendChild(layer);

	//マウスインタラクションを追加する
	goog.events.listen(circle,['click','clickStart'],function(e){
	    layer.runAction(new lime.animation.Spawn(
	        new lime.animation.FadeTo(.5).setDuration(1.2),
	        new lime.animation.ScaleTo(4.5).setDuration(1.2),
	        new lime.animation.RotateTo(720).setDuration(1.2)
	    ));
	});
	//シーンを有効化する
	director.replaceScene(scene);
}
//このソースが何を意味するか、今の僕にはよくわかんないよ。(とりあえず自動生成されているので、残す)
goog.exportSymbol('helloworld2.start', helloworld2.start);

8.次にしたいこと

・画像を表示したりしたい、そして、いろいろしたい
・インタラクションの種類をもっと知る
・ページ遷移の機能とかあるのか？
・リサイズした時の処理とかあるのか？
・ローディング処理
・アニメーションにイージング処理はあるのか
・一旦サイトを作ってみよう
・プロセッシング的な表現ができるか？
・パフォーマンスはどこまでいけるのか？
などなど