>> Our solution for parsing the atlas definition is pretty straightforward.
First, we're given atlasJSON data that's been loaded from an xhr request. The
first step that we need to do is actually go through and call JSON.parse on
that. This will turn the text JSON data into an actual JavaScript object with
members and values that we can iterate over. We use this to affect here. The
parsed object has a frames dictionary that we'll actually iterate over to load
all of our sprites. We'd like to fetch each key inside of our dictionary. And
then, fetch the associated sprite object that comes with it. From here, we now
have the sprite name and effectively, the sprite values. The next step we take
here is to actually define the center of the image. So, we actually multiply the
width and the height times 0.5, which would give us the half width and half
height. Now, we store this value in the cx and cy as a negative offset. The
reason for this is that we'll use the cx and cy values a little later on, during
rendering, to transform our object into proper space. We store them as negatives
here so that we don't have to do the mathematics later on when we're drawing the
image. Once we've got this data, we go ahead forward and call the defSprite
function, passing in the image name as a key. And then, the frame.x, frame.y
with height and center data that you've already seen before.
Nuestra solución para analizar la definición del atlas es muy directa.
Primero, se nos han dado los datos de atlasJSON
que han sido cargados desde una solicitud xhr.
El primer paso que necesitamos dar es avanzar y usar JSON.parse para eso.
Esto convertirá los datos de texto JSON en un objeto de JavaScript
con miembros y valores para volver a iterar.
Usamos esto para afectar esto de aquí.
El objeto analizado tiene un diccionario de frames
con el que iteraremos para cargar nuestros sprites.
Queremos extraer cada una de las claves dentro de nuestro diccionario.
Y entonces, extraer el sprite que viene asociado a él.
Así, ahora tenemos el nombre del sprite y efectivamente los valores del sprite.
El próximo paso que daremos será definir el centro de la imagen.
En efecto, multiplicamos el ancho y el alto por 0.5,
lo que nos da la mitad del ancho y la mitad del largo.
Ahora, almacenamos el valor en el cx y el cy como un compensador negativo.
La razón de esto es que usaremos los valores cx y cy un poco más adelante,
durante la renderización, para transformar nuestro objeto en el espacio mismo.
Guardamos éstos como negativos aquí
así no tendremos que hacer cálculos al diseńar la imagen después.
Una vez que obtenemos estos datos, avanzamos y usamos la función defSprite,
traspasando el nombre de la imagen como clave.
Y luego, el frame.x, frame.y
con los datos de altura y centro que ya visualizaste anteriormente.
Notre solution pour l'analyse de la définition de l'atlas est assez simple.
Tout d'abord, nous avons les données "atlasZSON", qui ont été chargé à partir d'une requête xhr.
La première étape que nous devons faire est effectivement d'appeler JSON.parse(atlasJSON).
Cela transformera les données JSON de texte en un objet JavaScript réel avec
des membres et des valeurs que nous pouvons itérer. Nous utilisons cela pour l'affecter ici.
L'objet analysé (parsed) a un dictionnaire de "frames" que nous allons parcourir pour charger
tous nos sprites. Nous aimerions aller chercher chaque clé à l'intérieur de notre dictionnaire.
Ensuite, aller chercher l'objet sprite associés qui l'accompagne. De là, nous avons maintenant
le nom de sprite et également, les valeurs de sprite. La prochaine étape, que nous prenons ici,
est de définir le centre de l'image. Ainsi, nous multiplions la largeur et
la hauteur par 0.5, ce qui nous donnerait la moitié de la largeur et la moitié de la hauteur.
Maintenant, nous stockons cette valeur dans cx et cy comme un décalage négatif.
La raison en est que nous allons utiliser ces valeurs cx et cy un peu plus tard, au cours du rendu,
pour transformer notre objet dans l'espace approprié. Nous les stockons comme négatifs ici
afin que nous n'ayons pas à faire les mathématiques plus tard, quand nous allons dessiner l'image.
Une fois que nous avons obtenu ces données, nous allons de l'avant et appelons
la fonction defSprite, en passant le nom de l'image en tant que clé. Et puis, frame.x, frame.y
avec la hauteur et le centre de données que vous avez déjà vu avant.
>> एटलस परिभाषा को पार्स करने के लिए हमारे समाधान बहुत सरल है।
सबसे पहले, हम एक xhr अनुरोध से लोड किया गया है atlasJSON डेटा को देखते हुए कर रहे हैं। को
पहला कदम है कि हम क्या करने की जरूरत है वास्तव में जाने के माध्यम से और JSON.parse पर कॉल
कि। इस के साथ एक वास्तविक जावास्क्रिप्ट ऑब्जेक्ट में पाठ JSON डेटा बदल जाएगा
सदस्यों और मूल्यों है कि हम पर दोहराया जा सकता है। हम इस को प्रभावित करने के लिए यहाँ का उपयोग करें। को
पार्स की गई वस्तु है कि हम वास्तव में लोड करने के लिए से अधिक पुनरावृति हूँ एक फ्रेम शब्दकोश
हमारे sprites के सभी। हम हमारे शब्दकोश के अंदर प्रत्येक कुंजी को लाने के लिए चाहते हैं। और
फिर, संबंधित प्रेत वस्तु है कि इसके साथ आता है लाने। यहाँ से, अब हम
प्रेत का नाम और प्रभावी ढंग से, तो प्रेत मान है। अगले कदम हम ले
यहाँ है वास्तव में छवि के केंद्र को परिभाषित करने के लिए। तो, हम वास्तव में गुणा
चौड़ाई और ऊँचाई 0.5, जो हमें आधी चौड़ाई और आधा देंगे टाइम्स
ऊंचाई। अब, हम यह मान cx और महीने में एक नकारात्मक ऑफसेट के रूप में संग्रहीत। को
इसका कारण यह है कि हम cx इस्तेमाल करेंगे और cy एक छोटा मान पर बाद में, के दौरान
प्रतिपादन, हमारे ऑब्जेक्ट में उचित स्थान को बदलने के लिए। हम उन्हें नकारात्मक रूप में स्टोर
यहाँ इतना है कि हम जब हम बाद में चित्रकारी कर रहे हैं गणित करने के लिए नहीं है
छवि। एक बार जब हम इस डेटा मिल गया है, हम आगे आगे बढ़ो और defSprite को बुलाओ
समारोह, एक कुंजी के रूप में छवि नाम में गुजर रहा। और फिर, frame.x, frame.y
कि तुम पहले से ही पहले देखा है ऊंचाई और केंद्र डेटा के साथ।
Nossa solução para analisar a definição do atlas é bastante simples
Primeiro, damos ao atlas os dados do arquivo JSON que carregamos através de um pedido xhr.
O primeiro passo que temos que dar é colocar JSON.parse no atlas.
Isto transformará os dados de texto do JSON em um elemento de JavaScript
com membros e valores que podemos repetir. O efeito é usado aqui.
O objeto analisado tem um dicionário de quadros que copiaremos para carregar
todos nossos sprites. Gostaríamos de buscar cada chave dentro de nosso dicionario.
E então, buscar o objeto associado que vem com o sprite. Daqui, passamos a
ter o nome e efetivamente, o valor do sprite. O próximo passo
é definir o centro da imagem. Para isso multiplicamos
a largura e a altura por 0.5, o que nos daria a metade da largura e a metade da altura.
Agora, guardamos este valor no cx e no cy como um valor negativo.
Fazemos isso porque usaremos os valores de cx e cy mais adiante,
durante a renderização, para transformar nosso objeto em um espaço adequado. Definimos ambos como valores
negativos aqui para não precisar fazer cálculos mais tarde, na hora de desenhar a imagem.
Uma vez que tenhamos estes dados, seguimos adiante e colocamos a função defSprite
colocando o nome da imagem como uma chave. Depois, o frame.x, frame.y
com os dados da altura e do centro como já vimos antes.