HTML5遊戲開發(一)：3分鐘建立一個hello world

wildfirecode13發表於2018-10-16
HTML遊戲開發

《HTML5遊戲開發》系列文章的目的有：一、以最小的成本去入門egret小專案開發，官方的教程一直都是面向中重型；二、egret可以非常輕量；三、egret相比PIXI.js和spritejs文件更成熟、友好；四、學習從0打造高效的開發工作流。

本文的目的很簡單，就是讓開發者自己能夠避免繁雜的專案配置，極速地建立和跑起一個egret例項，提升對egret開發的興趣。官方那一坨對初學者太重了。

完整的原始碼請見：github.com/wildfirecod…

線上訪問地址：wildfirecode.com/egret-hello…

建立入口index.html

在根目錄建立index.html檔案，這是本地專案訪問入口。 在body標籤內建立class屬性值為egret-player的div標籤，這是畫布canvas的容器。在標籤上新增data-entry-class屬性，並把它的值設為Main，來指定程式的入口。詳細如下：

<div style="margin: auto;width: 100%;height: 100%;" 
    class="egret-player" 
    data-entry-class="Main">
</div>
複製程式碼

然後，在index.html使用CDN的方式引入Egret的程式碼庫檔案egret.min.js以及egret.web.min.js。

<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.min.js"></script>
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.web.min.js"></script>
複製程式碼

之後，我們再把使用者程式碼檔案main.js引入進來。

<script src="main.js"></script>
複製程式碼

編寫程式碼

在根目錄建立main.js使用者程式碼檔案，並在其中建立一個名為Main的class，之後把這個class暴露到window全域性物件中。 在onAddToStage方法中，我們建立了一個紅色的文字框，文字內容為hello world。

class Main extends egret.DisplayObjectContainer {
    constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    onAddToStage(event) {
        let textfield = new egret.TextField();
        this.addChild(textfield);
        textfield.textColor = 0xff0000;
        textfield.text = 'hello world';
    }
}
window['Main']=Main;
複製程式碼

這裡說明一下幾個問題：

  • egret是引擎的全域性名稱空間。
  • Main類必須要繼承egret.DisplayObjectContainer這個基類。引擎約定入口類必須是一個可顯示的容器物件，容器物件中可以填充其他的可顯示的物件。
  • egret.TextField是引擎中用來顯示文字的一個類，它的例項就是一個可顯示的物件，我們用egret.DisplayObjectContainer類的addChild方法來把建立的文字框新增到顯示容器中去。

最後我們把下面的程式碼放入main.js尾部來啟動引擎。

egret.runEgret();
複製程式碼

執行程式碼

我們用chrome來執行index.html便可以看到在畫布上出現了紅色的hello world字樣。執行結果如下圖。

HTML5遊戲開發(一)：3分鐘建立一個hello world

相關文章