Construct 3 icon

Construct 3

Documentation

The Animations Editor

Published 11 Aug, 2017
2,142 words
~9-14 mins

Construct 3 has a fully-featured built-in image and animations editor, used to create animations for the Sprite object. When opening for an object without animations, such as Tiled Background, the animation editing features are hidden and it acts as a normal image editor. For brevity it is consistently referred to as the Animations Editor, even in cases where it is only editing a single image.

To open this editor, double-click an object with an image or animations in the Layout View or Project Bar.

The Animations EditorThe Animations Editor

Note each pane in the Animation Editor can be resized by dragging the borders, similar to how you can with the main Construct 3 interface. This lets you customise the layout of the Animation Editor.

Color palette

The color palette appears on the left and allows a color to be picked for the drawing tools. You can choose both a primary and secondary color with left and right click. The pane also has a number of cells that can be used to remember a set of colors. Right-click a cell to save or use the primary or secondary color. By default left-clicking the cell will set the primary color.

Pasting colors

You can paste text specifying a color in to any of the color inputs to set the overall color. The text can be in any of the following formats:

  • r, g, b or r, g, b, a
  • rgb(r, g, b) or rgba(r, g, b, a)
  • hsl(h, s, l) or hsla(h, s, l, a)
  • Hex as either #ffffff or ffffff

Color components can be in the range 0% - 100% or 0 - 255. Alpha components should be between 0 and 1.

Top toolbar: image tools

The top toolbar in the image pane provides tools that affect the entire image, such as mirroring and flipping. The tools available are as follows.

  • Clear: resets the image to all transparent.
  • Open: import an image from a local file. Note you can also choose SVG files, but these will be rastered in to a bitmap at a given size.
  • Save: export a copy of the current image. In the browser this downloads the current image as a PNG file. You can use the dropdown next to the button to save the current animation, or all animations, bundled in a zip file.
  • Set export format: opens the Image Format dialog, allowing you choose whether the image is saved as PNG or JPEG when the project is exported. This can also be applied to the current animation, or all animations. Note Construct stores all images in the project in a lossless PNG format; images are only converted on export.
  • Undo and Redo: step through the change history.
  • Cut, Copy, Paste: perform clipboard operations with the image.
  • Mirror and Flip: invert the image on one of its axes. Use the dropdown next to the button to affect the entire animation.
  • Rotate anti-clockwise and Rotate clockwise: rotate the image in 90°. Use the dropdown next to the button to affect the entire animation.
  • Crop: resize the image smaller to remove transparent space around the edges of the image. This is a good idea to save memory. Note this leaves a 1px transparent border to improve the image quality at the edges. Use the dropdown next to the button to affect the entire animation.
  • Resize: resize the current image. A dialog will open with options for the resize, including a checkbox to apply the resize to the whole animation.
  • Zoom in, Zoom out, Reset zoom: adjust the zoom level in the image editor. Alternatively use Control + mouse wheel.
  • Toggle background brightness: switch between a light and dark background for the image editor. Changing to a dark background can be useful when editing very light images.
  • Toggle onion skin: Paid plans only display adjacent frames translucently over the current image when editing an animation. This can help when drawing animations. The options are to display the previous frame, next and previous frames, or next and previous two frames over the current image.
  • Grid: toggle the display of a grid over the current image. Use the dropdown next to the button to adjust the grid settings, such as the grid size, color and whether to snap to the grid.

Side toolbar: drawing tools

The side toolbar provides some tools for drawing in the image, as well as some extra Construct-specific tools for setting image points and adjusting the collision polygon. Some tools have extra settings, such as the size for the brush tool, which appear underneath the top toolbar. The following tools are available.

  • Rectangle select: select, move, delete, cut, copy and paste rectangle sections of the image.
  • Pencil: draw with a solid square, useful at 1px size for pixel art.
  • Brush: draw with a soft round brush.
  • Line: draw straight lines. Hold shift to lock the angle to 5° increments.
  • Rectangle: draw a rectangle in the image. The secondary color is used as a border. Hold shift to draw a square.
  • Ellipse: draw an ellipse in the image. The secondary color is used as a border. Hold shift to draw a circle.
  • Fill: fill a continuous area of the image with a color.
  • Eye dropper: select a color from the image. Alternatively hold Control and click with another tool selected.
  • Image points: display and edit the origin and image points in the image. This switches the color palette pane to a list of image points, allowing you to add and remove image points. The origin determines the rotation point of the image, and is where the X and Y co-ordinates of the object are aligned to. Image points can be used in the event system to refer to alternative positions. For example you may place an image point at the end of a gun, so spawned bullets can appear at the end of the gun barrel instead of at the origin.
  • Collision polygon: adjust the area that counts as colliding for this image. By default Construct guesses a collision shape, but it is not always accurate. Click and drag the points of the collision polygon to alter its shape. Right-click on a point or in a space to display a menu of additional options for the collision polygon, such as adding and deleting points. Some objects, like Tiled Background, do not use collision polygons.

