白鷺引擎開發飛機大戰詳盡教程（一建立場景）

簡介

   本教程是以飛機大戰小遊戲做爲白鷺的入門，詳細的按筆者的開發思路，一步步講解遊戲的開發步驟，內容基本涵蓋了白鷺引擎提供的能力，包括界面可視化開發、事件派發、粒子播放（爆炸效果）、龍骨幀動畫、tween緩動動畫、碰撞檢測、音頻播放等，結合筆者的開發經驗，講述怎麼使用繼承來提升開發效率而且便於維護擴展。學完本教程，基本就能熟悉怎麼使用白鷺開發遊戲，切勿錯過。也歡迎你們提出問題和建議，幫助我完善教程，謝謝！

教程目錄

白鷺引擎開發飛機大戰詳盡教程（前言）

白鷺引擎開發飛機大戰詳盡教程（一建立場景）

源碼

   連接：authorking.gitee.io/wx-games/pl…

   github地址：github.com/305371179/P…

請到github上下載源碼，切換到分支dev_01_建立場景，本節的內容是簡單介紹如何使用egretwing（4.1.6）的可視化界面編輯場景，使用的egret引擎版本是5.2.13

項目建立

分辨率是512X768,勾選game 遊戲庫

建立場景MenuScene和GameScene. MenuScene是開始菜單，如圖

GameScene是遊戲的主場景，暫時什麼邏輯都沒寫。

場景都是EUI的組件

皮膚路徑能夠修改，我使用了默認的路徑，勾選生成EXML文件和TS文件，這時會生成兩個文件，一個是MenuScene.exml,路徑是resource/eui_skins/MenuScene.exml,一個是MenuScene.ts,路徑是src/scene/MenuScene.ts。

爲了方便場景的切換，我在src下建立了一個Global.ts,做爲場景切換的管理類。

提供了靜態方法addScene,replaceScene,若是要作一些場景切換的過渡，能夠自行擴展。

刪除Main.ts多餘的代碼，在加載完資源後，直接添加MenuScene場景

到了這個步驟，咱們開始建立MenuScene裏面的顯示控件。打開MenuScene.exml文件，以下圖

咱們在設計的標籤頁裏面，經過拖拽的方式拉入咱們須要的控件

而後設置相關的屬性值，這個場景裏面只有一張背景圖片，一個開始遊戲按鈕和一個label標籤 咱們設置按鈕的id屬性，由於咱們要在MenuScene.ts裏面調用它。

在MenuScene.ts裏面，是這樣調用的

只要給類聲明按鈕的id，在childrenCreated方法裏面就能夠直接使用了。 給按鈕添加點擊事件，點擊就會切換到遊戲場景。

能夠給控件作一些補間動畫

咱們能夠建立動畫組，而後根據組的名稱來調用對應的動畫，這裏咱們只有一個組 animation，咱們就能夠在MenuScene.exml裏面播放這個組動畫

至此，咱們就學會了如何使用egretwing來作一些可視化的操做，是否是很簡單！

接下來，咱們就會開始學習如何建立遊戲場景，敬請期待！