cocos2d-js 3.0 rc1 で MenuItemSprite と LabelTTF を組み合わせた簡易ボタンの作成

簡易ボタンの作成関数を作った

cocos2d-js ではボタンを作る際に Menu と MenuItem を使うことがあります。

他にボタンのクラスもありますが、イベント処理の設定など MenuItem のほうが使い勝手が良いように思います。

 

MenuItemImage でボタン用の画像を読み込んで作っていたのですが、いちいちボタンの文字を画像として入力するのはとても面倒でした。

例えば、同じ背景なのに「ヘルプ」と「閉じる」という名前の違いだけで画像を２種類も作らないといけないのは手間がかかります。

 

そこで、背景画像の上にラベルを重ねたボタンを作りました。

絵心があまりありませんが、がんばって茶色いボタンの背景画像を書きました。

茶色いボタンの背景として通常(normal), 押下(selected),非活性(disabled)で用意します。

背景画像には「閉じる」のような文字列は書かれていません。

文字列はボタン作成関数で指定します。

サイズも実行時に指定できるので、ひとつベースの背景画像があればいろいろなサイズでいろいろなテキストを付加して利用できます。

	var button = mcclib.createImageLabelButton(
	function(sender){
	window.alert("button pushed");
	},
	"閉じる", cc.size(50, 30), "Arial", 12, cc.TEXT_ALIGNMENT_CENTER, cc.TEXT_ALIGNMENT_CENTER,
	res.gui_button_normal_png, res.gui_button_selected_png, res.gui_button_disabled_png);
	this.addChild(button, 10000);

view raw example.js hosted with ❤ by GitHub

	/// 画像を読みこみ指定されたサイズのスプライトを作成します。
	/// @param {string} path 画像のファイルパスです。
	/// @param {cc.Size} size スプライトのサイズです。画像はこのサイズに拡大縮小されます。
	/// @returns {cc.Sprite} 作成したスプライトです。
	mcclib.createSprite = function(path, size) {
	var sprite = cc.Sprite.create(path);
	if (size != undefined) {
	var beforeSize = sprite.getContentSize();
	sprite.setScale(size.width / beforeSize.width, size.height / beforeSize.height);
	sprite.setContentSize(size);
	}
	return sprite;
	};
	/// ボタン用の背景画像とラベルを組み合わせたボタンを作成します。
	/// @param {function} onButton ボタン押下時のイベントです。
	/// @param {string} title ラベルに表示する文字列です。
	/// @param {cc.Size} size ボタンの大きさです。 undefined ならば読み込んだ画像のサイズです。
	/// @param {string} fontName ラベルに表示する文字列のフォント名です。既定値は Arial です。
	/// @param {number} fontSize ラベルに表示する文字列の大きさです。既定値は 12 です。
	/// @param {number} hAlign ラベルの文字列の水平方向の寄せ方です。既定値は cc.TEXT_ALIGNMENT_CENTER です。
	/// @param {number} vAlign ラベルの文字列の垂直方向の寄せ方です。既定値は cc.TEXT_ALIGNMENT_CENTER です。
	/// @param {string} normalImagePath ボタンの通常時の画像のファイルパスです。
	/// @param {string} selectedImagePath ボタンが押されたときの画像のファイルパスです。
	/// @param {string} disabledImagePath ボタンが無効なときの画像のファイルパスです。
	/// @returns {cc.Menu} 作成されたボタンです。
	/// @example
	/// var button = mcclib.createImageLabelButton(
	/// function(sender){
	/// window.alert("button pushed");
	/// },
	/// "タイトル", cc.size(200, 100), "Arial", 12, cc.TEXT_ALIGNMENT_CENTER, cc.TEXT_ALIGNMENT_CENTER,
	/// res.gui_button_normal_png, res.gui_button_disabled_png, res.gui_button_disabled_png);
	/// this.addChild(button);
	mcclib.createImageLabelButton = function(onButton, title, size, fontName, fontSize, hAlign, vAlign, normalImagePath, selectedImagePath, disabledImagePath) {
	// 引数の調整
	fontName = fontName || "Arial";
	fontSize = fontSize || 12;
	hAlign = hAlign || cc.TEXT_ALIGNMENT_CENTER;
	vAlign = vAlign || cc.TEXT_ALIGNMENT_CENTER;
	normalImagePath = normalImagePath || res.gui_button_normal_png;
	selectedImagePath = selectedImagePath || res.gui_button_selected_png;
	disabledImagePath = disabledImagePath || res.gui_button_disabled_png;
	// メニューアイテムの作成
	var menuitem = new cc.MenuItemSprite();
	menuitem.onButton = onButton;
	var normalSprite = mcclib.createSprite(normalImagePath, size);
	var selectedSprite = mcclib.createSprite(selectedImagePath, size);
	var disabledSprite = mcclib.createSprite(disabledImagePath, size);
	menuitem.initWithNormalSprite(
	normalSprite,
	selectedSprite,
	disabledSprite,
	menuitem.onButton, menuitem);
	// ラベルの作成
	var label = cc.LabelTTF.create(title, fontName, fontSize, size, hAlign, vAlign);
	var menuitemSize = menuitem.getContentSize();
	label.setPosition(menuitemSize.width / 2, menuitemSize.height / 2);
	label.setContentSize(menuitemSize);
	menuitem.addChild(label);
	var menu = cc.Menu.create(menuitem);
	return menu;
	};

view raw part_of_mcclib.js hosted with ❤ by GitHub

gist222c8099d1427be0b905

 

その他の近況

NPC の会話処理は、ある範囲に入ったらプレイヤーが会話を選択できるようにする処理を作りました。

ごちゃごちゃしてきたのでシーケンス図にまとめたいと思っています。

今は会話そのものを表現するための GUI 部品を cocos2d のクラスを継承して作っています。

今日紹介した関数もその一環で作りました。

 

TMX のタイルの隙間に関する対策はまだできていません。

サンプルでは正しく表示されている tmx でも、自分のプログラムに移すと隙間ができてしまうので、プログラムの問題なのですが、位置やサイズを整数にしたりプロジェクションの設定を２Ｄにしただけではうまくいかず、こちらは気長に少しずつ調べようと思います。