The Editor — Layout & Essential Tools

Every part of the EscapeMaker editor fits into one of five regions. Learning these names now will make the rest of the documentation much easier to follow.

Region 1 — Top Toolbar

The toolbar spans the full width at the top of the editor. From left to right it contains:

• File menu — Save, Save As, Export, and New Game.
• Insert menu — Add objects to the current scene: Sprite, Text, Button, Shape, Scene.
• Tools menu — Alignment tools (Align Left, Align Right, Align Center Horizontal/Vertical, Distribute Horizontally, Distribute Vertically), plus grid snap settings.
• Scene navigation arrows — A left arrow (◀) and right arrow (▶) that step backward and forward through your scene list one scene at a time, in the order shown in the Room Panel.
• Game name display — Shows the current game name in the toolbar center. Click it to quickly rename the game.
• Test button — Launches your game in a new browser tab for live testing.

Region 2 — Left Panel (tabbed)

The left panel contains six tabs selectable via icons or labels along the top edge of the panel:

Region 3 — Canvas

The large central area is the canvas — a live Pixi.js render of the current scene. The canvas shows:

• The scene's background image (or solid color if none is set)
• All objects placed in the scene, at their exact positions and sizes
• Blue selection outlines around selected objects
• A dashed orange outline showing the game's target resolution boundary

Region 4 — Right Panel (tabbed)

The right panel also has tabs, though these are context-sensitive — some tabs only show useful data when a specific object is selected:

Region 5 — Status Bar

A slim bar at the very bottom of the editor shows the current canvas zoom level, the mouse cursor's X/Y coordinates over the canvas (useful for precise placement), and a "Saved" / "Unsaved changes" indicator.

There are three ways to switch which scene is displayed on the canvas:

Method A — Toolbar Arrows

Click the ◀ (Previous) or ▶ (Next) arrows in the toolbar. The editor steps through scenes in the order they appear in the Room Panel — Room 1 first, top to bottom, then Room 2, and so on.

Method B — Room Panel Click

Open the Room Panel tab on the left. Click any scene name in the tree. The canvas instantly updates to show that scene. The active scene is shown with a subtle highlight in the Room Panel list.

Method C — Scene Map Click

Open the Scene Map tab on the left. Each scene is a node. Click any node to navigate to it. This is especially useful in large games where scrolling the Room Panel list would take a while.

You can add four kinds of objects to any scene. Use the Insert menu in the toolbar, or the keyboard shortcuts listed below.

What Happens When You Insert

Regardless of which method you use, the new object:

1. Appears centered on the visible canvas area
2. Is immediately selected (blue outline visible)
3. Appears at the top of the Layer Panel list (in front of all existing objects)
4. Its properties are shown in the Property Panel on the right

A new Sprite will show a placeholder checkered pattern until you assign an image to it. A new Text object shows the placeholder string Text in a default style. A new Button shows the label Button.

Assigning an Image to a Sprite

With a Sprite selected, look at the Property Panel on the right. Near the top you'll see an Image field showing the current image path (or "none"). Click the folder icon next to it to open the Asset Picker. Choose an image from your uploaded assets or from the library. The sprite updates immediately on the canvas.

Alternatively, open the Asset Panel tab on the left and drag an image thumbnail directly onto the canvas. This creates a new Sprite pre-assigned to that image at the drop position.

Single Selection

Click any object on the canvas to select it. A blue outline with eight resize handles appears around the object's bounding box. The object is also highlighted in the Layer Panel list, and the Property Panel on the right updates to show its properties.

Click anywhere on the canvas background (not on an object) to deselect all objects.

Dragging to Move

Click and hold on a selected object, then drag. The object follows your cursor. Release to drop it at the new position. The X and Y coordinates in the Property Panel update in real time as you drag.

Multi-Selection

Hold Shift and click additional objects to add them to the selection. All selected objects show individual blue outlines. You can then drag any one of them to move the entire group together, maintaining their relative positions.

You can also click and drag on empty canvas space to rubber-band select: a dashed selection rectangle appears as you drag, and any objects whose bounding box is fully inside it are selected when you release.

