Meatloaf Map Maker

Getting Started

Open the editor at https://map.meatloaf.cc. Screen (0, 0, 0, 0) loads by default. The layout is:

• Screen Controls — W / X / Y / Z coordinate inputs and Load button
• Info Panel — title, code, description, dimensions, Save
• Char Palette / Editor — 256-char palette on the left, pixel editor below it
• Tile Grid — the main 40×25 editing canvas
• Tile Data Panel — per-tile text notes and navigation links
• Audio Toolbar — SID music player
• Screen Toolbar — three rows of icon buttons covering editing operations, display settings, and file operations

Screen Toolbar layout

The Screen Toolbar has three rows:

• Row 1 — Editing tools: Undo / Redo · Selection shapes · Shift arrows · Flip · Fill modes · Clear
• Row 2 — Display & tools: Palette selector · BG & Border color pickers · Gradient · Font · QR Code · Animation play/stop
• Row 3 — File operations: Save .mmm · Load .mmm · Import · Export

All buttons show a tooltip on hover describing the action.

Screen Navigation

Screens live in a four-dimensional space identified by W, X, Y, Z integer coordinates.

Loading by coordinates

1. Type the coordinates into the W / X / Y / Z inputs at the top.
2. Click Load.

Loading by shortcode

Every saved screen has a unique code. Type it into the Code lookup field and press Enter or click Go.

URL parameters

Link directly to any screen with query params:

/?w=1&x=2&y=3&z=0
/?code=abc123

The Tile Grid

The main canvas is a grid of 40 × 25 tiles (configurable). Each tile holds one PETSCII character index and one C64 color index.

Use Arrow keys to move the green cursor. The Info Panel status bar shows the current position, SSE connection state, and PRG download links.

Char Palette

The palette shows all 256 characters from the current charset as a 16×16 grid. Characters 0–127 appear in the top half; 128–255 in the bottom half.

Selecting a character

Click any character to open it in the pixel editor and make it the active painting character.

Stamping a character

Double-click any character to instantly stamp it onto the current tile, or to fill the active selection with it.

Keyboard navigation

Click the palette to give it focus, then use Arrow keys to step through characters.

Uppercase / Lowercase mode

The Uppercase / Lowercase toggle switches between the two C64 ROM character sets. Lowercase mode makes a–z available as individual chars.

Char Editor

The pixel editor shows the selected character as an 8×8 grid at 25 pixels per pixel.

Drawing pixels

• Left-click / drag — set pixels (foreground)
• Right-click / drag or Alt+click — clear pixels (background)

Bitmap operations

Changes to the editor update the tile grid immediately.

Color Palette & Screen Colors

Setting the active color

Click a color swatch to make it the active painting color.

Filling a selection with a color

Double-click a color swatch to repaint all tiles in the active selection with that color (char unchanged).

Palette variants

The Palette dropdown in the Screen Toolbar Row 2 selects among 17 named C64 color definitions (Pepto, VICE, Colodore, etc.).

Background and border color

The BG and Border color pickers in the Screen Toolbar Row 2 set the screen background and C64 border color. Both are saved to the screen record.

Painting Tiles

Basic painting

1. Move the cursor with Arrow keys or click a tile.
2. Type a character on the keyboard to place the PETSCII char at that code point.
3. Or click a tile to place the current char + color.

Modifier keys when clicking

Delete erases the tile at the cursor (places char 32, space). Backspace erases and steps the cursor left.

Click and hold, then drag to paint continuously.

Selections

Selections scope operations to a subset of tiles. Up to 8 selections can be active simultaneously.

Selection shapes

Choose a shape from the Select group in Screen Toolbar Row 1:

Adding to a selection

Shift+drag adds a new region to the existing selection without clearing it.

Select matching tiles

Ctrl+A selects all tiles on the screen that match the cursor tile (same char AND color).

Moving and adjusting

Copy, Cut & Paste

Transparent paste mode

While a paste is floating (after Ctrl+V), press Space to toggle transparent mode. In transparent mode any tile in the clipboard whose character bitmap has no set pixels (all-zero — e.g. space, blank chars) is skipped during paste and does not overwrite the destination. Press Space again to turn it off. The preview updates immediately so you can see the effect before committing.

