Seeking Insights on Quad's JSON Format

[bbsuuo]

Hi, rufaswan! Thank you very much for the tools you provided. I have successfully displayed most of the sprites and animations in quad. As a further study, I want to revert them to the Unity engine or Spine software for more in-depth research. I am trying to create a Unity plugin to slice the sprites and attempt to add skeletons. I have briefly studied the JSON format of quad, but there are still many confusing aspects:

1.In the keyframe structure, I tried to capture the original sprite's position by obtaining the srcquad from all layers, but the positions seem not to match up? Are there additional steps to restore the srcquad coordinates to the original sprite? I am currently just using the coordinates of srcquad to generate a rectangle, but it seems not to fit the elements in the texture. 2.In the animation structure, I found many keyframes are duplicated? What could be the reason for this?

I am currently trying to restore the game "[Unicorn Overlord)." ,Looking forward to your reply, and thank you for the code provided.

[rufaswan]

Hi! The full specification for QUAD file is documented here:

https://github.com/rufaswan/Web2D_Games/blob/master/docs/quad_player_mobile/spec.adoc

Do note it is still work in progress. As new discovery is found at #12, I'm currently working on upcoming v0.5 update.

1. srcquad is same as texture UV position. Are you referring to the correct texture, like using Texture 0.png for tex_id is 0?

srcquad is a 8 number array or 4 pair of x,y position. The first x,y DOES NOT necessary to be the top-left corner. In fact, srcquad does not even need to be rectangle or square.

2. Probably for skeleton object, when syncing multiple animation object (Vanillaware uses multi-track animation). Also there are matrix and color mixing on animation timeline object, and they can be different even the keyframe is the same.

Hope that helps.

[bbsuuo]

Hi! The full specification for QUAD file is documented here:

https://github.com/rufaswan/Web2D_Games/blob/master/docs/quad_player_mobile/spec.adoc

Do note it is still work in progress. As new discovery is found at #12, I'm currently working on upcoming v0.5 update.

1. srcquad is same as texture UV position. Are you referring to the correct texture, like using Texture 0.png for tex_id is 0?

srcquad is a 8 number array or 4 pair of x,y position. The first x,y DOES NOT necessary to be the top-left corner. In fact, srcquad does not even need to be rectangle or square.

2. Probably for skeleton object, when syncing multiple animation object (Vanillaware uses multi-track animation). Also there are matrix and color mixing on animation timeline object, and they can be different even the keyframe is the same.

Hope that helps.

hi rufaswan,

In this test, I converted the srcquad coordinates to Unity's world coordinates. Taking a texture with the format of 2048x1024 as an example, its bottom-left corner is at (-1024, -512). Now, considering the coordinate system of Quad where the bottom-left corner is (0,0), I subtracted each coordinate's x and y by (-width/2, -height/2), resulting in the positions of the white frames shown in the picture below. However, it seems they do not match the pixels in the image. Some of the rectangles formed by srcquad even lack pixels, so I'm wondering if there's an issue with my method of calculating coordinates. Is there any additional calculation needed when sampling each srcquad from the texture?

[bbsuuo]

你好！QUAD 文件的完整规范记录如下： https://github.com/rufaswan/Web2D_Games/blob/master/docs/quad_player_mobile/spec.adoc 请注意，该工作仍在进行中。由于在#12发现了新的发现，我目前正在开发即将到来的 v0.5 更新。

1. srcquad 与纹理 UV 位置相同。您是否指的是正确的纹理，例如使用纹理 0.png 表示 tex_id 为 0？

srcquad 是一个 8 数字数组或 4 对 x,y 位置。第一个 x,y 不一定是左上角。事实上，srcquad 甚至不需要是矩形或正方形。

2. 可能对于骨架对象，当同步多个动画对象时（Vanillaware 使用多轨动画）。动画时间轴对象上也有矩阵和颜色混合，即使关键帧相同，它们也可能不同。

希望有帮助。

嗨鲁法斯旺，

在这个测试中，我将srcquad坐标转换为Unity的世界坐标。以2048x1024格式的纹理为例，其左下角位于(-1024，-512)。现在，考虑到左下角为 (0,0) 的 Quad 坐标系，我将每个坐标的 x 和 y 减去 (-width/2, -height/2)，得到所示的白框的位置在下图中。然而，它们似乎与图像中的像素不匹配。srcquad 形成的一些矩形甚至缺少像素，所以我想知道我的计算坐标的方法是否有问题。从纹理中采样每个 srcquad 时是否需要任何额外的计算？

Or is there a misunderstanding on my part regarding the srcquad of the layers? Do these coordinates not actually correspond to the cutting positions of certain parts within the texture? My assumption on how to use srcquad is based on the production process of Spine animation software, where deformation is applied to pre-cut elements (such as the head or legs). So, are these data actually just meant to capture the positions for rendering and not the positions of the pre-cut elements?

[rufaswan]

You can actually check srcquad with Photoshop/GIMP. srcquad are in pixels, and XY is the same direction as 2D image.

Since srcquad is texture UV, it is also positive number only.

The canvas would be the same as your world coordinates. Ignoring Z, 0,0 is at the center. If you used a fixed screen size of 2048x1024, then top-left is -1024,-512 and bottom-right is +1024,+512. The drawing XY is from dstquad with XY direction same as 2D.

In OpenGL/WebGL, srcquad is divided by texture size, so the values are always 0.0 to 1.0. dstquad is divided by canvas size, so the values are always -1.0 to +1.0.

Hope that helps.

[bbsuuo]

You can actually check srcquad with Photoshop/GIMP. srcquad are in pixels, and XY is the same direction as 2D image.

Since srcquad is texture UV, it is also positive number only.

The canvas would be the same as your world coordinates. Ignoring Z, 0,0 is at the center. If you used a fixed screen size of 2048x1024, then top-left is -1024,-512 and bottom-right is +1024,+512. The drawing XY is from dstquad with XY direction same as 2D.

In OpenGL/WebGL, srcquad is divided by texture size, so the values are always 0.0 to 1.0. dstquad is divided by canvas size, so the values are always -1.0 to +1.0.

Hope that helps.

That's right! I got the starting position of the y-coordinate wrong, now everything is correct! Thank you for your guidance.