The Image and Animations editor

Construct 2 has a built in image editor, and the Sprite object extends it with additional windows that allow you to create animations. Note: the image editor is currently a work-in-progress and is not yet feature complete.

To open this editor, double click an object with an image or animations in the Layout View. Alternatively, right-click the object in the Project Bar or Object Bar and select Edit image or Edit animations.

The image editor

The image editor is used to edit Tiled Background images and Sprite animation frames.

The Construct 2 image editor.

The buttons along the top modify the entire image:
Clear image Resets the image to all transparent.
Open Import an image file from disk in PNG, JPEG, BMP, TIF, GIF or WMF format. PNG is recommended since it is lossless, usually compresses well, and supports alpha transparency.
Save Export the image to a file on disk in PNG, JPEG, BMP, TIF or GIF format. PNG is recommended since it is lossless, usually compresses well, and supports alpha transparency.
Set export format Opens the Image Format dialog, allowing you to set the format on export to PNG-32, PNG-8 or JPEG.
Mirror Mirror the image horizontally. Hold shift to mirror an entire animation.
Flip Flip the image vertically. Hold shift to mirror an entire animation.
Rotate 90 degrees clockwise/anticlockwise rotates the image. Hold shift to rotate an entire animation.
Crop removes spare transparency at the edges of the image, making the canvas as small as possible while still fitting the image. This is recommend to save memory and make collisions more accurate and efficient. Hold shift to crop an entire animation.
Resize Adjust the image canvas size, with options to center align the image, top-left align or stretch to fit.
Zoom buttons Zoom the image. Alternatively, hold control and scroll the mouse wheel.
Toggle background brightness Switch the background from a light shade to a dark shade. The dark shade may be more useful for editing bright images like light spots, clouds, etc.

The image editor view can also be scrolled by holding the middle mouse button and dragging.

The buttons down the left are the following tools:

Rectangle select Select, delete, cut, copy and paste rectangle sections of the image.
Eraser Erase sections of the image.
Pencil Draw individual pixels or drag 1px-size lines.
Brush Draw with a colored round brush.
Line Draw colored lines.
Rectangle Fill an area with a color.
Fill Flood fill an area with a color.
Color picker Pick the primary or second color from the image. Note holding control and clicking with another tool is a shortcut for this.
Set origin and image points Opens the Image Points dialog. This allows you to set the image's origin (its point of rotation) and place image points at focal points in the image such as at the end of the gun. Image points can be accessed in the event system to create objects from and such. Some objects, like Tiled Background, do not use an origin or any image points.
Set collision polygon Set the collision shape for the image or frame. By default Construct 2 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 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.

Animations Bar

The animations bar is where multiple animations can be created for Sprite objects.
Animations Bar

Right click a space to add a new animation or add a subfolder to organise animations. Right click an animation and select Preview to preview how the animation will look in the game.

When selecting an animation, the Properties Bar displays settings for the animation. These are the following:

Speed The number of animation frames shown per second. For example, if set to 5, each animation frame lasts for 1/5th of a second. Set to 0 if you do not want the animation to play (e.g. if a tile set is used with a different tile in each frame).
Loop Restart the animation after it finishes.
Repeat count If not looping, the number of times to repeat the animation.
Repeat to The zero based index of the animation frame to repeat back to if looping or repeating.
Ping-pong Play the animation alternately forwards and backwards.

Animation frames bar

The animation frames bar displays a list of the animation frames in the current animation.

Animation Frames bar

Select an image to switch the Image Editor to editing the clicked animation frame. Animation frames can also be dragged and dropped to adjust the sequence.

Right-click a space in the animation frames bar for the following options:

Add frame Add a new blank animation frame to the end of the sequence.
Duplicate last frame Make a copy of the last animation frame and add it to the end of the sequence.
Reverse frames Reverse the order of all the frames in the animation.
Import frames Opens a dialog to select one or more image files from disk. All the selected image files are added as animation frames.
Import sprite strip Import a sprite strip or tileset, where a single image contains a number of animation frames aligned to a grid. This is done with the Import Sprite Strip dialog.
Reload files from disk Reload all the images from the project folder. This is useful if you have edited the images in the project folder while Construct 2 is open and want Construct 2 to recognise the changes. (This option is disabled if you're not using a project folder.)
Thumbnail size Adjust the size of the thumbnail icons of each frame in the bar.

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

Tags: