2016/6/27 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #09 「ラベル・テキストボックス」の資料です。ゲームには欠かせない文字の入出力を補うラベルとテキストボックスについて紹介しました。

1. Cocos2d-x(JS) ハンズオン #9
ラベル・テキストボックス
株式会社TKS2 清水友晶

2. 清水 友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: Ingress
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

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

5. ラベル・テキストボックス
 ラベル
 ccui.Textクラス
（C++  ui::Textクラス）
 テキストボックス
 cc.EditBoxクラス
（C++  ui::EditBoxクラス）

6. ラベル
 テンプレートプロジェクト
 cc.LabelTTFクラス
 Cococs Studioで用いられているラベル
 ccui.Textクラス

7. ccui.Textクラス
 利用準備
 project.json
{
"project_type": "javascript”,
:
:
:
"modules" : ["cocos2d", "cocostudio"],
"jsList" : [
"src/resource.js",
"src/app.js"
]
}

8. 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);

9. ccui.Textクラス
 実行

10. ccui.Textクラス
 利用
 app.js
//テキスト変更
helloLabel.setString("Hello WorldnCocos2d-
xnHogeHogeFugaFuga");
//フォントサイズ変更
helloLabel.setFontSize(48);
//フォント名変更
helloLabel.setFontName("Century");
//フォント色変更
helloLabel.setColor(cc.color.RED);

11. 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);

12. テキストボックス
 Cococs Studioで用いられているテキストボックス
 ccui.TextFieldクラス
 高機能なテキストボックス
 cc.EditBoxクラス

13. cc.EditBoxクラス
 利用準備
 project.json
{
"project_type": "javascript”,
:
:
:
"modules" : ["cocos2d", ”extensions"],
"jsList" : [
"src/resource.js",
"src/app.js"
]
}

14. cc.EditBoxクラス
 利用準備
 テキストボックス枠の用意
 cocos2d-x-3.10/tests/cpp-
tests/Resources/extensions/orange_edit.png
 [Project]/res/orange_edit.png

15. 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]);
}

16. 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);

17. cc.EditBoxクラス
 実行

18. cc.EditBoxクラス
 利用
 app.js
//初期値
editbox.setString("Cocos2d-x");
//フォント色
editbox.setFontColor(cc.color.WHITE);
//プレースホルダー
editbox.setPlaceHolder("please enter word");
//プレースホルダーフォント色
editbox.setPlaceholderFontColor(cc.color.BLACK);

19. cc.EditBoxクラス
 利用
 app.js
//フォント
editbox.setFontName("Arial");
//プレースホルダーフォント
editbox.setPlaceholderFontName("Arial");
//パスワード設定
editbox.setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD);
//最大文字数
editbox.setMaxLength(10);

20. 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");
}
});

21. 演習
 ゲームの会話シーンを想定し、文章が時間とともに1文
字ずつ表示される処理を作りましょう。

22. 作業はここまで

23. 参考になるサイト
 Cocos公式Wiki
http://www.cocos2d-
x.org/wiki/Cocos2d-JS
 Cocos2d-JS APIリファレンス
http://cocos2d-x.org/wiki/Reference
 Qiita
（tag: cocos2d-js）
https://qiita.com

24. おわり
 ありがとうございました