Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

The new Image & Animation editor

by Ashley | 2nd, March 2017

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.

Construct 3's new image and animations editor
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.

The color palette in Construct 3's animation editor

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.

Onion skinning in Construct 3's animation editor

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.

Resizing an image in Construct 3

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

The ellipse drawing tool in Construct 3

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.

A grid in the Construct 3 animation editor

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:

Promotional footer image for Construct 3
Now follow us and share this

Tags:

Comments

4
Havok 4,863 rep

AWESOME! Thanks for the updates!

Thursday, March 02, 2017 at 12:17:33 PM
3
BlackScorpion786 848 rep

much needed improvements :)

Thursday, March 02, 2017 at 12:19:14 PM
3
LolindirLink 4,778 rep

Yes! No more searching for pop-up windows! (A nightmare every now and then on multimonitor setups when they appear completely off screen!)

Thursday, March 02, 2017 at 12:21:12 PM
3
Jaydon 6,805 rep

Wow, we sure are living in the best of times!

Thursday, March 02, 2017 at 12:23:08 PM
3
Rushty 632 rep

Looks great. Yet another excellent improvement. Cant wait for the release.

Thursday, March 02, 2017 at 12:23:50 PM
3
tunepunk 14.0k rep

Nice... How well does it work with stylus input? C2's editor is very very slow using a stylus.

Thursday, March 02, 2017 at 12:26:24 PM
3
Bleenx 7,923 rep

I don't see a play button. You can't preview your animations as you draw them like you would in Pyxel Edit or similar programs?

Thursday, March 02, 2017 at 12:31:46 PM
15
shinkan 36.0k rep

It's good to have "Onion skinning" or "ellipse drawing tool" but...

Can you:
- Select multiple animations (to set multiple properties with one click)?
- Select single/multiple frames (to copy, move and delete them together)?
- Copy, cut, paste frames between animations?
- Import multiple sprite sheets as different animations?
- Resize preview window for animations?

Also there's nothing about Image point and collision polygons. How are they now?
Are they still super not user friendly to use? Did something change in the way we edit them?

Thursday, March 02, 2017 at 12:40:08 PM
6
stefanos 3,478 rep

Some welcome features, but i dont see some key features like layers, brushes, etc to convince me stop using my previous editing software.

Thursday, March 02, 2017 at 12:42:22 PM
4
yojona 5,616 rep

What about preview animation? if the preview plays in the canvas área (with current zoom, no in a small popup) will be great.

Thursday, March 02, 2017 at 12:52:44 PM
2
ALLMarkMade 7,411 rep

Ok, it's amazing now, thanks.

Thursday, March 02, 2017 at 12:55:07 PM
8
shinkan 36.0k rep
Some welcome features, but i dont see some key features like layers, brushes, etc to convince me stop using my previous editing software.
quoted from stefanos

Image Editor should not be really used as a content creation software. It's job should be purely condensed on importing, editing and setting up animations. There's probably a thousands free and paid painting apps but none of them will let you edit animations for your game.
It's good to have a simple image editor to quickly fix some small issues, but it's main job always was, is and will be to manage animation frames.

Thursday, March 02, 2017 at 12:55:43 PM
2
tunepunk 14.0k rep
It's good to have "Onion skinning" or "ellipse drawing tool" but...

Can you:
- Select multiple animations (to set multiple properties with one click)?
- Select single/multiple frames (to copy, move and delete them together)?
- Copy, cut, paste frames between animations?
- Import multiple sprite sheets as different animations?
- Resize preview window for animations?

Also there's nothing about Image point and collision polygons. How are they now?
Are they still super not user friendly to use? Did something change in the way we edit them?
quoted from shinkan

Good points...

I did notice they changed the icon for the collision editor, before it was a closed shape, now it's a line. Hopefully you don't have to close shapes now...

Even better if you can have several collision boxes. Index based like image points.

Thursday, March 02, 2017 at 12:56:12 PM
3
Rhindon 15.1k rep

This is AWESOME!!!!!!! I particularly love the frame Onion feature.

Question, though. Does the shape options (like the square and ellipses) have an angle rotation feature? I know you can rotate the angle of the OBJECT, but suppose we just want the IMAGE to appear to rotate? Is that going to be in there?

Thursday, March 02, 2017 at 12:57:23 PM
5
shinkan 36.0k rep
Good points...

I did notice they changed the icon for the collision editor, before it was a closed shape, now it's a line. Hopefully you don't have to close shapes now...

Even better if you can have several collision boxes. Index based like image points.
quoted from tunepunk

We asked about having a several collision polys per anim frame long time ago, but answer was typical as always: "you can create more sprites to act as collision detectors".

right... but having dozen of extra sprites to manage, set collision poly for itself, pin, and set position for each hero sprite just to act as a collision detectors is exactly the same as doing none of that but only set few more polys inside the sprite.

Thursday, March 02, 2017 at 1:22:28 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.