Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

Atlas.jsの機能〜シーン登録〜


こんにちは。moltomheadです。今回はシーンの登録についてやっていきたいと思います。
Atlas.jsにはSceneクラスというクラスがあり、それを使ってシーン(画面)の登録をすることができます。それでは順番にやっていきましょう。

ロード画面

Sceneクラスを使うこと新しく画面の作成をすることができます。下のコードではそれを使ってロード画面を設定しています。ロード画面を設定する場合はloadingSceneメソッドを使います。

/*ローディングシーンの設定*/
var scene = new Scene();//ロード用のシーンの作成
var text = new Text("ローディングシーンだよ","white",30);//ロード画面に表示する文字
text.setPosition(50,50);
scene.addChild(text);//ロードする画面にtextを追加する。
game.loadingScene(scene);//sceneをロード画面に設定

Atlas.jsは処理がとても軽いので、ロード画面を設定してもそれを確認することはできないと思います。なのであまり重宝されないかもしれませんが、容量の大きい画像などを利用する場合はロード画面を設定しておいたほうが良いでしょう。

シーンの切り替え

ロード画面でなくてもシーンを切り替えたい場合ってありますよね?例えばスタート画面とゲーム中の画面を分けたい場合などです。そんな時もSceneクラスを使うことができます。Atlas.jsではpushSceneメソッドを使ってシーンの切り替えをすることができます。

/*シーンの切り替え*/
var scene = new Scene();//新しいシーンの作成
scene.setColor("blue");//新しいシーンの色の設定
var text = new Text("シーンが変更されました","white",30);//シーンに追加する文字
text.setPosition(100,100);
scene.addChild(text);//シーンにtextを追加する
game.pushScene(scene);//sceneに画面を切り替える。

pushSceneメソッド以外ではロード画面の設定とほぼ変わりません。上のコードでは画面の作成、色の作成、画面に表示するもの(textなど)の設定、追加、そして最後に画面の切り替えを行っています。
シーンの切り替えですが、オブジェクトgameで行っているコードと似ていることが分かりますか?(game.setColorやgame.addChildなど)そうです。gameもまた、シーンの一つなんです。Atlas.jsではgameを開始時の画面に設定しているだけであり、gameもシーンの一つであることを覚えておくと、より理解が深まるでしょう。

上のコードを踏まえたサンプルを用意しました。
シーン登録のサンプル
サンプルではロード画面の設定と画面の切り替えを行っています。画面の切り替えはEnterキーを押した場合実行するようにできています。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本