読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

ボタンをコードで作成(スプライトシート利用):Cocos2d-x v3.7(JavaScript)

 ボタンを『Cocos Studio 2』のUIオブジェクトを使用するのではなく、コードを書いて動的に(実行時に)作成します。
 数多く配置する場合などは、コード上で実装したほうが便利な場合があります。

 また、ボタンに使用する画像をスプライトシート利用する方法も説明しています。

『ccui.Button』クラスでボタンを作成

 『ccui.Button』クラスを使用してボタンを作成します。
 『cc.ControlButton』クラスでも作成できますが、『MacOS』シミュレータでは実行出来たものの、『ブラウザ起動』では実行できませんでした。

作成例

// 下記の画像を含んだスプライトシートをキャッシュに読み込む
// "button_normal.png", "button_pressed.png", "button_disabled.png" 
cc.spriteFrameCache.addSpriteFrames("res/Plist.plist");

var button = new ccui.Button(); // ボタンのインスタンスを作成
button.loadTextures(
	"button_normal.png", // 通常時の画像
	"button_pressed.png", // 押下時の画像
	"button_disabled.png", // 使用不可時の画像
	ccui.Widget.PLIST_TEXTURE); // スプライトシートから読み込むための設定
button.setEnabled(true); // ボタンを使用可能にする(デフォルトでtrue)
button.setBright(false); // falseで使用不可の画像を表示(デフォルトでtrue)
button.setTouchEnabled(true); // ボタンのタッチを有効にする(デフォルトでtrue)
button.setPressedActionEnabled(true); // ボタン押下アクションを有効にする(デフォルトでfalse)
button.setScale9Enabled(true); // Scale9レンダラーを有効にする(デフォルトでfalse)
button.setSize(cc.size(180, 60)); // ボタンのサイズを設定
button.setTitleText("Button"); // ボタンに表示する文字列を設定
button.setTitleColor(cc.color(0, 0, 0, 255)); // 文字色を設定
button.setTitleFontName("Arial"); // フォントの種類を設定
button.setTitleFontSize(32); //フォントのサイズを設定
button.setPosition(320, 240); // ボタンの位置を設定
button.addTouchEventListener(function(sender, type){ // タッチイベントを設定
	switch (type) {
	case ccui.Widget.TOUCH_BEGAN: // ボタンにタッチした時
		break;
	case ccui.Widget.TOUCH_MOVED: // ボタンにタッチ中
		break;
	case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
		break;
	case ccui.Widget.TOUCH_CANCELED: // キャンセルした時
		break;
	}
}, this);
this.addChild(button); // ボタンをノードに追加

『loadTextures()』でボタンの画像を設定

 通常時、押下時、使用不可時に表示する画像を設定します。

スプライトシートの画像を設定する場合

 『loadTextures()』の第4引数に『ccui.Widget.PLIST_TEXTURE』を設定します。

直接画像ファイルを設定する場合

 スプライトシートを利用せずに直接画像ファイルを指定する場合は下記のようにします。

button.loadTextures(
	"button_normal.png", // 通常時の画像
	"button_pressed.png", // 押下時の画像
	"button_disabled.png");  // 使用不可時の画像
設定しない画像がある場合

 nullではなく『""』を設定します。

button.loadTextures(
	"button_normal.png", // 通常時の画像
	"", // ボタン押下時の画像
	"");  // ボタン使用不可時の画像
個別に画像を設定する場合

 下記のメソッドも用意されています。

button.loadTextureNormal("button_normal.png", ccui.Widget.PLIST_TEXTURE); // 通常時の画像を設定
button.loadTexturePressed("button_pressed.png", ccui.Widget.PLIST_TEXTURE); // 押下時の画像を設定
button.loadTextureDisabled("button_disabled.png", ccui.Widget.PLIST_TEXTURE); // 使用不可時の画像を設定

『button.setBright(false)』で使用不可画像を表示

 ボタン使用不可の画像の表示は、ボタンの使用可否を変更するだけでは切り替わりません。
 『button.setBright(false)』で設定します。また先に『loadTextures()』等で画像を設定しておく必要があります。

クラスが用意している押下アクションを設定

 ボタン押下時にボタンが広がるアクションが設定されます。

button.setPressedActionEnabled(true);

『Scale9レンダラー』

 画像よりボタンサイズを大きくする場合、縁付や角丸のボタン画像をきれいに拡大表示してくれます。
 下記の『Button1』と『Button2』は同じ画像を使用しています。
f:id:mmorley:20150930114708p:plain
 画像を9分割して拡大してしています。
 
以上です。

あとがき

 スプライトシートから画像を読み込む方法と、ボタンに使用不可状態の画像を表示する方法がわかりにくかったです。
 『Scale9レンダラー』は使える画像の条件は限られるかもしれないですがよく出来ていますね。