Frames pane

The bottom pane displays a list of all frames in the current animation. Frames can be added and deleted here. Select a frame to switch to editing its image. Frames can also be dragged and dropped to adjust their sequence.

Selecting a frame also shows a single property in the properties pane: Duration, which is a multiplier for the amount of time to spend on the frame. For example, a frame duration of 2 will spend twice as long on that animation frame, 0.5 half as long, etc. relative to the current animation speed.

Right-click a frame to duplicate or delete it.

Right-click in an empty space in the pane to see additional options for managing the animation, which include:

  • Add frame: add a new empty frame at the end of the animation
  • Duplicate last: add a new frame which is a copy of the last frame in the animation
  • Reverse frames: invert the sequence of frames in the animation
  • Import frames
    • From files: add multiple animation frames by selecting a set of local image files to import
    • From strip: add multiple animation frames by selecting a local image file with multiple images placed on it (often called a sprite strip), and cutting it up in to individual images. You must specify the number of cells horizontally and vertically, and the direction to read cells in.

You can also adjust the size of the frame icons appearing in the pane by adjusting the Thumbnail size.

Animations and properties panes

The right side of the Animations Editor shows the Animations pane, where animations can be added, edited and deleted. Right click a space to add a new animation or add a subfolder to organise animations. Right click an animation to see options like Preview, which shows how the animation will look in the game. You can also Find all references Paid plans only for an animation to locate all its references in events.

Selecting an animation also switches which frames are showing in the frames pane, and displays settings for the animation in the Properties pane. The following properties are available for animations.

  • Name: the name of the animation. This can also be directly edited in the Animations pane.
  • Speed: the rate at which to play the animation, in animation frames per second. For example if set to 5, each frame will last 1/5th of a second. Note this cannot be faster than the game framerate, which is typically 60. Set to 0 if you do not want the animation to play, which is useful if you want to control which frame is showing by events. You can also use negative speeds, which causes the animation to play backwards. Note in this case repeating animations should set the Repeat to frame at the end of the animation, otherwise by default it repeats to frame 0 (the start of the animation), causing the animation to stop after playing in reverse.
  • Loop: enable to infinitely repeat the animation.
  • Repeat count: if the animation is not looping, the number of times to repeat the animation.
  • Repeat to: the zero-based index of the animation frame to go back to when the animation loops or repeats.
  • Ping pong: play the animation alternately forwards and backwards when looping or repeating.

Drag-and-drop

There are various ways you can import images by drag-and-drop in to the Animations Editor window.

Into main image pane

An image file can be dropped in to the main image editing pane to replace the content of the current frame with the dropped image file. This works the same way as using the Open button on the top toolbar.

Frames pane

Dropping a single image file in to the Frames pane will prompt you asking how the image should be treated. The image can be treated as a plain image file, in which case the image is added as a new frame in the current animation. This works the same way as the context menu option ImportFrom files. The image can also be treated as a sprite sheet, which works the same way as the context menu option ImportFrom strip.

Dropping multiple image files in to the Frames pane will add a new frame for each dropped image file. This works the same way as the context menu option ImportFrom files.

Animations pane

You can drag-and-drop either a single image file or multiple image files in to the Animations pane, and it is handled in the same way as with the Frames pane, except that the frames are added to a new animation.

Image points pane

When you select the Image points tool in the image editor, the left pane switches to a list of image points for the current animation frame.

The Origin is a special kind of image point defining the center of the object, or its point of rotation. It has a different icon to denote it. The term image point usually means "image points including the origin". Image points have a zero based index, and the first image point (number 0) is always the origin. The origin cannot be renamed.

You can also add additional image points. These are useful to create spawn points for other objects. Since you can create objects at image points in events, it is often useful to place an image point in places like the end of the player's gun in the image. Image points can also be given a name, and referred to in events by this name.

Editing image points

Select an image point in the list and a corresponding point will appear on the image. Left click to place the point under the mouse. The arrow keys can also nudge it 1 pixel in each direction.

An image point can be quickly placed using the num pad, e.g. 1 for the top-left corner or 5 for centered. Alternatively the image point can be right clicked in the Image Points pane and an option chosen from the quick assign menu.

Right clicking an image point in the Image Points pane also provides Apply to whole animation and Apply to all animations options. These sets the image point in the same relative place in all frames in the current animation, or all frames in all animations, respectively. If an image point does not exist in all frames, this option also creates it. Holding shift while placing the image point is a shortcut for this.