閱讀896 返回首頁    go 阿裏雲 go 技術社區[雲棲]

CocosCreator零基礎製作遊戲《極限跳躍》

CocosCreator零基礎製作遊戲《極限跳躍》


製作遊戲開始場景


我們剛剛分析了《極限跳躍》這款遊戲，下麵我們開始製作第一個遊戲場景，也就是遊戲的開始場景。

首先，打開CocosCreator，新建HelloWorld項目。選擇項目路徑，輸入項目名稱“jxty”，點擊新建項目。 

QQ20160529-1@2x.png 

新建好項目，項目會自動打開。這裏大家可以看下官方的文檔，了解 下編輯器的功能和用法。

QQ20160529-3@2x.png

資源管理器裏顯示了項目資源文件夾（assets）中的所有資源。這裏會以樹狀結構顯示文件夾並自動同步在操作係統中對項目資源文件夾內容的修改。您可以將文件從項目外麵直接拖拽進來，或使用菜單導入資源。


場景編輯器是用來展示和編輯場景中可視內容的工作區域。所見即所得的場景搭建工作都依靠場景編輯器中的顯示來完成。


層級管理器用樹狀列表的形式展示場景中的所有節點和他們的層級關係，所有在場景編輯器中看到的內容都可以在層級管理器中找到對應的節點條目，在編輯場景時這兩個麵板的內容會同步顯示，一般我們也會同時使用這兩個麵板來搭建場景。


屬性檢查器是我們查看並編輯當前選中節點和組件屬性的工作區域，這個麵板會以最適合的形式展示和編輯來自腳本定義的屬性數據


工具欄上包括了場景編輯工具和預覽遊戲時的操作按鈕，最右邊顯示了遠程測試和調試時使用訪問地址，以及連接中的設備數。


 

首先我們點擊工具欄上的預覽按鈕來查看當前場景的顯示。 

QQ20160529-4@2x.png

QQ20160529-5@2x.png

簡單的熟悉下編輯器怎麼用的，下麵開始我們的主題。。


一、創建場景 


在資源管理器中，我們選中Scene文件夾，點擊鼠標右鍵，選擇［新建］＝》［Scene］，就會創建一個新的場景，New Scene。我們右鍵對它重命名為WelcomeScene。如圖。

QQ20160529-6@2x.png


下麵我們把遊戲用到的資源全部放倒資源管理器中的Texture文件夾中。雙擊 WelcomeScene打開場景界麵。新建的場景默認都是空的，這裏我們調整場景大小為480x800像素大小的豎屏遊戲。

QQ20160529-7@2x.png


二、把背景素材拖進層級管理器，注意節點的層級關係，然後調節屬性即可。

QQ20160529-8@2x.png


使用相同的方法，把我們主場景的logo，還有底部的邊欄也放進場景。

開始按鈕我們使用UI節點來創建，右鍵點擊Canvas，創建節點＝》創建UI節點＝》Button(按鈕)。

創建好後，修改節點名稱為kaishiyouxi，並刪除子節點label。然後把對應狀態資源拖進對應的狀態即可。如圖所示。

QQ20160529-23@2x.png

效果是不是還可以啊。是不是大家感覺很簡單啊。。接著繼續學習下一個場景。


製作遊戲主場景


剛剛我們製作了遊戲的開始場景，現在我們來製作遊戲的主場景。還是同樣的方法，新建一個名為MainScene的場景，雙擊打開，修改場景的大小為480x800。


1、首先貼入遊戲背景，在此我們使用了2張背景圖，隻需要把背景拖進層級管理器2次，修改名稱為bg1，bg2即可，背景2接著背景1點上方設置位置。

2、擺放玩家主角在屏幕合適位置

3、添加金幣按鈕在屏幕上方

4、右鍵Canvas畫布＝》創建節點＝》創建渲染節點＝》Label文字。修改節點名為score。String屬性值為0。QQ20160529-10@2x.png

5、左上角加上聲音圖標

到此我們主場景大概完成了，下麵來預覽下。

QQ20160529-11@2x.png


添加遊戲主場景控製腳本


前麵簡單的實現了主界麵的UI設置，現在我們開始製作遊戲的控製腳本。

在資源管理器的Script文件夾中，點擊右鍵新建javascript文件，命名為GAME。

