Fix: Construct 3 Tilemap Drawing Wrong Tiles

Here is how to fix Construct 3 Tilemap drawing wrong tiles. You set up a level generator that calls SetTileAt(col, row, tileID) in a loop. The result looks like a jumbled mess — walls where floors should be, grass on ceilings. Either the coordinates are wrong (pixels vs grid) or the tile IDs shifted after a tileset edit.

The Symptom

Tiles placed via events or code appear at wrong positions or show wrong tile art:

• All tiles cluster in the top-left corner (coordinates not pixel-scaled)
• Correct positions but wrong tile images (ID numbering mismatch)
• Tiles appear shifted by one row or column (off-by-one in ID calculation)
• Collision works for some tiles but not others (collision polygon on wrong ID)

What Causes This

Pixel coordinates, not grid indices. SetTileAt(x, y, tile) takes x and y in pixels. Passing column and row numbers directly (e.g. 5, 3) places tiles at pixel position (5, 3) — barely visible in the top-left. Multiply by tile width/height for correct placement.

Tile ID shift after tileset edit. IDs are assigned left-to-right, top-to-bottom across the tileset image. Adding a row of tiles at the top shifts every ID below. A wall that was ID 12 becomes ID 20 if 8 tiles were inserted above it.

Zero-indexed IDs. The first tile is ID 0, not 1. Forgetting this places everything one tile off. Tile -1 means “erase tile” (empty).

Tileset image resized. Changing the tileset image dimensions without matching tile size in Tilemap properties produces ID misalignment. A 256x256 image with 32px tiles = 64 tiles. Resize to 512x256 and IDs remap.

The Fix

Step 1: Use pixel coordinates correctly.

// Correct: multiply column and row by tile size
var tileSize = 32;

Repeat 20 times (loopindex "col"):
  Repeat 15 times (loopindex "row"):
    Tilemap: SetTileAt(loopindex("col") * tileSize,
                       loopindex("row") * tileSize,
                       levelData[col][row])

// Wrong: raw column/row without scaling
// Tilemap: SetTileAt(col, row, tileID) // places at pixel 0-19

For a 32x32 tile grid, column 5 = pixel 160, row 3 = pixel 96. SetTileAt(160, 96, tileID).

Step 2: Verify tile IDs in the Tilemap bar. Open the Tilemap object. In the Tilemap bar at the bottom of the editor, hover over each tile. The status bar shows the tile ID. Write these down or reference them in your level data.

After any tileset image edit, re-verify IDs. They change whenever the image layout changes.

Step 3: Use constants or a lookup for tile IDs. Instead of hardcoded numbers, define constants in an event sheet or global variables:

On start of layout:
  Set TILE_WALL = 0
  Set TILE_FLOOR = 1
  Set TILE_GRASS = 8
  Set TILE_WATER = 9
  Set TILE_EMPTY = -1

// Use names instead of raw numbers
Tilemap: SetTileAt(x, y, TILE_WALL)

When tileset IDs shift, update the constants once rather than hunting through every SetTileAt call.

Step 4: Fix collision polygons per tile. Select the Tilemap object. In the Tilemap bar, select the tile by ID. Click the collision polygon editor (wrench icon). Draw or auto-generate the collision shape for that tile.

Common mistake: setting collision on tile 0 (wall) but not tile 8 (different wall variant). Every solid tile needs its own collision polygon. Empty/passable tiles should have no collision.

Reading Tiles

Use TileAt(x, y) to read what tile is at a pixel position. Returns the tile ID or -1 for empty. Useful for debugging:

On Mouse Click:
  var tx = Mouse.X
  var ty = Mouse.Y
  var id = Tilemap.TileAt(tx, ty)
  Text: Set text to "Tile at (" & tx & "," & ty & ") = " & id

Click anywhere on the tilemap during preview to see which tile ID is at that spot. Mismatch between expected and actual reveals the bug.

Flipped and Rotated Tiles

SetTileAt has optional parameters for flipping and rotation. Forgetting these when your level data includes flip flags produces wrong orientations. Check if your map format encodes flip/rotation bits and pass them through.

Performance

SetTileAt is O(1) per call but calling it thousands of times in one tick can hitch. For large procedural maps, spread generation across multiple frames using a counter and “Wait 0 seconds” between chunks.

Understanding the issue

Tilemaps are dense data structures. A single tile change touches several other systems: rendering, collision, possibly navigation. Bugs at the intersection often look like 'I changed one tile, why did three other things break'.

The specific bug described above is the kind that surfaces during integration rather than unit testing. It depends on a combination of factors: the asset configuration, the runtime state, the platform's specific behavior. In isolation, each piece looks correct; in combination, the bug emerges. This is why thorough integration testing - playing the actual game in realistic conditions - catches things that automated tests miss.

Why this happens

