如何使用jQuery读取纹理打包器制作的嵌套json文件

Question

如何使用jQuery读取以下深层嵌套json文件？

{
 "frames": {
"a1-0.png":
{
    "frame": {"x":24,"y":20,"w":12,"h":12},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":50,"y":152,"w":12,"h":12},
    "sourceSize": {"w":256,"h":192}
},
"a1-1.png":
{
    "frame": {"x":0,"y":194,"w":32,"h":44},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":39,"y":121,"w":32,"h":44},
    "sourceSize": {"w":256,"h":192}
},
"a1-2.png":
{
    "frame": {"x":400,"y":194,"w":60,"h":112},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":60,"y":51,"w":60,"h":112},
    "sourceSize": {"w":256,"h":192}
    }
 }
}

下面是我用来阅读这篇文章的jQuery的代码行。但它不起作用。有人能帮助我如何阅读所有这些元素吗？

此处"a1-0.png"无法更改，因为精灵表中有400多个图像。这个json文件表示那个sprite表。这是使用名为纹理打包器的软件制作的。

这里的jQuery代码：

<button id="FrameNumber">Frame Number</button>
<div id="results"></div>
<script>
$(document).ready(function(e) {
var url="sprite/bounce.json";
     $("#FrameNumber").click(function(){
         $.getJSON(url,function(result){
       $("#results").append('<p>'+result+'</p>');
    });
    });
});
</script>

Answer 1

只需使用data.frames["name"]即可获得数据：

$(document).ready(function(e) {
    var url="test.json";
     $("#FrameNumber").click(function(){
         $.getJSON(url,function(data) {
             var f = data.frames["a1-0.png"];
             $("#results").append('<p>x='+f.frame.x+' y='+f.frame.y+'</p>');
            });
    });
});

您在此处选择的格式已针对查询帧数据进行了优化。如果您想迭代所有帧，请使用TexturePacker中的json数组格式。在这种情况下，帧的名称是帧数据的一部分，而不是关键帧。