雙擊打開GAME腳本，在properties: 中添加屬性代碼。

01 //GAME.js
02  
03 cc.Class({
04     extends: cc.Component,
05     properties: {
06      
07     // player 節點，用於獲取主角彈跳的高度，和控製主角行動開關
08         player: {
09             default: null,
10             type: cc.Node
11         },
12         // bgsprite1 節點，用於背景移動
13         bgsprite1: {
14             default: null,
15             type: cc.Node
16         },
17         // bgsprite2 節點，用於背景移動
18         bgsprite2: {
19             default: null,
20             type: cc.Node
21         },
22         // score label 的引用
23         scoreDisplay: {
24             default: null,
25             type: cc.Label
26         },
27       },

保存好後，我們雙擊MainScene打開場景，點擊Canvas，在右側的屬性檢查器最底部，點擊［添加組件］＝》［添加用戶腳本組件］然後選擇我們剛剛創建的腳本GAME.js。

添加好後就可以在屬性檢查器看到我們的屬性組件來，然後我們把場景裏的節點拖進對應的屬性框即可實現節點綁定。不懂得可以多看看官方文檔。

QQ20160529-12@2x.png

這樣我門就可以在GAME腳本裏來操作節點了。

二、創建HeroPlayer腳本用來操作玩家主角

01 //HeroPlayer.js
02  
03 cc.Class({
04     extends: cc.Component,
05     properties: {
06         //主角跳躍高度
07         jumpHeight: 0,
08         //主角跳躍持續時間
09         jumpTimes: 0,
10         //掉落速度
11         maxMoveSpeed: 0,
12     },
13     //跳躍
14     setJumpUpAction: function(){
15         // 跳躍上升
16         var jumpUp = cc.moveBy(this.jumpTimes, cc.p(0, this.jumpHeight));
17         //jumpUp.reverse();
18         return jumpUp;
19     },
20     //掉落
21     setJumpDownAction: function(){
22         //下落
23         var jumpDown = cc.moveBy(this.jumpTimes, cc.p(0, - this.maxMoveSpeed));
24         return jumpDown;
25     },
26     setJumpRunAction: function(){
27         // 初始化跳躍動作
28         this.jumpAction = this.setJumpUpAction();
29         //掉落動作
30         this.maxMoveSpeed = this.setJumpDownAction();
31         //包裝動作
32         var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed);
33         this.node.runAction(seq);
34     },
35     //玩家不操作時，角色進行下墜
36     heroDownMove: function(){
37         //下落
38         var heroDown = cc.moveBy(0.8, cc.p(0, - 5));
39         return heroDown;
40     },
41     // use this for initialization
42     onLoad: function () {
43         
44         this.setJumpRunAction();
45          
46     },
47  
48     // called every frame, uncomment this function to activate update callback
49     update: function (dt) {
50         this.node.runAction(this.heroDownMove());//精靈移動
51     }
52      
53      
54 });

角色有2種狀態，一種是玩家點擊屏幕會實現角色的跳躍，第二種就是角色會受到引力會自動下落。我們在update來實現自動下落。添加好方法後，我門在層級管理器中點擊hero節點。然後在右側屬性檢查器中綁定腳本。

QQ20160529-13@2x.png

我門可以在裏麵初始化值。跳躍高度值，跳躍持續時間，掉落速度等。

腳本裏主要實現了跳躍動作，掉落動作等。

然後回到我們的遊戲主腳本也就是GAME腳本。添加觸摸事件監聽，實現監聽觸摸來調用主角的跳躍動作。

首先在頂部添加腳本引用，然後創建事件監聽的方法。

01 //GAME.js
02 var HeroPlayer = require("HeroPlayer");
03 //－－－－－
04 //事件監聽
05     setEventControl: function(){
06             var self = this;
07         var hero = self.player.getComponent(HeroPlayer);//角色綁定控件
08       
09        cc.eventManager.addListener({
10             event: cc.EventListener.TOUCH_ONE_BY_ONE,
11             swallowTouches: true,
12               // 設置是否吞沒事件，在 onTouchBegan 方法返回 true 時吞沒
13             onTouchBegan: function (touch, event) {
14                     //實現 onTouchBegan 事件回調函數
15                 var target = event.getCurrentTarget();
16                     // 獲取事件所綁定的 target
17                  
18              var locationInNode = target.convertToNodeSpace(touch.getLocation());
19              cc.log("當前點擊坐標"+locationInNode);
20                  
21                 hero.node.runAction(hero.setJumpUpAction());//精靈移動
22                 //cc.log("跳躍：－－－－－－－－");
23                  
24                  
25                  
26                 return true;
27             },
28             onTouchMoved: function (touch, event) {            // 觸摸移動時觸發
29                  
30             },
31             onTouchEnded: function (touch, event) {            // 點擊事件結束處理
32                 
33                 //  cc.log("跳躍後角色坐標：" + self.player.getPosition() );
34             }
35          
36         }, self.node)
37     },

然後在onload方法實現初始化調用。

1  onLoad: function () {
2         //觸摸監聽
3         this.setEventControl();
4         // 初始化計分
5         this.score = 0;
6          
7     },

我們可以來運行下，看下效果。

QQ20160529-14@2x.png

製作遊戲主場景背景滾動


剛剛我們實現了玩家的一些功能，測試了下發現我們的玩家跳躍幾次後，就會超出屏幕，這樣體驗很差，那下麵我們來實現場景背景的滾動作為參照物來實現玩家移動。也就是說玩家隻需要小範圍的移動就行了，剩下的交給背景的移動來給用戶帶來玩家在移動的錯覺，遊戲都是這樣實現的。


新建腳本BgMove，並實現移動方法，參數為移動的距離。實現代碼：

01 //BgMove.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05         // foo: {
06         //    default: null,
07         //    url: cc.Texture2D,  // optional, default is typeof default
08         //    serializable: true, // optional, default is true
09         //    visible: true,      // optional, default is true
10         //    displayName: 'Foo', // optional
11         //    readonly: false,    // optional, default is false
12         // },
13         // ...
14     },
15     //背景移動
16     setMoveAction: function(height){
17         // 移動距離
18         var moveHeight = height;
19         var moveAction = cc.moveBy(this.jumpTimes, cc.p(0, - moveHeight));
20         return moveAction;
21     },
22     // use this for initialization
23     onLoad: function () {
24     },
25     // called every frame, uncomment this function to activate update callback
26     // update: function (dt) {
27     // },
28 });

