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) ハンズオン #07「新エディタ Cocos Creator v1.0」

6,397 views

Published on

2016/5/9 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #07 「新エディタ Cocos Creator v1.0」の資料です。Cocos2d-xの開発元であるChukongによる新しいエディタCocos Creatorの利用方法を紹介しました。

Published in: Technology
  • Be the first to comment

Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」

  1. 1. Cocos2d-x(JS) ハンズオン #7 新エディタ Cocos Creator v1.0 株式会社TKS2 清水友晶
  2. 2. 清水 友晶  株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 TECH.C.非常勤講師  プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動  マイブーム: ゲームエンジン調査  チラ裏開発メモ: 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. もくじ  Cocos Creatorについて  Cocos Creatorとは  Cocos Creatorを試してみよう 1. プレイヤのジャンプ 2. キー入力 3. スター生成 4. スター取得 5. スコアの表示 6. スター消失 7. サウンド追加
  5. 5. Cocos Creator  最新版: v1.0.2  開発版: v1.1  開発: Chukong Technologies  特徴  UIエディタ  アニメーションエディタ  コードエディタ(現在はJSのみ)  ビルド・コンパイル・実行  Unityを意識した構成
  6. 6. RoadMap  2016.5  WebGL batch rendering  Integrated JSB debug solution  Better scene editing tools  Advanced editor extension workflow: panel and editor ui  Cocos Studio data importer  Node creation panel with drag and drop control  2016.7  Editor extension market  Complete editor extension workflow  C++ and JS engine customize workflow  Animation state machine http://discuss.cocos2d-x.org/t/cocos-creator-roadmap/27783
  7. 7. ユーザ登録が必要  Cocos Creatorを利用するには、 Cocosのユーザ登録が必要
  8. 8. Cocos Creator チュートリアル http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/getting-started/quick-start/
  9. 9. 本日利用するリソース  http://tks2.net/handson/20160509/handson.zip
  10. 10. 新規プロジェクト作成
  11. 11. リソース追加  ダウンロードしたファイルの「Resources」の中身を 「assets」に配置
  12. 12. Assets画面に表示  Assetsペインはassetsフォルダとリンクしている  assetsフォルダには、各リソースファイルのメタ情報が生 成される
  13. 13. シーンの作成  assets配下にgameシーンを作成する  gameシーンを開く  Node TreeにあるCanvasからデザインサイズの設定・ 表示方法の選択が可能
  14. 14. 背景の表示  backgroundをCanvas配下に配置する  位置・サイズを設定する  Pos:(0, 0), Size:(1360, 760)
  15. 15. 地面の表示  groundをCanvas配下に配置する  位置・サイズを設定する  Pos:(0, −250), Size:(1350, 250)
  16. 16. プレイヤの表示  PurpleMonsterをCanvas配下に配置する  位置・アンカーポイントを設定する  Pos:(0, −120), AnchorPos:(0.5, 0)
  17. 17. プレイヤのスクリプト  scriptsフォルダ作成  Create  Folder  Rename  Playerスクリプト作成  Create  JavaScript  Rename
  18. 18. コンポーネントプロパティ  Player.js properties: { // ジャンプ高さ jumpHeight: 0, // ジャンプ時間 jumpDuration: 0, // 最大移動スピード maxMoveSpeed: 0, // 加速度 accel: 0, },
  19. 19. コンポーネント追加  PurpleMonsterを選択  PropertiesペインのAdd Componentをクリック  Add Custom Component  Player
  20. 20. ジャンプアクション  Player.js properties: { : }, setJumpAction: function () { // ジャンプアップ : // ジャンプダウン : // 繰り返し : }, Script_1
  21. 21. アクション実行  Player.js onLoad: function () { // 初期ジャンプアクション this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); }, Script_1
  22. 22. シミュレータ実行 Script_1
  23. 23. キー入力  Player.js setInputControl: function () { var self = this; // キーボードイベントリスナー追加 cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, // キーが押された時に呼ばれ、加速を開始する onKeyPressed: function(keyCode, event) { : }, // キーが離された時に呼ばれ、加速を停止する onKeyReleased: function(keyCode, event) { : } }, self.node); }, Script_2
  24. 24. キー入力のセット  Player.js onLoad: function () { // 初期ジャンプアクション this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); // 加速方向フラグ this.accLeft = false; this.accRight = false; // スピードの初期化 this.xSpeed = 0; // キーボードイベントリスナー初期化 this.setInputControl(); }, Script_2
  25. 25. キー入力のセット  Player.js update: function (dt) { // 加速方向に従ってスピードを更新する if (this.accLeft) { this.xSpeed -= this.accel * dt; } else if (this.accRight) { this.xSpeed += this.accel * dt; } // 最大スピードの制限 if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) { // 最大スピードを超えないように設定 : } // プレイヤーの位置更新 this.node.x += this.xSpeed * dt; }, Script_2
  26. 26. シミュレータ実行 Script_2
  27. 27. プレイヤ設定変更  PurpleMonsterを選択
  28. 28. スターの作成  assets/scripts/Star.js の作成  Star.js properties: { // 当たり判定の半径 pickRadius: 0 },
  29. 29. スターの作成  Prefabを利用するために、一旦画面にスターを追加す る  Star.js のコンポーネントを追加する
  30. 30. スターの作成  NodeTreeからAssetsに star をドラッグアンドドロップ する  NodeTreeのstarを削除する
  31. 31. ゲームコントローラの作成  assets/scripts/Game.js の作成  CanvasノードにGameコ ンポーネントを追加する  Prefabとノードをセット する properties: { // Star Prefabの設定 starPrefab: { default: null, type: cc.Prefab }, // スターが消失する時間(ランダム) maxStarDuration: 0, minStarDuration: 0, // 地面の設定 ground: { default: null, type: cc.Node }, // プレイヤの設定 player: { default: null, type: cc.Node } },
  32. 32. スターの生成  Game.js onLoad: function () { : }, spawnNewStar: function() { : }, getNewStarPosition: function () { : } Script_3
  33. 33. スターの生成 Script_3
  34. 34. 関連づけ  Game.js spawnNewStar: function() { : // StarコンポーネントにGameコンポーネントを関連づける newStar.getComponent('Star').game = this; }, Script_4
  35. 35. スターの編集  Star.js cc.Class({ : getPlayerDistance: function () { : }, onPicked: function() { : }, update: function (dt) { : }, }); Script_4
  36. 36. スターの生成 Script_4
  37. 37. スコアの追加  NodeTreeにLabelを追加する
  38. 38. スコアの追加  scoreのプロパティ編集  Fileには、Assetsからビットマッ プフォントをドラッグアンドド ロップする
  39. 39. プロパティ追加  Game.js properties: { : // scoreラベル scoreDisplay: { default: null, type: cc.Label } },
  40. 40. スコアの設定  Game.js onLoad: function () { : // スコアの初期値 this.score = 0; }, : gainScore: function () { this.score += 1; // スコアを表示する this.scoreDisplay.string = 'Score: ' + this.score.toString(); }, Script_5
  41. 41. スコアの更新タイミング  Star.js onPicked: function() { // 新しいスターの生成 this.game.spawnNewStar(); // スコアの更新 this.game.gainScore(); // 現在のスターを消失 this.node.destroy(); }, Script_5
  42. 42. スコアの表示 Script_5
  43. 43. スターの消失時間追加  Game.js onLoad: function () { : // タイマー初期化 this.timer = 0; this.starDuration = 0; : }, Script_6
  44. 44. スターの消失時間追加  Game.js spawnNewStar: function() { : // スターの消失時間取得 this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration); // タイマーリセット this.timer = 0; }, Script_6
  45. 45. スターの消失時間追加  Game.js update: function (dt) { // スター消失時間を超えるとゲームオーバー if (this.timer > this.starDuration) { this.gameOver(); return; } this.timer += dt; }, Script_6 gameOver: function () { // プレイヤのアクションを止める this.player.stopAllActions(); cc.director.loadScene('game'); }
  46. 46. スターの消失時間追加  Star.js update: function() { : // スターが消えていくアニメーション var opacityRatio = 1 - this.game.timer/this.game.starDuration; var minOpacity = 50; this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity)); } Script_6
  47. 47. スターの消失時間追加 Script_6
  48. 48. ジャンプサウンドの追加  Player.js properties: { : // ジャンプサウンド jumpAudio: { default: null, url: cc.AudioClip }, }, Script_7
  49. 49. ジャンプサウンドの追加  Player.js setJumpAction: function () { : // コールバックによりサウンド再生 var callback = cc.callFunc(this.playJumpSound, this); // 繰り返し return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback)); }, playJumpSound: function () { // ジャンプサウンドを再生 cc.audioEngine.playEffect(this.jumpAudio, false); }, Script_7
  50. 50. スコアリングサウンドの追加  Game.js properties: { : // スコアリングサウンド scoreAudio: { default: null, url: cc.AudioClip } }, Script_7
  51. 51. スコアリングサウンドの追加  Game.js gainScore: function () { : // スコアリングサウンドの再生 cc.audioEngine.playEffect(this.scoreAudio, false); }, Script_7
  52. 52. スコアリングサウンドの追加 Script_7
  53. 53. 作業はここまで
  54. 54. 参考になるサイト  CocosCreator公式ドキュメント http://cocos2d- x.org/docs/editors_and_tools/creator/
  55. 55. おわり  ありがとうございました

×