Spine is Amazing! My Super iBot Integration...

#1

I’ve been playing with the Spine animator for the past 5 days and all I can say is WOW!

My illustration skills are terrible at best, so I was stuck with a static .png as my games hero. I’ve also never taken the time or had time, to work with sprites in Corona, so I’ve never gone there.

Other devs and users of my game Super iBot have commented that my hero, the iBot, was lacking at best, but what could I do? I’ve never worked with sprites, I can’t afford to have custom sprites produced, so I was stuck.

A few days ago the guys at Spine introduced their new animation tool in a post to the Corona Community. Charles also had them on a recent Corona Geeks episode (awesome show BTW) and they talked about their new tool. The Spine runtimes (lua modules) are impressive to say the least and work so smoothly.

When I downloaded the trial, I instantly knew this was the answer to replace my static hero. Since I had no artwork, it took my a 1/2 to figure out and create my iBot template in Photoshop. In this template pose he is standing and looking right. This is the only illustration I needed to work with Spine.

I created each body part as a new layer so I could easily capture a .png of each part to import into Spine.

In 5 days, I’ve been able to produce my animations and integrate them into my game. The integration isn’t complete, but is close. I don’t think 5 days going from a static hero to a fully animated hero is bad considering I’m a terrible artist, I have no animation experience, I had never used Spine (it’s brand new) and I’ve never used sprites.

Here’s a quick preview video of the Spine created iBot into my game for anyone interested in adding animation to their apps.

Spine Created iBot Preview Video

Right now, I’m working on creating “dynamically generated” animations that change relative to the users touch/drag. The Spine runtimes can open up so many possibilities. Load a pre-built animation and alter it in real time? Try that with sprites, this is new territory!

If I get it working, I’ll post another video. It’s only theory now, but should be possible.

IMO, Spine is the biggest thing to hit 2d animation in general and Corona in a long time.

Nail

[import]uid: 106779 topic_id: 35981 reply_id: 335981[/import]

#2

Really cool video! It’s great you are documenting your experience. Super glad to see you were able to quickly be productive even though you are relatively new to this stuff. Kudos! [import]uid: 221023 topic_id: 35981 reply_id: 143057[/import]

#3

Where and what exactly is Spine animator?

thanks

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143065[/import]

#4

ok i found it :slight_smile: Looks very cool… so do I understand you have the JSON Corona Export completed already?

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143067[/import]

#5

Hey Larry,

Yes, the guys at Spine have the Corona runtimes built and they work very smoothly with the exported JSON files.

Like my post above says, in 5 days, I’ve gone from creating my template character, building the animations in Spine and integrating them into my app. My app uses Caleb’s Perspective parallax module, so it took me some time to get it working with that.

I’ve been working extensively with Spine and the Corona runtimes (lua modules) for the last 4 days as I’m integrating the Spine animations into my app. The animations are part of another big update to my Super iBot app that is live in the app store. It currently has a static .png hero that you can see in my icon.

The video in my post shows my integration using Spine as of this morning. I’m very close to having everything working, hopefully another day to improve the animations.

At the start of my video, the white spinning target rotates around what looks like a static ping, I now have the cannon the iBot holds in his right hand tracking opposite to the targeting line that displays when the user drags away from the target.

As the cannon now “aims” with the users touch/drag, my code is dynamically changing the animation, the cannon and iBot’s head move when aiming. It is very cool IMO. This is not a pre-built animation, it is programmatically defined with changing variables.

It took me awhile to get it all working, Nate (the programmer behind Spine) had to help me out a couple times today. Spine is brand new and they have very little documentation covering it. They are in the process of building better documentation and video tuts. Once I got straightened out on how the lua modules work, I was off and running.

Hope this helps,

Nail [import]uid: 106779 topic_id: 35981 reply_id: 143072[/import]

#6

I’m in - i’m sold, I’ll do the kick starter for 2 lic’s ( because i have the extra lic and training videos. )

the thing I would like to see added is some built in animations sequences with a few different characters that we could use for rapid development/ animations…

But it looks good so far :slight_smile:

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143092[/import]

#7

