[15- Pixi教學] 載入素材

用PIXI.Sprite來載入圖檔

在PIXI.Sprite裡有一個fromImage(‘URL’)的方法可以直接讓我們將某個圖檔載入Sprite裡面,如:

但這只能針對單張圖檔,而不能處理SpriteSheet的狀況。

並且當我們在做一個遊戲專案時,通常會需要先載完所有的遊戲素材,這樣才不會在進遊戲時看到未載完圖檔的空白而產生錯誤或破圖。
因此較多的時候,我們都會使用PIXI.loaders去下載並監聽下載進度,製作一個loading bar。
並在素材載入完成後才進入遊戲。


PIXI.loaders

下面為一個PIXI.loaders的簡單使用範例

PIXI.loaders是從resource-loader擴展的。
下面為resource-loader的GitHub上的一個簡單使用範例:

從範例可以看出,我們可以用onProgressonErroronLoadonComplete
來取得現在的下載進度,並且根據所傳入的參數來更新loading page要顯示的資訊。



開始載入連連看圖檔

新增一個檔案名為ResourcesList.ts,用來設定要載入的圖片並設定一個識別id給它。
其內容如下:

接著新增Loader.ts檔案,用來載入並監控下載進度。

並在Main.ts裡加上



觀察事件觸發時機

從console視窗可以看到我們在Loader內所下的log被觸發的時機

從上圖可知:

  • onProgress:每一段時間都會更新現在下載的進度
  • onError:有載入失敗的圖檔會呼叫這個func,然後繼續執行後面的圖檔的載入動作
  • onLoad:每一個檔案下載完成都會呼叫這個function,載入一個spritesheet的json檔案,會呼叫兩次onLoad,一次是json載入,一次是載入這個json裡所指定要使用到的png檔案
  • onComplete:全部載入完成後會呼叫,要注意即使中間有檔案載入失敗也會呼叫此function



今日成果

線上展示:http://claire-chang.com/ironman2018/1030/
今日檔案下載:ironman20181030

發表迴響

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