創建好腳本後，我們在場景中給節點bg1、bg2綁定此腳本。

QQ20160529-15@2x.png


綁定後，我們在打開GAME.js腳本，在頂部引用此腳本。

QQ20160529-16@2x.png

然後在事件監聽方法，觸摸結束的方法裏添加背景移動的監聽。

01  //事件監聽
02     setEventControl: function(){
03         var self = this;
04         var hero = self.player.getComponent(HeroPlayer);//角色綁定控件
05         var bg1 = self.bgsprite1.getComponent(MoveBg);//綁定背景控件
06         var bg2 = self.bgsprite2.getComponent(MoveBg);//綁定背景控件
07 //.....
08 //...省略部分代碼.
09 //.....
10 onTouchEnded: function (touch, event) {            // 點擊事件結束處理
11                 if(self.player.getPositionY() > 0){
12                      
13                     var height = self.player.getPositionY();//背景需要移動的高度
14                     self.player.setPositionY(height/2);//設置精靈的高度位置
15                      
16                     bg1.node.runAction(bg1.setMoveAction(height));//背景實現向下滾動
17                     bg2.node.runAction(bg2.setMoveAction(height));//背景實現向下滾動
18                      
19                 }
20  //...省略部分代碼.

這裏分析下代碼部分，首先我們創建場景時候，場景Canvas的錨點為(0.5，0.5)，也就是屏幕的中心點坐標為0,0。其所有子節點的坐標都是相對於場景來布局，所以說我們的主角布局時候放在屏幕的中下方位置，一開始的Y坐標為負數。每次移動Y坐標會增加，當Y坐標增加超過中心點坐標我們需要進行背景移動，而背景移動的距離則是我們的主角Y坐標值減去中心點的Y坐標0，也就是主角Y坐標值本身。

所以每次觸摸結束，我們對主角的Y坐標進行判斷，如果大於0，說明背景需要移動，移動距離為主角Y坐標值，然後我門調用背景1和背景2的移動方法，參數為主角的Y坐標。

背景移動時候，我們同時需要修正主角的坐標，設置主角的坐標為超過中心點的一半，這樣主角不論怎麼移動都隻能在屏幕內移動。

下麵我門來運行預覽，測試下。。

beijingyidong.gif

是不是可以實現背景滾動了，大家最後發現了一個問題，背景移動完畢了，沒有背景會出現黑色的區域。。

下麵我們要實現一個方法，來對背景進行計算。我們現在是兩個背景進行拚接的。我們需要來判斷哪個背景已經移除屏幕，移除屏幕後改變其位置，讓它Y坐標變成正在移動的那個背景的上邊，這樣來實現無縫拚接。這樣才是無限滾動的背景。

下麵我們繼續在GAME腳本添加新的方法來實現計算，下麵貼代碼。

01 //GAME.js
02 //...省略代碼
03  //如果背景1的坐標移出屏幕開始設置新的坐標
04     setBgMoveCreate: function(){
05         //如果背景1的坐標移出屏幕開始設置新的坐標
06         if(this.bgsprite1.getPositionY()  < -500 ){
07             this.bgsprite2.setPositionY(this.bgsprite1.getPositionY()+this.bgsprite1.getContentSize().height);
08         }
09         //如果背景2的坐標移出屏幕開始設置新的坐標
10         if(this.bgsprite2.getPositionY() < -500 ){
11             this.bgsprite1.setPositionY(this.bgsprite2.getPositionY()+this.bgsprite2.getContentSize().height);
12         }
13     },
14     //實現update方法
15    update: function (dt) {
16              
17         this.setBgMoveCreate();//檢測背景
18          
19         },

我們在update裏不停的檢測背景移動事件來解決黑色問題。下麵來再次測試下。

beijingyidong22.gif


到此我們已經實現了 玩家角色的移動，背景的滾動了。。遊戲完成了三分之一了。。感覺還可以吧。繼續。。


製作遊戲障礙物實現碰撞檢測


前麵我們實現了背景和主角的操作，下麵我們開始添加遊戲的障礙物以及碰撞檢測的功能。

一、製作障礙物Prefab（預製）

Prefab（預製）是cocoscreator官方文檔提出的，是為了解決需要重複使用的節點問題。

如何製作預製體prefab呢？具體可以參照官方文檔，這裏簡單的說下，就是在場景中編輯好節點後，直接將節點從 層級管理器 拖到 資源管理器 中即可。

我們來看下極限跳躍的遊戲截圖分析下。。

QQ20160529-17@2x.png


遊戲中障礙物我們分為2種，一個是向左移動的，一個是向右移動的，這裏我就簡單省事了，直接創建了2個預製體，每個預製體實現自己的腳本。可以集成在一起的。

我們先製作左邊的障礙物，首先把障礙物素材拖進層級管理器取名zhangaiwu1。然後我們來實現並製作左邊的腳本，創建腳本guawuleft。實現代碼。

01 //guaiwuleft.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05          
06         times: 0,//控製時間
07          
08         },
09     },
10     onLoad: function () {
11        
12         this.moveRight();
13     },
14 //左右移動
15     moveRight: function(){
16          
17         var seq = cc.repeatForever(
18              cc.sequence(
19                  cc.moveBy(this.times, cc.p(240, 0)), cc.moveBy(this.times, cc.p(-240,0))
20              ));
21         this.node.runAction(seq);
22     },

