使用 PIXI Js 和 Parcel Bundler 加載紋理圖集的 json

我對 JS 編程和 Pixi JS 都是新手。我試著像這個教學模組這樣從 JSON 加載紋理圖集：https://github.com/kittykatattack/learningPixi#spriteproperties

我使用 TypeScript、Node.js 和 Parcel 打包器，以盡可能簡單的方式。我的問題是，即使我使用 PIXI.loader，我的貼圖集也無法加載。我已經在 HTML 文件中直接嘗試過一個範例，並且沒有遇到任何問題。

我使用：PIXI 5.3.3（最新版本）、parcel 1.12.4、Typescript 4.0.3

我的 index.ts：

import textPack from "./assets/textPack.json"
...
let loader = PIXI.loader.shared
loader.add("./assets/textPack.json")
      .load(setup)

function setup {
     let id = loader.resources["./assets/textPack.json"].textures
     let soldier = new PIXI.Sprite(id["soldier.png"])
     app.stage.addChild(soldier)
}

這是我的 package.json

{
  "name": "parcel-tuto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-asset-copier": "^1.1.0",
    "pixi-sound": "^3.0.5",
    "pixi.js": "^5.3.3",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/parcel index.html"
  },
  "assetsPath": "src/assets/",
  "keywords": ["assets"],
  "author": "",
  "license": "ISC"
}

Typescript 返回：TS2532：物件可能為 'undefined'。.json 和 .png 關聯檔案未被複製到 parcel 的 dist 資料夾

對 loader.resources['...'] 的 console.log 說：

json datas :  
Resource {_flags: 2, name: "./assets/textPack.json", url: "./assets/textPack.json", extension: "json", data: null, …}
children: Array(0)
length: 0
__proto__: Array(0)
crossOrigin: ""
data: null
error: Error: Error trying to parse loaded json: SyntaxError: Unexpected token < in JSON at position 0 at Resource.abort (http://localhost:1234/src.f10117fe.js:28599:18) at Resource._xhrOnLoad (http://localhost:1234/src.f10117fe.js:29046:18)
extension: "json"
loadType: 1
metadata: {}
name: "./assets/textPack.json"
...

到最後什麼都不管用。你以前遇過這個問題嗎？

謝謝你的幫助。

答案＃1

你可以同時匯入圖片和 JSON，並且像這樣使用它

import altasA from "./altas/a.json";
import altasAImage from "./altas/a.png";


PIXI.Loader.shared.add(altasAImage).load(() => {
  const sheet = new Spritesheet(
    PIXI.Loader.shared.resources[altasAImage].texture.baseTexture,
    altasA
  );
  sheet.parse((...args) => {
    console.log("args", args);
  });
});