Cocos2d-x(JS) ハハハハハ #9 ハハハ ハハハハハハハハ ・ ハハハハ TKS2 ハハハハ
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
おわり
ありがとうございました