Question

我刚刚开始使用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文件不是很熟悉，但据我所知，在meta中它应该说窗口的大小？这对我来说是"size": {"w":1256,"h":2017},，正如你在我的PIXI文件中看到的那样，它是我用来创建应用程序的大小。话虽这么说，我的两个问题是：

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

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

Answer 1

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

根据您的项目，您还可以将图像加载为图像贴图或纹理图集。在以下网址了解有关这些技术的更多信息

https://github.com/kittykatattack/learningPixi

使用PIXI js

1 个答案: