ウェーブの原則 - Spineを使ったアニメーション #4

September 8th, 2021

Spineを使ったアニメーションのチュートリアルシリーズ第4弾のビデオです!今回は、「ウェーブ」の原則について、アニメーションの中で自然なウェーブの動きを表現する方法をご紹介します。付属のSpineプロジェクトを使って、一緒にアニメーションのスキルを磨いていきましょう。

フォーラム

楽しいアニメーションライフを!

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.

Spine Spotlight: Jorge Bompart

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.

Background

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.

Interview

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!

ようこそ、美咲(Misaki)!

August 1st, 2021

Spineチームへようこそ、美咲!あなたの経歴とあなたのことを簡単に教えてください

こんにちは!私は日本の千葉県出身のアニメーターです。私には年の離れたゲーム好きの姉が居て、生まれた時からたくさんのゲームがある家で育ち、毎年の誕生日とクリスマスのプレゼントはゲームソフトばかりをねだって育ちました。ゲーム開発者になることを夢見ていた私は、ゲーム業界人を多数輩出している武蔵野美術大学の映像学科に入学しました。そこで私は映像編集の基礎や、手書きアニメーション、3DCGアニメーションの作り方を学びました。その時はまだ自分が何を専門的に担当したいかあまり定まっていませんでしたが、3Dソフトを使っているのにPlaneに水彩で描いたテクスチャを貼ってアニメーションを作るなど、平面的なアニメーションに興味がありました。その後、私は海外のスマートフォンゲームを日本向けにパブリッシングしている会社で「デザイナー」として入社し、アプリアイコン、UI、バナー、WEBサイトの制作などビジュアルに関わることはなんでもこなしていく中で、Spineというソフトウェアがあることを知りました。大学時代に3ds Maxを学んでいた私にとって、Spineはとても扱いやすく、また、3Dと2Dの中間のような表現がまさに私の求めていた画と合っていて、すぐに大好きになりました。その後、私はSpineによる2Dアニメーション制作を中心とした仕事をしばらくこなし、現在は独立してフリーランサーとして活動しています。

Spineチームに入ることになったきっかけは?

実は以前からSpineエディターのUIや、ブログ投稿、TIPS、ビデオ字幕などの翻訳に協力していたのですが、私がフリーランサーになるのをきっかけに、Nateさんから日本ユーザーの問い合わせ窓口をお願いできないかと訊かれたのがきっかけです。 そもそも翻訳に協力させていただくことになったのは、私がフォーラムで「この翻訳がおかしい(または分かりづらい)」という指摘を何度か行っていたのがきっかけなのですが、指摘するたびに、いつも丁寧な感謝の言葉と迅速な修正対応で返してくれるNateさんやSpineチームの皆さんをとても尊敬していました。なので、オファーをいただいた時には、私でお役に立てるならぜひ、とお返事させていただきました。

Spineチームでのあなたの役割は何ですか?

主に、日本のSpineユーザーの皆様のサポートと日本語翻訳を担当させていただきます。 私はアニメーターとしての仕事が主だったので、ランタイムやゲーム中の実装に関する知識はまだまだ少ないですが、日本のユーザーの皆様と他スタッフとの間を繋いで、円滑に問題が解決できるように尽力していきます。 他にも、日本でもっとSpineを広めるためのプロモーション活動を行なったり、日本のユーザーだけでなく全ユーザーにも役に立つように各種情報をお届けする予定です。 私たちはまだ日本のユーザーの皆様やSpineにご興味のある方々が、どんな情報や機会を求めているかを把握しきれていませんので、皆さんのご要望にも合わせて活動していきたいと思います。ぜひフォーラムでご意見を書き込んでいただけたら嬉しいです!

オーディエンスからの質問:昔から好きなテレビゲームは何ですか?

本当にたくさんのゲームが好きなので、答えるのがとても難しいです! ただ、「最も長時間遊んだゲーム」として言い換えるとしたら、NINTENDO64の「牧場物語2」だと思います。何回もデータを消して最初からやり直して遊んだゲームで、シリーズの他作品もプレイしていますが、特に牧場物語2のストーリー、グラフィック、音楽が好きで、今始めてもずっと遊んでいられると思います。 NINTENDO64といえば、「ゼルダの伝説 時のオカリナ」も遊びましたが、当時の私はどうすればゲームが進むのかを全く理解しておらず、ずっと町を駆け回るだけで楽しんでいました。牧場物語も時のオカリナも時間の概念があるので、時間によって町の人の行動が変わるのが面白くて、ずっと町の人を追いかけるだけで楽しかったのを覚えています。私はカカリコ村の大工の一家をひたすら追いかけていました。もし共感してくださる方がいたら教えてください!

ぜひフォーラムで美咲に挨拶してみてください!