Overview

Most images in the game consist of a single static image or gif, but it’s also possible to create "custom" poses compositing one or more images which can then be animated through movement, rotation and scaling.

This provides several advantages over static images. For instance:

  1. Animating multiple compressed .PNGs often requires less file space than a .GIF while looking better
  2. Key frame-based animation allows for more fluid and dynamic animation than frame-by-frame GIF
  3. Images can be reused to save on file space. For instance, two sets of poses that differ only by a pair of glasses can use custom poses to composite the glasses on top of one set of poses, eliminating the need for the second set entirely.
  4. Continuing with #3, if you decide to change how the glasses look, you only need to change one image instead of regenerating an entire set.
There are also some disadvantages, namely the extra amount of assets the browser needs to download and hold in memory, making your poses slower to load in-game.

Composition

Poses are composed of one or more sprites. A sprite is linked to an image (usually a .PNG) which can be moved around and rotated independently on the canvas, and a pose is created by layering one or more sprites on top of each other and positioning them as desired.

Layering

By default, sprites are layered in order of creation. The first sprite (topmost on the timeline) appears behind all other sprites while the last sprite (bottommost on the timeline) appears above everything else. If this is not adequate, you can apply custom layering by assigning a custom layer value to the sprite by selecting that sprite in the timeline and giving it a non-zero Layer value in the Sprite Settings.

Sprites all occupy layer 0 by default, so giving one sprite a layer of 1 will put it above all other sprites regardless of their positions in the timeline.

If you need to reorder sprites without assigning a custom Layer, you can drag a sprite in the timeline by grabbing it by its title bar and dropping it into the desired position.

Pose Creation

The first time you visit the Pose Maker for a character that has no custom poses, everything will be disabled except the box in the bottom left. This box contains a list of the character’s current Custom Poses. Select one to start editing it. To create a new pose, click the +. This will enable all the other regions on the screen.

The first thing that becomes available is the Property Window directly to the right of the pose list. This contains information about the entire pose. There isn't very much to do.

About the Pose Id

Initially "new_pose", the ID is the name of the pose as it appears in the Dialogue screen when writing lines. If your pose ID is "my_pose", it will appear as custom:my_pose in the Poses dropdown of a dialogue line.

Like with images created from a Template or Pose List, it’s possible (and generally desirable for organization purposes) to prefix your pose with a stage number in order to group poses for use across multiple stages, or to limit the pose as only being available for selection in that particular stage.

Looking at Florina, for reference, she has custom poses named 2-bee, 3-bee, and 4-bee. This lets her use a single dialogue case that applies to stages 2, 3 and 4 using the custom pose "custom:bee" (stage prefixes are omitted from the selection dropdown). Outside of stages 2, 3, and 4, custom:bee is unavailable.

Property Window

The area to the right of the Pose List is a context-sensitive list of properties that let you manually edit properties for the currently selected pose, sprite, property, or keyframe. There are a few properties than can only be accessed here (ex. sprite opacity), but most properties can be modified in more convenient ways elsewhere in the Pose Maker.

Timeline

The timeline provides a high-level overview of all sprites in the pose and their animation key frames.

Breaking down the above timeline, there are 3 sprites present: florina, wing1, and wing2. Each sprite lists all properties that are being animated, or at the very least stray from their defaults. Since a sprite at the minimum will generally consist of an image and 2D position, Source, X, and Y are almost always present. Other properties will appear automatically when applicable.

Sprite Title Bar

Above the property rows in a sprite is the title row. This contains a thumbnail of the sprite as well as its ID. A collapsible divot lets you hide the sprite’s individual properties in the timeline to clean up the view.

The link to the left of the eyeball allows you to link a sprite to another one. Linking a sprite will attach it to that sprite so that it moves, scales, and rotates with the parent linked sprite. If a parent sprite is already linked, the icon will display the thumbnail of whatever sprite is linked.

The eyeball is a visibility toggle that lets you hide a sprite from the live preview. This does not actually impact sprite visibility in the pose itself.

Key Frames

The Pose system uses motion tween animation where only a few key frames are defined and the system automatically fills in the frames between the key frames. This process is known as tweening.

For example, if at time 0s a sprite has a key frame where X: 0 and another key frame at time 5s where X: 10, then the animation will smoothly move X from 0-10 over those five seconds, computing the inbetween frames automatically (ex. At 2.5s, X should be 5).

Gray diamonds in the timeline represent key frames for that particular property. Each property (X, Y, X Scale, etc.) can be animated independently from other properties.

Yellow diamonds are sprite-level key frames that allow for moving, cutting, pasting, etc. an entire group of property key frames at once.

White diamonds represent the current selected key frame. You can select an entire group of frames by clicking the yellow diamond, or can select properties individually by clicking them directly. By holding Ctrl while clicking, you can select multiple properties’ key frames, but only within the same time group.

How the inbetween frames are computed can be tweaked by two values: the easing method, and the tweening (or interpolation) method.

Easing

The easing method controls the physics of the animation. For instance, a Linear ease will move through the frames at a constant rate, whereas an Ease-In ease will start off slowly and speed up as it approaches the end of the animation. Each property can be tweaked individually by clicking the graph and choosing the desired easing operation.

You can visualize how easing works by entering playback mode. The green bar represents the overall animation time/frame. Each property has an additional blue bar showing its eased time.

In the screen above, property 1 has no key frames past time 0, so is not animated at all and has no blue bar. Property 2 is using linear easing, so it progresses at exactly the same rate as the overall animation. Property 3 is using ease-in, so it starts off lagging behind the true time, but upon nearing the completion of the animation at 2:00 seconds, it has nearly caught up.

Interpolation

While easing controls the relative speed at which an animation progresses through its frames, Interpolation controls how the values are computed at each tweened frame.

There are currently three methods of interpolation available, accessible from the 2nd icon on a property’s header.


The graphics above represent the interpolated movement of a sprite’s (X,Y) position over 3 key frames.

Looping

To the right of the interpolation icon is the looping toggle. When this is enabled, the property will loop endlessly even after the animation finishes. Looping occurs from the first key frame affecting this property to the last key frame, which are not necessarily the first and last frames in the entire sprite animation.

Timeline Controls

The timeline contains a red bar indicating the active time, which represents where key frames will be inserted. To move the active time, you can either drag the fatter handle at the top of the red bar, or selecting a key frame will jump the time to that frame. Clicking in the timeline header (above the sprite boxes) will jump to that time snapped to the nearest half-tick mark.

The timeline controls in the upper left provide other means for navigating through the timeline. In order,

  1. Jump to the start of the animation.
  2. Jump to the previous key frame of the selected sprite.
  3. Pause/begin live playback.
  4. Jump to the next key frame in the selected sprite.
  5. Jump to the end of the animation (the latest key frame among all sprites in the pose).
  6. Zooms out the timeline to get a higher level view (ctrl+mouse wheel also works).
  7. Zooms in to allow for finer tuning of the time.

Playback

The Play button will start or stop animation playback. There are three play modes accessible from the dropdown arrow next to the Play button. The Play button itself will use whatever mode was last selected.

Key Frame Editing

You can add a new key frame to the selected sprite by clicking the “Add Key Frame” button at the top. This will insert an empty key frame at the selected time. You must have a sprite selected for this button to be available.

Alternatively, you can move the time bar to the desired position and it will automatically insert a key frame upon editing one of the values in the Property Window. This is important: the property window displays the values at the current frame, which is not necessarily the selected key frame if you’ve moved the time bar. Click a diamond on the key frame to jump back to it if necessary.

The Property Window displays all properties at the current frame.

Values in black are directly defined by a key frame at that time.

Values in gray are auto-computed values based on the tweening settings and the key frames before and after this point in time.

Blank values are properties that are not defined in any key frames (i.e. are not being animated at all) and will just use their default values (100 for opacity, 1 for scale, and 0 for everything else) for the whole pose.

Changing a value will add or replace whatever value is currently in the key frame. You will immediately see a diamond appear in the timeline, and a new row for that property if this is the first key frame affecting it.

Clicking the eraser will wipe out the value back to blank. If no other key frames touch that property, then the property row will disappear from the timeline. If no other properties exist in the key frame, then the key frame will be removed completely.

Key Frame Editing in the Timeline

The Property Window lets you adjust individual properties of a key frame, but you can also modify parts of a key frame from the timeline itself. Selecting a keyframe enables the following options the right-click menu:

While a keyframe is selected, you can drag it back and forth on the timeline. Dragging the yellow diamond will drag all the properties with it, while dragging an individual property will drag it alone, separating it from any other properties’ key frames at that time.

By default the key frame will snap to the tick marks. Hold shift to move without snapping.

Canvas

The canvas on the right half of the screen provides a live preview of what the animation looks like at the currently active time in the timeline.

The dashed vertical bar represents the center of your pose. This will line up with the center of your character’s position at the table when in game. The following controls are available for manipulating the canvas view:

The recenter button in the toolbar will reset to the default view.

Editing

You can select sprites in the canvas and edit them through a point-and-click interface as opposed to typing values into the Property Window. Editing from the canvas will auto-update properties in the Property Window and create key frames as needed for any properties that are modified. While a sprite is selected:

Record Mode

By default, when in playback mode, the editing gizmos will disappear, showing a read-only preview of the sprite. By entering Record mode (Record button on the canvas toolbar), you can continue to edit a key frame and get live updates to how it affects the animation.

Markers

Game markers can hide sprites in game. The Markers… toolbar button lets you change what markers are active in order to preview how it would look using that set of markers.

Sprites

To select a sprite, click the sprite's title bar, or anywhere in the timeline that isn't a keyframe. When a sprite is selected, the following properties can be edited in the Property Window: Additionally, the right-click menu will let you cut, copy, paste, duplicate, or delete the sprite.

Properties

To select a property, click its name on the row header in the timeline. When a property is selected, the following properties can be edited in the Property Window: Additionally, the right-click menu will let you cut, copy, paste, or delete the property. This is useful for transferring an entire property's animation from one sprite to another.

Key Frames

To select a key frame, click its diamond in the timeline. When a key frame is selected, the following properties can be edited in the Property Window: Additionally, the right-click menu will let you cut, copy, paste, duplicate, or delete the selected key frame. You can paste key frames onto a different point of time in the same sprite, or on another sprite. Any values that were copied will be transferred into a key frame at that point, overwriting existing values.

Tutorials