ボタンをコードで作成（スプライトシート利用）：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); // 使用不可時の画像を設定