Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

892 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Cocos2d-x(JS) ハンズオン #9 ラベル・テキストボックス 株式会社TKS2 清水友晶
  2. 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
  3. 3. http://line.me/S/sticker/1085672
  4. 4. ラベル・テキストボックス  ラベル  ccui.Textクラス (C++  ui::Textクラス)  テキストボックス  cc.EditBoxクラス (C++  ui::EditBoxクラス)
  5. 5. ラベル  テンプレートプロジェクト  cc.LabelTTFクラス  Cococs Studioで用いられているラベル  ccui.Textクラス
  6. 6. ccui.Textクラス  利用準備  project.json { "project_type": "javascript”, : : : "modules" : ["cocos2d", "cocostudio"], "jsList" : [ "src/resource.js", "src/app.js" ] }
  7. 7. 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);
  8. 8. ccui.Textクラス  実行
  9. 9. ccui.Textクラス  利用  app.js //テキスト変更 helloLabel.setString("Hello WorldnCocos2d- xnHogeHogeFugaFuga"); //フォントサイズ変更 helloLabel.setFontSize(48); //フォント名変更 helloLabel.setFontName("Century"); //フォント色変更 helloLabel.setColor(cc.color.RED);
  10. 10. 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);
  11. 11. テキストボックス  Cococs Studioで用いられているテキストボックス  ccui.TextFieldクラス  高機能なテキストボックス  cc.EditBoxクラス
  12. 12. cc.EditBoxクラス  利用準備  project.json { "project_type": "javascript”, : : : "modules" : ["cocos2d", ”extensions"], "jsList" : [ "src/resource.js", "src/app.js" ] }
  13. 13. cc.EditBoxクラス  利用準備  テキストボックス枠の用意  cocos2d-x-3.10/tests/cpp- tests/Resources/extensions/orange_edit.png  [Project]/res/orange_edit.png
  14. 14. 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]); }
  15. 15. 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);
  16. 16. cc.EditBoxクラス  実行
  17. 17. cc.EditBoxクラス  利用  app.js //初期値 editbox.setString("Cocos2d-x"); //フォント色 editbox.setFontColor(cc.color.WHITE); //プレースホルダー editbox.setPlaceHolder("please enter word"); //プレースホルダーフォント色 editbox.setPlaceholderFontColor(cc.color.BLACK);
  18. 18. cc.EditBoxクラス  利用  app.js //フォント editbox.setFontName("Arial"); //プレースホルダーフォント editbox.setPlaceholderFontName("Arial"); //パスワード設定 editbox.setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD); //最大文字数 editbox.setMaxLength(10);
  19. 19. 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"); } });
  20. 20. 演習  ゲームの会話シーンを想定し、文章が時間とともに1文 字ずつ表示される処理を作りましょう。
  21. 21. 作業はここまで
  22. 22. 参考になるサイト  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
  23. 23. おわり  ありがとうございました

×