KAGEX拡張例(アクションの実行)

kag.beginActionを使うとtjsからアクションを実行できます。

レイヤを移動してみる

以下はlayerに画像を表示し、5000msかけてleft=300, top=300まで移動させる例です。

// レイヤを生成して"star.png"を表示
var layer = new Layer(kag, kag.primaryLayer);
layer.loadImages("star.png");
layer.setSizeToImageSize();
layer.visible = true;

// アクションを実行
kag.beginAction(layer, %[
    left : %[
        handler : "MoveAction",
        value : 300,
        time : 5000,
    ],
    top :  %[
        handler : "MoveAction",
        value : 300,
        time : 5000,
    ],
]);

beginActionの第一引数にはアクションの対象となるオブジェクトを指定します。第二引数にはアクション定義を渡します。アクション定義はenvinit.tjsで定義するものと同じです。今回の場合は対象のleft, topプロパティを500msかけて300まで動かすアクションになっています。

アクションについて

アクションをtjs的に言うと、特定のプロパティに対して自動的に値を代入していく機能です。以下の例ではプロパティpropを持つtestオブジェクトに対してアクションを実行しており、propには1000msかけて0から1000の値が代入されます。

// プロパティpropを持つクラスを定義
class Test {
	var _prop = 0;
	property prop {
		setter(value) {
			_prop = value;
			Debug.message("現在の値: " + value); // 代入された値を表示
		}
		getter() {
			return _prop;
		}
	}
}

// Testクラスのオブジェクトを生成
var testObj = new Test();

// testObjに対してアクションを実行
kag.beginAction(testObj, %[
    prop : %[
        handler : "MoveAction",
        start :  0,
        value : 1000,
        time : 1000,
    ]
]);

/* Debug.messageでは以下のように表示されます
    22:03:52 現在の値: +0.0
    22:03:52 現在の値: 1
    22:03:52 現在の値: 2
    22:03:52 現在の値: 2
    22:03:52 現在の値: 3
    22:03:52 現在の値: 4
    22:03:52 現在の値: 5
    22:03:52 現在の値: 6
      (中略)
    22:03:53 現在の値: 997
    22:03:53 現在の値: 998
    22:03:53 現在の値: 999
    22:03:53 現在の値: 999
    22:03:53 現在の値: 1000
    22:03:53 現在の値: 1000
*/

この例のように、Layerのleftやtopなどだけでなくプロパティであれば何でも対象にできます。上手く使えば色々と応用できると思います。

アクションのさらに詳しい使い方は次回に続きます。

KAGEX拡張例(アクションの実行)」への2件のフィードバック

  1. ピンバック: KAGEX拡張例(アクションの実行2) - Biscrat Blog

  2. ピンバック: KAGEX拡張例(アクションの実行2) | Biscrat Blog

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です