Making a png sprite map in InkScape (for later use in Javascript Game or any other game)

  1. Create a square that will contain one frame of your animation. Set the Width and Height to none decimal place values. I’m using 420px * 680px

2) Now put your svg creation inside the box

Each layer will represent 1 frame of the animation

3) By right clicking on the lay, select ‘Duplicate Current Layer’. Another layer appears on top of the previous one which we can then edit (our second animation frame). We can high any layer by clicking the little ‘eye’ picture to the right of the layer, we can also lock the layer to prevent any accidental changes of that layer.

So we’ve rotated the turbine by 10degrees on each layer, here is a view of all the layers showing.

4) Now make sure all the layers are visible by ensuring all the ‘eye’ icons show an open eye (to the left of each layer) as shown above. (Ensure all layers are unlocked as well)

Select the bounding box by clicking on it (not drag around the whole thing) and right click -> Select Same -> Object Type

The select Stroke Paint and click none X

5) Now we need to group each layer into a single object. So select the first layer (from the layers menu), and then CTRL-A to select all the parts, then CTRL-G to group them. Then select the next layer and do the same. Continue for all the layers.

(note I’ve now also removed the circle around my blades as that was there just to aid with rotating the blades by 10 degrees for each frame)

6) Now drag a bounding box around your image, select Object->Arrange, then set columns to the number of layers (frames) that you have, make sure the x & y values of “Set spacing are 0” then click Arrange

We will now see this

7) Now go to File -> Document properties

Click on ‘Resize page to content’

the click on ‘Resize page to drawing or selection


8) We now need to reverse the order of the frame so that our animation runs in sequence. Grab a bounding box around all the frames, CTRL-G to group everything, then go to Object->Flip horizontal

Then Object->Ungroup and click on each image flipping them horizontally. (We could press ‘h’ instead of clicking on the icon).

9) We can now export the sprite map. Put a bounding box around all the images (with the mouse) … not shown below but do it.

Then File->Export as png

We know that each image is 420px * 680px, and we have 12 images, so our width should be 420*12 = 5040px, and the height will be 680px. Put these values in the boxes, select where you want to save it, and click export. Ensure ‘Page’ in the export png dialog is selected.

Note: for some reason, when I put in 5040 in the box width box, it forces 682 height on me, but I think it’ll be ok. I’m not sure why it’s not 680.

Leave a Reply