jQuery를 사용하여 텍스처 패커로 만든 중첩 json 파일을 읽는 방법은 무엇입니까?

Question

jQuery를 사용하여 다음 중첩 된 json 파일을 읽을 수 있습니까? 의 jQuery 코드의

{ 
"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} 
    } 
} 
} 

다음 줄은 이걸 읽고 사용하고 있습니다. 하지만 작동하지 않습니다. 누군가이 모든 요소를 ​​읽는 방법을 알려줄 수 있습니까?

스프라이트 시트에 400 개 이상의 이미지가 있으므로 "a1-0.png"을 변경할 수 없습니다. 그리고이 json 파일은 스프라이트 시트를 나타냅니다. 이는 텍스처 패커이라고하는 소프트웨어를 사용하여 작성되었습니다. 여기

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 [ "이름"]를 사용 : 여기서 선택한 형식은 프레임 데이터를 쿼리에 최적화되어

$(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 배열 포맷을 사용하십시오. 이 경우 프레임의 이름은 키가 아닌 프레임 데이터의 일부입니다.