Contributing by drawing sprites

[itsManeka]

Can I contribute by drawing sprites?
If so, what is the best way to contribute?

[NNTin]

With the recent PR, #117, it has gotten slightly easier however it is still not trivial. I think a stronger separation between Pixel Agent code and the Pixel Agent asset would be more beneficial.
E.g. a git submodule repo solely responsible for the art assets.

Aseprite and atlas export is a good way to maintain a stable interface. But this needs more exploration how this should be done exactly.
The benefit of this is artsy people aren't forced into code, code repo remains small, CI pipeline is responsible to bundle it into the distribution with a single spritesheet.

[NNTin]

@pablodelucca https://github.com/NNTin/towncord/tree/main/packages
Do you think something like this makes sense? I've been splitting my head learning pixel art with aseprite so I stay mostly on the programming side of it. Luckily LLM Agents know how to work with aseprite files.
I separated the art project from the code to keep the code itself minimal. All the code knows are how to reference atlas keys.

Ignore the project itself. It was born recently and it is still scaffolding. Maybe it'll die like the many others I have 😆

[pablodelucca]

Hey @itsManeka! Yes, absolutely, sprite contributions are very welcome!

If you just want to focus on the art side, just draw your sprites on a tileset, send them over and I'd be happy to include them for you!

Proper documentation is on the way, but if you're interested to start working now and importing them yourself, here's a quick rundown of how each asset type works:

Characters

Each character is a single PNG spritesheet (112x96px): 7 frames across (16x32px each) and 3 rows down.

• Rows: front, back, right (left is just right flipped at runtime)
• Frames: walk1, idle, walk2, type1, type2, read1, read2

You can look at the existing ones in the Characters folder. Here's an example character. These are based on the amazing work by JIK-A-4, Metro City. To add a new character, just follow the same layout and add it to the folder.

Floor Tiles

Floor patterns are simple 16x16 grayscale PNGs in webview-ui/public/assets/floors/. They get colorized at runtime via HSBC sliders (hue, saturation, brightness, contrast), so they should be drawn in grayscale. Just add a new floor_N.png following the same format.

Wall Tiles

Walls are a single PNG (64x128, 4x4 grid of 16x32 pieces) that uses a 4-bit auto-tile bitmask system. Located at
webview-ui/public/assets/walls. Same deal: grayscale, colorized at runtime. There's a scripts/wall-tile-editor.html you can open in a browser to inspect them visually.

Furniture

This is where it gets a bit more involved. Each furniture item lives in its own folder under webview-ui/public/assets/furniture/ with:

• One or more PNGs (the sprites)
• A manifest.json describing the item

The manifest includes things like id, name, category, dimensions, footprint size, and flags like canPlaceOnWalls, canPlaceOnSurfaces, etc. Items that can be rotated use a "type": "group" manifest with multiple orientations. Here's a simple example (a bin):

{
  "id": "BIN",
  "name": "Bin",
  "category": "misc",
  "type": "asset",
  "canPlaceOnWalls": false,
  "canPlaceOnSurfaces": false,
  "backgroundTiles": 0,
  "width": 16,
  "height": 16,
  "footprintW": 1,
  "footprintH": 1
}

Asset Manager

If you create a tileset (a single PNG with all your furniture/items laid out), you can import them using the asset-manager which is a browser-based tool that gives an UI to guide the import.

Looking forward to seeing what you come up with!

[pablodelucca]

Amazing, if you have any questions let me know! Looking forward to seeing what comes up!

[editing-lgtm]

I recreated The Severance Office and made all the characters. But they aren't rendering properly. I'm assuming we can just drop these in the characters folder in .cursor/extensions?

[pablodelucca]

OMG this is amazing @editing-lgtm !! I'm not sure if they can just be dragged and dropped into the characters folder in .cursor/extensions since I think the app needs to be rebuilt before it recognizes them. I will add a button to import assets though, so that you can do it natively via the extension. Makes me think we might also need a place to share these assets so people can skin their own offices, so gotta think about that too!

Also worth noting, your images seem to be quite high res, character sheets are 112x96px, with each frame being 16x32px. Try scaling them down and see if it works better, otherwise I'll try to do it after I add the import button for you! Thanks for your work!

[editing-lgtm]

Hehe, thanks. I went ahead and just vibe coded in the ability to add assets. Cheers, this is such a fun little project!

[herbertfranco]

Dude, please share this, how can I get it? hahahahhahha that's cool

[pablodelucca]

Hi @NNTin indeed the process is still not as straightforward as I'd like it to be. I built the Asset Manager to make it a bit easier, but at the moment its just a monster HTML app with questionable UX instead of a serious app. I'm not sure if Aseprite will allow for exporting with the required structure that Pixel Agents needs to understand how to work with the asset. If you'd like to contribute on transforming the asset-manager into a proper React app and improve its UX, that would be very much appreciated!

We also saw your PR on the browser preview, we're evaluating how best to integrate it, but it's awesome, thanks for your work!

[NNTin]

The Asset Manager code is so interesting. I will take a look. I can't promise a workable result but I learned from it a bit and it makes me re-evaluate my approach. Very cool!