Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How Spine works with corona?
Started by LairdGames Feb 17 2013 04:11 PM

31 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

LairdGames

[GLOBAL: userInfoPane.html]
LairdGames
  • Contributor

  • 969 posts
  • Corona SDK

Hello guys.

I am still curious how to go from designing an animation with Spine to actually using it with Corona. My understanding that Spine output a Json file but what's next? How do I use that file with corona? Is there any list of command that control the animations?

I hope it is not an obvious question!

Mo
@LairdGames

EDIT: I agree with people here. Spine is one of the best thing that happened recently for indies developers!
uid: 100814 topic_id: 36022 reply_id: 336022


[TOPIC: post.html]
#2

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

Hey Mo,

I think they are working on documentation, there's not much now. If you go to their site and browse the forum, there are some insights to glean.

Not sure if you saw my post, you didn't leave a comment so no idea. Take a look at the video I made of my Super iBot integration. I think you'll like what you see. You'll also want to read the thread.

Super iBot created with Spine thread

Since my app was built and working, even though it looks like a simple platformer, there is a lot going on with the iBot. So what I basically did was set the static iBot .png to a .01 alpha after I got it working. If I stumble, I go back and set the iBot .png alpha to 1 so I can see where the animation should be. Anyways, basically the animations coordinates track the iBot .png's x & y coordinates.

It actually works quite well to have an easily visible "marker" showing where the animation should be playing and I'll use this technique on new projects, it really helps a newb like me.

You want to study the main.lua that comes with the spineboy example. You'll see what's going on there. I used it as a template to integrate.

Ok, that should cover the integration concept, so here's basically how it works.

First I created a new module to hold everything.... mySpine.lua :)

Then you load the skeleton data for the animation. I only have 1 character, my iBot, so I only have 1 Setup pose that contains all the "bones" and data relating to the basic pose.

local skeletonData = json:readSkeletonDataFile("data/YourSkeleton.json")

Then you create the "AnimationObject" I guess it would be called.

YourAnimationObject = json:readAnimationFile(skeletonData, "data/skeleton-YourSpineCreatedAnimation.json")

I have only created 1 "AnimationObject" and keep changing out my different animations it plays. Since there are very few Spine examples, I had to create my own methods to handle changing animations and well, pretty much everything else. Nate @ Spine had to hand hold me through a few parts I didn't understand. The thread is on their board, a couple of good insights there.

I built a table that holds all the animations and just grab them as I need them.

The animations update every frame with the Runtime listener you'll see in the example main.lua.

Realize the example doesn't even come close to displaying what can be done programmically
with the Spine runtimes which are modules.

So bascially, I only "load" the json animations built in the Spine editor into the "AnimationObject" which are played through the Runtime listener. Building the animations is the easy part from my experience due to the lack of lua examples.

The next thing I knew, I had a fully animated iBot jumping all over my display screen replacing the boring static .png. Oh...he has a cannon now that aims with the user's drag to fire the electro orbs.

Yeah, you can dynamically alter the animations or poses you make in Spine with "touch" events...it's really cool.

Spine ROCKS!

Nail



uid: 106779 topic_id: 36022 reply_id: 143156


[TOPIC: post.html]
#3

ojnab

[GLOBAL: userInfoPane.html]
ojnab
  • Contributor

  • 615 posts
  • Corona SDK

I guess what you basicly need to know is that the runtime module you should require in order to import the json files spine exports comes with spine when you purchase it. So you can't import the animations from spine with the trial version.
I agree spine is very cool.
uid: 13632 topic_id: 36022 reply_id: 143158


[TOPIC: post.html]
#4

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

ojnab, you are correct. I didn't even realize that. That's a very important part of the equation, the Runtime modules and obviously the example main.lua. eeek!

I only tried the trial editor for a couple of minutes and instantly saw it would work for me and went ahead and purchased the tool right away, I've been buried in it since and didn't even realize the runtimes aren't included with the trial. Sorry about that gang.

There's really not a lot more to the main.lua than what I posted above, just add the listener and a few parameters.

Nail
uid: 106779 topic_id: 36022 reply_id: 143161


[TOPIC: post.html]
#5

ojnab

[GLOBAL: userInfoPane.html]
ojnab
  • Contributor

  • 615 posts
  • Corona SDK

@nail
He he. I also bought it after trying it for something like 2 seconds.
I don't understand why there isn't anymore fuzz about spine in this forum.
This is the coolest thing that happend for corona based games since corona!
uid: 13632 topic_id: 36022 reply_id: 143166


