Posted by & filed under 未分類.

以前の投稿(http://enchantjs.com/2012/12/tips-class-inheritance/)でお話した通り、enchant.jsではクラスの生成と拡張が簡単にできます。でも、クラスを何度も継承をする(多重継承)ような複雑な場面になると大変ですよね? そこで、新しいプラグイン、mixing.enchant.jsができました。

mixing.enchant.js プラグインはenchant.jsのクラスを多重継承する際にとても役立つものです。多重継承というのは1つのクラスが2つ以上のスーパークラス(親クラス)を持っているという意味で、スーパークラスそれぞれの関数やプロパティを合わせて使いたい時に行います。例えば、下の図のように、クラスAとクラスBをスーパークラス(親クラス)に持つクラスC(子クラス)を作ると、クラスCは多重継承をしていることになります。

この投稿ではmixing.enchant.js プラグインの使い方を実例を使って説明したいと思います。mixing.enchant.js プラグインを使うことでゲームプログラミングはいままでより簡単になります。

ただ、少し注意があります。まず、初心者の方は多重継承を使わないで下さい。初心者の方はenchant.jsのクラスシステムにまず慣れることが先決です。また、多重継承を使う際は、予期せぬ動作を防ぐために継承させるスーパークラスの性質をよく知ることも大切なことです。

メソッド
mixing.enchant.js プラグインは以下の方法で定義します。
・enchant.Class.mixClasses(firstClass, secondClass, boolean, Function)
・enchant.Class.applyMixingRecipe(target, source)
・enchant.Class.mixClassesFromRecipe(firstClass, secondClass, recipe, Funcion)
さらに、モデルクラスとしてenchant.Class.MixingRecipeというのもあります。

ここではコアメソッドであるenchant.Class.mixClassに絞って説明をするので、その他のプラグインの詳細を知りたい方はenchant.jsのドキュメントを見て下さい。

さて、mixing.enchant.jsのコアはmixClassesメソッドになります。

引数
firstClass; 多重継承に使うクラス。クラスは変更されない。
secondClass; first classと共に継承するクラス。クラスは変更されない。
useOnlyOwnPropertiesForSecondClass(オプション); このフラグが真のときは、secondClassのスーパークラスの関数やプロパティーが無視される。
initializeMethod; 新しいクラスの初期化関数

戻り値
新しい生成されたenchantのクラス(コンストラクタ関数)。

このメソッドを使うと、前に説明した継承が呼び出すだけで簡単に達成できます。

var C = enchant.Class.mixClasses(A,B)

たった、これだけ!
もしuseOnlyOwnPropertiesForSecondClass引数を使うかどうかで迷っているのであれば、菱形継承問題を避けたいかどうかで判断して下さい。菱形継承問題というのは継承したいと思う2つのクラス(B、Cとする)のスーパークラスが1つだった場合、多重継承でどちらのクラスを継承すべきかというものです(詳しくはhttp://ja.wikipedia.org/wiki/菱形継承問題)。以下ではenchant.jsの2つのクラスを継承する方法に関して説明します。

使用例
enchant.js exampleフォルダー(examples/plugins/mixing/mapgroup)にもある以下の例で、mixing.enchant.jsを用いた多重継承の説明を行います。ここではenchant.Groupクラスとenchant.Mapクラスを多重継承し、マップを表示させて子要素を追加できるクラスを新たに作ります。この例はRPG enchant.js(examples/expert/rpg)の事例を参考にしました。とりあえず、この例でキーポイントとなる部分を見てみましょう。

var map = new Map(16, 16);

var stage = new Group();
stage.addChild(map);
stage.addChild(player);
stage.addChild(foregroundMap);

game.rootScene.addChild(stage);

game.rootScene.addEventListener(‘enterframe’, function(e) {

stage.x = x;
stage.y = y;
});

この例では、プレイヤーのスプライトを地図上で動かします。これは、地図とプレイヤーと前景を加えるためのグループを生成することで実現されます。プレイヤーと地図が同じレベルでグループに含まれているという点が分かりにくいかもしれません。ただ、もし地図にスプライトも含まれていたら、より自然ですよね? そこで、このようなシナリオのもとにmixing.enchant.jsを使った例を見てみましょう。

var MapGroup = enchant.Class.mixClasses(Map, Group,true);
var map = new MapGroup(16, 16);

map.addChild(player);
map.addChild(foregroundMap);

game.rootScene.addChild(map);

game.rootScene.addEventListener(‘enterframe’, function(e) {

map.x = x;
map.y = y;
});

ここでは、mixClassesを使って、新しいクラスを生成しています。

enchant.Class.mixClasses(Map, Group,true);

MapとGroupをスーパークラスに持つ新しいクラスを呼出1回で生成できました。とても簡単です。このことによって、子要素を追加するために新しくできたMapGroupクラスでGroupクラスのaddChildメソッドを使うことが可能になりました。MapGroupクラスはもとの例と同じように地図を表示させることもできます。これで、地図にスプライトを直接追加することができるようになりました。

さらに、useOnlyOwnPropertiesForSecondClassの引数がtrueになっています。これは、MapクラスとGroupクラスがスーパークラスから引き継いだ同一のエンティティ関数を保持しているために、継承に際して不具合が生じるのを防ぐためです。このように、引数にtrueを持たせることで、第2のスーパークラスGroupの関数とプロパティーを無効にすることができます。最終的な継承図は以下のようになります。

もし、mixing.enchant.jsについてさらに知りたい方はレファレンスドキュメンテーションを参考にして下さい。また、事例としてはexamples/plugins/mixingのフォルダーやtests/qunit/mixing.enchant.js/mixing.jsのフォルダーを参考にして下さい。

Comments are closed.