0 favourites



Get emailed when there are new posts!


  • 706 words
  • ~3-5 mins read time
  • Published
  • 4,003 visits
  • 13.3 visits per week
  • 5,535 page views


This blog post is licensed Creative Common Attribution Required v4.0.


Enjoy this blog? Share with your contacts!

Share now

Editing images and animations has always been a key part of Construct 2. The Image Editor serves as a basic built-in image editing tool, and the Animations Editor combines the Image Editor with features to create animations and their associated sequences of animation frames. This includes editing animation and frame properties like the animation speed, per-frame duration, looping settings and more.

Overall the Animations editor handles a lot of features. We felt the Construct 2 UI for this was a bit convoluted: there are several windows, it still uses the main window's Properties Bar, and it's easy to end up accidentally overlapping something you need to use. So for Construct 3 we redesigned the whole editor. Here's what it looks like in Construct 3.

The new Animations Editor. Click to expand

The main difference is the whole editor is now contained within a single window. The color palette on the left switches to properties or the image points list depending on what you select. This avoids all the floating windows, and keeps everything self-contained in one place. Each of the panes in this window can also be resized to suit your needs. With this arrangement, it's impossible to accidentally overlap something important.

Construct 3's image and animations editor is built to match Construct 2 feature-for-feature. It looks different, but it can do everything the Construct 2 editor can. Then we went further and added some new features.

Color palette

You can save a set of custom colors in the color palette. This is useful for editing images with just a few colors, such as pixel art.

Onion skinning

Onion skinning is a feature that displays adjacent frames translucently over the current frame. This makes it easier to draw the next frame, or fill in an in-between frame. The Construct 3 Animation Editor now supports onion skinning. Below shows an example, with the previous frame shown translucently.

There are three modes for onion skinning:

  • Show last frame
  • Show last and next frame
  • Show two last frames and next two frames

This can be a big help when hand-drawing animations in Construct 3!

New tools and features

By popular demand, there's a new option to keep the aspect ratio when resizing an image.

We've also added a new ellipse drawing tool with an optional border, which can be useful for quick mock-ups or placeholder graphics.

You can now optionally show a grid over the image to help align your drawing. For example you can set a 1-pixel grid and zoom in to see pixel boundaries.

Other improvements and utilities

There are several more improvements we've made. Here's a quick run-down of the rest:

  • The undo system now covers your whole session in the Animations Editor. Construct 2 could only undo changes made to the current frame.
  • The undo system can also undo more actions like cropping a whole animation.
  • You can export the whole animation and even all animations as a zip, as well as just the current frame. This makes it easier to extract animations from the editor.
  • Images can also be imported by drag and drop. You can use this to change the current image (by dropping in the main area), add a new animation frame (by dropping in the frames area), or add a new animation (by dropping multiple frames in to the animations area).

The desktop build of Construct 3 will also include the features to launch an external image editor, and re-import images from their original disk paths.

We think you'll find this new version of the Animations editor much easier to work with. The simplified UI is friendlier to beginners and experienced users alike, and the new features will help you work more effectively with your images and animations.


Missed our earlier announcements? Here's a list of all the news about Construct 3 so far:

Disabled Comments have been disabled by the owner.