[TOPIC: post.html]
#6

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

@ojnab, agreed.

Spine is like a "mini Corona" inside Corona that specializes in graphics. Talk about really "bringing apps to life"! Jaw on floor thinking about the relatively easy possibilities...

Nail
uid: 106779 topic_id: 36022 reply_id: 143210


[TOPIC: post.html]
#7

LairdGames

[GLOBAL: userInfoPane.html]
LairdGames
  • Contributor

  • 969 posts
  • Corona SDK

Thank you guys. Sorry I am sorry for the delay, i am in vacation with limited Internet. I cannot wait to get home and play with Spine (don't tell my wife:). Thanks Nail, you ibot looks phenomenal!

I will have a million more questions when I get back online!

Mo
uid: 100814 topic_id: 36022 reply_id: 143275


[TOPIC: post.html]
#8

chevol

[GLOBAL: userInfoPane.html]
chevol
  • Contributor

  • 292 posts
  • Corona SDK

Thanks xnailbender you answered my questions I had about Spine too. I tried it for a few mins and backed them on kickstarter so no Runtimes for me until they release it on GitHub or Saturday when the kickstarter ends. Spine is an amazing tool!
uid: 58885 topic_id: 36022 reply_id: 143279


[TOPIC: post.html]
#9

LairdGames

[GLOBAL: userInfoPane.html]
LairdGames
  • Contributor

  • 969 posts
  • Corona SDK

Hello guys.

I am still curious how to go from designing an animation with Spine to actually using it with Corona. My understanding that Spine output a Json file but what's next? How do I use that file with corona? Is there any list of command that control the animations?

I hope it is not an obvious question!

Mo
@LairdGames

EDIT: I agree with people here. Spine is one of the best thing that happened recently for indies developers!
uid: 100814 topic_id: 36022 reply_id: 66022


[TOPIC: post.html]
#10

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

Hey Mo,

I think they are working on documentation, there's not much now. If you go to their site and browse the forum, there are some insights to glean.

Not sure if you saw my post, you didn't leave a comment so no idea. Take a look at the video I made of my Super iBot integration. I think you'll like what you see. You'll also want to read the thread.

Super iBot created with Spine thread

Since my app was built and working, even though it looks like a simple platformer, there is a lot going on with the iBot. So what I basically did was set the static iBot .png to a .01 alpha after I got it working. If I stumble, I go back and set the iBot .png alpha to 1 so I can see where the animation should be. Anyways, basically the animations coordinates track the iBot .png's x & y coordinates.

It actually works quite well to have an easily visible "marker" showing where the animation should be playing and I'll use this technique on new projects, it really helps a newb like me.

You want to study the main.lua that comes with the spineboy example. You'll see what's going on there. I used it as a template to integrate.

Ok, that should cover the integration concept, so here's basically how it works.

First I created a new module to hold everything.... mySpine.lua :)

Then you load the skeleton data for the animation. I only have 1 character, my iBot, so I only have 1 Setup pose that contains all the "bones" and data relating to the basic pose.

local skeletonData = json:readSkeletonDataFile("data/YourSkeleton.json")

Then you create the "AnimationObject" I guess it would be called.

YourAnimationObject = json:readAnimationFile(skeletonData, "data/skeleton-YourSpineCreatedAnimation.json")

I have only created 1 "AnimationObject" and keep changing out my different animations it plays. Since there are very few Spine examples, I had to create my own methods to handle changing animations and well, pretty much everything else. Nate @ Spine had to hand hold me through a few parts I didn't understand. The thread is on their board, a couple of good insights there.

I built a table that holds all the animations and just grab them as I need them.

The animations update every frame with the Runtime listener you'll see in the example main.lua.

Realize the example doesn't even come close to displaying what can be done programmically
with the Spine runtimes which are modules.

So bascially, I only "load" the json animations built in the Spine editor into the "AnimationObject" which are played through the Runtime listener. Building the animations is the easy part from my experience due to the lack of lua examples.

The next thing I knew, I had a fully animated iBot jumping all over my display screen replacing the boring static .png. Oh...he has a cannon now that aims with the user's drag to fire the electro orbs.

Yeah, you can dynamically alter the animations or poses you make in Spine with "touch" events...it's really cool.

Spine ROCKS!

Nail



