What is Spine?

Spine
#1

Spine is a game development tool for building 2D skeletal animations. It has support for Corona so that you can play animations in Corona just as they were designed in Spine*.

You can read more at these links:
http://esotericsoftware.com/
http://www.kickstarter.com/projects/esotericsoftware/spine

*There is one caveat – if you use non-uniform scaling, Corona is unable to draw the images with skew, so the animation may not look correct. Non-uniform scaling means scaling a bone differently on the X axis than on the Y axis. If you scale both axis the same amount it works fine. Corona says they are working on being able to draw images with skew (quadrilaterals). [import]uid: 221023 topic_id: 35759 reply_id: 335759[/import]

#2

Check out this sweet dragon by ODI EntertainmenT:
[import]uid: 221023 topic_id: 35759 reply_id: 142251[/import]

#3

This looks fantastic! I downloaded and play with it just a little bit (will do more later) BUT I have a stupid question: How do you actually record each pose? I can see that I move (ie rotate) the bones on the sample, so I did that and now i have new pose of character, how do i record that move or added to the current animation?

Again, I cannot to play more with this superbe soft! It will make animations so much easier for novice like me.

Thanks.

Mo

ps: Did anybody played with it here? if yes, I would some pointers. [import]uid: 100814 topic_id: 35759 reply_id: 142273[/import]

#4

Did your read this?
http://esotericsoftware.com/spine-documentation/
In a nutshell, go to animate mode, pose your skeleton, press K, move the timeline position, pose your skeleton, press K. You can also set keys as you change each value. If you don’t set a key, the value is lost when the timeline position changes. [import]uid: 221023 topic_id: 35759 reply_id: 142275[/import]

#5

THANKS! Yes I read the doc but it was late night and I totally missed the info. Sorry! I did what you said and I can tell it is a LOT of fun! It works perfectly. Great tool. I have couple questions and I apologize in advance if they are covered already (could not find it or I do not understand the details…can you tell I am new at this:)

1- I modified the current animation (boy) but the movement I edited seems rather faster (I made the boy do a flip!) How do i slow the movement?

2- I can see that the boy is made of multiple images (head, torso…) It really looks good when animated, How do you actually cut up the parts to make it look seamless? Do you design the parts separately how you can just start with an image and cut it in pieces?

