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.
Catch-up
Missed our earlier announcements? Here's a list of all the news about Construct 3 so far: