一看就會的 egret 入門教程
egret 是一個用來幫你開發 H5 遊戲的利器。也許你曾經用原生 js 寫過一些小遊戲，但是效率極低；也曾用 createjs 寫過，但複雜起來也是力不從心，這時我們就需要學會用高階點的工具:muscle:（egret）。它的出現極大釋放了你的雙手，能幫助你更好更快的開發一款小遊戲（誰用誰知道:yum:）。這裡就不與其他遊戲引擎作比較了，這東西就好比 react 和 vue，選哪一個沒關係，你能熟練使用其中一個就好了。
如何學習呢？其實官網的文件已經寫得很詳細也很清晰了，還有例子和教程，只是你一時半會看不完，瞟了幾眼就會:sleepy::sleepy::sleepy:。。。不過沒關係，只要你看了本篇教程，從此你就跨入了 egret 世界的大門（吹的不錯，其實腳尖都沒碰到門檻呢:joy:）。
所以本篇文章旨在以最快的速度帶你瞭解 egret 並擁有自己的專案，告訴你一些入門必須掌握的東西，其餘具體的你可以慢慢去翻文件。。。ok:ok_hand:，發車了:car::car::car:。。
官方文件地址： developer.egret.com/cn/docs/pag…
環境準備（不要覺得這步有多高大上，其實就是下載而已）
第一步：萬事下載先，我們直接點選下面的連結下載然後安裝就行了。
引擎庫管理工具 EgretLauncher ：
www.egret.com/products/en…
第二步：開啟 EgretLauncher，切換到引擎面板，並點選引擎的最新穩定版進行下載，如下圖所示：
第三步：切換到工具面板，點選安裝 Egret Wing 3（編輯器），這個可能需要賬號登入，沒有的話就去註冊一個吧，當然如果你也可以自行安裝其他工具，也就點一下的事，但學起來就麻煩了:fearful:。
快速建立一個專案
好了，以上就是所需要下載的東西。現在我們將以最快的速度建立一個自己的專案。開啟 EgretLauncher，切換到專案面板，點選建立專案，會彈出一個對話方塊，輸入專案名稱，選擇專案地址，縮放模式選擇 fixedWidth（小遊戲不支援 showAll 適配模式，推薦使用 fixedWidth），其餘保持不變，點選右下角建立即可。這樣一個專案就誕生了（就像 vue init 初始化專案一樣）。
然後用 Egret Wing 3（編輯器）開啟這個專案，先不管內容寫的啥，點選左上角的除錯圖示按鈕（如下圖所示，長的像瓢蟲:beetle:的那個）即可執行專案。在彈出的遊戲介面中可以看到背景圖片被拉長了（因為縮放模式改成了 fixedWidth），不懂沒關係這不重要，因為初始的東西一般都是多餘的，後面都是被刪的命運。
至此，專案就建立完了，教程也結束了（這人欠揍:angry::angry::angry:）。
接下來我將對專案裡面常用的兩個目錄進行講解（其實很多東西都是我們不需要關心的，和 vue 又挺像）。個人感覺寫遊戲，場景和邏輯最為重要。場景裡最重要的就是資源，體現在 resource 資料夾，邏輯則體現在 src 資料夾。下面我們先來小講一下 resource 目錄。
resource 目錄
RES.getRes('resourceName')
，當中的引數就是資源名稱）。
關於上圖中的藍色部分，就是一些常用元件（比如按鈕），好比在 vue 中引入了 element 元件。但有個很大的不同之處就是這是遊戲，一般遊戲會有自己獨特的設計，這些自帶的元件不是很必要，往誇張點說要是你的遊戲都用它自帶的元件來寫，那每款遊戲的風格就都一樣了，又如何去吸引玩家的眼球呢。所以對於這些自帶的元件你瞟一眼就行，然後可以刪掉也可以不管他，反正它不是必要的。
再然後就是 default.res.json 這個檔案，現在你只需知道它是對我們匯入的所有資源的一些描述即可，先不用管太多。
src 目錄
這個目錄就更簡單了，我們只需要關注 Main.ts 這個入口檔案即可，其餘幾個檔案先不管，至少我寫了兩三個遊戲 demo 後還沒動過這幾個檔案 ♀️ ♂️。
createGameScene
這個方法中主要就是在畫面中新增一些元素（諸如背景、矩形、圖示和文字等）。具體如下圖所示，用法個人感覺和 createjs（一個 canvas 庫，好比 jQuery 之於 js）挺像的，都是先 new 一個東西，然後設定各種屬性，最後新增到容器或者舞臺中。大概是這麼一個思想。
createGameScene
裡面寫），極大的減輕了開發者的負擔，是個不錯的體驗。
最常用的幾個 api（必須掌握，其它慢慢掌握）
關於文字
let label:egret.TextField = new egret.TextField(); label.text = "hello world!"; 複製程式碼
關於圖片
let img:egret.Bitmap = new egret.Bitmap();
img.texture = RES.getRes("imgName");
複製程式碼
關於形狀
// 畫個紅色矩形框 let shp:egret.Shape = new egret.Shape(); shp.graphics.beginFill( 0xff0000, 1); shp.graphics.drawRect( 0, 0, 100, 200 ); shp.graphics.endFill(); 複製程式碼
關於聲音
let sound:egret.Sound = RES.getRes("mp3Name");
sound.play();
sound.stop();
複製程式碼
關於事件
// 觸控事件（相當於點選） this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this); this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this); 複製程式碼
關於計時器
// 引數為時間間隔（ms）和執行次數 let timer:egret.Timer = new egret.Timer(500, 5); // 邊計時邊觸發 timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this); // 計時結束觸發 timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this); // 開始計時 timer.start(); // 暫停計時 timer.stop(); // 重新計時 timer.reset(); 複製程式碼
關於資料儲存
// 儲存資料 let key:string = "score"; let value:string = "100"; egret.localStorage.setItem(key, value); // 讀取資料 let score:string = egret.localStorage.getItem(key); // 移除資料 egret.localStorage.removeItem(key); // 清除所有資料 egret.localStorage.clear(); 複製程式碼
小貼士
1、寫程式碼需要用 ts（規範的 js） 進行開發
2、egret 遊戲預設是 30 幀的
3、大部分 api 是以 egret 開頭的，讀取資源的是用 RES
4、有時候你改了程式碼不生效或者突然報錯，別慌，試試重新開啟編輯器
5、每個 egret 應有且只有一個舞臺（也就是 stage 物件）。舞臺是 egret 顯示架構中最根本的顯示容器。舞臺的座標原點位於左上角。
結語
以上就是你學習該引擎必須要掌握的幾個知識點，如果你有時間，還是建議你把文件粗略過一遍，至少你知道有什麼東西存在，後續用到的時候再去找文件看著寫，也是可以的。
當然了，光說不練假把式，我嘮叨了半天你應該還是不會寫，這很正常，我也不會，這篇文章的目的只是讓你對 egret 有個初步的印象，後續我會再寫幾篇小遊戲的教程（務必要練習幾個小遊戲，這是重點），這樣一個流程下來，你就能寫出屬於自己的小遊戲了（是不是想想就嘴角上揚了呢:smirk:）。