使用 PIXI Js 和 parcel bundler 加载纹理图集答案

【问题标题】：loading texture atlas with PIXI Js and parcel bundler使用 PIXI Js 和 parcel bundler 加载纹理图集
【发布时间】：2021-02-10 03:02:15
【问题描述】：

我是 JS 编程和 pixi JS 的新手。我尝试从 json 中加载纹理图集，例如教程模块：https://github.com/kittykatattack/learningPixi#spriteproperties

我尽可能简单地使用 typescript、node js 和 parcel bundler。我的问题是，即使我使用 PIXI.loader，我的纹理图集也不会加载。我已经直接在html文件中尝试了一个示例，我没有遇到任何问题。

我使用： PIXI 5.3.3（最新版本），包裹 1.12.4, 打字稿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：对象可能是“未定义”。 .json 和 .png 关联不会复制到 parcel dist 文件夹中

一个 console.log 到 loader.resources['...'] 说：

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"
...

最后没有任何效果。你以前遇到过这个问题吗？

感谢您的帮助。

【问题讨论】：

标签： json typescript pixi.js parcel

【解决方案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);
  });
});

【讨论】：