大家通過學(xué)習(xí)官方快速上手教程，還沒學(xué)過的小伙伴看這里：
https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html
如果順利完成的話滞造，已經(jīng)實(shí)現(xiàn)了一款有核心玩法诺核、激勵(lì)機(jī)制篮昧、失敗機(jī)制末秃、有音效的合格游戲骚烧。
當(dāng)然看到Cocos creator 的官方教程最后血筑，官方的小伙伴給在總結(jié)中給大家留下了一些課后練習(xí)題和課后練習(xí)題的標(biāo)準(zhǔn)答案，下載地址:
https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/polished_project.zip
有些小伙伴可能不能訪問GitHub或者下載不成功消恍，可以在給我留言岂昭，我把它搬運(yùn)到國內(nèi)地址。
其中有一些內(nèi)容在快速上手教程中完全沒有提及的內(nèi)容狠怨，比如給節(jié)點(diǎn)設(shè)置點(diǎn)擊事件约啊，制作動(dòng)畫預(yù)制資源等。雖然有了答案佣赖，但是不知道怎么做恰矩，在這里我結(jié)合cocos creator的官方答案進(jìn)行步驟解答，幫助大家更輕松的上手cocos creator憎蛤。
參考官方的完整項(xiàng)目源碼外傅，我為小伙伴們整理一個(gè)僅保留完整的素材資源纪吮、移除了習(xí)題的答案部分、的初始項(xiàng)目萎胰，方便大家練習(xí)碾盟。記得雙擊資源管理器中的game文件打開場景。
下載地址：
鏈接：https://share.weiyun.com/5Cvfn85?
密碼：mozp23
以下是官方的課后練習(xí)題技竟，在下面按序號(hào)逐個(gè)進(jìn)行解答：
1冰肴、加入簡單的開始菜單界面，在游戲運(yùn)行的一開始顯示開始按鈕榔组，點(diǎn)擊按鈕后才會(huì)開始游戲
思路：通過看題目嚼沿，添加一個(gè)開始按鈕，根據(jù)前面的學(xué)習(xí)瓷患，大家直接把按鈕的素材拖到層級(jí)管理器中創(chuàng)建一個(gè)節(jié)點(diǎn)就成功了骡尽，但是點(diǎn)擊按鈕執(zhí)行動(dòng)作，這里需要使用到cocos creator的Button 組件擅编。
實(shí)現(xiàn)步驟：
第一步：在場景里面創(chuàng)建一個(gè)btn_play的節(jié)點(diǎn)
第二步：創(chuàng)建一個(gè)Button組件
第三步：配置剛剛創(chuàng)建的Button組件攀细，設(shè)置觸發(fā)點(diǎn)擊事件的節(jié)點(diǎn)和點(diǎn)擊后執(zhí)行的腳本方法。
2爱态、為游戲失敗加入簡單的菜單界面谭贪，游戲失敗后點(diǎn)擊按鈕才會(huì)重新開始。
思路：和添加一個(gè)開始按鈕的方式是類似的锦担，只是說因?yàn)楣俜經(jīng)]有提供一個(gè)重新開始的素材圖俭识，因此這里我教小伙伴們用Label節(jié)點(diǎn)配合Button組件實(shí)現(xiàn)點(diǎn)擊重新開始游戲。
實(shí)現(xiàn)步驟：
第一步洞渔，創(chuàng)建一個(gè)Label節(jié)點(diǎn)用于配置文字提示
第二步套媚，重命名上一步創(chuàng)建的Label節(jié)點(diǎn)，一個(gè)好的名字非常重要磁椒，方便自己和一起協(xié)作的伙伴識(shí)別堤瘤。
第三步，創(chuàng)建Button組件并配置點(diǎn)擊事件
3浆熔、限制主角的移動(dòng)不能超過視窗邊界
思路：先獲取視窗的邊界本辐，就是畫布的寬度。然后在Player腳本中医增，更新主角的移動(dòng)的邏輯位置添加判斷即可慎皱。
4、為主角的跳躍動(dòng)作加入更細(xì)膩的動(dòng)畫表現(xiàn)
思路：其實(shí)就是加入形變邏輯叶骨，不過老實(shí)說茫多，在手機(jī)上真看不出增加多少表現(xiàn)分。
```
//設(shè)置跳躍動(dòng)作? ?
??? setJumpAction(){
??????? //上升varjumpUp=cc.moveBy(this.jumpDuration,cc.v2(0,this.jumpHeight)).easing(cc.easeCubicActionOut());
??????? //下落
??????? varjumpDown=cc.moveBy(this.jumpDuration,cc.v2(0,-this.jumpHeight)).easing(cc.easeCubicActionIn());
??????? //音效回調(diào)
??????? varxCallback=cc.callFunc(this.playJumpSound,this);
???????? //加入形變,更細(xì)膩的動(dòng)畫表現(xiàn)
??????? //壓癟
??????? varsquash=cc.scaleTo(this.squashDuration,1,0.6);
??????? //拉升
??????? varstretch=cc.scaleTo(this.squashDuration,1,1.2);
??????? //恢復(fù)正常
??? ????varsquashBack=cc.scaleTo(this.squashDuration,1,1);
????? //不斷重復(fù)
????? returncc.repeatForever(cc.sequence(squash,stretch,jumpUp,squashBack,jumpDown,xCallback));
??? },
```
5邓萨、為星星消失的狀態(tài)加入計(jì)時(shí)進(jìn)度條
思路：很尬尷呀地梨，雖然官方文檔中有表述：以上這些方向都得到改善的游戲版本可以下載 進(jìn)化版項(xiàng)目 來參考和學(xué)習(xí)，這里就不再贅述了缔恳。但是實(shí)際上宝剖，在進(jìn)化版項(xiàng)目中并未看到計(jì)時(shí)進(jìn)度條的素材或相關(guān)邏輯。所以星月爸爸在這里大膽的弄一個(gè)自己理解的計(jì)時(shí)進(jìn)度條歉甚。點(diǎn)擊查看万细。
6、收集星星時(shí)加入更華麗的效果
思路：華麗的效果就是說要有動(dòng)畫特效了纸泄。因此這里講的就是如果實(shí)現(xiàn)一個(gè)簡單的得分特效赖钞。這個(gè)特效在游戲中經(jīng)常出現(xiàn)，很典型一個(gè)特效聘裁，官方的實(shí)現(xiàn)也很值得學(xué)習(xí)雪营，內(nèi)容較多，星月爸爸盡量講透徹衡便，讓小伙伴們一次掌握献起，終身受益。
實(shí)現(xiàn)步驟：
第一步镣陕，為了更方便看效果谴餐，我們在Cocos Creator界面按下Ctrl+N,新建一個(gè)場景，如果遇到詢問是否保存game場景呆抑，選擇保存即可岂嗓。在新鍵的場景中，我們在鼠標(biāo)右擊層級(jí)管理中的Canvas創(chuàng)建一個(gè)用來做動(dòng)畫預(yù)制資源的空節(jié)點(diǎn)scoreFX,并在scoreFX下面創(chuàng)建一個(gè)承載動(dòng)畫的空節(jié)點(diǎn)animRoot鹊碍。
第二步厌殉，添加計(jì)分動(dòng)畫部分的score，設(shè)置文本內(nèi)容為：+1侈咕，代表每次摘去一個(gè)星星得1分年枕，接著設(shè)置字體顏色:#F8DD4D，并設(shè)置字體乎完。
第三步熏兄，編輯score的位移動(dòng)畫，通過修改每一幀的position屬性實(shí)現(xiàn)動(dòng)畫效果树姨，通過cocos creator的動(dòng)畫編輯器摩桶，實(shí)現(xiàn)非常簡單。
<1>在動(dòng)畫編輯器中帽揪，選中score硝清，然后為其添加position屬性
<2>插入position屬性的第一幀
<3>插入position屬性的第二幀，并修改該幀的position屬性的值转晰。
<4>經(jīng)過上面3步芦拿，我們已經(jīng)完成了score節(jié)點(diǎn)位移動(dòng)畫士飒，現(xiàn)在是看成績的時(shí)候了，點(diǎn)擊播放按鈕蔗崎，讓我們預(yù)覽動(dòng)畫效果酵幕。
第四步，score的得分提示：+1缓苛，總不能一直顯示在游戲界面芳撒，隨著得分越多，會(huì)出現(xiàn)許多+1的文字小提示未桥，它們霸住了玩家的屏幕笔刹，因此，我們?yōu)閟core設(shè)置一個(gè)透明度動(dòng)畫冬耿，讓它逐漸透明至看不見舌菜。制作方法和添加position屬性一致。
<1>為score添加透明度屬性：opacity,然后在0.15秒處插入第一幀亦镶。
<2>在0.19秒處插入第二幀酷师，設(shè)置opactity值為：51，這是完全透明的過渡幀染乌，讓動(dòng)畫看起來自然山孔。
<3>在0.20秒處，為opactity屬性插入最后一幀荷憋，設(shè)置opacity值為0台颠，讓score節(jié)點(diǎn)完全透明。
第五步勒庄，score得分的文字提示動(dòng)畫部分全部完成了串前。但是至此，還不能稱得上是一個(gè)華麗的效果实蔽，為了實(shí)現(xiàn)這個(gè)效果荡碾，官方為我們提供了爆炸動(dòng)畫素材，就是fx文件夾里面的圖片局装。
我們要用它們實(shí)現(xiàn)一個(gè)華麗的爆炸特效坛吁。
<1>首先在animRoot下面創(chuàng)建一個(gè)空節(jié)點(diǎn)：pop，用來承載我們的爆炸動(dòng)畫铐尚。接著添加Sprite組件拨脉，用來裝載動(dòng)畫文件。
<2>接著打開動(dòng)畫編輯器宣增，選中pop節(jié)點(diǎn)玫膀，添加cc.Sprite.spriteFrame屬性
<3>在0秒處，插入關(guān)鍵幀爹脾，把首張爆炸圖fx_coinxiaosh_00拖入Sprite組件的Sprite Frame屬性帖旨。
<4> 我們用同樣的方法箕昭，在0.03秒處插入關(guān)鍵幀，把fx_coinxiaosh_01文件拖到Sprite Frame解阅；在0.04秒處插入關(guān)鍵幀落竹，把fx_coinxiaosh_02文件拖到Sprite Frame；在0.05秒處插入關(guān)鍵幀瓮钥，把fx_coinxiaosh_03文件拖到Sprite Frame；在0.06秒處插入關(guān)鍵幀烹吵，把fx_coinxiaosh_04文件拖到Sprite Frame碉熄；在0.07秒處插入關(guān)鍵幀，把fx_coinxiaosh_05文件拖到Sprite Frame肋拔；
<5>爆炸動(dòng)畫已經(jīng)完成了锈津，小伙伴們可以點(diǎn)擊播放按鈕，預(yù)覽動(dòng)畫效果凉蜂。是不是感覺搜的一樣琼梆，動(dòng)畫就播放完了，完全沒看清楚窿吩，如果想要?jiǎng)赢嫴シ怕稽c(diǎn)茎杂，我們只需要修改Sample值，把60改成25試試纫雁。最后爆炸播放完了煌往，當(dāng)然也要隱藏起來，所以轧邪，我們又要用到透明度opacity屬性刽脖，把動(dòng)畫設(shè)置為完全透明。我們在爆炸動(dòng)畫播完的下一幀忌愚，也就是0.08秒處曲管，插入opactity屬性第一幀，此時(shí)opacity值默認(rèn)是255硕糊。然后再0.10秒處院水，插入第二幀，設(shè)置opactity值為0简十，讓pop節(jié)點(diǎn)完全透明衙耕。
第六步，動(dòng)畫完成了勺远，我們現(xiàn)在把動(dòng)畫特效變成預(yù)制資源供后續(xù)使用橙喘。
第七步，我們回到game場景胶逢，雙擊資源管理中的game文件厅瞎，此時(shí)提示：Untitled場景已經(jīng)修改饰潜，是否保存？因?yàn)槭怯脕碇谱鲃?dòng)畫特效的臨時(shí)場景和簸，因此我們選擇：不要保存∨砦恚現(xiàn)在如何使用剛剛制作的華麗爆炸動(dòng)畫特效，需要配置一個(gè)簡單的播放腳本锁保，首先再資源管理器中雙擊剛剛創(chuàng)建的動(dòng)畫預(yù)制資源文件：scoreFX薯酝，把資源管理器中的ScoreFX腳本拖到層級(jí)管理scoreFX節(jié)點(diǎn)，然后把AnimRoot節(jié)點(diǎn)拖到scoreFX屬性的anim窗口爽柒。最后依次點(diǎn)擊場景編輯器中的保存按鈕和關(guān)閉按鈕吴菠。
ScoreFX.js
```
cc.Class({
??? extends: cc.Component,
??? properties: {
??????? anim: {
??????????? default: null,
??????????? type: cc.Animation
??????? }
??? },
??? play(){
???????this.anim.play('score_pop');
??? }
});
```
第八步，打開Game.js腳本浩村，在gainScore方法中添加如下做葵，這樣當(dāng)收集到星星的時(shí)候，就會(huì)出現(xiàn)華麗的爆炸特效咯心墅。
7酿矢、為觸屏設(shè)備加入輸入控制
思路：現(xiàn)在觸摸屏手機(jī)是主流機(jī)型，因此觸摸控制游戲是現(xiàn)在大部分游戲的必備功能≡踉铮現(xiàn)在爆火的全民漂移3d就是一款觸摸操作賽車的合成向游戲瘫筐。因此這段腳本邏輯，小伙伴們完全可以當(dāng)作標(biāo)配記下铐姚，以后在自己的游戲中使用严肪。
```
?onLoad() {
???????//禁用節(jié)點(diǎn)
???????this.enabled=false;
???????this.xSpeed=0;
??????//添加鍵盤監(jiān)聽
?????cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this);
?????cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this);
????????//初始化觸摸事件監(jiān)聽
???????var touchReceiver = cc.Canvas.instance.node;
???????touchReceiver.on('touchstart', this.onTouchStart, this);
???????touchReceiver.on('touchend', this.onTouchEnd, this);
???},
? ?//觸摸開始
????onTouchStart (event) {
???????//獲取觸摸點(diǎn)位置
???????var touchLoc =event.getLocation();
???????//根據(jù)觸摸點(diǎn)的x坐標(biāo)判斷位于屏幕左側(cè)還是屏幕右側(cè)
???????if (touchLoc.x >= cc.winSize.width/2) {
???????????this.accLeft = false;
???????????this.accRight = true;
???????} else {
???????????this.accLeft = true;
???????????this.accRight = false;
???????}
???},
???//觸摸結(jié)束
???onTouchEnd (event) {
???????this.accLeft = false;
???????this.accRight = false;
???},
```
