Hi!
I am struggling to understand the output format of the json.
I tried it this way:
Make a layer for the character.
Draw the character into slices, up/down/left/right for each of the animations.
Draw an idle, walk, and attack animation.
So i have a slice like wizard_up, wizard_down etc. With userdata like ‘#idle,#walk’ or ‘#attack’ to match it to the correct animation tag.
I then added 3 animation tags, idle, walk and attack.
When i look at the generated png and the resulting json i am really confused, i cant really make sense of the coordinates in regard to the resulting png.
idle_0
→ frame x/y seem correct, but why is the height 38?
→ spriteSourceSize: 2,2 makes no sense to me since its no “size”. and h:8, w:38 makes no sense to me again
But fair enough, the placement seems correct?
but the slices i don’t get at all:
“wizard_up” → bounds is right inside nothing ?
What is the exact definition for each of the fields of the export ?
By far the most confusing is this:
``json
{
“filename”: “#walk_0”,
“frame”: { “x”: 2, “y”: 42, “w”: 8, “h”: 38 },
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: { “x”: 2, “y”: 2, “w”: 8, “h”: 38 },
“sourceSize”: { “w”: 128, “h”: 256 },
“duration”: 100
},
{
“filename”: “#walk_1”,
“frame”: { “x”: 12, “y”: 42, “w”: 8, “h”: 38 },
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: { “x”: 2, “y”: 2, “w”: 8, “h”: 38 },
“sourceSize”: { “w”: 128, “h”: 256 },
“duration”: 100
},
``
These are the two frames from the walking animation. I do expect them to only differ in the “x” frame coordinate since they are next to each other. nice.
But this is only the first animation? The slice “wizard_right” which this should be inside of, has no mention of the finished coordinates:
```
{
“name”: “wizard_right”,
“color”: “#0000ffff”,
“data”: “#walk,#idle”,
“keys”: [
{
“frame”: 0,
“bounds”: { “x”: 2, “y”: 2, “w”: 8, “h”: 8 },
“pivot”: { “x”: 3, “y”: 3 }
}
]
}
```
So i am kinda stuck…
I am trying to learn/understand this workflow so i re-drew the animations from rotmg.
refs:
I cant (sadly) attach the aseprite file to this post apparently.
The sprite sheet:
The json:
```json
{
"frames": [
{
"filename": "#idle_0",
"frame": { "x": 38, "y": 2, "w": 8, "h": 38 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 2, "y": 2, "w": 8, "h": 38 },
"sourceSize": { "w": 128, "h": 256 },
"duration": 100
},
{
"filename": "#walk_0",
"frame": { "x": 2, "y": 42, "w": 8, "h": 38 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 2, "y": 2, "w": 8, "h": 38 },
"sourceSize": { "w": 128, "h": 256 },
"duration": 100
},
{
"filename": "#walk_1",
"frame": { "x": 12, "y": 42, "w": 8, "h": 38 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 2, "y": 2, "w": 8, "h": 38 },
"sourceSize": { "w": 128, "h": 256 },
"duration": 100
},
{
"filename": "#attack_0",
"frame": { "x": 2, "y": 2, "w": 16, "h": 38 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 12, "y": 2, "w": 16, "h": 38 },
"sourceSize": { "w": 128, "h": 256 },
"duration": 100
},
{
"filename": "#attack_1",
"frame": { "x": 20, "y": 2, "w": 16, "h": 38 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 12, "y": 2, "w": 16, "h": 38 },
"sourceSize": { "w": 128, "h": 256 },
"duration": 100
}
],
"meta": {
"app": "http://www.aseprite.org/",
"version": "1.3.17.2-x64",
"image": "player_characters.png",
"format": "RGBA8888",
"size": { "w": 48, "h": 82 },
"scale": "1",
"frameTags": [
{
"name": "idle",
"from": 0,
"to": 0,
"direction": "forward",
"color": "#000000ff"
},
{
"name": "walk",
"from": 1,
"to": 2,
"direction": "forward",
"color": "#000000ff"
},
{
"name": "attack",
"from": 3,
"to": 4,
"direction": "forward",
"color": "#000000ff"
}
],
"layers": [
{ "name": "wizard", "opacity": 255, "blendMode": "normal" }
],
"slices": [
{
"name": "wizard_up",
"color": "#0000ffff",
"data": "#attack",
"keys": [
{
"frame": 0,
"bounds": { "x": 12, "y": 32, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_down",
"color": "#0000ffff",
"data": "#attack",
"keys": [
{
"frame": 0,
"bounds": { "x": 12, "y": 22, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_left",
"color": "#0000ffff",
"data": "#attack",
"keys": [
{
"frame": 0,
"bounds": { "x": 12, "y": 12, "w": 16, "h": 8 },
"pivot": { "x": 12, "y": 3 }
}
]
},
{
"name": "wizard_right",
"color": "#0000ffff",
"data": "#attack",
"keys": [
{
"frame": 0,
"bounds": { "x": 12, "y": 2, "w": 16, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_up",
"color": "#0000ffff",
"data": "#walk,#idle",
"keys": [
{
"frame": 0,
"bounds": { "x": 2, "y": 32, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_down",
"color": "#0000ffff",
"data": "#walk,#idle",
"keys": [
{
"frame": 0,
"bounds": { "x": 2, "y": 22, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_left",
"color": "#0000ffff",
"data": "#walk,#idle",
"keys": [
{
"frame": 0,
"bounds": { "x": 2, "y": 12, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
},
{
"name": "wizard_right",
"color": "#0000ffff",
"data": "#walk,#idle",
"keys": [
{
"frame": 0,
"bounds": { "x": 2, "y": 2, "w": 8, "h": 8 },
"pivot": { "x": 3, "y": 3 }
}
]
}
]
}
}
```