enchant.js / Ubiquitous Entertainment Inc.

　「導入篇」としてシーン切り替えを解説しても良かったが、使い道／使い方がいまいちイメージできない書籍や解説サイトが多かったので、具体的なイメージを持ってもらいたくて、「戦闘シーンへの切り替え」として、解説してみることにした。

　ドラクエやFFをやっていて、フィールドマップを歩いていて、エンカウントして、戦闘に突入する、という場面（シーン）を思い浮かべてほしい。「フィールドというシーン」から「戦闘というシーン」に切り替わり、戦闘が終われば、再び「フィールドというシーン」に”戻る”。

　これを、enchant.jsに存在する「Scene（シーン）」という概念で実現する。

　「Scene：フィールド」　⇔　「Scene：戦闘」

■Scene（シーン）の扱い方

　”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる”の記事で用いたソースに、今回目的の「シーン切り替え」処理を追加していく。

　エンカウント発生の仕方は取り敢えず置いておいて、とにかく今はScene（シーン）の切り替え、扱い方を覚えたいと思う。バーチャルボタンの「Y」を押下したら戦闘シーンへ切り替わるようにまずはしてみよう。

　　　　○X
　　○Y　　○A
　　　　○B

　コードは以下だ。まず見てほしい。

[html firstline=”1″ highlight=”6″ title=”main.js”]
enchant();

var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.

var IMG_BG_SCENE_BATTLE = ‘./img/bgbattle.png’; // 戦闘シーン背景画像.

// バーチャルボタンを作成するクラス.
var Button = enchant.Class.create( enchant.Sprite, {
[/html]
[html firstline=”32″ highlight=”36″]
// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
game.fps = 24;

// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
game.preload( ‘./img/xxx.png’, ‘./img/button.png’, IMG_BG_SCENE_BATTLE );

// メイン処理を実行.
game.onload = function() {
[/html]
[html firstline=”67″ highlight=”68,96,97,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136″]
// キャラをキー入力で動かす.
game.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
chara.x += 1;
}
// 左キー押下中.
if ( game.input.left ) {
// X方向に-1px移動.
chara.x -= 1;
}
// 上キー押下中.
if ( game.input.up ) {
// Y方向に-1px移動.
chara.y -= 1;
}
// 下キー押下中.
if ( game.input.down ) {
// Y方向に1px移動.
chara.y += 1;
}
// Aボタン押下中.
if ( game.input.a ) {
// X方向に1px移動.
chara.x += 1;
}
// Yボタン押下中.
if ( game.input.y ) {
// 現在表示しているシーンの上に新しいシーンを重ねて表示する.
game.pushScene( createScene() );
}
// Xボタン押下中.
if ( game.input.x ) {
// Y方向に-1px移動.
chara.y -= 1;
}
// Bボタン押下中.
if ( game.input.b ) {
// Y方向に1px移動.
chara.y += 1;
}
}
}

// ゲームをスタート.
game.start();
}

/**
* 新しいシーンを作成する関数.
*/
function createScene() {
var scene = new Scene(); // シーンを作成.
var bg = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT ); // 背景画像を配置、幅と高さを設定.
bg.image = game.assets[ IMG_BG_SCENE_BATTLE ]; // 予め読込した背景画像を設定.
scene.addChild( bg ); // シーンに背景画像を追加.

// フレーム毎の処理.
scene.addEventListener( Event.ENTER_FRAME, function( e ) {
// Yボタン押下中.
if ( game.input.y ) {
// 現在表示しているシーンを外して直前のシーンを表示する.
game.popScene();
}
});

// 作成したシーンを返却.
return scene;
}
[/html]

　これで、バーチャルボタン「Y」を押下すれば（96行目）、フレームイベント発生時に「game.pushScene( createScene() );」がコールされ、”現在表示しているシーンの上に新しいシーンを重ねて表示”するようになる。

　新しいScene（シーン）は、この「var scene = new Scene();」のみで生成される（120行目）。

　上記では、背景画像が表示したくて、”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像を表示してみる“の記事でキャラ画像を表示したのと同じ方法で、背景画像を新しく生成したScene（シーン）に追加している。

　あ、背景画像だが、私が作成した以下を用いている。用意が面倒な人は、以下を使ってほしい。画面と同じサイズの画像を5パターン作成した。

