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!
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!
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
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.
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!
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
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.
August 18th, 2021
We love talking with animators using Spine! In our second Spine Spotlight we interview Jorge Bompart, whose charming creations can be found on Instagram, Twitter, and ArtStation.
Similar to Juliano Castro's interview, we'll explore Jorge's history and use of Spine in professional environments.
Jorge is a self taught artist. His professional journey started in 1998 when working in animation for TV series, films, and TV commercials. His knowledge of animation stems from learning from other colleagues in the industry and lots of media consumption.
How did you get to know Spine?
I started noticing Spine users were in demand in job offers. Since I love to investigate new tools to use in animation, I started looking for some info about it. At that time there was not much info about Spine or many tutorials, so I downloaded the trial version and began to investigate it a little bit. After that, an indie studio contacted me for a project and Spine was required for the job. I still didn't know how to use Spine yet! I had an interview and an animation test. I told them I did not use Spine and they decided to test me anyway, but using Animate Pro. I passed the animation test and they asked if I could begin investigating Spine in the meantime. So I started working a Spine job without knowing anything about Spine! But since I've used a lot of animation software along the way, it was not that difficult to understand the logic Spine uses.
How long have you been using Spine?
I started using Spine at the end of 2017... and at the moment it is my main tool. I find it very interesting and it did not take me long to discover its potential.
What do you use Spine for the most?
I use it for everything. Most of the time I challenge myself to find and design new ways to accomplish different things. I'm always looking for new things to do with the tools I discover, and Spine has surprised me many times, making the process of animation much less tiring.
Have you used Spine for mobile, PC, console, videos, web, portfolio, etc? Does your approach change depending on what you work on?
I started using it for a graphic adventure game project, something like Monkey Island, but then found use for it in other fields, too. I now use it for all kind of media work.
Could you describe your workflow?
Well, I come from the traditional 2D animation world, like in the old days, so I apply that type of process to modern tools as well. You always need to keep in mind that the animation process is the same, the only thing that changes is the tools used to improve the workflows so you can spend less time doing the hard work.
If you have tried different animation tools, would you say working with Spine is different? If so, in what way?
I have used a lot of software in my time. What I notice with Spine is that it has a very intuitive workflow and once you understand the way it works, it is very easy to be productive. While I'm missing some features from other types of animation software, Spine's streamlined interface makes it very comfortable to work with.
What has been your favorite project so far and what made it special?
I do not have any one favorite in particular, each project has its perks. But the ones I love the most are those that challenged me to go beyond the boundaries of the software itself and made me investigate and experiment to accomplish what is needed.
What setup or animation was most challenging?
I was contacted for a mobile game project that required working with skins and skin bones. At first I found it very challenging to accomplish what I needed, but once I designed a good way to do it, everything went great! I loved the result!
How much time does it take you to work on a project in Spine? How is this time divided?
Well, it depends on the project and the deadlines so I do not have a precise time table. It depends also on how complex the character is that I need to rig, as well as the type of animation. Sometimes a rig can be made in 2 hours, sometimes it would take up to 3 days just for the rigging part. In my opinion the rigging part is very important because you want to design a rig that can be changed relatively easily in order to facilitate any modifications that the project may require.
What are your favorite Spine features?
What I love the most is working with constraints, they can be used almost for anything! I think they are a very powerful tool. I also love to work with weights. In my opinion weights are very underestimated and have a large influence on the animation as well as the rigging itself.
Do you have any funny stories to tell us while developing in Spine?
At first I had a "difficult" relationship with Spine, but soon after we started getting along very well. (Yes, I speak as if it's a real being, hahaha, as I also do that with plants and animals, so...)
It is a bit funny because when I get blocked with something, I take my time away from the computer, go to bed or do something completely unrelated, and start thinking about different ways of doing what I need. When I come back to the computer and try what I came up with, it's really satisfying to see that my plan works. It's almost like, "you see!??? I did it Spine, I win!", hahaha.
Do you have any tips for new Spine users?
I think that the best tip I can give is not to copy or try to imitate the workflow of an artist. It is more important to get to understand the tools and to know which of these tools can be used to achieve your goals. Many times I found young artists try to achieve something by copying from a tutorial instead of thinking about the process and considering why the software works like it does. It is very important to be clear that this tool is made by human minds, so it's not magic, just logic.
Any tips for seasoned Spine users?
Do not go for extremely complicated things at first. Start from simple things and then make them more complex in order to not get frustrated.
What would you like to see more of in the future?
I'm always thinking about what can be improved each time I start something new. Even though I have many ideas about it, I think that it would be really useful to have a video or image sequence importer. At the moment everything must be done manually, which can be a little bit time consuming. Another useful feature would be moving constraint setups from one skeleton to another, for cases when you need to bring rigs into other skeletons.
What or who inspires you to create?
Most of my inspiration comes from artists I really admire. As an animator and short film director, I always love to take artwork to the next level. I like to surprise the artists, not only by giving life to their designs, but by telling a little story with them.
Do you have any favorite artist, game, or game studio that uses Spine? What do you like about them?
I have many, many artists I like and get inspired by. What I look for when I am working with someone's material is to have fun with it and to see the feedback and reactions of people when I publish the finished work.
Where can people find you or see your work?
The most active social media I use is Instagram, where I publish part of my work in progress animations and also, when I have time left, respond to inquiries and questions that other artists have for me regarding technical or artistic stuff. I like trying to help a bit. You can also find me on ArtStation, Facebook, Youtube, Linkedin and Twitter.
Anything else you'd like to tell us about? We'd love to hear about it!
Even though Spine is a software developed for games, I find it very powerful for other platforms as well. I'm always experimenting with it and hopefully in the future I would love to make a short film or something like that using it. I'm always investigating and trying new things to achieve and so far I have not found myself stuck with the tool. On the contrary, many times I am surprised by all the things you can do with it. You will surely keep seeing me come up with new stuff.
Thank you for your time, Jorge!
August 1st, 2021
Welcome to the team, Misaki! Tell us a little bit about yourself and your background
Hello! I'm an animator from Chiba, Japan. I had an elder sister who loved games, and I grew up with lots of games. I would ask my parents for video games as birthday gifts and holiday gifts every year.
I dreamed of becoming a game developer, so I enrolled in the Department of Imaging Arts and Sciences at Musashino Art University, a breeding ground for many important people in the game industry. There I learned the basics of video editing, hand-drawn animation, and 3D CG animation. At that time, I was still not very sure what I wanted to specialize in, but I was interested in animation that looked 2D, such as creating animations by adding watercolor textures on polygons even though I was using 3D software.
Later, I joined a company that publishes overseas smartphone games for the Japanese market as a "designer". While doing tasks related to visuals such as creating app icons, UI, banners, and websites, I stumbled across Spine. As I had learned 3ds Max in university, I found Spine very easy to use, and its intermediate expression between 3D and 2D was exactly what I was looking for. I immediately fell in love with it.
After that, I worked mainly on 2D animation with Spine at another company for a while and eventually became a freelancer.
What brought you to Spine?
Actually, I've been helping out with the Japanese translation of the Spine editor UI, blog posts, tips, video subtitles, etc. for a while now. Then, when I made up my mind to become a freelancer, Nate asked me if I could be the contact for Japanese customers. The reason why I was asked to help with the translation in the first place was because I had pointed out several times on the forum that “this translation is wrong (or difficult to understand)”. Every time I pointed it out, Nate and the rest of the Spine team always responded with a polite thank you and a quick fix, and I have great respect for them. Therefore, when I received the offer, I said I would be happy to help.
What's your role on the Spine team?
I will mainly be in charge of providing support and Japanese translation for Japanese Spine users.
I've been working as an animator, so my knowledge of runtime and in-game implementation is still limited, but I'll do my best to mediate between Japanese users and other team members to solve problems smoothly.
I will also be doing promotional activities to spread the word about Spine in Japan, as well as providing information that will be useful not only for Japanese users, but for all users. However, we are still exploring what kind of information and opportunities Japanese users and those who are interested in Spine are looking for, so we would like to adapt our activities to your needs. I'd appreciate it if you'd post your thoughts in the forums!
Question from the audience: what is your all time favorite video game?
It's very hard to answer, because I really like so many games!
However, if I were to rephrase it as "the game I played the longest", I think it would be "Harvest Moon 2" for NINTENDO64. I have played other games in the series, but I especially like the characters, graphics, and music of "Harvest Moon 2". I think I could keep playing it endlessly even now.
Speaking of NINTENDO64, I also played “The Legend of Zelda: Ocarina of Time”, but at the time I had no idea how to progress in the game and just enjoyed running around the town all the time. Both "Harvest Moon 2" and "Ocarina of Time" have the concept of time, so it was interesting to see how the behavior of the townspeople changed depending on the time, and I remember having fun just following after the townspeople. I was following a family of carpenters in Kakariko Village. If any of you can relate to that, please let me know! :D
Say "Hello" to Misaki on the forum!
