यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

Image Export Size help

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.

Nate

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

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

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

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

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. 🙁

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.

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

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?

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

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.

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

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.

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.

Nate

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

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

Nate

Yep, you got it!

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.

Nate

Reading your thread again...

DanielEgan लिखा
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!):

Loading Image

अगला पन्ना »