腳本寫好了，我們對節點進行綁定。

QQ20160529-18@2x.png

綁定好後，我們把層級管理器中的節點zhangaiwu1拖進我們資源管理器的Texture文件夾中，成功後我們的層級管理器中的節點就會變成藍色，同時我們會在資源管理器中得到一個預製體文件zhangaiwu1，我們這裏改成zhangaiwuleft，方便和辨認。

QQ20160529-19@2x.png


預製體文件zhangaiwu1，我們這裏改成zhangaiwuleft。然後刪除層級管理器的zhangaiwu1節點。使用同樣的方法，我們創建腳本zhangaiwuright，並製作預製體zhangaiwuright。

01 //guawuright.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05          
06         times: 0,//控製時間
07          
08         },
09     },
10     onLoad: function () {
11        
12         this.moveRight();
13     },
14     //左右移動
15     moveRight: function(){
16          
17          
18         var seq = cc.repeatForever(
19              cc.sequence(
20                  cc.moveBy(this.times, cc.p(-240, 0)), cc.moveBy(this.times,cc.p(240,0))
21              ));
22        this.node.runAction(seq);
23     },

這樣我們就製作好了2個預製體，分別為zhangaiwuleft和 zhangaiwuright。可以在資源管理器中看到。

QQ20160529-20@2x.png