3- How to use with Corona? I will assume it will be in form of sprites? (is the software output bunch of png’s? spritesheets?

Again this is a wonderful tool for novice like me that wants to use more animations in game. I am vety sorry if the questions above are obvious.

THANKS!

Mo [import]uid: 100814 topic_id: 35759 reply_id: 142281[/import]

#6

  1. You control the speed by where you set the keys in the timeline. The timeline uses 30 frames per second, so frame 30 is 1 second, frame 60 is 2 seconds, etc. You can drag a box in the dopesheet around all keys, then drag the edge of the box to retime the whole animation longer or shorter. The scaled keys may fall on non-integral frames, which will work fine but may make editing the new key positions a little tricky. Hold shift while dragging a key or the edge of a selection box to not snap to frames.

  2. I’m just the coder. :wink: I’ll let Shiu (the artist) answer this one.

  3. Output can be a number of things: video, png/gif/jpgs, JSON, or binary. For Corona you can export as JSON then use the Spine runtime to load the JSON and individual images and also draw it in Corona exactly as it appears in Spine. [import]uid: 221023 topic_id: 35759 reply_id: 142293[/import]

#7

(From Shiu)
I find the easiest way to cut out the pieces is to use layer masks.

  1. Combine all your layers into a single layer (don’t delete the original)
  2. Paint a layer mask for each part you want shown and if you need to edit the image a bit just do so on the same layer, you just need to make sure you keep the original.
  3. Export each layer as a separate image.

And also a small photoshop script you can bind to an action so you can quickly export out each layer as a PNG file.
https://dl.dropbox.com/u/18870395/exportPNGwithLayerName.zip
I’ve created three actions using this script and bound them to three different function keys.
F4 exports at 25% scale
F5 exports at 50% scale
F6 exports at 75% scale

If you need more help, let me know and I’ll try to supply some screenshots etc. Just a tad bit busy right now :slight_smile: [import]uid: 221023 topic_id: 35759 reply_id: 142296[/import]

#8

THANKS. Exactly what I was looking for! Thank you for the taking the time and sorry my questions were obvious!

Mo [import]uid: 100814 topic_id: 35759 reply_id: 142297[/import]

#9

Hey esoteric software
I bought spine a couple of days ago and tried the corona runtime. You did a great job! I have been looking for this kind of software for a long time. Spine does what spriter never really managed to pull off. I highly recommend spine to anyone in the corona community. It’s simple, well designed and works really well with corona. ( and by the way I don’t know the people behind esoteric software :slight_smile: )
Thanks!

[import]uid: 13632 topic_id: 35759 reply_id: 142301[/import]

#10

Hey guys,

Very cool tool!

Congratulations on your successful kickstart, it was good to see both of you with Charles in the Corona Geek episode.

skeleton.flipX …really nice there!

I Played with Spine all evening tonight and was able to export and view my project in the simulator by modifying the included main.lua. which was extremely helpful.

I realize you guys are very busy, but I’ve got a couple questions if you can find time.

I looked over your board and didn’t see my issues discussed.

I can’t figure out how to completely hide the bones. I’ve disabled the bones “eye” in the Spine tool, but now I’ve got a fine red line representing the bone. When I scale down the export, these lines extend beyond the scaled down animated body parts.

How can I completely “hide” the bones on export?

I also can’t figure out how to “hide” the bones pivots joints, they appear as chartreuse dots in the exported animation, obviously these need to go too.

It seems the alpha for both the red lines and green dots could be set to “0”, I just don’t know where to do it.

Thanks,

Nail [import]uid: 106779 topic_id: 35759 reply_id: 142474[/import]

#11

Hi Nail, glad you were able to get productive relatively easily. :slight_smile: To not draw the lines on top of your skeleton, just set skeleton.debug = false (or don’t set it at all). [import]uid: 221023 topic_id: 35759 reply_id: 142481[/import]

#12

Thanks Nate,

I noticed that variable was set to true, but obviously didn"t try changing it to false, my bad.

May I suggest you add comments after each variable declaration in the main.lua briefly explaining what what they control. I’m sure it would help others also that are new to Spine.

I did try setting the boolean in the Runtime listener to false which set the loopAnimation = false.

I’ve never been able to produce quality custom sprites or been able to afford having them built for me, Spine has removed that barrier and now I can start using high quality animations throughout my projects, I am stoked.

Thanks again for the amazing tool.

Nail [import]uid: 106779 topic_id: 35759 reply_id: 142510[/import]

#13

Thanks, I’m really glad Spine is useful for you. :slight_smile:

I added some comments. :slight_smile: [import]uid: 221023 topic_id: 35759 reply_id: 142528[/import]

#14

Is is possible to swap images in the timeline?
e.g. for a eye blink.
[import]uid: 13632 topic_id: 35759 reply_id: 142535[/import]

#15

Sure, set a timeline position then change the visible image in the tree for a slot. A yellow dot will appear in the key column for the slot, indicating an un-keyed change has been made. Click the dot and it will change to red to indicate a key has been set. [import]uid: 221023 topic_id: 35759 reply_id: 142551[/import]

#16

Great thanks.
[import]uid: 13632 topic_id: 35759 reply_id: 142563[/import]

#17

Check out this sweet dragon by ODI EntertainmenT:
[import]uid: 221023 topic_id: 35759 reply_id: 142251[/import]

#18

This looks fantastic! I downloaded and play with it just a little bit (will do more later) BUT I have a stupid question: How do you actually record each pose? I can see that I move (ie rotate) the bones on the sample, so I did that and now i have new pose of character, how do i record that move or added to the current animation?

Again, I cannot to play more with this superbe soft! It will make animations so much easier for novice like me.

Thanks.

Mo

ps: Did anybody played with it here? if yes, I would some pointers. [import]uid: 100814 topic_id: 35759 reply_id: 142273[/import]

#19

Did your read this?
http://esotericsoftware.com/spine-documentation/
In a nutshell, go to animate mode, pose your skeleton, press K, move the timeline position, pose your skeleton, press K. You can also set keys as you change each value. If you don’t set a key, the value is lost when the timeline position changes. [import]uid: 221023 topic_id: 35759 reply_id: 142275[/import]

#20

THANKS! Yes I read the doc but it was late night and I totally missed the info. Sorry! I did what you said and I can tell it is a LOT of fun! It works perfectly. Great tool. I have couple questions and I apologize in advance if they are covered already (could not find it or I do not understand the details…can you tell I am new at this:)

1- I modified the current animation (boy) but the movement I edited seems rather faster (I made the boy do a flip!) How do i slow the movement?

2- I can see that the boy is made of multiple images (head, torso…) It really looks good when animated, How do you actually cut up the parts to make it look seamless? Do you design the parts separately how you can just start with an image and cut it in pieces?

3- How to use with Corona? I will assume it will be in form of sprites? (is the software output bunch of png’s? spritesheets?

Again this is a wonderful tool for novice like me that wants to use more animations in game. I am vety sorry if the questions above are obvious.

THANKS!

Mo [import]uid: 100814 topic_id: 35759 reply_id: 142281[/import]