教程丨利用Egret Pro開發3D跑酷遊戲

本教程帶領大家從零開始開發一款完整的3D跑酷遊戲，主要面向讀者是有一定Egret2D開發經驗的小夥伴，手把手教你學習EgretPro開發，快速開啟您的EgretPro開發之旅。

遊戲製作

工欲善其事必先利其器，在開始製作遊戲之前，您需要檢查您是否安裝了以下開發環境：1、檢查你的EgretPro是否更新到了1.6以及以上版本；2、檢查下是否安裝了5.3.7以及以上的Egret2d引擎。

創建項目

首先，打開EgretPro，項目--庫項目--新建。其次，創建完項目之後，EgretPro會自動打開剛才創建的庫項目RunningGame，在resource/scenes目錄下面創建一個場景RunningScene，雙擊在場景編輯中打開該場景。如下圖所示：

創建跑道

跑道是通過3個實體Cude拼接而成的，並且隨著主角向前奔跑，跑道需要滾動起來，我們在這裡通過組件的方式動態的創建跑道。使用Vscode打開自己剛才創建的項目，然後在src目錄下面創建一個文件夾game用來存放我們的組件代碼，然後在game目錄中創建RoadController.ts文件。

然後把RoadController組件添加在場景的Root實體上。最後點擊預覽（內置）（或者預覽瀏覽器）按鈕，就可以看到下面的效果了。攝像機的這個角度看上去有點彆扭，你可以在運行界面，通過調試攝像機的TransForm參數來調整攝像機的位置與角度達到畫面看上去比較舒服。

 

添加主角

第一步，將美術同學給的遊戲素材BakedAnimation拷貝到項目目錄resource/assets/a nimations中。第二步，在EgretPro編輯器資源管理器中打開resource/assets/animations/BakedAni mation/Boy_standby_out目錄，拖拽Boy_standby.gltf.prefab.json文件到場景中。

方法2：在pro編輯中去掉勾選autoPlay，通過腳本去實現，在game目錄下面創建PlayerController文件；(記得把PlayerController組件掛在到主角實體上哦)。

到這步為止，我們的主角就在跑道上奔跑起來了，但是我們還需要讓我們的玩家往前移動，我們需要在onUpdate函數中不斷的更新主角的位置。同時我們還需要讓攝像機跟隨著主角進行同速度的移動，否則你會發現你的主角在你的屏幕中越跑越遠，越來越小啦。

隨著主角往前移動，我們發現走著走著，我們腳下的跑道沒了。這個時候我們需要在主角向前移動的同時不斷的往前鋪路，打開我們的RoadController.ts組件。

最後我們需要通過滑鼠左鍵來控制主角左右移動。我們需要在onUpdate函數中，根據滑鼠的移動來改變主角的位置。

添加金幣

預製體是一個遊戲對象及其組件的集合，目的是使遊戲對象及資源能夠被重複使用，相同的遊戲對象可以通過一個預製體來創建，此過程可以理解為實例化。遊戲中的金幣散落在整個跑道上，在這裡使用預製體來做金幣是最合適的！1、打開（或者創建）resource/perfab目錄，然後在資源管理器模塊，右鍵--》創建預製體coin.perfab.json；2、雙擊剛剛創建的預製體，在層級欄中右鍵-->3D-->球體；3、選中剛才創建的球體，在屬性欄給其選擇material項，選擇，coin.mat.json。

我們的金幣都是散落在跑道上的，所以每創建一截跑道，我們就在該跑道上隨機創建一些金幣，金幣的數量是隨機的，位置也是隨機的。接下來，需要在RoadController.ts組件中添加如下邏輯代碼：

但是如果是有一定開發經驗的小夥伴肯定知道我們還需要一個金幣池，來回收金幣，避免一直創建金幣。接下來我們再來創建一個金幣緩衝池。我直接在Coin.ts文件中添加一個CoinPool類。

當金幣離開攝像機的渲染範圍，我們就應該把金幣放入到緩衝池中，同時金幣實體不在參與渲染，使金幣處於休眠狀態。這些對金幣的處理我們都放在系統類中去做。系統便是來處理擁有一個或多個相同特徵組件的實體集合的工具，其只擁有行為（即在系統中沒有任何狀態）。 我們系統類中獲取所有的金幣。那麼如何在系統中獲取所有的金幣呢？實體匹配器是用來定義具有某種組件特徵的實體集合的規則，通過一個匹配器實例，就可以定義一個明確的實體集合的規則。

回歸到我們的案例中，我們先創建一個金幣系統類 CoinSystem.ts,在其中，我們要獲取所有的金幣，然後在每一幀中檢查金幣是否被玩家甩到背後，不需要渲染了，那麼我們就把它回收到金幣池中。具體看下面的代碼：

系統並不像組件直接添加到實體上就可以起作用，我們需要在組件註冊系統。接下來，在PlayerController中，添加如下兩行代碼。

當創建金幣的時候，我們首先考慮從緩衝池中獲取。修改RoadController.ts中crea teCoins()函數。

處理碰撞

接下來，我們要做的就是處理金幣與主角之間的碰撞了，我們需要檢查每一個金幣，如果和主角發生了碰撞，那麼我們的金幣就有一個緩動動畫然後消失。那麼對金幣與主角碰撞處理的這一個行為我們還是放在CoinSystem.ts系統類中去處理。

添加UI界面

接下來，我們需要給案例添加一個UI界面，也就是要加入一些2d的內容。在這裡我需要給讀者講解一下如何在3d場景中添加UI界面？具體參考這裡：Egret2d與EgretPro整合。第一步，將3d場景導出成第三方庫pro-library；第二步，創建一個2d項目，將第三庫pro-library添加到2d項目中；

第四步，EgretPro 中的場景渲染為一個egret.Texture對象，Egret引擎只需要將egret.Texture添加到Bitmap對象當中，即可渲染到舞臺。

結合本案例，我們處理完上面的第一、二、三步，我的項目目錄如下圖：然後我們點擊開始遊戲按鈕，添加跑酷的場景。具體看Main.ts文件。

但是這個時候，大家發現我們的主角無法左右移動了，這個時候需要我們將2d的觸摸事件傳遞到3d場景中。那麼就需要通過egret.pro去完成通信。

那麼我們需要在3d場景的PalyerContrller中接受消息並且處理消息。具體見下：

然後，我們控制臺輸入指令：egret run -a 就可以運行你的項目啦！

小結

恭喜你完成了使用EgretPro製作的第一款遊戲，點擊下方閱讀原文即可下載完整的遊戲源碼。

通過本示例你可以學到手勢識別、動畫系統、金幣系統、碰撞處理、UI系統、EgretPro與Egret2d項目交互等知識點同時你也可以學習了解到EgretPro與Egret2d之間的交互--使用EgretPro製作3D場景，然後把製作好的3D場景導出為第三庫的形式添加到Egret2D項目，在Egret2D項目中處理UI系統，使用Egret.pro中的方法進行3D與2D之間的通信。       

最後，您還可以繼續在本示例的基礎上添加功能繼續完善您的遊戲。期待您的完美作品！

Egret Pro學習交流群見下，歡迎大家入群交流。

開發者技術交流區：bbs.egret.com

在線開發者微信群：egretengine（搜索微信號添加）

官方技術支持郵箱：[e-mail]

市場合作：[e-mail]

商務合作：[e-mail]

招聘郵箱：[e-mail]

白鷺引擎微信號