foxnne / pixi

Pixel art editor made with Zig.
https://foxnne.github.io/pixi/
MIT License
765 stars 25 forks source link

Use case: Tiling visualization #46

Open VisenDev opened 9 months ago

VisenDev commented 9 months ago

It would be useful to be able to have a way to visualize how a sprite would look tiled. This would be very useful for things like creating tilesets

foxnne commented 9 months ago

Agreed! I haven't gotten to the point in my game project to need this quite yet so I haven't looked into how I want this to look yet, but I'm very open to ideas. I'm considering using Tiled or similar and need to examine the workflow and how to bridge between the two. PyxelEdit, which I used to use, had this built in and we could do similar for tiled sprite editing.

slimsag commented 5 months ago

For a pixi file like this in Lord of Zero:

image

I think what I want is really the ability to say "hey, this tile over ? it's exactly the same as this tile over - when I make edits to it, make edits to all the others. Consider it a clone."

I think the most intuitive UX for this would be: select the tile you want to clone, do some key combo like cmd/ctrl+shift+c and then cmd/ctrl+shift+v to "paste" the clone into another cell.

Also, the packed image ends up with a fair amount of wasted space because I have the tile duplicated so I can see it visually:

image

It would be nice if these tiles "considered a clone" would be skipped during export too.

foxnne commented 5 months ago

That sounds good! I had a similar idea myself. The other option that might be just as nice is to have a setting for the "flip book" panel at the bottom, to instead of drawing individual scrolling cards, draw the selected tile 9 times, a 3x3 grid, all duplicating the selected sprite. Then also make each tile editable directly. Then you could select a tile to begin drawing, and draw on any of the 3x3 grid to draw the tiling sprite. You'd then only need the single tile in the main drawing so it wouldn't be duplicated.

slimsag commented 5 months ago

That seems like it would be a good approach, too. The limitation I see there is that if you are working on this:

image

Or this:

image

In a 3x3 view, it would be hard to see the 'overall picture' there, since not all of the 3x3 are the same, so you'd probably need to duplicate anyway to see that - or view them in a level editor.

Similarly, being able to see transitions from one tile to another - like this telling me the rick tile and ground tile don't have the same height:

image

I think the copy+paste cloning would be more powerful for those situations, but would have the drawbacks you mentioned (it uses a slot in your actual grid-although those are 'cheap', and is maybe a bit more complex to setup just for the 3x3 case which is very common)

foxnne commented 5 months ago

@VisenDev @slimsag This commit added a setting under the View menu option to change the flip book view from sequential to grid, which allows easily making seamless tiles. All the usual controls work with this new view.

As @slimsag mentioned, there are some cases where it would probably be really handy to be able to make tiles a reference to another tile, I need to think on this a bit more as I don't want things to become hard to follow. Tiles that are references need some visualization.

Anyway, hopefully this helps!