前言
盡管知乎上對(duì)Cocos2dx成見(jiàn)很大，但是徘徊于糾結(jié)用什么游戲引擎不如都試試。況且這個(gè)軟件是國(guó)人開(kāi)發(fā)的，學(xué)習(xí)起來(lái)應(yīng)該不算困難匣椰。
雖然沒(méi)有學(xué)過(guò)JavaScript，但是似乎也可以邊查邊寫(xiě)吧桥滨。JavaScript的教程： http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
Cocos creator目前版本為1.5.1窝爪，官網(wǎng)有一份很詳細(xì)的手冊(cè)，網(wǎng)址為 http://www.cocos.com/docs/creator/ 齐媒。這篇文章是該快速上手這一章的精簡(jiǎn)版，并且對(duì)游戲性進(jìn)行了提升纷跛。
安裝
windows下面的安裝是沒(méi)有任何問(wèn)題的喻括。mac下的安裝，需要注意一下贫奠。
在官網(wǎng)下載安裝包之后唬血，拖動(dòng)到applications中之后，打開(kāi)會(huì)提示該應(yīng)用是未被信任的開(kāi)發(fā)者唤崭。此時(shí)拷恨，打開(kāi)系統(tǒng)偏好設(shè)置中的安全性與隱私中的通用，會(huì)看到打開(kāi)的按鈕谢肾，通過(guò)此方式打開(kāi)之后腕侄，不再進(jìn)行提醒了。
快速開(kāi)始
從dashboard開(kāi)始新建項(xiàng)目芦疏，或者打開(kāi)項(xiàng)目冕杠。根據(jù)教程中關(guān)于快速上手的部分，我們從這個(gè)地址可以下載到一個(gè)初始工程項(xiàng)目 下載初始項(xiàng)目 酸茴。
或者點(diǎn)擊這里下載 https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/start_project.zip
這個(gè)快速上手最終做出的游戲效果是這樣的： http://fbdemos.avosapps.com/star-catcher/ 分预。
這個(gè)游戲有點(diǎn)類似于接金幣這樣的游戲，但是更加困難薪捍，游戲的學(xué)習(xí)曲線非常的大笼痹，由于這個(gè)小怪物的水平加速度難以駕馭以及上下蹦跳的關(guān)系，幾乎很難已去接到五角星酪穿，而且也沒(méi)有什么劇情凳干。我們最好把他改的好玩一點(diǎn)吧。
打開(kāi)這個(gè)項(xiàng)目昆稿，我們先學(xué)習(xí)一下界面纺座。左下角是資源面板，在初始項(xiàng)目中溉潭，已經(jīng)建立了一個(gè)工程目錄净响，這里有最基本的資源少欺，已經(jīng)目錄組織。assets的意思是資產(chǎn)馋贤，在這個(gè)總目錄下面赞别，有三個(gè)子目錄，包含有字體配乓，音頻仿滔，與圖片資源。
創(chuàng)建場(chǎng)景
場(chǎng)景是至關(guān)重要的犹芹，因?yàn)閳?chǎng)景包含了游戲腳本崎页，而場(chǎng)景在游戲開(kāi)始的時(shí)候會(huì)自動(dòng)加載。在資源面板中的assets下點(diǎn)擊加號(hào)創(chuàng)建一個(gè)場(chǎng)景腰埂，重命名為game飒焦，雙擊打開(kāi)。
左上角的層級(jí)管理器顯示的是當(dāng)前的場(chǎng)景中節(jié)點(diǎn)之間的關(guān)系屿笼。
在這個(gè)game場(chǎng)景中牺荠，只有一個(gè)根節(jié)點(diǎn)canvas（畫(huà)布），現(xiàn)在這個(gè)節(jié)點(diǎn)上是空的驴一，意味著什么都不會(huì)加載休雌。
點(diǎn)擊根結(jié)點(diǎn)在右側(cè)數(shù)據(jù)面板中，我們可以設(shè)置根節(jié)點(diǎn)的分辨率肝断。分辨率的高度設(shè)置為自適應(yīng)杈曲，總為960x640，和iPhone第一代長(zhǎng)寬比一致孝情，推測(cè)這個(gè)分辨率應(yīng)該是dp而不是pixel吧鱼蝉。
場(chǎng)景圖像
將資源background拖拽到canvas上，使得background成為canvas的一個(gè)子節(jié)點(diǎn)箫荡，注意不要將background變成另一個(gè)根節(jié)點(diǎn)魁亦。
使用cmd+s來(lái)保存剛剛的變動(dòng)。
選中場(chǎng)景中的background圖片羔挡，然后洁奈，在左上角找到變換工具的第四個(gè)按鈕，分別是平移绞灼，旋轉(zhuǎn)利术，縮放，矩形變換低矮。選中矩形變換印叁，將background變換為一個(gè)能覆蓋場(chǎng)景的大小，如下圖所示。
上述步驟也可以直接對(duì)background的屬性進(jìn)行設(shè)置轮蜕，設(shè)置位置為0昨悼，0，寬高為1600和800就行跃洛。
用同樣的方法添加地面率触。
用同樣的方法插入小怪物，并且重命名為player汇竭。圖片的默認(rèn)錨點(diǎn)為中心位置葱蝗，這里將錨點(diǎn)anchor的y設(shè)置為0。
創(chuàng)建腳步
接下來(lái)出現(xiàn)了驚人的一幕细燎，教程居然說(shuō)不會(huì)編程也沒(méi)關(guān)系两曼，你可以交給你的程序員小伙伴來(lái)解決，果然是我現(xiàn)在只差一個(gè)程序員了玻驻。
在下圖中資源的player的位置建立一個(gè)js腳本文件合愈，并打開(kāi)。
在properties中插入以下內(nèi)容击狮，這部分是小怪物的物理屬性
jumpHeight:0,
jumpDuration:0,
maxMoveSpeed:0,
accel:0,
選中小怪物圖片，在屬性框中找到添加組件益老，把player腳本添加到player圖片上彪蓬，并且設(shè)置好相關(guān)參數(shù)。
完善腳本
我們?cè)谀_本中繼續(xù)加入其他功能捺萌。首先是跳躍的動(dòng)作档冬。
在properties下面加入這一段
setJumpAction: function(){
var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0,this.jumpHeight)).easing(cc.easeQuadraticActionOut());
var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0,-this.jumpHeight)).easing(cc.easeQuadraticActionIn());
return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
},
moveBy是官方的API，在官方API中查詢一下該API的使用桃纯，第一個(gè)參數(shù)是移動(dòng)的距離酷誓，第二個(gè)參數(shù)是移動(dòng)的位置。很顯然是向上移動(dòng)了一段距離态坦。后面的easing是生成緩動(dòng)運(yùn)動(dòng)盐数，生成的對(duì)象是easeQuadraticActionIn和Out，這兩個(gè)是二次曲線伞梯。原來(lái)的教程中是三次曲線玫氢，這個(gè)和真實(shí)世界中的物理運(yùn)動(dòng)差的太多了。
在onload方法中加入下面這段代碼谜诫，啟動(dòng)動(dòng)畫(huà)漾峡。
onLoad: function () {
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
},
現(xiàn)在點(diǎn)擊播放按鈕刻可以查看初始的效果。
控制角色
為主角加上移動(dòng)的控制喻旷。
在setJumpAction下面繼續(xù)添加方法生逸。
setInputControl: function(){
var self = this;
cc.eventManager.addListener({
event: cc.EventListener.KEYBOARD,
onKeyPressed: function(keyCode, event){
switch(keyCode){
case cc.KEY.a:
self.accLeft = true;
self.accRight = false;
break;
case cc.KEY.d:
self.accRight = true;
self.accLeft = false;
}
},
onKeyReleased: function(keyCode, event){
switch(keyCode){
case cc.KEY.a:
self.accLeft = false;
break;
case cc.KEY.d:
self.accRight = false;
break;
}
}
}, self.node)
},
更新onload和update代碼
onLoad: function () {
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
this.accLeft = false;
this.accRight = false;
this.xSpeed = 0;
this.setInputControl();
},
update: function(dt){
if(this.accLeft){
this.xSpeed -= this.accel * dt;
}
else if(this.accRight){
this.xSpeed += this.accel * dt;
}
if(this.xSpeed >0){
this.xSpeed -= this.accel/2 * dt;
}
else if( this.xSpeed <0){
this.xSpeed += this.accel/2 * dt;
}
if(Math.abs(this.xSpeed) > this.maxMoveSpeed){
this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
}
this.node.x += this.xSpeed * dt;
},
第一個(gè)代碼添加了個(gè)監(jiān)聽(tīng)器，按鍵變動(dòng)的時(shí)候改變accLeft和accRight的值。啟動(dòng)時(shí)打開(kāi)監(jiān)聽(tīng)槽袄，然后烙无，在每一幀需要更新的時(shí)候，計(jì)算怪物的位置掰伸。
增加五角星
添加Game腳本到assets/scripts文件夾下皱炉，雙擊打開(kāi)腳本，加入以下代碼
cc.Class({
extends: cc.Component,
properties: {
// 這個(gè)屬性引用了星星預(yù)制資源
starPrefab: {
default: null,
type: cc.Prefab
},
// 星星產(chǎn)生后消失時(shí)間的隨機(jī)范圍
maxStarDuration: 0,
minStarDuration: 0,
// 地面節(jié)點(diǎn)狮鸭，用于確定星星生成的高度
ground: {
default: null,
type: cc.Node
},
// player 節(jié)點(diǎn)合搅，用于獲取主角彈跳的高度，和控制主角行動(dòng)開(kāi)關(guān)
player: {
default: null,
type: cc.Node
},
scoreDisplay: {
default: null,
type: cc.Label
}
},
onLoad: function () {
// 獲取地平面的 y 軸坐標(biāo)
this.groundY = this.ground.y + this.ground.height/2;
// 生成一個(gè)新的星星
this.spawnNewStar();
this.score = 0;
},
gainScore: function () {
this.score += 1;
// 更新 scoreDisplay Label 的文字
this.scoreDisplay.string = 'Score: ' + this.score.toString();
},
spawnNewStar: function() {
// 使用給定的模板在場(chǎng)景中生成一個(gè)新節(jié)點(diǎn)
var newStar = cc.instantiate(this.starPrefab);
// 將新增的節(jié)點(diǎn)添加到 Canvas 節(jié)點(diǎn)下面
this.node.addChild(newStar);
// 為星星設(shè)置一個(gè)隨機(jī)位置
newStar.setPosition(this.getNewStarPosition());
newStar.getComponent('star').game = this;
},
getNewStarPosition: function () {
var randX = 0;
// 根據(jù)地平面位置和主角跳躍高度歧蕉，隨機(jī)得到一個(gè)星星的 y 坐標(biāo)
var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
// 根據(jù)屏幕寬度灾部，隨機(jī)得到一個(gè)星星 x 坐標(biāo)
var maxX = this.node.width/2;
randX = cc.randomMinus1To1() * maxX;
// 返回星星坐標(biāo)
return cc.p(randX, randY);
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});
從 資源管理器 中拖拽 assets/textures/star 資源到場(chǎng)景中，添加名叫 Star 的JavaScript腳本到assets/scripts/中惯退，并關(guān)聯(lián)腳本赌髓。
打開(kāi)star腳本，添加如下代碼
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
pickRadius:0,
},
// use this for initialization
onLoad: function () {
},
getPlayerDistance: function () {
// 根據(jù) player 節(jié)點(diǎn)位置判斷距離
var playerPos = this.game.player.getPosition();
// 根據(jù)兩點(diǎn)位置計(jì)算兩點(diǎn)之間距離
var dist = cc.pDistance(this.node.position, playerPos);
return dist;
},
onPicked: function() {
// 當(dāng)星星被收集時(shí)催跪，調(diào)用 Game 腳本中的接口锁蠕，生成一個(gè)新的星星
this.game.spawnNewStar();
this.game.gainScore();
// 然后銷毀當(dāng)前星星節(jié)
this.node.destroy();
},
update: function (dt) {
// 每幀判斷和主角之間的距離是否小于收集距離
if (this.getPlayerDistance() < this.pickRadius) {
// 調(diào)用收集行為
this.onPicked();
return;
}
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});
現(xiàn)在在star的屬性中設(shè)置pickRadius為60。
從層級(jí)管理器中將star節(jié)點(diǎn)拖拽到資源管理器中的assets文件夾下懊蒸，就生成了名叫star的 Prefab 資源荣倾。
從場(chǎng)景中刪除star節(jié)點(diǎn)。
選中Canvas節(jié)點(diǎn)后骑丸，拖拽腳本到 屬性檢查器舌仍，從資源管理器中拖拽star Prefab 資源到Game組件的Star Prefab屬性中，從層級(jí)編輯器中拖拽ground和Player 節(jié)點(diǎn)到組件中相同名字的屬性上通危。
接下來(lái)再加入計(jì)分機(jī)制铸豁，和上面的過(guò)程十分的類似，這里就略去不詳細(xì)寫(xiě)了菊碟，此時(shí)节芥，測(cè)試一下游戲的效果，已經(jīng)可以看到游戲大致效果框沟。
如果你有任何問(wèn)題藏古，可以查看官方的上手的教程，也可以點(diǎn)擊這里可以下載到此為止的工程：
鏈接: https://pan.baidu.com/s/1dFw3VSP 密碼: 7vgu
官方在接下來(lái)繼續(xù)進(jìn)行了游戲的完善忍燥，不過(guò)我不打算繼續(xù)完善下去了拧晕，接下來(lái)將關(guān)注對(duì)觸摸屏的支持
