[HTML] [Widget] [Video] Spine Widget tutorial

Erika

Since people asked, I made a very brief setup tutorial for the Spine web widget. (I cheated by using the non-broken version of the widget at some point though, counting that it will be fixed soon)

In hope it will help people, here it is.
Please ignore my accent >.> very embarassed

Pharan

Thanks for sharing, Erikari.
I actually saw it come up in my YouTube feed.

Never mind the accent.
Are you actually some kind of 10-year-old super genius??? (You sound really young.)

PS
@badlogic you got burned. or maybe @shiu

Erika

Told you I have a high pitch voice duh. I'm 25 actually, but I'm a tiny person sigh.

Nate

Great tutorial! Thorough, easy to follow. I love the accent! :love:

We really should allow HTML export directly from Spine, so people can get going a bit easier with something, starting with something that works and they can hack on.

Mario

You should hear my accent. Now I need to do a tutorial video to diss you back. Maybe in rap form. +1 for direct HTML export from editor.

Hybris

Very nice.

Btw. I don't know if anyone is aware of this, but when I was experimenting with the widget this weekend, I found that it doesn't work if your atlas is spread out over multiple .png files. I haven't seen this mentioned anywhere so I thought I'd bring it up here.

Mario

You can use multi-page atlases, through the JavaScript configuration property atlasPages. See the README here spine-runtimes/spine-ts at master

Hybris

Oh so that's how that works. Thanks ^^'

Tracker

Hello 🙂

First, I would like to thank Erikari for a great tutorial 😉 I have few questions and I hope someone could help me.

Is there a way to define how many times the animation should play on the web? Or at least how many seconds? Also, is it possible to define two animations to play one after another? For example, if I have the animation that has two states (data-animation): "once" and "loop". I want data-animation "once" to be played once and then after that "loop" data-animation should play indefinitely. Is this possible? If not, I guess that animation person can make animation like this and I just play it on the web. Is this right?

I try to find what kind of values data-animation could have, but couldn't find documentation for this. I'm not sure if this command is something that is related to the spine only or for the json animations in general?

I'm web developer and don't have knowledge of the spine or any other animation software, so I'm sorry if I ask simple or stupid questions 🙂

Cheers.

Erika

Hey Tracker! 😃 thanks! Actually I asked a question very similar to this here: Spine-widget bug (web widget)

Also, if I can make a tiny request, I'd love to have a version of the script where after the animation on click is done goes back to the animation set in the beginning.

I had in mind I wanted to make an animation where the character waves at you or does things if you click on it, or that does other stuff, like saying thank you, if you click e.g. on a download button.

So +1 for that!

Tracker

So as I understand what options can be used within the div tag when running the animation on the website - I mean on this:
<div style="width: 100%; height: 100vh;" class="spine-widget"
data-json="../../wp-content/plugins/spine-widget/assets/raptor.json"
data-atlas="../../wp-content/plugins/spine-widget/assets/raptor.atlas"
data-animation="run"
data-fit-tocanvas="true"
data-alpha="true"
data-background-colo="00000000"
data-premultiplied-alpha="true" >
</div>

is defined by the script that is created by the esotericsoftware. Is this right? I guess that this is the spine-widget.js
So is there any tutorial or document where I can read what kind of options do we have when running the animation on the website?

Erika

Yes, you can find all the options here: spine-runtimes/spine-ts at 3.6 😃

Tracker

Thank you very much 🙂

Crocodilum

The examples files and my test according to your tuto are okay under Firefox, but nothing happens on Chrome.
Well, on Chrome, for the example file, I only have the Spine logo rotating and scaling. Even on incognito mode, with no activated extension. It's weird.

Erika

I think it could be because you need to upload the files via ftp. Chrome blocks local scripts. If you want to test it locally you should set up a local webserver, (which, if you're not practical with it, can be a little tedious)

But apparently there's this nice Chrome extension that lets you have the local webserver without pain https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Crocodilum

Ohhh I didn't know that. Thanks a lot, it's working now 🙂

I had two questions.

I was wondering how the 'box' around the spine is being created (the red stroke on my example). Is that something related to the setup mode, taking into account every bones?

And do you think it's possible to place one spine on top of another one? (well... it might be about some css things)

Loading Image

Erika

I think the box is the size your skeleton fills in setup mode (but I might be wrong, better ask badlogic)

regarding having two skeletons closer, you have two options:

you simply move the two skeletons together into a single spine file!😃 (I love that we can now do it!) this is definitely easier to do.
yep, css rules, you have to play with z-index, and the css position properties. not so fun lol.