enchant.js + jQuery でエフェクトをつける

2011年8月25日 Hiroki Akiyama プログラミング, 2

javascriptのゲーム用ライブラリenchant.jsがステキすぎてハマりそうな感じではあるのだけれど、フェードイン/フェードアウトとか移動とかそういったエフェクトが見当たらず、フレームごとの処理が必要になりそうなのが面倒だった。

jQueryのEffectsが使えたらフェードインしたりスライドさせたり何かと楽でいいんじゃないかと思ったので、連携方法を模索。コード見ていたらdiv要素を持っているクラスは_elementという変数で保持しているようなので、その変数を返す関数をprototypeで拡張してみた。

以下のコードをenchant.prototype.jsとかテキトーに名前をつけてenchant.jsの後に読み込んでおく。

/*
 enchantの中でHTML要素として画面に表示される要素に対して、
 elementプロパティでelementを取り出せるようにする。
*/
enchant.Entity.prototype.element = function () {
	return this._element;
}
enchant.Scene.prototype.element = function () {
	return this._element;
};
enchant.Surface.prototype.element = function () {
	return this._element;
};

これでenchant.jsによってdocument.createElement(“div”)された結果を取り出せるので、あとは以下のような感じでフェードアウトしたりできる。

var scene = new Scene();
var test = new Label(160,120);
test.text = "こんにちは、さようなら。";
scene.addChild(test);
$(test.element()).fadeOut(2000);

↑は、enchant.jsの要素として表示した「こんにちは、さようなら。」というLabelを表示した直後に2秒かけてフェードアウトする例。

一度elementを取り出せれば、あとはjQueryだろうとprototype.jsだろうと好きなライブラリでいじくり倒せる。enchant.js楽しい！！

追記
よく考えたら_elementはプライベートメンバではないので、２個目の例だとtest._elementで取得できるのだった

enchant.js, javascript

enchant.js リンク集 CSS3 Animations を適用するとiOSでぼやける