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.
