Iron Horse Diorama Workflow: canvas-single-implementer-makerblocks. Makerblocks: sprites, audio, typography. Concept A two-phase sandbox. Build mode: top-down 8×12 tile grid where you tap-to-place track pieces, trees, mountains and a station. When the track forms a closed loop, press Play and the view drops into a first-person Wolfenstein 3D style raycaster — you ride your own train at constant speed for exactly one lap, then return to build mode. No scoring, no timer, no lose state. Visual Style Strict 64×64 pixel art, Wolf3D/Doom 1993 textures. Four colours max per sprite. No anti-aliasing, no gradients inside sprites. Tile sprites are top-down flat; billboard sprites (trees, mountains, stations) are front elevations. viewpoint: dual — top-down for tiles, front-elevation for billboards. Palette: background #c4a574 tan baseboard, primary #c94a28 rust red, secondary #5d7a3e olive, danger #8b3a1e iron brown, text #2a1e14, textSecondary #7a5c3e. Warm travel-poster earth tones. Entities grid — 8×12 top-down playfield, upper two-thirds of screen in build mode. cursor — Pulsing yellow outline on selected cell; turns rust red if placement would break the loop. palette — Horizontal strip at bottom with tile buttons and Play button. Play button disabled until loop valid. grass_tile — Base terrain, every cell has it. sceneRole:"tile", tileType:"fill". Seamless olive-green grass from above. track_straight_h / track_straight_v — Straight rails with wooden sleepers over gravel. sceneRole:"tile", tileType:"overlay". track_curve_ne / nw / se / sw — Quarter-turn rails. Share track_curve_ prefix for coordinated generation. sceneRole:"tile", tileType:"overlay". tree_overlay — Top-down dark olive canopy with brown trunk dot. tileType:"overlay". Also request tree_billboard sceneRole:"sceneProp", anchor "bottom" — chunky pixel-art pine for raycaster. mountain_overlay — Top-down grey hexagonal stone mass. Also request mountain_billboard sceneRole:"sceneProp", anchor "bottom" — craggy Wolf3D grey rock wall. station_overlay — Wooden platform tile, acts as straight track piece. Also request station_billboard sceneRole:"sceneProp", anchor "bottom" — small wooden shelter with red slanted roof. train — First-person camera only, never drawn visibly. Request locomotive_icon sceneRole:"ui" for the Play button icon. sky — Drawn programmatically as vertical gradient, peach #f4b896 at horizon to #a8c8e0 at zenith. No sprite. Input Build mode: Tap palette tile to select, tap grid cell to place, long-press cell to remove. Tap Play (when valid) to enter drive mode. Desktop fallback: 1–9 selects, Space plays. Drive mode: No player input. Small "Back to Build" button bottom-right. Tap/Escape aborts the lap. Tuning gravity: 0, speed: 60 (train moves one tile per second). Audio sonicIdentity: {key:"G", scale:"major", brightness:0.55, attack:0.3, sustain:0.5, reverb:0.4, distortion:0.0, noiseColor:"pink"} Two musicScores, swapped on phase change. Build score (72bpm, gentle pixel folk): {"bpm":72,"measures":4,"tracks":[ "{\"inst\":\"contrabass\",\"gate\":0,\"notes\":[[0,0,0,2,\"1n\",0.2],[1,0,4,2,\"1n\",0.18],[2,0,2,2,\"1n\",0.2],[3,0,0,2,\"1n\",0.18]]}", "{\"inst\":\"horn\",\"gate\":0,\"chords\":[[0,0,0,3,\"1n\",0.12],[1,0,4,3,\"1n\",0.11],[2,0,2,3,\"1n\",0.12],[3,0,0,3,\"1n\",0.11]]}", "{\"inst\":\"flute\",\"gate\":0,\"notes\":[[0,0,4,4,\"4n\",0.14],[0,2,2,4,\"4n\",0.13],[1,0,0,5,\"4n\",0.14],[2,0,2,4,\"4n\",0.14],[3,0,0,4,\"2n\",0.14]]}" ]} Drive score (108bpm, same key, steam-chuff rhythm): Contrabass/horn carry build-mode harmony; kick on every beat (chuff), closed hat on offbeats (wheels). Designer agent: compose analogous 4-measure drive score in G major with kick+closedHat percussion. Foundation instruments align on beat 0. SFX: place_track wooden click, place_prop soft thump, remove_tile pop, loop_complete G–B–D ascending chime, whistle_toot steam whistle, invalid_placement low buzz, wind_whoosh occasional drive-mode sweep. Typography heroFont theme: "chunky model shop signwriter painted wooden plaque". uiFont: Press Start 2P. Critical Technical Notes Tile layering rule: Every cell draws grass first, then any overlay on top. Never draw overlays on empty background. Raycaster (drive mode): Pure canvas 2D implementation inside game.ts. 64 rays per frame. For each ray: step through grid from train position in facing direction corrected for column angle, stop at mountain wall or track rail side, scale wall strip height by 1/distance. Mountains = tall walls, track rails = short walls. Sky gradient above, flat ground colour below. Trees/bushes/stations = billboards drawn back-to-front after walls, scaled 2D sprites always facing camera. Loop validation: Graph-walk from station along connection edges. Valid when every track piece is visited exactly once and walk returns to station. Play button disabled until loopValid === true. Validation runs synchronously after every placement.
Play this game on Makermint
Created by Roy