Jump to content

Web spritesheet editor


Recommended Posts

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!



Link to comment
Share on other sites

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.

Снимок экрана 2017-11-19 в 20.22.33.png

Снимок экрана 2017-11-19 в 20.22.22.png

Снимок экрана 2017-11-19 в 20.22.01.png

Link to comment
Share on other sites

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 :)

Снимок экрана 2017-11-25 в 15.44.14.png

Снимок экрана 2017-11-25 в 15.45.09.png

Снимок экрана 2017-11-25 в 15.44.10.png

Link to comment
Share on other sites

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.


Снимок экрана 2017-11-30 в 10.11.50.png

Снимок экрана 2017-11-30 в 10.11.36.png

Снимок экрана 2017-11-30 в 10.11.27.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...