Creating scrollable background tiles with Inkscape

In this blog I will go through how I easily created the background tiles for my game Shuffa ball:Endless roller. In playing about with Inkscapes layers I came up with this idea for exporting multiple backgound tiles with no need to line things up.

In unity it seems to me 100px is 1 unit in unity, so I created a rectangle 400px by 1000px, the colour is not important as the rectangles will be below what we want to export later and therefore won't be seen.

Exporting the rectangle now calling it 1.PNG, this will allow all others to have the same name which will make changing the names of the others easier later.

Next we will create duplicates of this rectangle; with the rectangle selected press CTRL+D to duplicate, do this several times. All of the rectangles are in the same place, we want them side by side so we use the Remove Overlaps in the Align and Distribute tab (Ctrl+Shift+A).

So left drag over the rectangles which will select them all then press the Remove Overlaps button.

This should expand to look like below with all aligned with no overlap.

Click on each rectangle and click export PNG, change the name from 2->8.PNG then export them. We do this now as later on we will be batch exporting the 8 tiles and it makes it easier.

The next thing we do is add the actual image we want to export so add a new layer (Ctrl+Shift+L). 

Call this layer Background, whatever we draw in this level is what we want to be exported. 

Rename Layer 1 as tiles.

After finishing the drawing on the background layer, we want to hide this level. To do that click on the little eye icon in Layers tab which will hide the background level.

This should leave all of the tiles visible on the tiles Layer, so select all of the tiles.

Then when you click again on the eye on the background level, you will see your background drawing with the tiles selected underneath.

The next stage is to batch export the selected objects. Make sure "Hide all except selected" is NOT selected. If you did that you will get the grey rectangles exported.

Click the export and we should see 1->8.PNG exported.

You can see these background tiles in action by visiting my Game Jolt page that has a playable demo,

or look at this video.