Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Module for Quick implementation of Spine Animations
Started by hector7 Dec 09 2014 12:16 PM

42 replies to this topic
spine animation
[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

Hi Everybody,

 

I did a module for CoronaSDK that helps you to quickly implement Spine animations into a Corona App/Game. Originally I made it only for myself, but I decided to add a few extra methods to make it more useful.

 

I also made an online course (paid) that teach you everything from designing a basic character in Photoshop to animating it in Spine and finally displaying the animating character in your app. The course is optional, just the free module and its documentation should be more than enough to help you with the implementation of your Spine Animations.

 

This is the first module I share with the Corona community so I hope you find it useful, and I appreciate any feedback you can provide to make it better

 

You can get SpineHelper for free here: http://www.spinehelper.net

 

Regards

Hector



[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,641 posts
  • Corona SDK

@Hector,

 

Thanks for this.  I just downloaded it and am looking forward to digging into it.  Spine rocks and anything folks do to help others use it, also rocks!

 

-Ed



[TOPIC: post.html]
#3

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

Hey Ed!, thanks a lot for taking a look at my code, I'm a fan of SSK and your other modules and of course Spine as well. I used your SSK library while I was making the library  :)

 

Just a quick comment, I made a couple of edits to Spine's Corona Runtime, but I tested it with my version and everything works well, so if you find problems using the latest Runtime from Esoteric Software, just use the one I'm including in the downloads.

 

The code has only been used by me and other Corona developer from New Zealand who encouraged me to add features, so I'm sure it has bugs, if you find any or want me to add something please let me know.

 

Regards

Hector



[TOPIC: post.html]
#4

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,641 posts
  • Corona SDK

I'm glad to hear SSK was useful. :)  

 

Yes, I almost always use the latest Spine runtimes, so if I run into problems I'll let you know.  As I said before, I'm looking forward to giving this a test drive.  From the methods you listed on your site, I can see it will help me a lot in some upcoming work.

 

Cheers,

 

Ed



[TOPIC: post.html]
#5

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

Hi, i wondered how to use your module. i have download and try to use it,

but theres some error :

 

module 'matrix' not found:resource (matrix.lu) does not exist in archive
no field package.preload['matrix']


[TOPIC: post.html]
#6

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

Matrix is in the zip file you can download from his site. 
Haven't run everything yet. But I did see a matrix file.



[TOPIC: post.html]
#7

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

[TOPIC: post.html]
#8

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

i found the matrix file. and then, where to create spritesheet lua ? and texture packer lua files ?

because i use spine, the output is json, images, and atlas files.



[TOPIC: post.html]
#9

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

If you look at the set up of his demo files, you can see where to put which files. I put everything in sub folders, just have to change the table where the files are.
In the pdf there is a bit of an example.

 

The example file doesn't do anything I think, but it at least shows you where to have your files.
 

You do not need to export atlas or png files from spine only the json.

You add the files you used to create the spine animation to texture packer. And only use the texture packer files for the animation images. Don't change the names you used for the image files. 
If you place everything in the root of your app (it might get messy) you will only need to enter the file names in the needed table (see format options in the pdf file or his example main.lua)
If you do put everything in a subfolder the file location for: texturePackerLuaFile will need a "." instead of a "/" as a separator.



[TOPIC: post.html]
#10

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

Hi Juf Jannie,

 

Thanks for the explanation. Yes i think youre right. I just do some research, download texture packer. Seem that we must pack our images in texture packer first, and then we put piece by piece in spine. I just wondering because the pdf that explain how to use it is not to clear. exspecially if we never use spine not texture packer before. i suggest to make document easier, and also, the download process easier. :)

 

thanks



[TOPIC: post.html]
#11

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

@Juf Jannie, thanks for the explanation.

 

@hiccastudios, Juf Jannie is correct, you need to pack your images with Texture Packer and from Spine all you need is the json file.

 

Matrix.lua is an essential file as SpineHelper won't work without it, you can find it in the sample project.

 

I'll try to shoot a quick video tutorial later in the week to illustrate how to make it work from scratch, and I'll add reference of matrix.lua in the documentation as I think I forgot to mention it.

 

Regards

Hector



[TOPIC: post.html]
#12

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

Hi,

yes Hector. i think you should write in documentation for first timer. :)

