初めてのenchant.js 005文字の表示[JavaScript]

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

完成サンプル

[index.html]

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

次にmain.jsのmain()メソッド内に文字を追加するプログラムを追加します。
文字の追加はLabelクラスを使います。
また前回はbearのプロパティーの指定が多かったので、今回はだいぶ減らしています。

[main.js]

enchant();
window.onload = initGame;
var game;
var scene;
var bear;
var score;
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();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);
}

コード解説

var score;

ラベルオブジェクト(点数)格納用の変数です。

score = new Label("0123456");

Labelオブジェクトを生成、格納しています。(文字の表示にはLabelオブジェクトを使います。)
“0123456”の引数は文字の初期値です。

score.color = "#FC9";

文字の色を指定しています。CSS同様の指定が可能です。

bscore.font = "normal normal 15px/1.0 monospace";

CSSのフォントプロパティー同様に指定できます。上は、
フォントウエイト 、 フォントスタイル 、 フォントサイズ 、 行間 、 フォントの種類
と指定しています。

score.text = "00990";

ラベル(文字)の内容を書き換えます。

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

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

次回は「初めてのenchant.js 006音を鳴らす[JavaScript]」です。

初めてのenchant.js 一覧

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です