画像の表示

前回の「初めてのenchant.js 003シーンの表示[JavaScript]」では、シーンをゲーム上に表示しました。
今回はそのシーンの土台の上に画像を表示させて見たいと思います。
HTMLの方は特に変更なしです。

完成サンプル

[index.html]

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>enchant.js example 004</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 004</h1>
</body>
</html>

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

[main.js]

enchant();
window.onload = initGame;
var game;
var scene;
var bear;
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";
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.frame = 1;
	bear.x = 100;
	bear.y = 30;
	bear.opacity = 0.5;
	bear.rotation = 15;
	bear.scaleX = 2;
	bear.scaleY = 2;
	scene.addChild(bear);
	//scene.removeChild(bear);
}

以下の様に表示されました。

コード解説

var bear;

画像オブジェクト(くま)格納用の変数です。

game.scale = 1;

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

bear = new Sprite(32,32);

Spriteオブジェクトを生成、格納しています。(画像の表示にはSpriteオブジェクトを使います。)
32,32の引数はwidth,heightです。

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

Spriteオブジェクトに割り当てる画像を指定します。
preloadした画像の内該当する画像をしていします。

bear.frame = 1;

画像のどの位置を表示するかをしていします。
画像が、32×32のマス目にあるとして、左上が0から始まるインデックス番号です。
数字を変えてみるとわかります。

	bear.x = 100;
	bear.y = 30;
	bear.opacity = 0.5;
	bear.rotation = 15;
	bear.scaleX = 2;
	bear.scaleY = 2;

Spriteのプロパティーです。
x,yは座標、opacityは透明度、rotaionは回転、scaleX,scaleYは拡大率(-1とかすると反転します)
ドキュメントも併せて確認するとよいでしょう。

	scene.addChild(bear);
	//scene.removeChild(bear);

シーンへ画像(Sprite)を追加しています。
コメントアウトにしていますが、「scene.removeChild(bear);」とすると、
画面から消すことができます。

次回は「初めてのenchant.js 005文字の表示[JavaScript]」です。

初めてのenchant.js 一覧

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

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

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