thanks for your very usefull module :)



[TOPIC: post.html]
#13

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

i have another question. can we put spine object in a scene group ?

 

thanks



[TOPIC: post.html]
#14

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

yes we should be able to put it on a scene group, let me include it in the video tutorial I'll shoot for later this week. I still have a day job so most likely it will be ready over the weekend

 

Regards

Hector



[TOPIC: post.html]
#15

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

Hicca, take a look at that pdf that is included and at the table that is in the main.lua.

There is a line that asks for the group name, it is even default at sceneGroup.

 

You can name any group you want and insert it in to that. 

Even have a sub group and insert that in to the sceneGroup, if you use composer.

The pdf is just a few pages even though it is almost 37 MB.



[TOPIC: post.html]
#16

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

Hector, I see in your videos you use a collar mic. You shouldn't need to ad so much noise reduction if the mic is set correctly. it will improve the sound quality a lot. Or use less compression on the audio. A higher bitrate or 96Khz at least. You seem to have put a lot of effort in the videos, would be a shame if the sound lets you down.



[TOPIC: post.html]
#17

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

oh sorry :) my bad. i should have read it more carefully. i will check again.

 

thanks



[TOPIC: post.html]
#18

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

Hi, sorry to ask another question,

 

I have spritesheet with 3 object. 2 object is 2500 width.

I have create animation in spine, its works well. Then i try to import in corona.

The thing is , the 2 object with 2500 width is not shown. Its replaced with 1st object.

How does that happen? should i replace the large object ? It didnt support ?

 

thanks



[TOPIC: post.html]
#19

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

Wow @Juf Jannie thanks a lot for helping other users of my module, I really appreciate all your help, and thanks for the advice on the videos, yes you are right, I think I overused noise reduction in my attempt to get rid of all of it. Sometimes I can go crazy fine tuning the editing of the videos.

 

Regards

Hector



[TOPIC: post.html]
#20

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

@hiccastudios Images seem to be very big, so my gut feeling tells me that maybe the problem is the texture size. If I remember correctly, the maximum texture size of an iPhone 5 is 2048x2048 and just the most recent iPads support double of that. I would recommend you try to implement animations with images that are smaller and see if that works.



[TOPIC: post.html]
#21

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

Hi Hector,

 

First animation works. i scale down the images.

But second one is not working again. Images is already small too.

so its looks like only load 1st images only. very strange



[TOPIC: post.html]
#22

hiccastudios

[GLOBAL: userInfoPane.html]
hiccastudios
  • Observer

  • 29 posts
  • Corona SDK

found the problem.

 

PATH in Spine 



[TOPIC: post.html]
#23

hector7

[GLOBAL: userInfoPane.html]
hector7
  • Enthusiast

  • 47 posts
  • Corona SDK

Hi guys,

 

As promised I just made this 12 minute video where I show you how to setup a basic Spine Animation starting from zero, using the free SpineHelper module. I think I had a few folders and files in the sample code that created a little bit of confusion as not all of them are required, so that's why I decided to shoot this video, so you can see how I setup a basic animation starting from scratch. I hope it is useful.

 

I received a couple of questions about how to implement it in Kwik, so that video tutorial is next on my list. 

 

1.- You can watch the video here: 

 

2.- In case you haven't downloaded the module, you can get it from here: http://www.spinehelper.net

 

 

Regards

Hector



[TOPIC: post.html]
#24

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 258 posts
  • Corona SDK

Hi Hector, this is a much apreciated module to be able actually use Spine in Corona.

Question - how does SpineHelper address the use of events set up in Spine? For instance, we have a random animation player set up whereby an event starts another event.



[TOPIC: post.html]
#25

coronasdk771

[GLOBAL: userInfoPane.html]
coronasdk771
  • Enthusiast

  • 44 posts
  • Corona SDK

Hi Hector. Thanks for this awsome library. Do you plan to put it on GitHub so people can contribute back?




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