　ところで、実はちょっとこのコードには注意がある。基にしているコードが”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる”の記事のものなのだが、この記事の中では、以下のように、chara（＝Sprite）のオブジェクトがフレームイベントを処理していた。

[html firstline=”67″ highlight=”68″ title=”main.js”]
// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
[/html]

　このままの状態で、以下は呼び出せない。Spriteオブジェクトの中からはGameオブジェクトの関数はアクセスできないのだ（これはJavaScriptの話）。

[html firstline=”94″ highlight=”96,97″ title=”main.js”]
// Yボタン押下中.
if ( game.input.y ) {
// 現在表示しているシーンの上に新しいシーンを重ねて表示する.
game.pushScene( createScene() );
}
[/html]

　さて、遅くなったが、実行した画面は以下のようになる。

　よぉし、完成・・・ん？　右側に縦線が入っている？

■game.rootScene.backgroundColorが厄介だ！

　背景画像のSpriteに指定した幅が悪かったか・・・と思って、以下のように幅に+100pxしてみたのだが、

[html firstline=”116″ highlight=”121″ title=”main.js”]
/**
* 新しいシーンを作成する関数.
*/
function createScene() {
var scene = new Scene(); // シーンを作成.
var bg = new Sprite( SCREEN_WIDTH + 100, SCREEN_HEIGHT ); // 背景画像を配置、幅と高さを設定.
bg.image = game.assets[ IMG_BG_SCENE_BATTLE ]; // 予め読込した背景画像を設定.
scene.addChild( bg ); // シーンに背景画像を追加.
[/html]

　先ほどの結果となんら変化が無かった。で、次に、背景画像の表示開始座標を以下のように右に50pxずらしてみたのだが、

[html firstline=”119″ highlight=”123″ title=”main.js”]
function createScene() {
var scene = new Scene(); // シーンを作成.
var bg = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT ); // 背景画像を配置、幅と高さを設定.
bg.image = game.assets[ IMG_BG_SCENE_BATTLE ]; // 予め読込した背景画像を設定.
bg.x = 50;
scene.addChild( bg ); // シーンに背景画像を追加.
[/html]

　このような結果になったのだ。

　これで計らずも起動時のシーン（rootScene）の上に今回新たに作成したシーンが重なっていることは確認ができたのだが、、、どうやらこの1pxの縦線は、起動時のシーン（rootScene）側の問題のようである。

　じゃあ、起動時のシーン（rootScene）を今回用意した新しいシーンに差し替えてみよう。「game.replaceScene( scene );」で”シーンの差し替え”を意味している。

[html firstline=”34″ highlight=”39,40,41,42,43″ title=”main.js”]
// メイン処理を実行.
game.onload = function() {
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;

var scene = new Scene(); // シーンを作成.
var bg = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT ); // 背景画像を配置、幅と高さを設定.
bg.image = game.assets[ IMG_BG_SCENE_BATTLE ]; // 予め読込した背景画像を設定.
scene.addChild( bg ); // シーンに背景画像を追加.
game.replaceScene( scene );
[/html]

　なんとこれでも・・・右側の縦線は消えなかった。後はもう疑わしいのは、これしかない。「game.rootScene.backgroundColor」だ。

[html firstline=”34″ highlight=”37″ title=”main.js”]
// メイン処理を実行.
game.onload = function() {
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;
[/html]

　これを、黒（#000000）にしたら、以下の通り、縦線は消えた・・・どうやら、「game.rootScene.backgroundColor」は、シーンの差し替えでも届かない領域まで色を塗ってしまうもののようだ。なんて厄介な・・・。一番目立たない黒（#000000）にするのが好ましいのか、白（#ffffff）にするのが好ましいのか、とても悩むところだ。私は取り敢えず黒（#000000）にしておく。

■あれ、バーチャルパッドとバーチャルボタンが出ていない？

　新しく作成したScene（シーン）に、「バーチャルパッド」と「バーチャルボタン」が表示されていないことにお気づきだろうか。黒色の背景の上では透過になっているあのバーチャルパッドとバーチャルボタンは目に見えないという問題もあるが、そもそも、上記のコードではバーチャルパッドとバーチャルボタンを生成していない。

　次の記事で、新しく作成したScene（シーン）への「バーチャルパッド」と「バーチャルボタン」の生成と、背景画像の修正を行っていく。

（アシベズヘア@ashibehair_m）