!!!enchant.jsを用いたソース分割方法は2種類

1.htmlページ遷移を用いて擬似的に分割する(力技)

2.プラグイン作成方法を応用してクラスを分割する(正攻法)

!!1.html
画面遷移をシーン切り替えではなくページ切り替えで行うことによりソースを分割する。

!利点

・シーン切り替えするタイミングで代わりにページ切り替えをするだけなので、ソースに大きな変更を必要としない

・名前空間に頼らずとも変数名コンフリクトを防ぐことが可能

!欠点

・前の状態を残したまま画面を切り替える、変数の値を維持したまま画面遷移などの連携が難しい

・同一画面内でのソース分割ができない





!手順

１．切り替えたい画面の数だけhtmlページを用意する。それぞれのページでenchant.jsを最初に読み込み、次に任意の.jsファイルを読み込むように設定する。

２．画面（およびソース）を切り替えたいタイミングで次の記述を.jsファイルに追加する。

window.location.href = '切り替え先ページパス名';



!!２．正攻法でクラスを分割する(おすすめ)

!利点
・クラス毎に別ファイルに分割できる

!欠点
・少しだけクラス記述に手を加える必要がある

・手順を伝えるための文章力が足りないのでソース見て察して頂きたい


!手順

ここでは例として

メインの処理を記述したmain.js

分離したクラスを記述したsub.js

の２つの.jsファイルを作成し、sub.jsの中にHogeというSpriteを継承したクラスを作成する。



１. sub.jsファイルを作成し、enchant.jsの後かつ、main.jsの前に読み込まれるようにhtmlを記述する。(プラグインをロードする時と同じ要領である）。

２．sub.jsの先頭に次の行を追加

enchant(); //この後のenchant由来の機能に関する記述を簡単にするため

enchant.sub = {}; //空の変数を定義する

３. enchant.sub.Hoge = Class.create……（以下略）の書式でクラスを作成する。左辺以外は基本的に通常の書式と変わりない。

４. main.jsを普通に記述する。

５．main.js内でHoge();と書くことでsub.jsの中のenchant.sub.Hogeクラスを呼び出せる！

[ソースコード例を置いておくので参考にしてください|https://gitlab.cis.iwate-u.ac.jp/h28j032/source_separation_example]