Cocos2d-x(JS) ハンズオン #9ラベル・テキストボックス

株式会社 TKS2 清水友晶

清水 友晶株式会社 TKS2

アプリ開発コンサルCocos2d-x サポートスマホアプリ開発TECH.C. 非常勤講師

プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動

マイブーム : Ingressチラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss

http://line.me/S/sticker/1085672

ラベル・テキストボックス

ラベルccui.Text クラス

（ C++ ui::Text クラス）

テキストボックスcc.EditBox クラス

（ C++ ui::EditBox クラス）

ラベルテンプレートプロジェクト

cc.LabelTTF クラス

Cococs Studio で用いられているラベルccui.Text クラス

ccui.Text クラス利用準備

project.json

{ "project_type": "javascript”, : : : "modules" : ["cocos2d", "cocostudio"],

"jsList" : [ "src/resource.js", "src/app.js" ]}

ccui.Text クラス利用

app.js

var helloLabel = new ccui.Text("Hello World", "Arial", 38);helloLabel.x = size.width / 2;helloLabel.y = size.height / 2 + 200;this.addChild(helloLabel, 5);

ccui.Text クラス実行

ccui.Text クラス利用

app.js//テキスト変更helloLabel.setString("Hello World\nCocos2d-x\nHogeHogeFugaFuga");

//フォントサイズ変更helloLabel.setFontSize(48);

//フォント名変更helloLabel.setFontName("Century");

//フォント色変更helloLabel.setColor(cc.color.RED);

ccui.Text クラス利用

app.js//水平方向整列helloLabel.setTextHorizontalAlignment(cc.TEXT_ALIGNMENT_CENTER);

//垂直方向整列helloLabel.setTextVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM);

//シャドウ適用helloLabel.enableShadow(cc.color.GRAY, cc.p(10, -10));

//アウトライン適用helloLabel.enableOutline(cc.color.BLUE, 2);

テキストボックスCococs Studio で用いられているテキストボック

スccui.TextField クラス

高機能なテキストボックスcc.EditBox クラス

cc.EditBox クラス利用準備

project.json

{ "project_type": "javascript”, : : : "modules" : ["cocos2d", ”extensions"],

"jsList" : [ "src/resource.js", "src/app.js" ]}

cc.EditBox クラス利用準備

テキストボックス枠の用意cocos2d-x-3.10/tests/cpp-tests/Resources/

extensions/orange_edit.png

[Project]/res/orange_edit.png

cc.EditBox クラス利用準備

resource.js

var res = { HelloWorld_png : "res/HelloWorld.png", OrangeEdit_png : "res/orange_edit.png"};

var g_resources = [];for (var i in res) { g_resources.push(res[i]);}

cc.EditBox クラス利用

app.js

var size = cc.winSize;

//テキストボックス背景var bg = new cc.Scale9Sprite(res.OrangeEdit_png);

//テキストボックスvar editbox = new cc.EditBox(cc.size(170, 50), bg);editbox.setPosition(size.width / 2, size.height / 2);this.addChild(editbox);

cc.EditBox クラス実行

cc.EditBox クラス利用

app.js//初期値editbox.setString("Cocos2d-x");

//フォント色editbox.setFontColor(cc.color.WHITE);

//プレースホルダーeditbox.setPlaceHolder("please enter word");

//プレースホルダーフォント色editbox.setPlaceholderFontColor(cc.color.BLACK);

cc.EditBox クラス利用

app.js//フォントeditbox.setFontName("Arial");

//プレースホルダーフォントeditbox.setPlaceholderFontName("Arial");

//パスワード設定editbox.setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD);

//最大文字数editbox.setMaxLength(10);

cc.EditBox イベントvar HelloWorldLayer = cc.Layer.extend({ ctor:function () { this._super();

var size = cc.winSize; var bg = new cc.Scale9Sprite(res.OrangeEdit_png); var editbox = new cc.EditBox(cc.size(170, 50), bg); editbox.setPosition(size.width / 2, size.height / 2); editbox.setDelegate(this); this.addChild(editbox);

return true; }, editBoxEditingDidBegin: function (editBox) { cc.log("editBoxEditingDidBegin"); }, editBoxEditingDidEnd: function (editBox) { cc.log("editBoxEditingDidEnd"); }, editBoxTextChanged: function (editBox, text) { cc.log("editBoxTextChanged, text: " + text); }, editBoxReturn: function (editBox) { cc.log("editBoxReturn"); }});

演習ゲームの会話シーンを想定し、文章が時間とともに 1

文字ずつ表示される処理を作りましょう。

作業はここまで

参考になるサイト

Cocos 公式 Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS

Cocos2d-JS API リファレンスhttp://cocos2d-x.org/wiki/Reference

Qiita（ tag: cocos2d-js ）https://qiita.com

おわり

ありがとうございました