DanielEgan

I am not sure what forum to put this in. I have looked through the forum to see if I could find and answer to this but most of the posts on this topic refer to the json export.

I am trying to export to PNG to just simply import into GameMaker.

I create my images using Inkscape, and export each piece (body, head, upper leg, etc..) to use in Spine. This works fine if I save them from Inkscape at 800px x 800px. But obviously when I export from Spine the related images are too big for my game. (and shrinking them in photoshop pixelates them)

If I save them from Inkscape in the size I want ( 64 x 64) then try to use them in Spine.. it is too small and increasing the viewing size in Spine makes it fuzzy and hard to line up.

Any help would be appreciated.

I am teaching kids how to build games using gamemaker and want to include Spine so exporting to binary or json doesn't fit into the level of the course.
DanielEgan
  • Postovi: 10

Nate

Click the Spine logo in the upper left of Spine, choose Settings, and uncheck linear filtering.
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Thanks Nate,

That makes it pixelated instead of fuzzy :) Am I to assume that is my best bet?

Meaning, is that my only option when exporting pngs? Or is there another option in spine to line things up with larger images (so it is clear) and then use different images later?

I am testing bringing in his parts at 256 and then reducing the results from spine(the png's) to 48 using photoshop. Is that my best bet?

Daniel
DanielEgan
  • Postovi: 10

Nate

Many people like disabling linear filtering when working with smaller images.

You can design your animations at any size in Spine and then use images that are a different size at runtime. See here:
http://esotericsoftware.com/spine-using ... s/#scaling
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Thanks Nate.. but that's only if you are using json right? If I am just exporting the .png files, then I cant do that right?

As I said above, I am using this to show younger kids how to make games and json is over their head.
DanielEgan
  • Postovi: 10

DanielEgan

I cant imagine that this is an edge case. Am I the only one that needs images at 48 x 48 or 64 x 64 and doesn't use the runtimes.. just wants the pngs to load into my game. If I use bigger in Spine to be able to see to align the images and then try to reduce the size after in photoshop, they of course look like crap.. If I use the image size I need then I cant line them up in spine. :(
DanielEgan
  • Postovi: 10

Nate

Ah forgot you are exporting images. Do they really look so bad resized down after export?

I don't understand why you aren't able to line things up in Spine? People have done Spine animations with low resolution, retro pixel graphics.
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Hey Nate,

The trouble I am having is this. When the image is too small (64 x 64) then I don't really have room to manipulate the bones for animation.

I have posted a couple of pics to show you what I mean.

http://thesociablegeek.com/uncategorize ... r-sprites/

When the image is too small, I am not able to actually see the bones to manipulate them for animation. In addition, It is really hard to line up the different pieces at that resolution (3rd pic on post)

What I have been doing for now is using a bigger image, creating the animation, and then swapping out for smaller image pieces. When I do this, I then need to of course shorten the bones (Translate).

If I reduce the images after exporting the animation, it creates anomalies around the edges.
Does that make sense?

Daniel
DanielEgan
  • Postovi: 10

Nate

Ah, I see, your 64x64 is the total size of your animation, each piece is much smaller. Definitely don't use linear filtering at that small size. I have planned a feature to resize the bones so when you zoom in they aren't so large. I guess what you need is a feature for resizing the individual images and then exporting. It may be some time before I can get to that I'm afraid. :(

You might be able to design animations at a large size, export JSON, write a script that scales the bone positions and animation translation key amounts, import the resulting JSON back into Spine, use images with the same names at the smaller size, and then export at the small size. Make sense?
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Sure... that makes sense. Do you have a quick tip as to what I need to modify in the JSON. Like an example of one data node and how to change it. Do I need to Change the bones, slots, or skins section? Or all three. I assume I would not need to change the animations since when I do it manually it works fine.

Looking at the json.. It looks like Slots would not need to be changed.. but maybe bones and skins.

If you had a chance to help with the math to scale them ... IE 1024 x 1024 original to work with in Spine. need 64 x 64 images (pieces of course smaller).

So I would need to scale down 16x .... So do I just need to scale the length? the x and y?

Thanks for you help. I could write the script from there.

Daniel
DanielEgan
  • Postovi: 10

Nate

You need to adjust 1) bone x, y, length, 2) attachment x, y, width, height, 3) bounding box vertices, and 4) translate timeline key x, y. These are the same adjustments that SkeletonJson does. Multiply all of these by a constant. The constant value is scaledSize / originalSize. Eg, if you scale 1000x1000 down to 100x100 then you use a constant of 100 / 1000 = 0.1.
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