Hey Larry,

FWIW, actually creating the animations in the editor is fairly easy and quick. How it works is very well thought out. I’m looking forward to watching their video tutorials to see how they execute their workflow. I stumbled at first because I didn’t really know the sequence to make new bones and add images to them.

I ended up doing it like this, not sure if this is the most efficient method, but it worked.

Note: You have to press “Shift” on you keyboard in order to use some of the buttons in the file dialog box, like the “Open Project” and “New”.

When setting up the first character, you’ll be in “Setup”, this is where you build your basic pose.

To make your first bone and add an image to it, I did it like this.

Select “Create” in the tools box, then in the editor window, drag out a bone.

Now open the “Images” file from the tree and drag an image onto the bone.

When you drag the image into the editor window, a new “silver and black dot” radio button will appear at the top of the tree named with the images name. You’ve now created a new “slot”

Select the “slot” radio button and then in the dialog box below select “Set Parent” which will highlight all the available bones in the tree. You can have multiple images attached to a single “bone”. Now select the bone you want to attach the image to. This will attach it to the bone.

Now you are ready to use the “Transform” buttons to orientate your image onto the bone.

Rinse and repeat.

I figured I’d post this method to attach images to bones in case anyone else stumbles at first like I did.

What I really needed were more lua examples of how to handle and manipulate the animations and Runtime listeners.

If you haven’t explored the board at the Spine website, I suggest you take a look.

In my thread “Can’t play non looping animations twice, Corona runtimes” there is some good information on it. I suggest you take a look.

"Spine Thread Here

Hope this helps,

Nail [import]uid: 106779 topic_id: 35981 reply_id: 143111[/import]

#8

is it better to buy it from the website or thru kickStarter?

Do ya get the same Backing features… videos… etc…
Larry [import]uid: 11860 topic_id: 35981 reply_id: 143382[/import]

#9

Hey Larry,

I just bought Spine out right, so I won’t get any benefits from the Kickstarter program. If you can wait until Saturday, the Kickstarter program is probably better as any fund raising goes towards development, but I’m really not sure how it works.

Personally, I needed to get the tool ASAP, as I only had a 1 week time slot to integrate Spine into my app. We won a couple of projects/contracts recently, I’m a builder trying to become a programmer, and I’ll be supervising the building projects fulltime, so my time to work with Corona will be very limited.

Nail

[import]uid: 106779 topic_id: 35981 reply_id: 143388[/import]

#10

Im not in a hurry so I funded the KickStarter :slight_smile: Man they have made some bucks :slight_smile:

Got 2 Lic’s with training videos… :slight_smile:

( 4 pcs to play on )

It’s cool and I have several uses for it… cant wait to play with the code :slight_smile:

Thanks for the details

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143469[/import]

#11

I got my Spine created iBot fully integrated into my Super iBot app.

I think adding the animated iBot has made a huge improvement to my game, hopefully it will show up in increased downloads.

Lot’s of tricky “if” statements to get the animations to play smoothly together, I suppose it would be the same when using sprites though, which I hadn’t done. Hopefully I’ve got the bugs worked out.

Here’s a quick recap of the animations used that you’ll see in the video linked below. Only 1 animation direction is needed for each movement since the animations can be “flipped” on X or Y axis’s which is nice.

  1. Standing
  2. Jumping
  3. Running
  4. Grabbing Cannon
  5. Holstering Cannon
  6. Shooting (recoil effect)
  7. Exploding (iBot dies when hitting Atomic Charge)
  8. Backflip

They all seem to play quite smoothly together and am very happy with the results. Take a look…

Spine created iBot integrated into Super iBot video link

Nail

[import]uid: 106779 topic_id: 35981 reply_id: 143481[/import]

#12

Really cool video! It’s great you are documenting your experience. Super glad to see you were able to quickly be productive even though you are relatively new to this stuff. Kudos! [import]uid: 221023 topic_id: 35981 reply_id: 143057[/import]

#13

Where and what exactly is Spine animator?

thanks

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143065[/import]

#14

ok i found it :slight_smile: Looks very cool… so do I understand you have the JSON Corona Export completed already?

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143067[/import]

