Spriteに画像を登録するときに地味にひっかかった部分

enchant.js

Spriteに画像を登録、表示させる処理の概観

enchant.jsで単純に画像を表示させるだけの処理は下記です。

// enchant 初期化
enchant();

//画像パスのdefine
var IMAGE = 'chara1.gif';

window.onload = function(){
	// ゲームクラスを生成
	var game = new Game(320, 320);

	//画像の事前ロード
	game.preload(IMAGE);
    
	game.onload = function(){
		var bear = new Sprite(32, 32);
		bear.image = game.assets[IMAGE];
		game.rootScene.addChild(bear);
	}
	//ゲーム開始
	game.start();
}

しかし、一見単純そうに見えるにもかかわらず、なかなか画像が表示されずハマってしまっていました。
ちなみに、画像が表示されずに困っていたときのコードは下記です。

// enchant 初期化
enchant();

//画像パスのdefine
var IMAGE = 'chara1.gif';

window.onload = function(){
	// ゲームクラスを生成
	var game = new Game(320, 320);

	//画像の事前ロード
	game.preload(IMAGE);
    
	game.onload = function(){
		var bear = new Sprite(32, 32);
		bear.image = game.assets(IMAGE);
		game.rootScene.addChild(bear);
	}
	//ゲーム開始
	game.start();
}

見比べてどこが違うかお気づきでしょうか？

つまずきポイント

ハマっていた部分は、下記Spriteに画像を登録する部分でした。
＃下記でハマっていた、と気づくまでに相当時間がかかりました。。。

var bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];

画像登録時に使うのは、小カッコ()ではなく大カッコ[]だったというオチでした。

なぜつまずいたか

配列の添え字ではない用途で大カッコを使うというのが、普段C++しか見ない自分にとって想定外だったためです。

詳細

公式ドキュメントによれば、Spriteに画像を登録するには下記のように記述をするとのことでした。

var bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];

しかし、

bear.image = game.assets['chara1.gif'];

とすべき部分を、

bear.image = game.assets('chara1.gif');

としてしまっていたことに気づいていませんでした。

ちゃんと書いたはずなのになかなか画像が表示されない！ コピペしたら表示されるのに。。。とお悩みの方はチェックしてみるとよいかもしれません。

コードは思ったようには動かず、書いたとおりにしか動かないということを久々に感じました。

気づけばたいしたことがないことほど、究明に時間と手間がかかります。