So following your numbering :

1) OK.. So in the bones... the x y and length
{ "name": "L_Let_Upper", "parent": "Hip", "length": 55.58, "x": 15.56, "y": -26.33, "rotation": -45.72 },

2)The only place I see attachment is in the slots.. but I don't see an x, y
{ "name": "Clyde_L_Foot", "bone": "L_Foot", "attachment": "Clyde_L_Foot" },

3)I am not sure what you mean here :

bounding box vertices


4)And in Animation I see Translate, but I am not sure what to change.

"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.1666, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.3333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }

Thanks again for your help.

Daniel
DanielEgan
  • Postovi: 10

Nate

1) Bones, you got it.
2) Attachments are in the skins: http://esotericsoftware.com/spine-json-format/#skins
3) I need to add bounding boxes to that page. :$ If you don't use them, don't worry about it.
4) Multiple the x and y in the translate timeline by the scale.
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Almost there... Thanks.

My json export doesn't have an X or Y just attachment name. (for attachments)

sorry... That was slots... Let me look again when I get back home.
DanielEgan
  • Postovi: 10

Nate

Yeah, not slots. Attachments are under skins. Note x or y can be omitted, they are assumed to be zero in that case.
Avatar
Nate

Nate
  • Postovi: 11846

DanielEgan

Below is what mine looks like. I was looking for the word attachment (sorry) So below, skinName is 'default'. slotName is 'Clyde_L_Foot', and attachmentName is 'Clyde_L_Foot'

