[16- Pixi教學] 與網頁互動-控制loading page



加入loading page

上一篇的成果在載入檔案時畫面就會停在那邊,一般的遊戲通常會有一個下載中的畫面,告知使用者現在下載了幾%,還差幾%還未下載完成。
因此今日我們就要來製作這個loading page

首先,在index.html裡加上一個div

並在style.css裡設定

這樣我們就會有一個很簡單的loading畫面如下圖

更新loading進度

直接用jquery去操控剛剛所設定的div裡面的文字顯示,來更新現在的下載進度:

整個Loader.ts修改後的程式碼如下:

EventEmitter介紹

PIXI.utils.EventEmitter使用EventEmitter3,在pixiJSv4之後已直接被整理到pixi裡了。
這個套件可以讓我們在js裡很方便的使用事件,在動畫處理上,事件的監聽與發送可以讓我們在處理動畫上更加輕鬆,也可以降低這些元件間的相依性。

下面是EventEmitter3上的一個簡單使用範例

如果我們希望整個遊戲共用一個EventEmitter,可以將產生的EventEmitter做export:

要使用這個物件可以直接import進來

發送下載完成事件

Loader.ts加入下面的程式碼:

接著在Main.ts裡設定下載完後要做的事情:

上面需要注意,因為我們在Loader.loader.load()裡將下載後的resource存在一個變數裡,所以我們可以直接使用

來取得某一個resource id下的texture。

今日成果

線上展示:http://claire-chang.com/ironman2018/1031/
成果檔案下載:ironman20181031

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *