Based on the Visionaire Studio Guide by Chris Tikkos (Dionous Games), published here with his permission. See also Characters and animation tips and tricks.

Instead of drawing every frame, characters can be animated with skeletal animation (Spine, DragonBones) or as 3D models. Visionaire plays these animations in the outfits of a character.

Spine

Spine is a tool for 2D skeletal animation. To try it out, import Spine's example character spineboy:

  1. Download the spineboy example.
  2. Open it in Spine and export spineboy.atlas, spineboy.png and spineboy-ess.json into a subfolder of your project.
  3. Rename spineboy-ess.json to spineboy.json. The names of the three files must match.
  4. Add spineboy.json to the Spine files of an outfit.
  5. Click an animation and choose a Spine animation on the right via the cog wheel. If the correct one already seems selected, select it again. The animation now appears in the preview.

Recommended settings:

Recommended settings for a Spine animation
Recommended settings for a Spine animation

DragonBones

DragonBones is a free, open source alternative to Spine for Windows and macOS. It exports in Spine format, which Visionaire can read.

  1. Install DragonBones and open the example Dragon.
The Dragon example in DragonBones
The Dragon example in DragonBones
  1. Choose File > Export.
Export menu
Export menu
  1. Use these settings:
    • Data Config, Type: Spine
    • Data Config, Data Version: 3.3
    • Texture Config, Image Type: Texture Atlas
    • Texture Config, BG Color: Transparent
    • Generated Files: Data and Texture
    • Choose output path and file name.
Export settings
Export settings
  1. Click Settings next to Image Type and set the options as shown:
Texture atlas settings
Texture atlas settings
  1. Click Finish twice to close the settings and export.
  2. Newer Spine versions store the skin section as a list instead of a dictionary. Open the generated JSON file in a text editor and make two replacements:
"skins":{"default":
  becomes
"skins":[{"name":"default","attachments":

},"animations":
  becomes
}],"animations":
The edited JSON file
The edited JSON file
  1. Copy Dragon.atlas, Dragon.json and Dragon.png into your project.
  2. Create a new character and load the JSON file.
Loading the JSON file in a character
Loading the JSON file in a character
  1. Select an outfit slot and choose an animation of the loaded Spine file:
Choosing the animation for an outfit slot
Choosing the animation for an outfit slot
The dragon animation in Visionaire
The dragon animation in Visionaire

3D character models

A 3D model saves you from drawing every animation in every direction: Visionaire shows the model at the correct angle automatically. These steps were made with Blender 2.91; newer versions may look different.

Exporting from Blender

Rename the animations in Blender's Outliner first, so you can find them easily in Visionaire:

Named animations in the Blender Outliner
Named animations in the Blender Outliner

Choose File > Export > Collada (Default) (.dae). In the settings, only adjust the axis orientation to match Visionaire:

Axis settings for the Collada export
Axis settings for the Collada export

Click Export COLLADA. Blender creates the .dae file and, if the model uses textures, the texture files.

Importing into Visionaire

Load the file in the outfit of your character and adjust the other settings as needed:

3D model in a character outfit
3D model in a character outfit

Create one animation per section (walking, standing, talking and so on). You do not need one per direction, that is the big advantage of 3D models. Choose the Blender animation to play and set the speed (1 is the normal speed):

Assigning the Blender animation and speed
Assigning the Blender animation and speed

Then place the character in a scene as usual.