"skins": {
"default": {
"Clyde_L_Foot": {
"Clyde_L_Foot": { "x": 34.32, "y": 3.09, "rotation": 2.33, "width": 121, "height": 43 }
},
"Clyde_L_Hand": {
"Clyde_L_Hand": { "x": 26.68, "y": -10.34, "rotation": 4.34, "width": 68, "height": 58 }
},


So #1 Bones.. got it
#2 Attachment (Above.. got it)
#3 Bounding Box.. not using, so ignoring...
#4 Verifying below


So if I find Translate in the animation like below, I should multiply all the x and y's I find with the scale.

"translate": [
{ "time": 0, "x": -23.87, "y": -2.98 },
{ "time": 0.1666, "x": -16.41, "y": -10.44 },
{ "time": 0.2, "x": -2.88, "y": -13.94 },
{ "time": 0.3333, "x": -8.95, "y": -17.9 },
{ "time": 0.6666, "x": -23.87, "y": -2.98 }


Thanks for you patience.. Much appreciated.

Daniel
DanielEgan
  • Postovi: 10

Nate

Yep, you got it!
Avatar
Nate

Nate
  • Postovi: 11846

rstarks

I wrote an AS3 script to scale the appropriate values within the skeleton JSON file and we're having a little trouble with it. It almost works but some of the animations get messed up. I'm scaling anything with the key value of x, y, width, height, or length as long as it isn't within rotate or scale. Here's the specific logic I'm using in case it would help:
//function to recursively check a decoded JSON object
function processParameters(jsonObject:Object):void {
for(var key:String in jsonObject) {
var n:Number = Number(jsonObject[key]);
if (isNaN(n)) {
if (key != "rotate" && key != "scale") {
processParameters(jsonObject[key]);
}
} else {
if (key == "x" || key == "y" || key == "width" || key == "height" || key == "length") {
jsonObject[key] = n * SCALE_VALUE;
}
}
}
}
We've scaled the images by the same amount. I was wondering if anyone else had better luck with this process.
rstarks
  • Postovi: 5

Nate

Reading your thread again...
DanielEgan je napisao/la:Am I the only one that needs images at 48 x 48 or 64 x 64 and doesn't use the runtimes.. just wants the pngs to load into my game. If I use bigger in Spine to be able to see to align the images and then try to reduce the size after in photoshop, they of course look like crap.. If I use the image size I need then I cant line them up in spine. :(
Can you set the root bone X and Y scale to something smaller and then export images? Eg, here is a tiny spineboy (at 60fps!):

Avatar
Nate

Nate
  • Postovi: 11846

rstarks

We were able to change the X scale value of the root bone in the .json file and it seemed to work. The Y scale was zero. It appears that the order of the .json file as it is generated from Spine is precise but the script I mentioned in my previous reply loses this order. I would have thought that the ordering of the file didn't matter but apparently it does. Is there an ETA on when a scaling feature like DanielEgan requested could be implemented? Thanks.
rstarks
  • Postovi: 5

Nate

rstarks, I'm not sure what you are trying to accomplish? If you want to scale using JSON, you can specify a scale for the SkeletonJson class which loads the data.

Order in JSON only matters for JSON arrays.

A root Y scale of 0 would ruin the skeleton...
Avatar
Nate

Nate
  • Postovi: 11846

rstarks

Sorry for not being specific, I'm actually a UI designer/part-time coder trying to help an artist with some of his work. I'm a little lost. As far as I can understand, we'd like to be able to work with the character at a larger size and then export a smaller version of the same character with its animations scaled down properly. Basically I was asked to modify the values of the .json file based on some of the details in this thread.
{"bones":[{"name":"root","x":0.96]},{"name":"bone","parent":"root","x":38.81,"y":278.66}
Based on your previous post I took the original, working .json file and changed the x value above. Notice there isn't a Y value -- which sounds like it might be another problem, or perhaps I changed the wrong thing. The x value was 1.92 but I changed it to 0.96 and then we loaded assets into Spine that were 50% of the original size. In any case, thanks for taking time to respond to this, I appreciate the help.
rstarks
  • Postovi: 5

Nate

No worries, that helps. :)

See docs for values of attributes omitted from the JSON:
http://esotericsoftware.com/spine-json-format/

This thread is about using high resolution images in Spine, then exporting images at a smaller size. The answer is to use X and Y scale on the root bone in Spine before exporting.

What you want is different, you want to use high resolution images in Spine, then use different resolution images at runtimes. No need to mess with the JSON, use SkeletonJson scaling at runtime:
http://esotericsoftware.com/spine-using ... s/#scaling
Avatar
Nate

Nate
  • Postovi: 11846

rstarks

http://animagnum.com/projects/spine/SpineScale.zip

I made a quick and dirty tool that will adjust an exported JSON file in case you need to scale an entire animation to work with different sized assets. The swf will require some form of Flash Player in order to run as it currently does not work when run through a browser. The tool looks for a file named skeleton.json in the same directory as the swf. You can easily rename a file and then change it back when you're done. Enter in the scale value you want to multiply the object by and then click the scale button. You will be prompted to save a new file so the original remains untouched.

Here's an example of how it works:

I created some assets and an animation at one scale (1x) but needed to resize the animation for 2x. First I made 2x assets in Photoshop and then replaced the original assets in my /images/ folder. Then I used my tool to modify the JSON file and used a scale value of 2. This process multiplied all of the relevant values by 2 and then saved a copy of the original JSON. Back in Spine I clicked "Import Data..." and selected my modified JSON file. Then I pointed it to the directory with the resized images. This resulted in doubling the size of the animation I had previously been using.
rstarks
  • Postovi: 5

Black Hive

Nate je napisao/la:Reading your thread again...
DanielEgan je napisao/la:Am I the only one that needs images at 48 x 48 or 64 x 64 and doesn't use the runtimes.. just wants the pngs to load into my game. If I use bigger in Spine to be able to see to align the images and then try to reduce the size after in photoshop, they of course look like crap.. If I use the image size I need then I cant line them up in spine. :(
Can you set the root bone X and Y scale to something smaller and then export images? Eg, here is a tiny spineboy (at 60fps!):

How do you do this? When you say "root bone" are you referring to the bone all the other wants are parented to? I have a hip bone (like the run anim tutorial), but if I select it and try to scale... all sorts of weirdness happens. (just some of the images scale in place)

I am surprised there isn't a dialog to specify size of images on export.
Black Hive
  • Postovi: 28


Natrag na Off-topic