feat: tile sprite loader — slice LimeZu tilesheet into usable floor/wall/furniture tiles #15

New issue

Closed

opened 2026-05-20 15:56:38 +00:00 by agent-cos · 0 comments

agent-cos commented

2026-05-20 15:56:38 +00:00

Goal

Create a tile sprite loader utility that loads the LimeZu Modern Interiors tilesheet (paid version at assets/Modern_Interiors_RPG_Maker_Version/) and slices it into individual tile images for use in the FarmCanvas SVG.

Current State

The assets/ directory has ~30K sprite PNG files including the full LimeZu Modern Interiors tileset, but the frontend (FarmCanvas.jsx) draws rooms as SVG-colored rectangles with simple <rect> furniture. No tiles are loaded or used.

Task

Inspect the paid tileset at assets/Modern_Interiors_RPG_Maker_Version/ — it has 48x48 tiles in RPG Maker format (single spritesheet PNG with tiles arranged in a grid)
Create a new file src/frontend/src/tileLoader.js (create src/ subdir if needed) that:
- Loads the spritesheet as an <img> or via Vite asset import
- Exposes a function getTile(spritesheet, tileX, tileY) that returns the pixel region for a tile at grid position
- Exposes named tile constants: FLOOR_TILE, WALL_TILE, WALL_TOP, DOORWAY, DESK, CHAIR, TABLE, SOFA, MONITOR, PLANT, LAMP, etc. — map these to actual tile coordinates on the spritesheet
Copy the needed spritesheets into src/frontend/public/office/tiles/ so Vite can serve them (don't symlink — copy or import)
Add a getRoomTileMap(roomId) function that returns a 2D array mapping tile types to positions for each room layout
Export everything so FarmCanvas.jsx can import it

Dependencies

#10 (deploy) and #8 (backend) are separate — this is frontend-only

Deliverable

src/frontend/src/tileLoader.js with tile constants, sprite loading, and coordinate mapping. Verify it imports cleanly by running npm run build in the frontend package.

Acceptance Criteria

Tile constants map to correct positions on the LimeZu spritesheet
getTile() returns correct pixel regions for any grid position
getRoomTileMap() produces valid 2D arrays for all 6 rooms
Build succeeds with no errors

## Goal Create a tile sprite loader utility that loads the LimeZu Modern Interiors tilesheet (paid version at `assets/Modern_Interiors_RPG_Maker_Version/`) and slices it into individual tile images for use in the FarmCanvas SVG. ## Current State The `assets/` directory has ~30K sprite PNG files including the full LimeZu Modern Interiors tileset, but the frontend (`FarmCanvas.jsx`) draws rooms as SVG-colored rectangles with simple `<rect>` furniture. No tiles are loaded or used. ## Task 1. Inspect the paid tileset at `assets/Modern_Interiors_RPG_Maker_Version/` — it has 48x48 tiles in RPG Maker format (single spritesheet PNG with tiles arranged in a grid) 2. Create a new file `src/frontend/src/tileLoader.js` (create `src/` subdir if needed) that: - Loads the spritesheet as an `<img>` or via Vite asset import - Exposes a function `getTile(spritesheet, tileX, tileY)` that returns the pixel region for a tile at grid position - Exposes named tile constants: `FLOOR_TILE`, `WALL_TILE`, `WALL_TOP`, `DOORWAY`, `DESK`, `CHAIR`, `TABLE`, `SOFA`, `MONITOR`, `PLANT`, `LAMP`, etc. — map these to actual tile coordinates on the spritesheet 3. Copy the needed spritesheets into `src/frontend/public/office/tiles/` so Vite can serve them (don't symlink — copy or import) 4. Add a `getRoomTileMap(roomId)` function that returns a 2D array mapping tile types to positions for each room layout 5. Export everything so `FarmCanvas.jsx` can import it ## Dependencies - #10 (deploy) and #8 (backend) are separate — this is frontend-only ## Deliverable `src/frontend/src/tileLoader.js` with tile constants, sprite loading, and coordinate mapping. Verify it imports cleanly by running `npm run build` in the frontend package. ## Acceptance Criteria - [ ] Tile constants map to correct positions on the LimeZu spritesheet - [ ] `getTile()` returns correct pixel regions for any grid position - [ ] `getRoomTileMap()` produces valid 2D arrays for all 6 rooms - [ ] Build succeeds with no errors