Level Editor

Super Mango includes a standalone visual level editor (out/super-mango-editor) that lets designers place, move, and configure entities on a scrollable canvas, then save the result as a TOML level file that the game engine loads directly.

make editor        # build the editor binary → out/super-mango-editor
make run-editor    # build and launch

Window Layout

┌─────────────────────────────────────────────────────────────────────────┐
│                         Toolbar (32px)                                   │
├──────────────────────────────────────────────┬──────────────────────────┤
│                                              │                          │
│              Canvas  (896 × 656 px)          │    Panel  (384 × 656 px) │
│                                              │                          │
│   Scrollable level preview — WYSIWYG with    │  ┌────────────────────┐  │
│   the running game. Entities drawn at their  │  │   Entity Palette   │  │
│   exact game sizes and positions.            │  ├────────────────────┤  │
│                                              │  │   Properties       │  │
│                                              │  │   Inspector        │  │
│                                              │  ├────────────────────┤  │
│                                              │  │   Level Config     │  │
│                                              │  └────────────────────┘  │
├──────────────────────────────────────────────┴──────────────────────────┤
│                         Status Bar (32px)                                │
└─────────────────────────────────────────────────────────────────────────┘
  Total: 1280 × 720 px

Tools

Three interaction modes are available via the toolbar or keyboard shortcuts:

Entity Palette

The right panel lists all 30 placeable entity types (ENT_COUNT), grouped by category:

Each type is shown with its in-game sprite thumbnail so the palette is visually identical to what appears in game.

Properties Inspector

When an entity is selected with the Select tool, the Properties panel displays its editable fields. All fields match the TOML schema exactly — what you see in the inspector is what gets written to the file.

Example — Spider:

• x, vx, patrol_x0, patrol_x1, frame_index

Example — Float Platform:

• mode (dropdown: STATIC / CRUMBLE / RAIL)
• x, y, tile_count, rail_index, t_offset, speed

Example — Axe Trap:

• pillar_x, y
• mode (dropdown: PENDULUM / SPIN)

Changes take effect immediately on the canvas (WYSIWYG).

Level Config Panel

The Level Config section in the right panel exposes the top-level TOML scalars:

• name, description, generated_by
• screen_count (world width = screen_count × 400 px)
• player_start_x, player_start_y
• music_path, music_volume
• floor_tile_path
• initial_hearts, initial_lives
• score_per_life, coin_score
• next_phase path (saved under [last_star] in TOML)
• floor_gaps list (add / remove entries)

Camera Controls

The canvas renders the level in WYSIWYG — entity positions and sizes match the game exactly at zoom 1.0 (logical pixel = 1 canvas pixel). At zoom 2.0 each logical pixel maps to 2 canvas pixels.

Undo / Redo

The editor maintains a full undo stack for all placement, deletion, and property changes.

The undo stack is in-memory only — it is cleared when a new file is opened or created.

The editor also keeps recent files and writes autosaves for modified valid levels under out/autosave/.

Copy / Paste

Only one entity can be in the clipboard at a time. The pasted entity appears offset from the original so it does not overlap.

Play-Test Integration

The Play button validates and saves the active TOML level, then launches the game engine as a child process with --level <path>. Validation errors block playtest; the first error is shown in the status bar and printed to stderr. Clicking Stop (or closing the game window) returns to the editor.

# Equivalent to clicking Play in the editor:
make run-level LEVEL=levels/your_level.toml

Enabling Debug Mode in the toolbar adds --debug to the game launch, showing collision boxes, FPS counter, and the event log.

File Operations

The title bar shows an asterisk (*) after the filename when there are unsaved changes. The editor prompts to save on quit if the level has been modified.

Saved files are plain TOML — they can be edited in any text editor and immediately reloaded in the editor or game.

Save and Export run editor_validate_level() first. Errors such as bad counts, invalid paths, missing next_phase files, or invalid screen_count block persistence so the editor does not write or launch levels known to be unsafe. The status bar always shows the current validation summary.

CI can start and immediately exit the editor with:

./out/super-mango-editor --smoke-test

Architecture

The editor is built from these modules in src/editor/:

The EditorState struct mirrors the game’s GameState design: one container passed by pointer to every function, owning the SDL window, renderer, font, entity textures, level data, camera, tool state, undo stack, and UI state.

Relationship to the Game Engine

The editor shares the LevelDef struct and level_loader with the game. This means:

• Any level that loads correctly in the editor will load correctly in the game.
• The serializer (serializer.c) only needs to be updated in one place when a new entity type is added.
• The editor’s canvas draws entities using the same sprite paths as the game — adding a new entity type requires adding its texture to EntityTextures and a render call in canvas_render.

See Level Design — TOML Reference for the full schema of every entity type.