Example: duplicate a region

1. Draw a rectangle selection around the region.
2. Ctrl+C to copy.
3. Ctrl+V to paste.
4. Shift+Arrow to move to the desired location.
5. Enter to commit.

Undo & Redo

The editor keeps 50 levels of undo history covering all tile-modifying operations.

Flood Fill

Flood fill replaces connected tiles that share the same char or color. Three modes are in the Fill group of Screen Toolbar Row 1:

If a selection is active, fill is limited to selected tiles. Otherwise it floods from the cursor position outward through connected matching tiles.

Example: recolor all walls

1. Select the replacement color in the color palette.
2. Click any wall tile on the screen to move the cursor there.
3. Click the Droplet (Fill color only) button — every contiguous tile with the same color is repainted.

Screen Operations

Shift screen

The four arrow icon buttons in the Shift group scroll all tile content one step in that direction. Content wraps around the edges. If a selection is active, only selected tiles shift.

Flip screen

Clear

The Trash icon erases all tiles on the screen (or just the selection if one is active), replacing them with space (char 32, color 0).

Gradient Tool

The Gradient Tool paints a smooth multi-stop color gradient across tiles. Click the Blend icon in Screen Toolbar Row 2 to open the modal.

Configuring the gradient

1. Click a color in the 16-swatch picker.
2. Click + Add Stop to append it to the sequence.
3. Repeat for as many colors as needed. Use ◀ ▶ to reorder, ✕ to remove.
4. The preview strip shows the interpolated gradient live.

Applying

1. Click Draw Gradient → (requires at least 2 stops).
2. Click and drag across the tile grid to define the gradient direction.
3. Tile colors update along the drag direction. Press Esc to cancel.

Example: sunset sky

1. Add stops: Yellow → Orange → Red → Purple.
2. Click Draw Gradient →.
3. Drag from the top row to the bottom row of the screen.

Find & Replace

Press Ctrl+F to open the Find & Replace modal. Search and replace tiles by char, color, or both.

How it works

Each of the four field rows has a checkbox to enable/disable that criterion:

Picking values from the main palette

1. Click a field row — it highlights in yellow to show it is active.
2. Click any char in the main char palette to assign it to that row.
3. Click a color swatch to assign it to a color row.

Scope

If a selection is active, the operation is limited to selected tiles. Otherwise it applies to the entire screen.

Count vs Replace All

• Count — counts matching tiles without making any changes.
• Replace All — applies the replacement to every matching tile.

QR Code Generator

Click the QR code icon in Screen Toolbar Row 2 to open the modal.

Standard mode

1. (Optional) Click the Dark field row, then click a char in the palette to set the dark-module character. Default is the currently selected char.
2. (Optional) Click Light and pick the light-module character. Default is the sparsest char in the current charset.
3. Type your text or URL in the textarea.
4. Click Generate & Paste (or press Ctrl+Enter).
5. The QR code appears as a floating paste. Nudge with Shift+Arrow, then Enter to commit.

Compact mode

Enable the Compact (1 char per 2×2 module) checkbox. Each tile represents a 2×2 block of QR modules, making the output half the size in each dimension. Char selection is fully automatic based on bitmap density — dark/light fields are hidden in compact mode.

Animations

Any character can be assigned an animation sequence. Click the Anim button next to the char editor to open the Animation modal for the current char.

Animation settings

Frame rows

Each frame specifies a char replacement, a pixel-operation (shift/flip/rotate), or no change — plus an optional color override. To assign a char from the palette: click the frame row to activate it, then click any char in the main palette.

Playback

Click the Play icon in Screen Toolbar Row 2 to start animation playback for all animated chars simultaneously. The icon switches to a filled Stop square while running — click it again to stop and restore the static tile display.

Example: blinking character

1. Open char 160 (solid block) in the editor and click Anim.
2. Set Interval = 500 ms, Sequence = Bounce, Loop = on.
3. Add two frames: char 160 and char 32 (space).
4. Click Save, then click the Play icon in the Screen Toolbar.

SID Audio

Attach C64 SID music to a screen. The SID plays automatically when a visitor loads the screen.

