Rudy2d3d

My understanding of getting animations onto web pages is extremely limited. I am not a coder. Rig driven character animations are my focus. However, I don't quite understand the differences between the Spine and Rive runtime functionalities as they apply to event driven character rig animations on websites (not games). For example, what is the comparable ease and ability between Spine and Rive of driving a bank of character animations (ie hand wave, lip sync dialog [with sound included], run, jump) with associated events (ie. onclick, onmouseover) on regular or wordpress web pages viewable over handheld and desktop devices?
Rudy2d3d
  • Сообщения: 3

Nate

We don't know much about Rive, so you'll have to ask Rive for help there. We are happy to discuss Spine though!

The spine-ts runtime is our TypeScript runtime. TypeScript compiles to JavaScript, so it can run in a browser. There are a few modules in spine-ts. The ones you may want to know about:
  • core is the lowest level APIs for loading and manipulating data. You can add your own rendering on top (in a browser or not).
  • canvas does rendering using an HTML5 canvas, which has some limitations. An HTML5 canvas cannot render mesh attachments, clipping attachments, or color tinting. Also, only the alpha channel from tint colors is applied.
  • webgl does rendering using an HTML5 WebGL. This supports all features and has better performance than an HTML5 canvas.
  • player, aka the "Spine Web Player" or just "player", renders using spine-ts webgl but handles just about everything for you. This is probably what you want.

With canvas and webgl, you need to write code to load your skeletons, update them, and draw them. The code to do that looks like this:
Canvas example
WebGL example
As you can see, this requires a fair amount of code. It is more for a programmer who needs full control over rendering, applying animations, and everything else. AFAIK, this is roughly what is needed to use the Rive runtimes, though I expect the Spine APIs are more powerful.

With the Spine Web Player, you only need to describe your skeleton data file and images. Using it looks like this:
<div id="player-container" style="width: 640px; height: 480px;"></div>
<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "/files/spineboy/export/spineboy-pro.json",
atlasUrl: "/files/spineboy/export/spineboy.atlas",
});
</script>
This should not be insurmountable for a non-programmer. There are many ways you can customize the player, check out the docs here:
Spine Web Player

You can still do procedural animation when using the player. By that I mean: you can write code to control the skeleton in the player, such as have it follow the mouse, play animations when clicked, etc.

We used the player extensively in our latest blog post:
Blog: Spine 4.0 is here
There are 7 players on that page. The code for them is here:
http://n4te.com/x/2150-IYxv.txt
As you can see, most of it is just configuring the player with the skeleton data file and atlas, turning off the player's playback controls, setting the viewport, etc. Some of the players play a number of animations in a sequence or react to the mouse, for those there is a little bit of extra JavaScript to set animations or manipulate the skeleton. You can do anything with the player!

The player is super convenient because it handles all the stuff you would have to do with canvas or webgl, without limiting what you can do by writing a little bit of code. Note that the player only renders a single skeleton because it handles setting the viewport for you, which is one of the more difficult parts of using canvas or webgl.
Аватара пользователя
Nate

Nate
  • Сообщения: 11399

Rudy2d3d

Thank you for your response. There are so many variables to what I thought would be a simple thing: Play animations onEvents on web pages. I lean more towards art than science in interest as well as capability. Programming is neither intuitive nor convenient to my skill set. I tend to see the tools I use as a means to an end: to tell a story, to encourage empathy. The more complicated the tools get the less actualized my creativity output becomes. Web pages are a very useful medium to connect with and to engage the audience. More and more, web pages are the first portal to other media (books, movies, games, learning). While Spine's focus seems to be games, the end audiences will have to travel through many more web pages to get to those games. It would be very nice and profitable if just a small fraction of all those web pages enabled an army of codeless creatives (using Spine's turnkey workflow) to feature multi-resolution easily embedded interactive Spine animated characters. Thank you again for your prompt response. It was informative. You have given me a few more things to consider.
Rudy2d3d
  • Сообщения: 3

Nate

There's a lot to it for sure, though it sounds like for your needs you can ignore most it and just focus on the Spine Web Player. You need the HTML shown above for the div and script tags, but you can treat them as boilerplate. You don't necessarily have to understand everything about it, you can just copy/paste it into a webpage and adjust the URLs.

If you get stuck, let us know and we can help!
Аватара пользователя
Nate

Nate
  • Сообщения: 11399


Вернуться в Runtimes