Web spritesheet editor

[AndyTyurin]

Spritesheet Editor in web

• Create spritesheets by placing images in cells, set up sizes and offsets of your columns and rows.
• Download generated JSON file with coordinates of each of your sprite and PNG spritesheet image.
• Autosave of your progress, sharing, collaboration work;

 

Development of spritesheet is not easiest in terms of 20 or 100 sprites.
In case of WebGL games it's quite necessary to have one spritesheet instead of using separated images each iteration of rendering.
Tool is useful for designers and developers who are interested in development 2D, 2.5D games.

I'm seeking for React developers to build this app for community for free.

 

The project consists of 3 phases. First one gives you main functionality for generating PNG and JSON.
Next one will be about keeping information on server-side in database with social network authorization, it will be premium functionality for really cheap 3$/month subscription per account.
Last phase will introduce collaboration mode, invite by link and multiply spritesheets management.

 

 

Please, leave your comments about features you want to have, development already started.

Thanks, cheers!

 

[AndyTyurin]

Hey guys! Nobody answer since I have opened the topic. I'll be glad for your feedback.

Maybe some ideas?

Beside, what's already done:

1. Hand tool for spritesheet movement (set by default).
2. Auto scaling depends on how much items in rows & columns have.

I'll work on design soon, next will be main feature of controlling spritesheet cells and adding sprites, beside planned to add zoom.

[AndyTyurin]

Hey guys!
There new updates of spritesheet editor:
– Zoom.
– Move.
– Add new columns and rows by clicking on right or bottom card.

Design is still in progress so I didn't make it yet.

 

[AndyTyurin]

Hey guys!

I made basic functionality by adding images.

There are still a lot of work have to be done. As an example my preview window is not consistent with real width and height of my cell, beside images have their own dimensions, all of this stuff must be calculated and placed right, but hope I'll make my plans this weekends

[AndyTyurin]

Hello again.
Recently I have planned case of auto-scaling images inside cell on preview and I did it.

I need some of your attention to understand how adding image works:

1) Imagine that you have a sprite cell with size 128x128 and you want to add image with size 256x256. In this case as your image bigger then cell it will be automatically adjust to cell's size in preview. You can drag your image inside, scale it, but each 1px of your drag will be equal by 2 because of scaling.

2) Imagine another case when your cell is equal to 2048x2048 (yeah, quite big), beside you have an image 256x256. There are another problem can be occurred when you will open a popup. The popup width's is not bigger then your cell, so cell will adjust his width to some smaller, some available space, but you still can drag your image, scale and so on. In this case quite hard to make precise moving of your image inside the cell, so I planned to add fields in menu on right to control. There would be fields such X, Y, W, H of your image, beside information about cell's width and height.

Thanks, hopefully someone will be interested to help me in development.

 

[AndyTyurin]

And early design below

[b10b]

Have you seen this one:
https://www.leshylabs.com/apps/sstool/

 

[AndyTyurin]

26 minutes ago, b10b said:

Have you seen this one:
https://www.leshylabs.com/apps/sstool/

 

Thanks for a link, looks like it not works in my country, but I have opened through VPN.
Yeah, it has basic functionality, but usage will be absolutely different, beside extra functionality around.

[AndyTyurin]

Hello guys!

Recently I made several updates to improve UI, beside I started to work with sprite re-sizing feature.
Design still in progress, but you can already see changes.