Construct 2 has a built in image editor, and the Sprite object extends it with additional windows that allow you to create animations.
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 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.
- Open in external editor
- allows the current image to be edited in a different image editing tool. The tool can be set in Preferences.
- Link to original source file
- Open a file chooser dialog to review or change the original source path for this image. This can be used to easily re-import the image from its original location.
- Reload from original source file
- Replace the current image with the image file at the original source path. Construct 2 automatically tracks the original source paths of any images that are imported, but if the original source is not known, the option is disabled. The Animation Frames bar has options to reload the entire animation or all animations from the source paths in one go.
- 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.
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.
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 - from files...
- Opens a dialog to select one or more image files from disk. All the selected image files are added as animation frames.
- Import frames - from 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 - project folder (for this animation)
- 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.)
- Reload files from - original sources (for this animation/all animations)
- Re-import the images at the original source paths for all frames in the current animation or entire object (across all animations). This allows for conveniently reimporting images from the location they originally came from.
- 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.
Original source paths
When importing images to Construct 2, it will remember the original source path where the image came from. The Reload from original source file button in the image editor, and the Reload files from - original sources (for this animation/all animations) options in the animation frames bar, allow the images to be easily reimported from their remembered original locations. This can be useful if you are working with an artist who places their assets in a separate folder instead of directly in to the project. Just remember if you move the original paths, or transfer your project to a different computer, none of the original paths will be found any more and Construct 2 won't be able to reload anything. Also note that reimporting images from their original sources replaces what you already have, so if you have made changes like cropping or flipping from within Construct 2, then these changes will be reverted. However the collision polygons, origins and image points will be preserved.