uid: 106779 topic_id: 36022 reply_id: 143156


[TOPIC: post.html]
#11

ojnab

[GLOBAL: userInfoPane.html]
ojnab
  • Contributor

  • 615 posts
  • Corona SDK

I guess what you basicly need to know is that the runtime module you should require in order to import the json files spine exports comes with spine when you purchase it. So you can't import the animations from spine with the trial version.
I agree spine is very cool.
uid: 13632 topic_id: 36022 reply_id: 143158


[TOPIC: post.html]
#12

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

ojnab, you are correct. I didn't even realize that. That's a very important part of the equation, the Runtime modules and obviously the example main.lua. eeek!

I only tried the trial editor for a couple of minutes and instantly saw it would work for me and went ahead and purchased the tool right away, I've been buried in it since and didn't even realize the runtimes aren't included with the trial. Sorry about that gang.

There's really not a lot more to the main.lua than what I posted above, just add the listener and a few parameters.

Nail
uid: 106779 topic_id: 36022 reply_id: 143161


[TOPIC: post.html]
#13

ojnab

[GLOBAL: userInfoPane.html]
ojnab
  • Contributor

  • 615 posts
  • Corona SDK

@nail
He he. I also bought it after trying it for something like 2 seconds.
I don't understand why there isn't anymore fuzz about spine in this forum.
This is the coolest thing that happend for corona based games since corona!
uid: 13632 topic_id: 36022 reply_id: 143166


[TOPIC: post.html]
#14

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

@ojnab, agreed.

Spine is like a "mini Corona" inside Corona that specializes in graphics. Talk about really "bringing apps to life"! Jaw on floor thinking about the relatively easy possibilities...

Nail
uid: 106779 topic_id: 36022 reply_id: 143210


[TOPIC: post.html]
#15

LairdGames

[GLOBAL: userInfoPane.html]
LairdGames
  • Contributor

  • 969 posts
  • Corona SDK

Thank you guys. Sorry I am sorry for the delay, i am in vacation with limited Internet. I cannot wait to get home and play with Spine (don't tell my wife:). Thanks Nail, you ibot looks phenomenal!

I will have a million more questions when I get back online!

Mo
uid: 100814 topic_id: 36022 reply_id: 143275


[TOPIC: post.html]
#16

chevol

[GLOBAL: userInfoPane.html]
chevol
  • Contributor

  • 292 posts
  • Corona SDK

Thanks xnailbender you answered my questions I had about Spine too. I tried it for a few mins and backed them on kickstarter so no Runtimes for me until they release it on GitHub or Saturday when the kickstarter ends. Spine is an amazing tool!
uid: 58885 topic_id: 36022 reply_id: 143279


[TOPIC: post.html]
#17

d3mac123

[GLOBAL: userInfoPane.html]
d3mac123
  • Contributor

  • 248 posts
  • Corona SDK

I just downloaded Spine and followed the tutorial/sample code they have. However, I am looking for a way to play the walk animation only when user press a button (instead of having it in a Runtime/eventFrame situation.

 

I see xnailbender did a great job controlling spine animations via gestures in his game. Any tips on how to do that?

 

Thanks a lot,

Alex



[TOPIC: post.html]
#18

matias9

[GLOBAL: userInfoPane.html]
matias9
  • Observer

  • 18 posts
  • Corona SDK

I just downloaded Spine and followed the tutorial/sample code they have. However, I am looking for a way to play the walk animation only when user press a button (instead of having it in a Runtime/eventFrame situation.

 

I see xnailbender did a great job controlling spine animations via gestures in his game. Any tips on how to do that?

 

Thanks a lot,

Alex

 

Hi Alex,

  currently the Spine Corona runtime doesn't really give a lot of tools to handle animations, you have to basically roll your own tools for it. To run the animation only when a button is down, there are (at least!) two different approaches you can take:

 

1) only call animation:apply in the eventframe if the button is down during that event

2) start/stop your own timer that calls animation:apply when the button is pressed

 

Hope this helps,

  Matias



[TOPIC: post.html]
#19

d3mac123

[GLOBAL: userInfoPane.html]
d3mac123
  • Contributor

  • 248 posts
  • Corona SDK

Matias,

 

Thanks for the input but my issue is how to "run" an animation, for example calling:

walkAnimation:apply(skeleton, <here is the issue>, true)

 

In the original sample, they use a Runtime event that loops the animation time forever, which generates the movement. My (maybe too) basic question is, how to set the animation:apply to play the frames? Any example?

 

Thanks a lot!

Alex



[TOPIC: post.html]
#20

matias9

[GLOBAL: userInfoPane.html]
matias9
  • Observer

  • 18 posts
  • Corona SDK

Matias,

 

Thanks for the input but my issue is how to "run" an animation, for example calling:

walkAnimation:apply(skeleton, <here is the issue>, true)

 

In the original sample, they use a Runtime event that loops the animation time forever, which generates the movement. My (maybe too) basic question is, how to set the animation:apply to play the frames? Any example?

 

Thanks a lot!

Alex

 

Hi Alex,

  the second parameter passed to animation:apply is the time in seconds you want the animation to be in - the runtime will interpolate between the frames if your time falls between them.

 

Thus, you just need to make sure that that number increases between every call to animation:apply, preferably by the amount of seconds passed between the calls - or if it's paused, by 0 (in which case you don't need to apply the animation either).

 

