JS開發HTML5遊戲《悠悠考拉》（一）

 

悠悠考拉是一款好玩並且又考驗判斷與反應能力的遊戲，讓咱們一塊兒來看看經過開源免費的青瓷引擎是如何來實現這款遊戲。

                                              （點擊圖片可進去試玩）

源代碼與資源下載

本文共有三部份內容，本篇文章爲第一部分，主要內容以下：

一、遊戲功能分析

二、遊戲主體模塊的設計

 

1、遊戲功能分析

根據遊戲設定，解析出遊戲的主要功能，分解成每一個功能模塊，而後制訂每一個功能模塊代碼結構，以下圖所示：

 

2、遊戲主體模塊的設計

2.1 考拉

從遊戲最終的界面效果咱們可知該遊戲的主體模塊爲考拉、藤條、柱子。下面分別介紹每一個主體模塊：

考拉：在悠悠考拉遊戲中，咱們能夠看到考拉有走路、拿鞦韆、放手、掉落、死亡等動做，這些動做均可以使用引擎的幀動畫完成，這裏不一一講述每一個動做的製做方法，只以考拉的"走路"動做做爲講解，其他動做都相似。首先，咱們須要將美術提供的美術資源添加到引擎中，在引擎界面的atlas文件夾新建一個文件夾取名koala@atlas，後綴名爲@atlas的含義是將打包的圖集放入到atlas文件夾中，將考拉圖片資源拖入到koala@atlas文件夾中，以下所示：

右鍵單擊koala@atlas選擇"Repack Texture Atlases"打包圖集，以下：

打包圖集成功後，咱們能夠在atlas文件夾下看到koala.bin文件，以下所示：

其他遊戲中的圖集資源的添加與打包方法相似，更多的關於圖集打包信息可查看圖集。此時，咱們能夠製做考拉幀動畫，我以考拉走路動做爲例：前面咱們已經把koala@atlas打包成圖集了，製做幀動畫須要用到裏面的圖片資源。方法是首先點擊"Assets/atlas文件夾"，點擊"向右三角形"，以下圖所示：

點擊圖集中的walk_1.png圖片，此時右邊Inspector面板出現以下信息，以下圖所示：

點擊"Edit Frame Animation"，此時進入幀動畫編輯界面，以下圖：

輸入動做名稱，幀率，是否循環播放，並添加每幀的圖片。將圖集中的walk_1-walk_4圖片依次拖入到幀動畫表中，點擊"Save"保存即完成幀動畫製做，以下圖所示：

咱們還能夠在預覽框中看實際效果圖，下面是咱們剛作好的走路幀動畫，以下：

更多製做幀動畫的信息可查看《幀動畫》。

 

2.2 藤條

藤條：在悠悠考拉遊戲中，咱們能夠看到當考拉抓住藤條時，考拉就跟着藤條作鐘擺運動。藤條作鐘擺運動的實現可使用引擎提供TweenRotation動畫，具體作法是首先咱們先在引擎編輯界面的Hierarchy建立一個Empty Node節點取名swing，而後再swing節點下建立一個Image節點，該節點用於顯示藤條，此時咱們就須要在swing節點上掛載一個TweenRotation動畫以實現藤條的鐘擺運動：首先在引擎編輯器的最右邊Inspector面板點擊"add Component"(注意：引擎編輯界面有中英文編輯界面，該篇文章使用的是英文編輯界面)，以下圖：

點擊上圖中的Tween按鈕，出現以下界面：

選擇上圖中的TweenRotation即完成TweenRotation組件的掛載，掛載完成後的界面以下：

咱們想要藤條的效果是擺動的，並且是有加速度的。這些能夠經過設置TweenRotation組件而實現，首先咱們設置from值，該值表示從什麼角度開始，而to值表示到達某個角度，舉個例子：我設置from爲40，to爲-40，Play Style（播放類型有三種：once（播放一次）、loop（循環播放）、PingPong（來回播放））設置爲PingPong，curve爲動畫運行的曲線，設置該值可達到想要的效果，duration爲播放動畫所需的時間。curve的值設置以下：

選擇該曲線的目的是但願藤條有切向加速度。

設置好上述屬性值後，效果以下：

其實，咱們也能夠設置Play Style的值爲Loop，並相應的改變curve的值，curve的值設置以下：

一樣也能夠達到上述的效果，更多的Tween動畫可參看Tween。

還有一個細節是在遊戲中，考拉在藤條的底部，考拉也會跟着藤條作鐘擺運動。咱們能夠將考拉設置爲藤條的孩子節點，並把考拉的錨點設置爲藤條的底部中心（關於錨點的具體信息可查看錨點），考拉節點的屬性值設置以下：

這樣考拉就能夠跟着藤條一塊兒作作鐘擺運動了，效果圖以下：

 

2.3 柱子

柱子：在該遊戲中，使用三根柱子用於循環移動，柱子存放在數組中，指定數組標號爲1的柱子做爲跳臺，當考拉成功跳到跳臺上時，將數組標號爲0的柱子刪除，並在數組後面根據關卡配置的柱子信息添加一根柱子到數組中，依次循環。在佈局時，將其中先後相繼的柱子固定在寬度爲640的範圍內，以下圖：

這樣咱們就能夠固定柱子的x軸的位置，例如：後一根柱子的x座標就爲前一根柱子的x軸座標加上640再減去後一根柱子的寬度。下一篇文章將具體講述遊戲的實現。