#15

Hey Larry,

Yes, the guys at Spine have the Corona runtimes built and they work very smoothly with the exported JSON files.

Like my post above says, in 5 days, I’ve gone from creating my template character, building the animations in Spine and integrating them into my app. My app uses Caleb’s Perspective parallax module, so it took me some time to get it working with that.

I’ve been working extensively with Spine and the Corona runtimes (lua modules) for the last 4 days as I’m integrating the Spine animations into my app. The animations are part of another big update to my Super iBot app that is live in the app store. It currently has a static .png hero that you can see in my icon.

The video in my post shows my integration using Spine as of this morning. I’m very close to having everything working, hopefully another day to improve the animations.

At the start of my video, the white spinning target rotates around what looks like a static ping, I now have the cannon the iBot holds in his right hand tracking opposite to the targeting line that displays when the user drags away from the target.

As the cannon now “aims” with the users touch/drag, my code is dynamically changing the animation, the cannon and iBot’s head move when aiming. It is very cool IMO. This is not a pre-built animation, it is programmatically defined with changing variables.

It took me awhile to get it all working, Nate (the programmer behind Spine) had to help me out a couple times today. Spine is brand new and they have very little documentation covering it. They are in the process of building better documentation and video tuts. Once I got straightened out on how the lua modules work, I was off and running.

Hope this helps,

Nail [import]uid: 106779 topic_id: 35981 reply_id: 143072[/import]

#16

I’m in - i’m sold, I’ll do the kick starter for 2 lic’s ( because i have the extra lic and training videos. )

the thing I would like to see added is some built in animations sequences with a few different characters that we could use for rapid development/ animations…

But it looks good so far :slight_smile:

Larry [import]uid: 11860 topic_id: 35981 reply_id: 143092[/import]

#17

Hey Larry,

FWIW, actually creating the animations in the editor is fairly easy and quick. How it works is very well thought out. I’m looking forward to watching their video tutorials to see how they execute their workflow. I stumbled at first because I didn’t really know the sequence to make new bones and add images to them.

I ended up doing it like this, not sure if this is the most efficient method, but it worked.

Note: You have to press “Shift” on you keyboard in order to use some of the buttons in the file dialog box, like the “Open Project” and “New”.

When setting up the first character, you’ll be in “Setup”, this is where you build your basic pose.

To make your first bone and add an image to it, I did it like this.

Select “Create” in the tools box, then in the editor window, drag out a bone.

Now open the “Images” file from the tree and drag an image onto the bone.

When you drag the image into the editor window, a new “silver and black dot” radio button will appear at the top of the tree named with the images name. You’ve now created a new “slot”

Select the “slot” radio button and then in the dialog box below select “Set Parent” which will highlight all the available bones in the tree. You can have multiple images attached to a single “bone”. Now select the bone you want to attach the image to. This will attach it to the bone.

Now you are ready to use the “Transform” buttons to orientate your image onto the bone.

Rinse and repeat.

I figured I’d post this method to attach images to bones in case anyone else stumbles at first like I did.

What I really needed were more lua examples of how to handle and manipulate the animations and Runtime listeners.

If you haven’t explored the board at the Spine website, I suggest you take a look.

In my thread “Can’t play non looping animations twice, Corona runtimes” there is some good information on it. I suggest you take a look.

"Spine Thread Here

Hope this helps,

Nail [import]uid: 106779 topic_id: 35981 reply_id: 143111[/import]

#18

xnailbender and Esoteric Software - I got my full version of SPINE - YEAH - but when I export I only have JSON files… Where is the corona plug-in’s or support files?

or am i doing something wrong

thanks

larry [import]uid: 11860 topic_id: 35981 reply_id: 143987[/import]

#19

found the engines in a app sub folder :slight_smile: It’s all Good. [import]uid: 11860 topic_id: 35981 reply_id: 143989[/import]

#20

@Larry,

What do you think of those lua modules/runtimes?

Quite impressive coding eh? Certainly above my level.

Nail [import]uid: 106779 topic_id: 35981 reply_id: 143992[/import]