Bugs of this class are particularly easy to ship past internal QA because they often depend on specific runtime conditions - hardware combinations, network states, or asset configurations that QA didn't reproduce. Players hit them in the wild, file reports that are hard to repro, and the bug accumulates negative reviews while engineering tries to recreate the failure mode.

At the engine level, the behavior comes from a deliberate design decision in Construct 3. The engine team chose a particular trade-off - usually performance versus convenience, or generality versus specificity - and that trade-off has consequences when you push against it. Understanding the trade-off is what turns 'this bug is mysterious' into 'this bug is the expected consequence of this design'.

Verifying the fix

After applying the fix, the verification step has three parts: confirm the original repro is resolved, confirm no obvious regressions in adjacent functionality, and (for shipping titles) deploy to a small player cohort first and watch the crash and report rates. Each step catches something the others miss.

Reproducibility is the prerequisite for verification. If you can't reliably reproduce the bug pre-fix, you can't reliably verify it post-fix. Spend time getting a clean reproduction before you write any fix code. The fix is fast once you understand the reproduction; the reproduction is the slow part.

Variations to watch for

Related bug classes often share the same root cause. If you find yourself fixing this issue, look for cousins: similar symptoms in adjacent systems, the same data flow but a different value, or the same fix pattern in another module. The catalog of 'we've seen this before' becomes valuable institutional knowledge.

Adjacent bugs often share a root cause. After fixing the case you've found, spend an hour searching the codebase for similar patterns. What's the same call with different arguments? The same data flow with a different entity type? The same lifecycle issue in a sibling system? Each match is a candidate for the same fix, or a related fix that prevents future bugs of the same class.

In production

Live games surface this bug class at scale. What's a rare edge case in development becomes a daily occurrence once you have a few thousand concurrent players. The class isn't 'this player has a unique setup'; it's 'one in N thousand sessions will trigger this exact combination'.

When triaging a similar issue in production, prioritize gathering data over hypothesizing causes. A player report describes a symptom; what you need is a build SHA, a session timestamp, and ideally a screen recording or session replay. With those, the bug becomes tractable. Without them, you're guessing at hypothetical reproductions that may not match what the player actually hit.

Performance considerations

If this issue manifests under high load (many actors, many particles, many network connections), profile the post-fix code path with realistic counts. The original cost was a bug; the new cost is real work, and real work has a budget.

Diagnostic approach

Diagnosing this class of bug benefits from a structured approach: confirm the symptom, isolate the variables, hypothesize the cause, and verify the hypothesis before writing fix code. Skipping the isolation step is the most common mistake; without it, fixes often address symptoms while the underlying cause continues to produce other variations.

For Construct 3-specific diagnostics, the editor's profiler is the canonical starting point. Capture a representative frame with the symptom present; compare against a frame without the symptom; the diff often points directly at the cause. If the symptom is non-deterministic, capture multiple frames and look for the pattern - the cause is usually a state transition or a specific input value rather than a continuous effect.

Tooling and ecosystem

Modern engine versions ship better tooling for this kind of issue than older versions. If you're on an older release, the diagnostic step may take significantly longer because the tools you'd want don't exist yet. Sometimes the right answer is upgrading rather than fighting through limited tooling.

Within Construct 3, the relevant diagnostic surfaces include the standard frame debugger, memory profiler, and engine-specific debug overlays. Each one shows a different facet of what's happening. The frame debugger reveals draw call ordering and state transitions; the memory profiler shows allocation patterns; the debug overlay reveals per-system state. Bugs that resist one tool usually surrender to another - the trick is knowing which tool to reach for first.

Edge cases and pitfalls

Platform-specific edge cases are worth enumerating explicitly. iOS handles backgrounding differently than Android; Windows handles focus changes differently than macOS. A fix that works on the development platform may not work on every target. Test on each shipping platform deliberately.

When writing a regression test for this fix, focus on the boundary conditions that surfaced the original bug. Tests that exercise the happy path catch obvious regressions; tests that exercise the boundary catch the subtler regressions that look like new bugs but are really the original returning. The latter are the tests that earn their keep over the long life of the project.

Team communication

When this bug class affects multiple teams (often the case for cross-system issues), early communication prevents duplicate work. The team that owns the symptom may not own the cause. A 15-minute conversation at the start of triage often saves hours of independent investigation.

If this fix touches a system several engineers work in, a short writeup in the team's engineering channel helps. Not a full design doc - a paragraph explaining what was wrong, what's fixed, and what to watch for. Future engineers encountering similar symptoms will search for the fix; making it findable is a small investment that pays back later.

“Tilemaps are a grid of IDs at pixel positions. Get the coordinates right, get the IDs right, and the map draws itself.”

Related Issues

For collision issues, see Construct 3 Collision Not Detecting. For pathfinding on tilemaps, Construct 3 Pathfinding Not Finding Route.

Pixel coordinates, not grid indices. Zero-indexed IDs. Constants for tile names. Three rules.