一看就會的 egret 入門教程

egret 是啥

egret 是一個用來幫你開發 H5 遊戲的利器。也許你曾經用原生 js 寫過一些小遊戲，可是效率極低；也曾用 createjs 寫過，但複雜起來也是力不從心，這時咱們就須要學會用高級點的工具💪（egret）。它的出現極大釋放了你的雙手，能幫助你更好更快的開發一款小遊戲（誰用誰知道😋）。這裏就不與其餘遊戲引擎做比較了，這東西就比如 react 和 vue，選哪個不要緊，你能熟練使用其中一個就行了。

如何學習呢？其實官網的文檔已經寫得很詳細也很清晰了，還有例子和教程，只是你一時半會看不完，瞟了幾眼就會😪😪😪。。。不過不要緊，只要你看了本篇教程，今後你就跨入了 egret 世界的大門（吹的不錯，其實腳尖都沒碰到門檻呢😂）。

因此本篇文章旨在以最快的速度帶你瞭解 egret 並擁有本身的項目，告訴你一些入門必須掌握的東西，其他具體的你能夠慢慢去翻文檔。。。ok👌，發車了🚗🚗🚗。。

官方文檔地址：developer.egret.com/cn/docs/pag…

環境準備（不要以爲這步有多高大上，其實就是下載而已）

第一步：萬事下載先，咱們直接點擊下面的連接下載而後安裝就好了。
引擎庫管理工具 EgretLauncher ：www.egret.com/products/en…

第二步：打開 EgretLauncher，切換到引擎面板，並點擊引擎的最新穩定版進行下載，以下圖所示：

第三步：切換到工具面板，點擊安裝 Egret Wing 3（編輯器），這個可能須要帳號登入，沒有的話就去註冊一個吧，固然若是你也能夠自行安裝其餘工具，也就點一下的事，但學起來就麻煩了😨。

快速建立一個項目

好了，以上就是所須要下載的東西。如今咱們將以最快的速度建立一個本身的項目。打開 EgretLauncher，切換到項目面板，點擊建立項目，會彈出一個對話框，輸入項目名稱，選擇項目地址，縮放模式選擇 fixedWidth（小遊戲不支持 showAll 適配模式，推薦使用 fixedWidth），其他保持不變，點擊右下角建立便可。這樣一個項目就誕生了（就像 vue init 初始化項目同樣）。

而後用 Egret Wing 3（編輯器）打開這個項目，先無論內容寫的啥，點擊左上角的調試圖標按鈕（以下圖所示，長的像瓢蟲🐞的那個）便可運行項目。在彈出的遊戲界面中能夠看到背景圖片被拉長了（由於縮放模式改爲了 fixedWidth），不懂不要緊這不重要，由於初始的東西通常都是多餘的，後面都是被刪的命運。

至此，項目就建立完了，教程也結束了（這人欠揍😠😠😠）。
接下來我將對項目裏面經常使用的兩個目錄進行講解（其實不少東西都是咱們不須要關心的，和 vue 又挺像）。我的感受寫遊戲，場景和邏輯最爲重要。場景裏最重要的就是資源，體如今 resource 文件夾，邏輯則體如今 src 文件夾。下面咱們先來小講一下 resource 目錄。

resource 目錄

如上圖所示，這個文件夾主要用來存放項目中全部用到的資源（就是音視頻和圖片等），咱們只須要把用到的素材拖進來或拷貝到文件夾裏便可，其餘的無需關心，egret 都幫咱們處理好了。若是資源太多，你能夠在 resource 目錄下多建幾個文件夾分個類，這樣會比較明瞭。須要注意的是資源名稱應該是惟一的，由於最終咱們都是以一樣的方式讀取資源（也就是同一個 api， RES.getRes('resourceName')，當中的參數就是資源名稱）。

關於上圖中的藍色部分，就是一些經常使用組件（好比按鈕），比如在 vue 中引入了 element 組件。但有個很大的不一樣之處就是這是遊戲，通常遊戲會有本身獨特的設計，這些自帶的組件不是很必要，往誇張點說要是你的遊戲都用它自帶的組件來寫，那每款遊戲的風格就都同樣了，又如何去吸引玩家的眼球呢。因此對於這些自帶的組件你瞟一眼就行，而後能夠刪掉也能夠無論他，反正它不是必要的。

再而後就是 default.res.json 這個文件，如今你只需知道它是對咱們導入的全部資源的一些描述便可，先不用管太多。

src 目錄

這個目錄就更簡單了，咱們只須要關注 Main.ts 這個入口文件便可，其他幾個文件先無論，至少我寫了兩三個遊戲 demo 後還沒動過這幾個文件🤷‍♀️🤷‍♂️。

如上圖所示，這個文件裏咱們只須要看兩個主要的操做步驟便可。一個就是資源加載（其實也能夠不用管，由於寫代碼的時候能夠不用動它，但要了解一下）。另外一個就是真正要看的地方了，也是咱們實際寫代碼的地方。在 createGameScene 這個方法中主要就是在畫面中添加一些元素（諸如背景、矩形、圖標和文本等）。具體以下圖所示，用法我的感受和 createjs（一個 canvas 庫，比如 jQuery 之於 js）挺像的，都是先 new 一個東西，而後設置各類屬性，最後添加到容器或者舞臺中。大概是這麼一個思想。

固然了，若是遊戲邏輯複雜的話，咱們能夠在 src 目錄下新建其餘 ts 文件來寫，邏輯較少的話直接寫在該函數裏也是 ok 的。有了 egret 你能夠不用去操心資源是如何加載和處理的（這得鼓個掌👏👏👏），咱們只要專心寫遊戲邏輯就行（在 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();
複製代碼

小貼士

一、寫代碼須要用 ts（規範的 js） 進行開發。
二、egret 遊戲默認是 30 幀的。
三、大部分 api 是以 egret 開頭的，讀取資源的是用 RES。
四、有時候你改了代碼不生效或者忽然報錯，別慌，試試重啓大法。
五、長度單位是像素。
六、每一個 egret 應有且只有一個舞臺（也就是 stage 對象）。舞臺是 egret 顯示架構中最根本的顯示容器。舞臺的座標原點位於左上角。

結語

以上就是你學習該引擎必需要掌握的幾個知識點，若是你有時間，仍是建議你把文檔粗略過一遍，至少你知道有什麼東西存在，後續用到的時候再去找文檔看着寫，也是能夠的。 固然了，光說不練假把式，我嘮叨了半天你應該仍是不會寫，這很正常，我也不會，這篇文章的目的只是讓你對 egret 有個初步的印象，後續我會再寫幾篇小遊戲的教程（務必要練習幾個小遊戲，這是重點），這樣一個流程下來，你就能寫出屬於本身的小遊戲了（是否是想一想就嘴角上揚了呢😏）。