シーンの表示

前回の「初めてのenchant.js 002 基本セッティング[JavaScript]」で、基本のセッティングをしました。
今回はゲームのプレイヤー、エネミーなどのオブジェクトを配置していく、
土台になるシーンを表示させてみます。

前回のプログラムを書き換えて行きます、まずHTMLに少し変更。(divタグ追加)
デフォルトでは強制的にウィンドウの左上にゲームが配置されるのですが、
この<div id=”enchant-stage”></div>を入れておくと、
その位置にゲームを配置してくれます。

完成サンプル

[index.html]

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>enchant.js example 002</title>
	<script type="text/javascript" src="js/enchant.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div id="enchant-stage"></div>
	<h1>enchant.js example 002</h1>
</body>
</html>

次にmain.jsのmain()メソッド内にシーンを追加するプログラムを追加します。

[main.js]

enchant();
window.onload = initGame;
var game;
var scene;
function initGame(){
	game = new Game(320,320);
	game.preload('images/chara0.gif', 'images/chara1.gif');
	game.onload = main;
	game.start();
}
function main(){
	game.scale = 1;
	scene = new Scene();
	game.pushScene(scene);
	scene.backgroundColor = "#000";
}

以下の様に表示されればうまくいってます。

コード解説

var scene;

シーンオブジェクト格納用の変数です。

game.scale = 1;

これはゲームのスケール(倍率)を明示してあげています。
明示しないと自動で変更されてしまいます。

scene = new Scene();

シーンオブジェクトを生成、格納しています。

game.pushScene(scene);

ゲームオブジェクトにシーンを追加しています。
(これをしないと表示されません)

scene.backgroundColor = "#000";

シーンに背景色を付けています。

次回は「初めてのenchant.js 004画像の表示[JavaScript]」です。

初めてのenchant.js 一覧