enchant.js：ラベル生成を関数化して使う

enchant.jsでゲーム画面に文字を表示する際、Labelクラスを使って

let label = new Label("Hello!");

label.x = 50;
label.y = 120;
label.color = "red";

label.font = "48px Impact";

game.rootScene.addChild(label);

などと用いるが、これを関数化して便利に使うやり方。

実行イメージを見る

関数イメージ
実行サンプル

関数イメージ

関数名：setLabel()

/*
 * ラベル表示関数
 * 	(文字列, X座標, Y座標, 文字色)
 */
function setLabel(text, x, y, color){
	let label = new Label(text);		// ラベル生成と文字列設定

	label.x = x;					// X座標
	label.y = y;					// Y座標
	label.color = color;			// 文字色

	label.font = "48px Impact";		// フォントサイズとフォント名
	label.opacity = 0.7;			// 不透明度
	
	game.rootScene.addChild(label);	// シーンに追加
	
	return(label);					// ラベルオブジェクトを呼び出し元に返す
}

上記の関数定義だと引数に文字列, X座標, Y座標, 文字色の順に指定するので呼び出すときはこんな感じ。

setLabel("enchant.js!", 50, 100, "#FFF");

これで「enchant.js」という文字列が座標x,y = 50, 100に白い文字で表示される。

もし、ラベル生成後も文字列を書き換えたいのであれば、戻り値を利用して

let label1 = setLabel("enchant.js!", 50, 100, "#FFF");

のように呼び出せばよい。

上記の場合、変数label1を使えば、以下のようにして後からラベルのプロパティ変更が出来る。

label1.text = "HELLO";			// 文字列
label1.color = "orange";		// 文字色
label1.x = 100;				// X座標
label.y = 80;				// Y座標
label.font = "24px Monaco";		// フォントサイズ、
label.opacity = 0.8;			// 不透明度

関数setLabelでは、フォントサイズとフォント名（font）、不透明度（opacity）を関数内で固定値としているが、これら全てを引数から指定する仕様にしてもＯＫ。

定義例

/*
 * ラベル表示関数
 * 	(文字列, X座標, Y座標, 文字色, フォント, 不透明度)
 */
function setLabel(text, x, y, color, font, opacity){
	let label = new Label(text);		// ラベル生成と文字列設定

	label.x = x;					// X座標
	label.y = y;					// Y座標
	label.color = color;			// 文字色

	label.font = font;			// フォントサイズとフォント名
	label.opacity = opacity;	// 不透明度
	
	game.rootScene.addChild(label);	// シーンに追加
	
	return(label);					// ラベルオブジェクトを呼び出し元に返す
}

利用例

let label1 = setLabel("enchant.js!", 50, 100, "#FFF", "24px Monaco", 0.8);

実行サンプル

全体像を示します。

イメージ

ソースコード

main.js

/* -------------------------------------------------------------------------
	enchant.js ラベル表示を関数化する

					created at 2021-10-07 on torisky.com
------------------------------------------------------------------------- */

let game = null;	// このゲーム
let title = null;	// ラベル表示用

/*
 * ラベル表示関数
 * 	(文字列, X座標, Y座標, 文字色)
 */
function setLabel(text, x, y, color){
	let label = new Label(text);		// ラベル生成と文字列設定

	label.x = x;					// X座標
	label.y = y;					// Y座標
	label.color = color;			// 文字色

	label.font = "48px Impact";		// フォントサイズとフォント名
	label.opacity = 0.7;			// 不透明度
	
	game.rootScene.addChild(label);	// シーンに追加
	
	return(label);					// ラベルオブジェクトを呼び出し元に返す
}

/*
 * 起動処理
 */
window.addEventListener("load", function(){
	enchant();										// 必須

	game = new Core(320, 320);						// ゲームステージ
	game.rootScene.backgroundColor = "deepskyblue";	// シーンの背景色
	game.preload("chara1.png");						//ゲームで使う画像
	game.fps = 30;									// フレームレート

	game.addEventListener("load", function(){
		let bear = new Sprite(32, 32);					// スプライトを定義
		bear.image = game.assets["chara1.png"];
		game.rootScene.addChild(bear);				// シーンに追加

		bear.frame = [1, 1, 2, 2];			// スプライトのフレーム
		bear.moveTo(0, 160);				// スプライトの初期位置
		
		bear.tl.moveBy(288, 0, 90)			// スプライトの移動
			.scaleTo(-1, 1, 10)
			.moveBy(-288, 0, 90)
			.scaleTo(1, 1, 10)
			.loop();
		
		// ラベル生成（これ以降変数titleで生成したラベルを制御できる）
		title = setLabel("enchant.js!", 55, 120, "#FFF");
		
		// 実行中の処理
		game.addEventListener("enterframe", function(){
			// クマの位置によりラベル表示テキストを変更
			if(bear.x > 160){
				title.text = "Game Engine";
				title.x = 40;
			}
			else{
				title.text = "enchant.js!";
				title.x = 55;
			}
		});
	});

	game.start();								// ゲーム開始

});