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

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

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

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

8. ユーザ登録が必要
 Cocos Creatorを利用するには、
Cocosのユーザ登録が必要

9. Cocos Creator
チュートリアル
http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/getting-started/quick-start/

10. 本日利用するリソース
 http://tks2.net/handson/20160509/handson.zip

11. 新規プロジェクト作成

12. リソース追加
 ダウンロードしたファイルの「Resources」の中身を
「assets」に配置

13. Assets画面に表示
 Assetsペインはassetsフォルダとリンクしている
 assetsフォルダには、各リソースファイルのメタ情報が生
成される

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

23. シミュレータ実行
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

27. シミュレータ実行
Script_2

28. プレイヤ設定変更
 PurpleMonsterを選択

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

38. スコアの追加
 NodeTreeにLabelを追加する

39. スコアの追加
 scoreのプロパティ編集
 Fileには、Assetsからビットマッ
プフォントをドラッグアンドド
ロップする

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

48. スターの消失時間追加
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

53. スコアリングサウンドの追加
Script_7

54. 作業はここまで

55. 参考になるサイト
 CocosCreator公式ドキュメント
http://cocos2d-
x.org/docs/editors_and_tools/creator/

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