Posted September 30, 2023 by PhaserEditor2D
#editor #spine #animations #skeleton
Hi.
Today I'm releasing a new version of Phaser Editor 2D. It comes with a long-time-awaited feature: Spine animation support.
Download Phaser Editor 2D v3.63.0
If you are creating games, tutorials, or any other content (no matter if it is your first project) with Phaser Editor 2D, please tell me, and I will be proud to feature it on the website, newsletter, and social channels.
A new game made with Phaser Editor 2D, by CodestarCreates
Journey with PremierTwo and Ironmouse on a mission to raise as many donations as possible for the IDF! Blast through Hokkaido on the Cyclathon and give your best speech to raise morale for the gang, or chase down those dastardly trashy boys Donkey Connor, Crowey the Anime Bird, and Garbage Garnt to recover all the stolen cimmarolls!
Spine is one of the most popular tools for making 2D skeletal animations for games.
If you follow the news about Phaser, maybe you are aware of the Spine team releasing an official runtime for Phaser. I think it is a game changer for the Phaser community and I want to add first-class support to Spine in Phaser Editor 2D.
This version of the editor comes with the first tooling about it and I love it. I migrated two of my games to Spine very quickly with the help of the editor.
Following, I show you an overview of the new tools, but I recommend you take a look at the documentation and watch this small video:
To use the Spine animations in the Scene Editor, first, you have to import the Spine assets into an asset pack file with the Asset Pack editor.
This editor provides a preview of the atlas and skeleton assets:
Also, you can preview the skeleton animations:
Learn more about the Spine assets
Now you can create Spine game objects in the Scene Editor. Just drag a Spine skin block from the Blocks view and drop it on the scene:
With the Inspector view, you can edit some of the properties of the Spine game object: skeleton and images atlas, bounds provider, skin, and animation-related properties:
Here you can preview the game object animations, and edit some animation parameters like the animations mixes:
Like any other game object, you can create prefabs of Spine game objects, and add user components and script nodes. Now there are new user property types related to Spine:
The Spine Skin Name user property type is for selecting a skin name from a list of all animations defined in all the skeletons:
The Spine Animation Name user property type is for selecting an animation from a list of all the animations in all the skeletons:
Also, the Event property type's dialog includes the custom Spine events defined in the skeletons:
Learn more about the Spine game object in our documentation
If you are going to start with Spine and Phaser, then you can use this new Spine project template available in the Phaser Editor 2D marketplace.
It is also available in Phaser Editor 2D All-in-One. When creating a new project, click on the "Get more in the Marketplace" link, and select Spine Starter:
This is an overview of the new Spine tools. Please, take a look at the editor's documentation for more details.
Now the Prefab Properties section shows the links to the properties defined in the prefab. You can click on the link to edit the property:
The dialog of the Events user property type now shows icons:
Now when you create a new .scene file the editor compiles it immediately. This way it is less confusing for new users.
There is a lot to do about the Spine tools. Before continuing to work on new features, I want to hear some feedback from you. In the meantime, I will work on creating a better mechanism for encapsulating and installing script nodes and user components. If I finish it quickly, then I plan to work on supporting the new Phaser 3.60 FX.
Keep in contact!
Arian