使用 PIXI js 加载 json 文件答案

【问题标题】：Loading a json file using PIXI js使用 PIXI js 加载 json 文件
【发布时间】：2019-10-02 23:18:46
【问题描述】：

我最近才开始使用 PIXIjs，但我不明白为什么当我尝试使用 json 加载一些 .png 文件时，它并没有按照我期望的方式工作。这是我的 .json 文件的示例

"autoplay_counter.png":
{
"frame": {"x":983,"y":1093,"w":264,"h":147},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":1,"w":264,"h":147},
"sourceSize": {"w":270,"h":150}
},

这是我用来加载文件的 PIXI.js 代码：

const game = new PIXI.Application(2017, 1256);
document.body.appendChild(game.view);

var loader = PIXI.loader;
loader.add("reels.json");
loader.load(func);

function func () {
   var frames= [];
   frames.push(PIXI.Texture.fromFrame('Reels_Logo.png'));
   frames.push(PIXI.Texture.fromFrame('Reels_Frame.png'));
   frames.push(PIXI.Texture.fromFrame('Symbol_Cargo.png'));
   var x = frames.pop();
   while ( x != null) {
     var anim = new PIXI.Sprite(x);
     game.stage.addChild(anim);
     x = frames.pop();
   }
}

我遇到的问题是，尽管它正在加载 png 文件，但它并没有相应地定位它们。我对 json 文件不太熟悉，但据我所知，在元数据中应该说窗口的大小？对我来说是"size": {"w":1256,"h":2017},，正如您在我的 PIXI 文件中看到的，它是我用于创建应用程序的大小。话虽如此，我的两个问题是：

如何将 png 文件相应地放置在屏幕上？有没有更好的方法来用 PIXI 解析 json 文件，这样我就不会手动将 json 中的文件名插入/硬编码到代码中？

非常感谢，任何帮助都非常感谢

【问题讨论】：

标签： json pixi.js

【解决方案1】：

您可能想使用https://jsonlint.com 检查您的 json。如果您在给定代码周围添加括号 {} 并删除最后的逗号，您的示例将变为有效。

根据您的项目，您还可以将图像加载为图像映射或纹理图集。阅读更多关于这些技术的信息

https://github.com/kittykatattack/learningPixi

【讨论】：