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

前言

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

素材來源

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

素材

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

最後還有一個整合的大圖

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

其他檔案

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

結尾

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

參考文獻

• LearningPixi
• Lanea Zimmerman 工作室