Spine Animation JS Template (Spine-TS webgl runtime, with mesh deforms) WIP

Mikal Thanks, In my case, I want develop tower defense game and I need to spawn or create new enemy for every waves . can I do it with this?

mostafanastary

With the current set up here is a suggested way to do that:

Create a layout 'Prefab' with no event sheet.

For each different character, create a Spine object.

Place one instance of each character on 'Prefab' layout.

For each instance on the 'Prefab' layout, assign the atlas, json, skeleton name, etc.

Now, on your main game layout and event sheet, you should be able to create the above objects with the default Spine settings for each object. You could also create a 'family' for the Spine objects, so you can have some common events, behavior for them.

This all being said, Tower Defense games usually have a lot of objects, I would also do some quick performance testing to make sure that your expected number of Spine objects will run at the FPS you want for your game.

Good luck!

Mikal

Hello

I need your help, I'm in the beginning of game development, my goal is educational games for children, I'm from Brazil.

This is my first project:

inspiring-mirzakhani-472614.netlify.app

This is my second project:

practical-khorana-212287.netlify.app

In the second project I bought a Sprite Pack with 22 animals and they all came in SPINE, with extensions (.Json .Spine .Atlas .Svg) the store I bought does not return, so I'm looking for a solution to be able to use these Sprites .

However, I don't have in-depth knowledge and I need help.

Would you help me?

I am sharing here One package with the files I received from One animal.

1drv.ms/u/s!Apy8O_u5tHrXhLtSUZk2hBb1TTGUsg

Thank you!

marcelogouveia

To use the plugin you need to update the Spine output files to version 3.8+. I checked your files and they look to be Spine 3.6.x Do you have the Spine tool to load the *.spine files and update the output to 3.8?

If you can update the output to 3.8, then I suggest the following:

• Download the plugin and sample project and test and review the project and events
• Add one of your character's files ((skeleton.atlas, skeleton.json, skeleton.png) to the sample project.
• Add a new Spine Plugin Object and associate it with the character's files to the sample project.
• Look at the skeleton.json to set the skins ('default' in your fox example) and an initial animation (I see 'idle' in your fox example.
• Run project and check it out.

If you don't have the Spine tool you can use this tool to update the skeleton.json to 3.8 (I tried it and it worked with your fox file.)

Just cut and paste the JSON to the first window, click convert and then copy the output back to the original skeleton.json file

gritsenko.github.io/c3_spine_plugin/formatter/index.html

Example from preview of your fox (idle animation), I also added a Z sort between Spine Character and objects (crates.)

Example project w/ the fox character and converted JSON.

SpinePlugTestFox.c3p

Mikal

I don't have the Spine Program.

I downloaded the Free version .. but in this version the export options are disabled.

Would you have the program to change the version?

Mikal

I saw your post afterwards .. sorry

I will try here

Thank you

Mikal

it worked!

Tomorrow I will test the movements!

Thank you!!!

marcelogouveia If this is for mobile, I would recommend doing a quick performance test and make sure it's ok for mobile with how many characters you expect to have on screen.

Mikal

Test performed.

Smartphone Android (Android version 10 . Samsung Model Note10 plus).

1drv.ms/v/s!Apy8O_u5tHrXhLwRWE4TmvNhR_cfvg

Thanks a lot!

marcelogouveia Looks good, it's nice to have a good variety of animals.

Hi Mikal.

I was wondering if is it possible to use the same approach you did on Spine to use Lottie animations in Construct.

There is a player for them in JS

github.com/airbnb/lottie-web

cdnjs.com/libraries/bodymovin

The project I´m working at has all animations made in After Effects and the png sequences are too heavy on memory usage, making it hard for mobile.

We thought about porting the animations to Spine or Spriter, but it is too much work.

With Lottie exporting is one click away.

I´m not much of a programmer. That´s why I use Construct, but I could try.

Could you give a hint on where to start? Is it possible to do?

Thanks

Grimmy I suggest just trying it out on the types of devices you want to check perf on. Add more Spine characters and display FPS. There is a sample project with a spine character on the website.

rodrigololi Doing it the way we are doing the Spine plugin now would be a fair amount of work (rendering in the C3 webgl context directly to texture), we are doing somewhat low level webgl interfacing with the C3 renderer. The reason for this was to improve performance on mobile.

That being said, you could try it out the ElementQuad approach which we started with (another one of my plugins) - how many separate objects are you rendering, if just a few it may be ok? There is an example of interfacing ElementQuad with SpineJS there also.

construct.net/en/make-games/addons/312/elementquad

For further detailed discussion on this (non-Spine), go to the Construct Community Discord server, my user name is Mikal there.