1

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 ファイルはそのスプライト シートを表します。これはtexture-packerというソフトウェアを使用して作成されました。

ここに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>
4

1 に答える 1

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 配列形式を使用します。この場合、フレームの名前はフレームのデータの一部であり、キーではありません。

于 2012-02-22T07:56:36.180 に答える