PixiJS V5 教學 (26) - 寶藏獵人

前言

接下來我們將會開始整合一些前面的技巧來製作一個小遊戲。

素材來源

接下來所有遊戲素材將會來至 LearningPixi 這一份中文 PIXI 教學文件,不可否認這是一份非常棒的教學文件,我所撰寫的這個系列中許多地方也次參考這一份,所以就會直接使用該專案提供的現成遊戲素材製作。

素材

素材主要都是放在 examples\images 底下,主要會使用到的素材有這幾張

blob.png - 怪物

door.png - 門

dungeon.png - 背景

explorer.png - 玩家

treasure.png - 寶藏

最後還有一個整合的大圖

treasureHunter.png - 寶藏獵人

另外作者的文章也有提到,若你想挑戰其他素質也可以到原文作者的 Lanea Zimmerman 工作室 取得。

其他檔案

在準備素材期間我們可以注意到一件事情,examples 的 images 底下我們還可以發現有一個 treasureHunter.json,treasureHunter.json 的用途是為了方面我們去對應 treasureHunter.png 每一張圖的位子,假使若我們今天開發的遊戲是一個非常龐大且複雜,那麼一張一張載入圖片是非常麻煩的行為,所以通常來講都會使用 JSON 格式去加載圖片,將來若需要調整一些細節也只需要調整這個 JSON 即可。

結尾

OK,我相信你應該已經覺得複雜了,所以我們先暫停一下,先來做一些基礎練習,在 LearningPixi 也有提供簡單的 練習,雖然我們在前面已經知道該如何單張及多張圖片的加載,但是透過 JSON 來加載卻沒有練習到,所以接下來我們會先來練習如何透過一張圖片並使用 JSON 加載圖片吧!

參考文獻