一看就會的egret入門教程

尤水就下也發表於2019-03-13

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入門教程

第三步:切換到工具皮膚,點選安裝 Egret Wing 3(編輯器),這個可能需要賬號登入,沒有的話就去註冊一個吧,當然如果你也可以自行安裝其他工具,也就點一下的事,但學起來就麻煩了?。

一看就會的egret入門教程

快速建立一個專案

好了,以上就是所需要下載的東西。現在我們將以最快的速度建立一個自己的專案。開啟 EgretLauncher,切換到專案皮膚,點選建立專案,會彈出一個對話方塊,輸入專案名稱,選擇專案地址,縮放模式選擇 fixedWidth(小遊戲不支援 showAll 適配模式,推薦使用 fixedWidth),其餘保持不變,點選右下角建立即可。這樣一個專案就誕生了(就像 vue init 初始化專案一樣)。

一看就會的egret入門教程
一看就會的egret入門教程

然後用 Egret Wing 3(編輯器)開啟這個專案,先不管內容寫的啥,點選左上角的除錯圖示按鈕(如下圖所示,長的像瓢蟲?的那個)即可執行專案。在彈出的遊戲介面中可以看到背景圖片被拉長了(因為縮放模式改成了 fixedWidth),不懂沒關係這不重要,因為初始的東西一般都是多餘的,後面都是被刪的命運。

一看就會的egret入門教程
一看就會的egret入門教程

至此,專案就建立完了,教程也結束了(這人欠揍???)。
接下來我將對專案裡面常用的兩個目錄進行講解(其實很多東西都是我們不需要關心的,和 vue 又挺像)。個人感覺寫遊戲,場景和邏輯最為重要。場景裡最重要的就是資源,體現在 resource 資料夾,邏輯則體現在 src 資料夾。下面我們先來小講一下 resource 目錄。

resource 目錄

一看就會的egret入門教程
如上圖所示,這個資料夾主要用來存放專案中所有用到的資源(就是音視訊和圖片等),我們只需要把用到的素材拖進來或拷貝到資料夾裡即可,其他的無需關心,egret 都幫我們處理好了。如果資源太多,你可以在 resource 目錄下多建幾個資料夾分個類,這樣會比較明瞭。需要注意的是資源名稱應該是唯一的,因為最終我們都是以同樣的方式讀取資源(也就是同一個 api,RES.getRes('resourceName'),當中的引數就是資源名稱)。

關於上圖中的藍色部分,就是一些常用元件(比如按鈕),好比在 vue 中引入了 element 元件。但有個很大的不同之處就是這是遊戲,一般遊戲會有自己獨特的設計,這些自帶的元件不是很必要,往誇張點說要是你的遊戲都用它自帶的元件來寫,那每款遊戲的風格就都一樣了,又如何去吸引玩家的眼球呢。所以對於這些自帶的元件你瞟一眼就行,然後可以刪掉也可以不管他,反正它不是必要的。

再然後就是 default.res.json 這個檔案,現在你只需知道它是對我們匯入的所有資源的一些描述即可,先不用管太多。

一看就會的egret入門教程

src 目錄

這個目錄就更簡單了,我們只需要關注 Main.ts 這個入口檔案即可,其餘幾個檔案先不管,至少我寫了兩三個遊戲 demo 後還沒動過這幾個檔案?‍♀️?‍♂️。

一看就會的egret入門教程
如上圖所示,這個檔案裡我們只需要看兩個主要的操作步驟即可。一個就是資源載入(其實也可以不用管,因為寫程式碼的時候可以不用動它,但要了解一下)。另一個就是真正要看的地方了,也是我們實際寫程式碼的地方。在 createGameScene 這個方法中主要就是在畫面中新增一些元素(諸如背景、矩形、圖示和文字等)。具體如下圖所示,用法個人感覺和 createjs(一個 canvas 庫,好比 jQuery 之於 js)挺像的,都是先 new 一個東西,然後設定各種屬性,最後新增到容器或者舞臺中。大概是這麼一個思想。
一看就會的egret入門教程
當然了,如果遊戲邏輯複雜的話,我們可以在 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();
複製程式碼

小貼士

1、寫程式碼需要用 ts(規範的 js) 進行開發。
2、egret 遊戲預設是 30 幀的。
3、大部分 api 是以 egret 開頭的,讀取資源的是用 RES。
4、有時候你改了程式碼不生效或者突然報錯,別慌,試試重啟大法。
5、長度單位是畫素。
6、每個 egret 應有且只有一個舞臺(也就是 stage 物件)。舞臺是 egret 顯示架構中最根本的顯示容器。舞臺的座標原點位於左上角。

結語

以上就是你學習該引擎必須要掌握的幾個知識點,如果你有時間,還是建議你把文件粗略過一遍,至少你知道有什麼東西存在,後續用到的時候再去找文件看著寫,也是可以的。
當然了,光說不練假把式,我嘮叨了半天你應該還是不會寫,這很正常,我也不會,這篇文章的目的只是讓你對 egret 有個初步的印象,後續我會再寫幾篇小遊戲的教程(務必要練習幾個小遊戲,這是重點),這樣一個流程下來,你就能寫出屬於自己的小遊戲了(是不是想想就嘴角上揚了呢?)。

相關文章