Nudging with Arrow Keys

With one or more objects selected, use the keyboard arrow keys to nudge their position:

Nudging is the most precise way to fine-tune positioning without typing coordinates in the Property Panel.

Resizing

Drag any of the eight blue handles on the selection outline to resize the object. Corner handles resize both width and height simultaneously. Edge handles resize only one dimension. Hold Shift while dragging a corner handle to constrain the aspect ratio.

The Property Panel is the right panel's first tab, and the one you'll use most often. When an object is selected, it shows every configurable attribute for that object. When nothing is selected, it shows scene-level settings instead.

Object Name

The very first field at the top of the Property Panel is the Object Name. By default objects are named generically (sprite_1, text_2, etc.). Always rename objects to something descriptive as soon as you place them.

Transform Fields

Every number field can be edited by:

• Clicking and typing a new value, then pressing Enter
• Clicking and dragging left/right to scrub the value up or down (like a slider)
• Scrolling with the mouse wheel while hovering over the field

Opacity

The Opacity field (0–100%) controls how transparent the object is. At 100% the object is fully visible. At 0% it is completely invisible but still exists on the canvas and can still be clicked (if Interactive is on). At 50% the object is semi-transparent and objects behind it show through.

Filters Section

Click the Filters heading to expand a list of Pixi.js filter effects you can apply to the object: Blur, Brightness, Contrast, Grayscale, Sepia, Color Matrix, Glow, and Drop Shadow. Each filter has its own sliders. Multiple filters can be stacked on one object. These render in real time on the canvas.

Interactive Toggle

The Interactive toggle at the bottom of the Property Panel controls whether the object responds to mouse/touch events (hover, click). It must be ON for any Event Panel actions attached to this object to fire in-game. Objects that are purely decorative should have Interactive turned off to avoid accidental clicks during gameplay.

Every object in a scene has a z-order — a stacking depth that determines which objects appear in front of or behind others. Z-order is managed entirely through the Layer Panel tab in the left panel.

Reading the Layer Panel

Objects are listed in the Layer Panel from top to bottom, where:

• Items at the top of the list are drawn in front (highest z-order)
• Items at the bottom of the list are drawn behind everything else (lowest z-order)

When you select an object on the canvas, its corresponding row in the Layer Panel is highlighted. When you click a row in the Layer Panel, that object becomes selected on the canvas.

Reordering Layers

Click and drag any row in the Layer Panel to a new position. The canvas updates instantly to reflect the new drawing order. This is the primary way to fix "my object is hidden behind something" issues.

You can also use the right-click context menu on the canvas: Bring to Front moves an object to the top of the list; Send to Back moves it to the bottom.

Showing and Hiding Objects

Each row in the Layer Panel has an eye icon (👁) on the right side. Click it to toggle the object's visibility in the editor. A closed eye means the object is hidden from view on the canvas, but it still exists and will still appear in the published game. Use this to temporarily hide objects that are obstructing your view while you work on objects underneath them.

Locking Objects

Each row also has a lock icon (🔒). Clicking it prevents the object from being moved or resized on the canvas. Locked objects can still be selected and have their properties edited via the Property Panel — they just can't be dragged. Lock your background sprite immediately after placing it so you don't accidentally nudge it.

When you need multiple objects to line up precisely — a row of buttons, a grid of icons, evenly-spaced clues — the alignment tools save you from manually typing X/Y coordinates. Find them in the Tools menu in the toolbar.

First, select 2 or more objects (Shift+click or rubber-band). Then use any of these tools:

Every action you take in the editor is logged in an undo history. If you make a mistake — delete the wrong object, accidentally move something, apply the wrong filter — you can instantly reverse it.

The editor stores up to 10 undo steps. Steps older than the 10th are permanently discarded as new actions are recorded.

What Can Be Undone

Most actions are undoable:

• Placing, moving, resizing, rotating objects
• Changing Property Panel values (X, Y, Opacity, etc.)
• Deleting objects
• Reordering layers
• Adding or removing events
• Alignment operations

Actions that cannot be undone include: renaming a game, deleting a scene, and uploading or deleting assets from the Asset Panel.