基本セッティング

前回の「初めてのenchant.js 001 基本的なこと[JavaScript]」で準備したファイルでenchant.jsの基本セッティングを行ってみようとおもいます。
まず、index.htmlにゲームのエンジン「enchant.js」と、ゲームの内容をプログラムしていく「main.js」を読み込みます。
読込順は、「enchant.js」→「main.js」です。

[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>
	<h1>enchant.js example 002</h1>
</body>
</html>

んで、「main.js」に以下のように記述しまして、
ブラウザでプレビューすると、「Hello!!」と表示されるようですと、うまくいっています。

[main.js]

enchant();
window.onload = initGame;	
function initGame(){
	var game = new Game(320,320);
	game.preload('images/chara0.gif', 'images/chara1.gif');
	game.onload = main;
	game.start();
}
function main(){
	alert("Hello!!");
}

コード解説

enchant();

先頭のこれはオマジナイです。(ゲームエンジンを使うために必要です。)

window.onload = initGame;

HTMLが全部よみこまれてからinitGame()メソッドを実行してね。
とゆうとります。(すぐにプログラムを始めるとエラーになります。詳細は割愛)

var game = new Game(320,320);

ゲームのオブジェクトを生成します。()内の数字はwidth,heightをしていしています。

game.preload('images/chara0.gif', 'images/chara1.gif');

これはゲームが始まるまえに読み込んでおくべき画像を指定しています。
引数は可変長引数ですので、３つ、４つなどの場合も「,」で区切ればOKです。
※この時点では読込は開始されません。game.start()のあとで読込開始します。

game.onload = main;

画像読込が完了したらmain()を実行してね。

function main(){
	alert("Hello!!");
}

ゲームのメインプログラム部分です。

今回は基本的なセッティングでした。
次回は「初めてのenchant.js 003シーンの表示[JavaScript]」です。

初めてのenchant.js 一覧

こちらもオススメ(別サイト)

enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集：なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール：enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい＆enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。