Embed Size (px)
Citation preview
Cocos2d-x(JS) ハンズオン #7新エディタ
Cocos Creator v1.0
株式会社 TKS2 清水友晶
清水 友晶株式会社 TKS2
アプリ開発コンサルCocos2d-x サポートスマホアプリ開発TECH.C. 非常勤講師
プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動
マイブーム : ゲームエンジン調査
チラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss
http://line.me/S/sticker/1085672
もくじ
Cocos Creator についてCocos Creator とは
Cocos Creator を試してみよう
1. プレイヤのジャンプ
2. キー入力
3. スター生成
4. スター取得
5. スコアの表示
6. スター消失
7. サウンド追加
Cocos Creator最新版 : v1.0.2開発版 : v1.1開発 : Chukong Technologies特徴
UI エディタアニメーションエディタコードエディタ（現在は JS のみ）ビルド・コンパイル・実行Unity を意識した構成
RoadMap2016.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
ユーザ登録が必要Cocos Creator を利用するには、
Cocos のユーザ登録が必要
Cocos Creatorチュートリアル
http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/getting-started/quick-start/
新規プロジェクト作成
リソース追加
ダウンロードしたファイルの「 Resources 」の中身を「 assets 」に配置
Assets 画面に表示
Assets ペインは assets フォルダとリンクしている
assets フォルダには、各リソースファイルのメタ情報が生成される
シーンの作成
assets 配下に game シーンを作成する
game シーンを開く
Node Tree にある Canvas からデザインサイズの設定・表示方法の選択が可能
背景の表示
background を Canvas 配下に配置する
位置・サイズを設定するPos:(0, 0), Size:(1360, 760)
地面の表示
ground を Canvas 配下に配置する
位置・サイズを設定するPos:(0, −250), Size:(1350, 250)
プレイヤの表示
PurpleMonster を Canvas 配下に配置する
位置・アンカーポイントを設定するPos:(0, −120), AnchorPos:(0.5, 0)
プレイヤのスクリプトscripts フォルダ作成
Create FolderRename
Player スクリプト作成Create JavaScriptRename
コンポーネントプロパティPlayer.js
properties: { // ジャンプ高さ jumpHeight: 0, // ジャンプ時間 jumpDuration: 0, // 最大移動スピード maxMoveSpeed: 0, // 加速度 accel: 0,},
コンポーネント追加PurpleMonster を選択
Properties ペインの Add Component をクリックAdd Custom Component Player
ジャンプアクションPlayer.js
properties: { :},
setJumpAction: function () { // ジャンプアップ : // ジャンプダウン : // 繰り返し :},
Script_1
アクション実行Player.js
onLoad: function () { // 初期ジャンプアクション this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction);},
Script_1
シミュレータ実行Script_1
キー入力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
キー入力のセット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
キー入力のセットPlayer.jsupdate: 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
シミュレータ実行Script_2
プレイヤ設定変更PurpleMonster を選択
スターの作成assets/scripts/Star.js の作成
Star.jsproperties: { // 当たり判定の半径 pickRadius: 0},
スターの作成Prefab を利用するために、一旦画面にスターを追加
する
Star.js のコンポーネントを追加する
スターの作成NodeTree から Assets に star をドラッグアンドド
ロップする
NodeTree の star を削除する
ゲームコントローラの作成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 }},
スターの生成Game.js
onLoad: function () { :},
spawnNewStar: function() { :},
getNewStarPosition: function () { :}
Script_3
スターの生成Script_3
関連づけGame.jsspawnNewStar: function() { : // Starコンポーネントに Gameコンポーネントを関連づける newStar.getComponent('Star').game = this;},
Script_4
スターの編集Star.js
cc.Class({ : getPlayerDistance: function () { : },
onPicked: function() { : },
update: function (dt) { : },});
Script_4
スターの生成Script_4
スコアの追加NodeTree に Label を追加する
スコアの追加score のプロパティ編集
File には、 Assets からビットマップフォントをドラッグアンドドロップする
プロパティ追加Game.js
properties: { : // scoreラベル scoreDisplay: { default: null, type: cc.Label }},
スコアの設定Game.js
onLoad: function () { : // スコアの初期値 this.score = 0;},:gainScore: function () { this.score += 1; // スコアを表示する this.scoreDisplay.string = 'Score: ' + this.score.toString();},
Script_5
スコアの更新タイミングStar.js
onPicked: function() { // 新しいスターの生成 this.game.spawnNewStar(); // スコアの更新 this.game.gainScore(); // 現在のスターを消失 this.node.destroy();},
Script_5
スコアの表示Script_5
スターの消失時間追加Game.js
onLoad: function () { : // タイマー初期化 this.timer = 0; this.starDuration = 0; :},
Script_6
スターの消失時間追加Game.js
spawnNewStar: function() { : // スターの消失時間取得 this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration); // タイマーリセット this.timer = 0;},
Script_6
スターの消失時間追加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');}
スターの消失時間追加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
スターの消失時間追加Script_6
ジャンプサウンドの追加Player.js
properties: { : // ジャンプサウンド jumpAudio: { default: null, url: cc.AudioClip },},
Script_7
ジャンプサウンドの追加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
スコアリングサウンドの追加Game.js
properties: { : // スコアリングサウンド scoreAudio: { default: null, url: cc.AudioClip }},
Script_7
スコアリングサウンドの追加Game.js
gainScore: function () { : // スコアリングサウンドの再生 cc.audioEngine.playEffect(this.scoreAudio, false);},
Script_7
スコアリングサウンドの追加Script_7
作業はここまで
参考になるサイト
CocosCreator 公式ドキュメントhttp://cocos2d-x.org/docs/editors_and_tools/creator/
おわり
ありがとうございました
