Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」
Download as PPTX, PDF2 likes8,698 views
2016/5/9 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #07 「新エディタ Cocos Creator v1.0」の資料です。Cocos2d-xの開発元であるChukongによる新しいエディタCocos Creatorの利用方法を紹介しました。
Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」
- 1. Cocos2d-x(JS) ハンズオン #7 新エディタ Cocos Creator v1.0 株式会社TKS2 清水友晶
- 2. 清水 友晶 株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 TECH.C.非常勤講師 プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動 マイブーム: ゲームエンジン調査 チラ裏開発メモ: http://tks2.net/memo SlideShare: http://www.slideshare.net/doraemonsss Facebook: http://www.facebook.com/doraemonsss
- 5. もくじ Cocos Creatorについて Cocos Creatorとは Cocos Creatorを試してみよう 1. プレイヤのジャンプ 2. キー入力 3. スター生成 4. スター取得 5. スコアの表示 6. スター消失 7. サウンド追加
- 6. Cocos Creator 最新版: v1.0.2 開発版: v1.1 開発: Chukong Technologies 特徴 UIエディタ アニメーションエディタ コードエディタ（現在はJSのみ） ビルド・コンパイル・実行 Unityを意識した構成
- 7. 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
- 11. 新規プロジェクト作成
- 14. シーンの作成 assets配下にgameシーンを作成する gameシーンを開く Node TreeにあるCanvasからデザインサイズの設定・ 表示方法の選択が可能
- 15. 背景の表示 backgroundをCanvas配下に配置する 位置・サイズを設定する Pos:(0, 0), Size:(1360, 760)
- 16. 地面の表示 groundをCanvas配下に配置する 位置・サイズを設定する Pos:(0, −250), Size:(1350, 250)
- 17. プレイヤの表示 PurpleMonsterをCanvas配下に配置する 位置・アンカーポイントを設定する Pos:(0, −120), AnchorPos:(0.5, 0)
- 18. プレイヤのスクリプト scriptsフォルダ作成 Create Folder Rename Playerスクリプト作成 Create JavaScript Rename
- 19. コンポーネントプロパティ Player.js properties: { // ジャンプ高さ jumpHeight: 0, // ジャンプ時間 jumpDuration: 0, // 最大移動スピード maxMoveSpeed: 0, // 加速度 accel: 0, },
- 20. コンポーネント追加 PurpleMonsterを選択 PropertiesペインのAdd Componentをクリック Add Custom Component Player
- 21. ジャンプアクション Player.js properties: { : }, setJumpAction: function () { // ジャンプアップ : // ジャンプダウン : // 繰り返し : }, Script_1
- 22. アクション実行 Player.js onLoad: function () { // 初期ジャンプアクション this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); }, Script_1
- 24. キー入力 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
- 25. キー入力のセット 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
- 26. キー入力のセット 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
- 29. スターの作成 assets/scripts/Star.js の作成 Star.js properties: { // 当たり判定の半径 pickRadius: 0 },
- 30. スターの作成 Prefabを利用するために、一旦画面にスターを追加す る Star.js のコンポーネントを追加する
- 31. スターの作成 NodeTreeからAssetsに star をドラッグアンドドロップ する NodeTreeのstarを削除する
- 32. ゲームコントローラの作成 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 } },
- 33. スターの生成 Game.js onLoad: function () { : }, spawnNewStar: function() { : }, getNewStarPosition: function () { : } Script_3
- 34. スターの生成 Script_3
- 35. 関連づけ Game.js spawnNewStar: function() { : // StarコンポーネントにGameコンポーネントを関連づける newStar.getComponent('Star').game = this; }, Script_4
- 36. スターの編集 Star.js cc.Class({ : getPlayerDistance: function () { : }, onPicked: function() { : }, update: function (dt) { : }, }); Script_4
- 37. スターの生成 Script_4
- 40. プロパティ追加 Game.js properties: { : // scoreラベル scoreDisplay: { default: null, type: cc.Label } },
- 41. スコアの設定 Game.js onLoad: function () { : // スコアの初期値 this.score = 0; }, : gainScore: function () { this.score += 1; // スコアを表示する this.scoreDisplay.string = 'Score: ' + this.score.toString(); }, Script_5
- 42. スコアの更新タイミング Star.js onPicked: function() { // 新しいスターの生成 this.game.spawnNewStar(); // スコアの更新 this.game.gainScore(); // 現在のスターを消失 this.node.destroy(); }, Script_5
- 43. スコアの表示 Script_5
- 44. スターの消失時間追加 Game.js onLoad: function () { : // タイマー初期化 this.timer = 0; this.starDuration = 0; : }, Script_6
- 45. スターの消失時間追加 Game.js spawnNewStar: function() { : // スターの消失時間取得 this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration); // タイマーリセット this.timer = 0; }, Script_6
- 46. スターの消失時間追加 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'); }
- 47. スターの消失時間追加 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
- 49. ジャンプサウンドの追加 Player.js properties: { : // ジャンプサウンド jumpAudio: { default: null, url: cc.AudioClip }, }, Script_7
- 50. ジャンプサウンドの追加 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
- 51. スコアリングサウンドの追加 Game.js properties: { : // スコアリングサウンド scoreAudio: { default: null, url: cc.AudioClip } }, Script_7
- 52. スコアリングサウンドの追加 Game.js gainScore: function () { : // スコアリングサウンドの再生 cc.audioEngine.playEffect(this.scoreAudio, false); }, Script_7
- 54. 作業はここまで