製作好了2個障礙物，我們開始在場景中添加我們的障礙物了。

分析下遊戲我們可以發現障礙物是可以根據遊戲背景移動的，所以我們要把障礙物添加到背景上。

我們開始製作背景bg1的障礙物，首先把zhangaiwuleft和zhangaiwuright兩個預製體拖到層級管理器bg1節點，使其成為bg1的子節點。布局時候把zhangaiwuleft放到屏幕左邊，zhangaiwuright放到右邊，調整位置。同樣的方法給bg2添加障礙物。。如圖：

QQ20160529-21@2x.png

通過我們給不同高度的障礙物設置不同的移動時間，我們的遊戲看起來更好玩，來運行測試下效果。

zhangaiwu.gif

好了。我們的遊戲看起來還不錯吧，下麵我們來做碰撞檢測，也就是說如果玩家和障礙物碰到了，那麼我們的角色就會死掉，遊戲就會結束。結束場景等會我們在做，現在我們先做碰撞檢測，如果碰到障礙物我們停止觸摸來達到玩家不可操作的目的。

打開guaiwuleft腳本，來給左邊的障礙物添加碰撞檢測的事件。

01 //guaiwuleft.js
02 var hero2 = require("HeroPlayer");//引用玩家的操作腳本
03 //....省略..
04 //當前節點世界坐標係下的範圍包圍盒
05  noteBox: function(){
06          
07         return this.node.getBoundingBoxToWorld();
08         
09     },  
10      
11     // called every frame, uncomment this function to activate update callback
12     update: function (dt) {
13          
14         var _label = cc.find("Canvas/hero").getComponent(hero2);
15          
16       //障礙物碰撞框
17     if(cc.rectIntersectsRect(_label.node.getBoundingBoxToWorld(), this.noteBox())){
18              
19            cc.eventManager.removeAllListeners();//移除所有事件監聽
20                  
21             }
22          
23     },

同樣的方法，我們在guaiwuright中添加碰撞事件。天下代碼一大抄，直接抄過去就行了。

我們在此運行檢測下。。

pengzhuanjiance.gif

我們的角色被障礙物碰到，就死掉了，然後就會屏蔽遊戲的觸摸事件，玩家角色開始掉落。當角色掉落到屏幕底部時候遊戲結束。會切換到結束場景。這裏大家看到角色掉沒了，不要在意這些細節。。我們接下來開始製作結束場景。


製作遊戲結束場景並實現場景切換


前麵我們實現了遊戲的碰撞檢測，碰到障礙物我們的角色就會死掉並開始掉落，角色掉落到屏幕底部時候遊戲結束，並跳到結束場景。

我們在資源管理器新建GameOver場景。雙擊打開場景，調整大小為480x800，添加界麵需要的節點。如圖。

QQ20160529-22@2x.png

這樣我們的結束場景就製作好了。可以預覽下。

製作好了，結束場景我們就需要把我們遊戲的三個場景關聯起來了。

首先我們雙擊打開我們的第一個場景WelcomeScene。然後在資源管理器創建playGo.js腳本。代碼如下：

01 //playGo.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05         // foo: {
06         //    default: null,
07         //    url: cc.Texture2D,  // optional, default is typeof default
08         //    serializable: true, // optional, default is true
09         //    visible: true,      // optional, default is true
10         //    displayName: 'Foo', // optional
11         //    readonly: false,    // optional, default is false
12         // },
13         // ...
14     },
15     // use this for initialization
16     onLoad: function () {
17     },
18     //切換場景
19     toScene: function(){
20         cc.director.loadScene("MainScene")
21     }
22     // called every frame, uncomment this function to activate update callback
23     // update: function (dt) {
24     // },
25 });


這個腳本就實現一個功能，就是切換場景到MainScene場景，也就是第二個場景我們遊戲的主場景。

下麵我們為開始按鈕綁定腳本事件。

QQ2016052<p style=最後更新：2017-04-22 19:32:35

  上一篇：go C++之那些年踩過的坑
  下一篇：go Test2