Welcome Luke!

December 15th, 2021

We're growing the Spine team again, this time adding Luke who will help with support and runtimes development. Learn more about Luke in this brief interview.

Welcome to the team, Luke! Tell us a little bit about yourself and your background

Hello everyone! My name is Luke, and I’m originally from Arkansas. I grew up messing with electronic devices, computers, and playing video games, most notably Fallout 2, Doom 2, Lego Island 2, Star Wars Jedi Knight: Jedi Outcast 2, and Bionicle: The Game on repeat as I didn’t have access to many games and still had dial-up internet. Every time that I went to friends’ houses, I would always be seeking out the video game consoles or PCs that they had on tap to try and play all of the games that they owned; most notably, I spent many hours playing Super Mario 64, Super Smash Bros., Star Wars: Shadows of the Empire, and Donkey Kong 64 on both of my best friends’ Nintendo 64s.

When I got to the high school level, Benton High School started offering programming classes.It was the only “A” I would ever earn in high school, due to my interest in computers and the ability to program a game for the final assignment at the end of the course. I was instantly hooked on being able to see something that I programmed myself come to life immediately.

After I graduated high school, I tried to go to college but didn’t do that well. So I worked various odd jobs, and enlisted in the US Air Force as a Client Systems Technician.

What brought you to Spine?

I needed a job. In all seriousness, I had just moved to Puerto Rico to join the Air National Guard and was looking to try and move into a junior programmer role, as I’d just done a software development internship with the US Air Force during the last 6 months of my contract. I had been applying for many roles similar to what I did in the Air Force (which wasn’t programming, but more general computer support), but had wanted to become a software developer professionally to gain experience and try to switch to a different role under the umbrella of Information Technology.

I applied to Spine, and had an interview quickly after. I am very thankful to be here!

What's your role on the Spine team?

Currently, my role at Spine is to handle customer service related tasks, and I will eventually transition into a programming role for Spine. I thoroughly enjoy what I do, and hope to be as helpful as possible to as many people as possible. I also fill in any role that I can, and I’m hoping to continue to grow both as a programmer and in my knowledge of Spine’s inner workings.

Question from the audience: what is your all time favorite video game?

This is a really difficult question! Depending on the day, it can bounce between many different titles, such as the original Dark Souls, the Demon’s Souls remake, Devil Daggers, Star Wars Jedi Knight: Jedi Outcast 2, or Super Mario Sunshine; however, I would have to say that if I absolutely had to pick only one game, it would have to be Bloodborne. Bloodborne’s combat system is, in my estimation, still unrivaled for how well-designed and gripping it is. The world design, lore, music, exploration, and moment-to-moment gameplay are also the peak of FromSoftware’s Soulsborne series, and I am incredibly excited for Elden Ring to release.

Say "Hello" to Luke on the forum!

Squash and Stretch - Animating with Spine #5

December 10th, 2021

Welcome to the fifth video of our Animating with Spine tutorial series! This time we analyze Squash and Stretch, one of the most important and also most fun animation principles. Let’s see how different character and animation styles can benefit from this principle.

Use the provided Spine project to hone your animation skills!

Visit us on the Spine forum to discuss this video and share the results of your exercise.

Happy animating!

Wave Principle - Animating with Spine #4

September 8th, 2021

Welcome to the fourth video of our Animating with Spine tutorial series! This time we discuss the Wave principle and how to get natural looking wave motion in your animations. If you are animating tails, hair, cloth, flags, or any other parts of your character that use follow through, you will benefit from understanding the wave principle.

Use the provided Spine project to hone your animation skills!

Visit us on the Spine forum to discuss this video and share the results of your exercise.

Happy animating!

Spine goes NPM

September 1st, 2021

Good news, everyone! After our work on the massive Spine 4.0 release, we freed up time to tie up some loose ends. Today, we're happy to report that we've finished modularzing our spine-ts runtimes!

NPM registry

Historically, spine-ts was published as in form of .js/js.map/d.ts files as emitted by the TypeScript compiler. While the simple inclusion of, for example, spine-player.js via a script tag made starting out with spine-ts easy, it wasn't super nice to use with more complex build pipelines. Anyone using NPM or Yarn for dependency management had to use various workarounds to include our simple .js files.

No more! Starting today, spine-ts and all its backends for Canvas, WebGL, Three.js, and the Spine Web Player are now fully modularized and published to the NPM registry. If you are using NPM or Yarn for dependency management in your project, you're a simple install away from using one of the backends:

npm install @esotericsoftware/spine-player
npm install @esotericsoftware/spine-webgl
npm install @esotericsoftware/spine-canvas
npm install @esotericsoftware/spine-threejs

ECMAScript modules

We've made all components of spine-ts ECMAScript modules. These are understood by all the bundlers commonly in use, like webpack, Babel, Parcel, and esbuild. Once you've installed the spine-ts module you want to use via NPM or Yarn, you can access the exported constants, functions, and classes using the ECMAScript modules import syntax in your .js or .ts source files:

import spine from "@esotericsoftware/spine-player"

new spine.SpinePlayer("player", {
   skelUrl: "assets/spineboy-pro.skel",
   atlasUrl: "assets/spineboy-pma.atlas",
   animation: "run",
   premultipliedAlpha: true,
   backgroundColor: "#cccccc",
   viewport: {
      debugRender: true,
   },
   showControls: true,
});

Your bundler of choice will then find the dependency in your node_modules folder and bundle it together with the rest of your application code.

You can find all our published modules on the npm registry with the @esotericsoftware scope. The packages not only contain the module code, but also source maps and typings, which will be used automatically by your bundler and IDE of choice.

Vanilla JavaScript

What does this mean for users of the old vanilla JavaScript/script tag approach? Well, we have good news there too! We are keeping that in tact, with only one very minor breaking change (sorry, it couldn't be avoided).

The constants, functions, and classes of the spine-canvas, spine-webgl, and spine-threejs backends have up until now lived in the global spine.canvas, spine.webgl, and spine.threejs objects. Due to our new build pipeline, that is no longer the case. All exported constants, functions, and classes are now on the global spine object, together with the classes from spine-core. All you need to do is find references to spine.canvas, spine.webgl, and spine.threejs in your code, and change them to spine. That's it!

CDN hosting

We'll keep publishing the .js/js.map files. However, their location has now changed. Instead of hosting them on our own server, you can get them from a proper CDN called UNPKG. They put all packages on the NPM registry on Cloudflare and add some magic to resolve versions.

So if you've previously included say spine-player.js from our server at: http://esotericsoftware.com/files/spine-player/4.0/spine-player.js
Then you should now use the equivalent UNPKG URL which would be: https://unpkg.com/@esotericsoftware/spine-player@4.0.4/dist/iife/spine-player.js
UNPKG also hosts source maps, as well as a minified version of each module, for example: https://unpkg.com/@esotericsoftware/spine-player@4.0.4/dist/iife/spine-player.min.js

Development setup

We've also improved the development setup for working on spine-ts itself quite a bit. If you are working off of a fork of spine-ts, this might also benefit you! Find out more in the spine-ts README.md.