Construct 3 icon

Construct 3

Documentation

The Layout View

Published 11 Aug, 2017
1,173 words
~5-8 mins

The Layout View is a visual designer for your objects. It allows you to set up a pre-arranged layout of objects, such as a game level, menu or title screen. In other tools, layouts may be referred to as scenes, rooms, frames or stages. See also the manual section on layouts.

The Layout ViewThe Layout View

The dashed rectangle in the top left of the layout area indicates the viewport size in the layout. By default the viewport appears in the top left of the layout, so to align something relative to the viewport, it should be placed inside this rectangle.

In the corner of the view appears a small status bar with information about the current mouse position in the layout, the current zoom level, and the current active layer. The active layer is important since it is the layer new object instances are added to. The active layer can be changed by selecting a different layer in the Layers Bar.

Adding, modifying and deleting objects

Double-click a space in the layout or right-click and select Insert new object to add a new object type. This will bring up the Create New Object Type dialog.

To create new instances of an existing object type, another object can be control + dragged, copy and pasted, or dragged and dropped from the Project Bar. (Make sure you're clear on the difference between Object Types and Instances as described in Project Structure.)

A shortcut for importing image files as Sprite objects is to drag and drop image files in to the Layout View. This automatically creates a new Sprite object type with the dragged image. If multiple image files are dragged, the Sprite is assigned an animation with the dragged images as animation frames.

Instances can be moved by dragging and dropping them with the mouse. Hold Shift to axis-lock the drag to diagonals. Alternatively they can be nudged 1 pixel at a time with the arrow keys (hold shift to nudge 10 pixels), or co-ordinates can be typed in directly to the Properties Bar.

The Delete key or right-click Delete option deletes instances. Deleting all instances of an object does not remove the object type from the project. To entirely remove an object from the project it should be deleted via the Project Bar.

Click objects to select them. Objects cannot be selected if their layer is locked. Hold Control while clicking to select multiple objects, or click and drag a selection rectangle to select all objects in an area. The Properties Bar displays properties for all currently selected objects, so changing a property sets it for every selected object.

When a single object is selected it appears with resize handles around it.

Resize handles for a selected instance in the Layout View

Click and drag the resize handles to stretch the object. Hold Shift to proportionally resize the object. Hold control to resize relative to the object origin, which appears as a small dot on the selected object.

Rotatable objects like Sprite can be rotated by moving the mouse just outside the resize handles, away from the object. When you do this the mouse cursor will change to a rotation arrow. When you see this, click and drag to rotate the object.

Sometimes the resize handles, or rotate cursor, can get in the way of other objects. If this happens, hold Alt to temporarily hide the resize handles and disable rotation. This allows you to select another object instead of modify the selected object.

Using tilemaps

If you are designing a tile-based game, you can insert the Tilemap object and edit tiles in the Layout View. To find out more, see the manual entry on the Tilemap Bar.

Scrolling and zooming

There are a few ways to scroll in the Layout View:

  • The vertical and horizontal scrollbars at the edges of the view
  • Scroll the mouse wheel to scroll vertically. You can also hold Shift to scroll horizontally.
  • Hold the middle mouse button and drag the mouse
  • Hold Space and move the mouse (useful for laptops with track pads)

On desktop systems, middle-mouse dragging is probably the most convenient way to move around the layout.

Zooming is useful to focus on a small area or see an overview of the entire layout. There are several ways to zoom:

  • The Zoom options in the View menu when right-clicking in the Layout View
  • Hold Control and scroll the mouse wheel. Hold both Control + Shift to double or halve the zoom (e.g. 100%, 200%, 400%...)
  • Ctrl and + or - on the keyboard. Hold Shift to double or halve the zoom.

Press Control + 0 to return to 100% zoom.

Selection wrapping

If you select two or more objects, you can wrap the selection by pressing Enter or right-clicking and selecting Wrap selection. This allows you to rotate and stretch the selection as a whole.

Wrapped selections appear with a different color selection box, as shown below:

Wrapping a selection in the Layout ViewWrapping a selection in the Layout View

Wrapped selections can be resized and rotated as if they are one large object. For example the selection can be enlarged and rotated, and all objects maintain their position relative to each other.

Wrapped selections resize and rotate as oneWrapped selections resize and rotate as one

While a selection is wrapped, click any of the objects in the wrapped selection to make that object the rotation origin.

Containers

Objects that are grouped in to Containers highlight yellow in the Layout View. Containers can also be set to automatically wrap their selection. If you still need to select an individual object in an automatically wrapped selection, hold Alt and click one of the objects.

Other

To go to the associated event sheet, press Ctrl + E or right-click and select Edit event sheet.

The Z order of objects within a layer can be adjusted by right-clicking and selecting Z OrderSend to top of layer or Z OrderSend to bottom of layer. You can also open the Z Order Bar Paid plans only for advanced control.

Objects can be snapped to a grid for tile placement, and the collision polygons of the displayed objects can also be outlined. These features can be enabled in the layout's properties.

The right-click menu in the layout view also provides some alignment tools under the Align sub-menu. These allow you to quickly space objects equally or align objects along their edges. When aligning, the objects are aligned to the particular object you right-clicked.

The Animations editor can be brought up by double-clicking objects with images or animations like Tiled Background and Sprite. You can also double-click Text objects to edit their initial text in a dialog.

Effects will be displayed in the layout view if enabled in project properties.