Choosing a SID file

1. Click the SID button to open the file browser.
2. Navigate folders and click a file name to load and play it.
3. The selection is saved to the current screen automatically.

Click ⊘ No music to explicitly disable audio for this screen.

Playback controls

Tile Text & Navigation Links

Tile text

The Tile Data Panel below the grid shows a textarea for the current tile. Type any notes or metadata — saved on blur or Enter.

Navigation links

Link any tile to a specific position on another screen:

1. Position the cursor on the source tile.
2. Fill in W, X, Y, Z (target screen) and X, Y offset (position within that screen).
3. Click Set to save.

Use Copy to snapshot the current cursor position, navigate to the linking tile, then Paste to fill the link fields. Click Clear to remove a link.

Custom Charsets & Font Mode

Loading a .64c charset

A .64c file contains 2 KB of C64 bitmap data (256 chars × 8 bytes). Load one from the charset picker in the toolbar to replace the ROM charset in both the palette and the tile grid.

Font mode

Click the Type (Aa) icon in Screen Toolbar Row 2 to open the Font modal. Font mode lets you render any system font into the char editor as you type:

1. Choose a font family from the dropdown (system fonts are listed automatically).
2. Set the point size.
3. Choose Compact mode or leave it off:

4. Click Apply to activate the font.
5. Move the cursor to the desired position and type — glyphs are rendered at each keystroke and the cursor advances by glyph width.
6. Press Esc to exit font mode and return the cursor to normal size.

Real-time Collaboration

Multiple users can edit the same screen simultaneously.

• Connecting to a screen opens an SSE stream — your cursor broadcasts to all other users.
• Other users' cursors appear as colored outlines with distinct per-player colors.
• The SSE status indicator in the Info Panel shows green when connected.
• The Clients count shows how many users are on this screen.

Messaging

Click 💬 in the Info Panel to open the messaging modal.

The Events Log below the editor shows a scrolling feed of server events. Toast notifications appear briefly in the corner for new messages and connection changes.

Saving to Server

Auto-save of tile changes

Every tile paint, fill, paste, and cut is sent to the server immediately. You do not need to manually save individual tile edits.

Saving screen metadata

Click the green Save button in the Info Panel to persist: title, description, code, dimensions, BG/border colors, char mode, animations, charmap, and audio assignment.

PRG download links

After loading a screen, download links appear in the status bar:

MMM Save Files

A .mmm file is a portable JSON snapshot of an entire screen. It captures everything needed to restore the screen on any server or at any coordinates.

What is saved

• App name, version, save timestamp, and screen URL link
• Screen metadata: title, description, code, BG color, border color, char mode, charset path, and original coordinates (for reference)
• All 1000 tile entries (char index + color index)
• All per-tile text notes
• All per-tile navigation links
• All character animations (full AnimConfig for each animated char)
• All custom-drawn character bitmaps

Saving a .mmm file

Click the Save icon (floppy disk) in Screen Toolbar Row 3. The file downloads immediately with no dialog. The filename is:

• code.mmm — if the screen has a code set
• w.x.y.z.mmm — using the current screen coordinates otherwise

Loading a .mmm file

Click the Load icon (folder) in Screen Toolbar Row 3 and pick a .mmm file. The data is applied to the current screen coordinates (the original coordinates in the file are ignored). The screen is then saved to the server automatically.

Export & Import

The Export and Import modals in Screen Toolbar Row 3 let you exchange screen data with other tools using industry-standard C64 formats.

Export

Click the Download icon (Export) to open the Export modal. Choose a format and click Download.

The exported filename follows the same pattern as MMM saves: code.ext or w.x.y.z.ext.

Import

Click the Upload icon (Import) to open the Import modal. Click the file area to pick a file — the format is detected automatically from the extension. The parsed result (tile count, background color, border color) is shown before you commit. Click Import to apply it to the current screen.

Keyboard Shortcut Reference

Navigation

Editing

Selection

Clipboard & paste

History

Modals & modes

Char palette (when palette has focus)

Screen Toolbar — Row 1 (editing)

Screen Toolbar — Row 2 (display & tools)

Screen Toolbar — Row 3 (file operations)