To facilitate this, both the enterframe and timer events contain a property 'time' which signifies the number of milliseconds since the application was started, which you can use to keep your own animationtime in sync with the actual time keeping your animations smooth. The Spine sample also shows how to calculate delta (eg. the time between the calls to enterFrame or a timer) which you can then add to your time (when your animation is running) if your animation gets paused every now and then to avoid skipping.

 

Hope this helps,

  Matias



[TOPIC: post.html]
#21

d3mac123

[GLOBAL: userInfoPane.html]
d3mac123
  • Contributor

  • 248 posts
  • Corona SDK

Thanks again. I think my English was not enough to explain my issue :(

 

I set the spineBoy as a button, that should play the walk animation when clicked. My question is how to change the "animation time" inside the button listener? I tried a for loop but it did not work.

 

The sample code only shows an example using the enterFrame event listener, which is not applicable in this case. Do you have a sample code on how to do the walk from a button press?



[TOPIC: post.html]
#22

matias9

[GLOBAL: userInfoPane.html]
matias9
  • Observer

  • 18 posts
  • Corona SDK

Thanks again. I think my English was not enough to explain my issue :(

 

I set the spineBoy as a button, that should play the walk animation when clicked. My question is how to change the "animation time" inside the button listener? I tried a for loop but it did not work.

 

The sample code only shows an example using the enterFrame event listener, which is not applicable in this case. Do you have a sample code on how to do the walk from a button press?

 

Hi Alex,

  you shouldn't try to 'run' the animation from inside the event - otherwise nothing else would ever happen as you would never get out of that event. You should probably make the click event change a variable such as 'animationRunning' and then in the frameEnter event do something like:

 

if animationRunning then
  animationTime = animationTime + delta
  walkAnimation:apply(skeleton, animationTime, true)
  skeleton:updateWorldTransform()
end
 

 

Hope this helps,

  Matias



[TOPIC: post.html]
#23

d.mach

[GLOBAL: userInfoPane.html]
d.mach
  • Contributor

  • 974 posts
  • Corona SDK

Can you guys tell me please if scaling body parts of a character is working for Corona using Spine? I sometime read something about Corona having problems with the Spine scale functions. Is this true?

 

I want to create some "Flash" like character animations with scaled body parts... for example a breathing character who's torso is getting big and small in a scaled loop.

 

Thank you for your help!

 

Daniela



[TOPIC: post.html]
#24

xnailbender

[GLOBAL: userInfoPane.html]
xnailbender
  • Contributor

  • 362 posts
  • Corona SDK

D -

 

I haven't scaled individual body parts in my animations, so I don't know for sure.  I do scale my entire animation though, so don't think there would be a problem.

 

I like the idea of a "breathing" chest, cool!

 

Let us know how is works out for you.

 

Nail



[TOPIC: post.html]
#25

matias9

[GLOBAL: userInfoPane.html]
matias9
  • Observer

  • 18 posts
  • Corona SDK

There's indeed a problem with Corona and Spine when stuff gets scaled.

 

In particular, if an image is attached to a bone in an angle that's not one of the cardinal directions (0, 90, 180, 270) and the bone is scaled, the result becomes impossible to draw in Corona, as Corona can only draw textures to rectangles and not quads (see here for an example of what should happen).  The new Graphics engine that's been teased for a while should enable this, but I'm not sure when it will be released.

 

So, for now make sure your images are aligned to the bones and there should be no problems!




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]