egret之HelloWorld

---

標籤: egret，入門

什麼是Egret？

Egret是一套HTML5遊戲開發解決方案，產品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心產品是Egret Engine，是一個基於TypeScript語言開發的一個HTML5遊戲引擎，其他的大可能是開發和輔助工具。

　　關於這個引擎和工具方面的介紹，我就很少說了，如下是白鷺的下載地址。

　　Egret官網：http://egret.com/

準備階段：

咱們要下載

開發工具的平臺

而且在裏面下載

主要開發工具

使用階段：

在以上工具都準備後，在engine界面或者桌面圖標點擊打開Egret Wing，會看到如下畫面：

Egret Wing界面

Wing能夠理解爲專門使用TypeScript開發白鷺項目的IDE了，之後咱們使用egret過程當中，會一直跟這個界面打交道。

　　好，如今咱們先建立一個項目，我先建一個遊戲項目，置於其餘界面有什麼區別呢，能夠自行新建試試。EUI是主要作交互界面的，空項目是沒有配置好相關須要的代碼以及功能模塊的，例如作緩動效果的Tween和加載的RES等等，因此爲了方便，咱們通常直接新建遊戲項目。

建立新項目

在這裏，你須要配置遊戲界面的大小，視頻模式以及旋轉設置。尺寸直接是設計圖寬高，而視口咱們通常會選擇showALL（顯示所有內容，不變形但會在留白），

　　網上也有一部分人開發的時候用fixedWidth（適配寬度，高度不足時會隱藏底下部分，適用於只有一些動畫在上方，且下方是無關重要的背景時）。

　　還有一些會用到百分百滿屏的exacFit，設計師弄一個適中的尺寸，而後按照這種模式鋪滿全屏，有少數很寬或很長的屏幕會有一點變形，可是不影響遊戲體驗界面。可是很差的地方是PC或pad打開會變形。
　　可是這三個地方仍是以實際項目需求爲準，以上是常規的設置。

選擇完以後，咱們點擊完成。打開新建的項目目錄：

inde.html

src是TypeScript源碼目錄，bin-debug是調試環境編譯出來的js，libs是文件包的引用目錄，template主要是app用到的runtime；

　　resource是咱們項目中的資源路徑，通常咱們把圖片音頻等素材放置asset目錄下，json等配置文件放置config目錄下，default.res.json是咱們用於加載資源的json配置文件，通常不修更名字，後面會講到怎麼使用。

　　egretProperties是咱們這個項目的一些配置記錄信息，通常咱們不須要動它。而index.html就是咱們遊戲的主界面文件。

　　打開index.html

index.html

將data-show-fps和data-show-log設成true，咱們就能夠看到遊戲運行的實時幀率了。

幀率能夠檢測遊戲運行的流暢度（性能），渲染數量越多，同時計算量越大，性能就越差，掉幀就越多。因此幀率越高，則表示性能越好，流暢度高。
另外，在底部，咱們還能看到一個egret.runEgret({})的運行方法，在這裏，你能夠修改egret的渲染模式，默認是"webgl"。可是若是你須要用到跨域圖片資源或者有大量的圖片和文字，你最好仍是使用"canvas"模式，避免跨域報錯和性能問題。

編譯運行

點完編譯，點調試，以後就出出現遊戲界面，這是egret demo項目界面

界面
　　

 

Hello World

在main 找到 createGameScene方法，而後添加

添加helloworld

編譯運行

顯示helloworld

做者簡介：何永峯，蘆葦科技web前端開發工程師，喜歡處處尋找好吃的，平時愛好是跳舞，打籃球，聽音樂，有時會出席一些大型的舞蹈商演活動，目前是Acum.Revolution現狀革命成員之一。而且表明做品：萌雞駕到、美旅出行小程序、電競桌子小程序。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究，訪問 www.talkmoney.cn 瞭解更多。