In this tutorial we’ll go through the process of creating a horizontal, tileable background that is perfect for side-scrolling 2D games (action, adventure, hack & slash) for PC, mobile and browsers. We’ll be using the basic vector tools of Affinity Designer, and you’ll see how we can make the image seamless in a fun and convenient way. Let’s begin!
In this particular case we’ll be
designing a stylized forest with a mysterious color scheme, giving it a proper
gloomy atmosphere suitable for mystic adventure games or quests. However, you
can apply these techniques for any other kind of background, whether it is a
sunny meadow or a seaside for casual games, or maybe some dark, deep caves or
even alien planes for a scrolling shooter or platformer. It’s up to you to
decide!
Feel free to gather as much inspiration as you can, and for
this purpose check out the game backgrounds section of Envato Market, which will help you to
find some interesting solutions and original ideas.
1. Build the
Composition
Step 1
Let’s start by making a New Document. Select the Web Type and find the 800 x 600 px Preset.
Step 2
Here we have our horizontal canvas, and
let’s start filling it up from the top left corner. We’ll start with the trees,
which will cover all the top area of the image with their bushy crowns.
Take the Ellipse Tool (M) and make a 170 x 170
px circle, holding down Shift.
Step 3
Continue holding down Shift and make more circles, varying their sizes from big to tiny,
making them look like foam bubbles.
Select all circles and head to the upper
context toolbar. Use the Add Operation to
merge all the circles into a single shape.
Step 4
Fill the shape with dark-purple color,
using the color wheel in the Colour
panel.
Step 5
Take the Ellipse Tool (M) again and let’s make another layer of circles,
using the same technique and varying sizes. Merge the circles together with the
help of the Add Operation.
Step 6
Fill the created shape with lighter purple
color and Move it to Back (Shift-Command-[), beneath the
darker layer.
Step 7
Now let’s move to the bottom part of our
background. Use the Rectangle Tool (M)
to form the dark-purple shape for the ground. Convert it to Curves
from the upper context toolbar. Now we can edit the shape, changing its form.
Step 8
Take the Node Tool (A), select the upper left corner and drag it up a bit,
making a slope. Double-click on the upper edge of the shape to add a new node.
Move the right node handle down to form a light curved line, depicting a smooth
hill. Add another node on the opposite side of the ground, making another hill.
Step 9
Add another shape beneath, forming another
ground shape in the distance. Make this shape a bit lighter. This way we’re
showing the aerial perspective of our image, making it look more three-dimensional.
2. Render the Trees
Step 1
Now we’ll start rendering the trees, making
a deep forest. Use the Rectangle Tool
(M) to make a narrow, vertical stripe for the tree-trunk. Convert it to Curves, take the Node
Tool (A) and move the upper nodes closer to each other, making the top of
the trunk much narrower.
Step 2
Let’s add some small
branches at the top of the trunk. Use the Pen
Tool (N) to make a curved line. Set the Width to 10 pt in the Stroke
panel, making the branches somewhat thicker.
Step 3
Make some more branches
and add a group of smaller dark-purple circles to cover the blank tip of the
branch, forming stylized leaves.
Step 4
Continue adding trunks,
varying their width and rearranging the branches to make more trees. Remember
to Group (Command-G) similar objects
to make them easier to work with.
Step 5
Make another tree and
fill it with the same light-purple color as the distant ground layer. Move the light tree to Back (Shift-Command-[), making the
elements blend. This way the tree seems to be farther than the darker trees in
the foreground.
Step 6
The distant area of our background still looks blank.
Let’s fill it up with some additional elements. Start by making an even 150 x 150 px circle with the Ellipse Tool (M). Make this shape lighter to create some more air
and distance between the objects. This contrast will be noticeable when
we place the new elements in the back a few steps later.
Step 7
Make some smaller circles, creating
a bush, and use the Add Operation to
merge the shapes.
Step 8
Now we can select our bush and Move it to Back (Shift-Command-[), hiding it behind the trees. Add more bushes, forming them from circles, filling the empty spots
of the background.
Step 9
Let’s add some more trees in order to make
the forest thicker and, hence, the whole image more detailed. Make them even
lighter and put some of them in front of the bushes and some of them behind the
bushes, making the composition more balanced and versatile.
Step 10
The white area in the background can be
very distracting, so let’s dim it a bit. Create an 800 x 600 px rectangle and Move
it to Back (Shift-Command-[), at
the very bottom. Fill the shape with greyish-blue color, adding a misty
atmosphere to our fantasy forest.
Step 11
Let’s add some minor elements that will
enliven our forest a bit more. Use the Ellipse
Tool (M) to create tiny wisps of grass or leaves, consisting of three
ellipses each.
Step 12
What we can also do here to spark the
viewer’s interest is to add even more details. The more detailed the
background is, the more interesting it is for the viewer. Try adding another shape
in the bottom of the image, making a darker layer of ground.
Speckle small ellipses above it, depicting stones and creating an
illusion of the ground being sliced like a pie.
Add more branches or leaves or bushes,
whatever is needed to make the composition more filled and versatile.
3. Make the Background Seamless
Step 1
Now let’s see how can we make our
background seamless and repeating.
First of all, select everything (Command-A) and Cut (Command-X) it. Make an 800 x 600
px rectangle (of any color). Keeping it selected, go to Edit > Paste Inside. Now we have our
forest framed inside the rectangle, as if inside a clipping mask, which allows
us to move it around easily.
Step 2
Let’s move our image 400 px to the left. To do this, head to the Transform panel and apply the -400
px value to the X axis. The Y axis should be set to 0 px.
Step 3
Duplicate the image (Command-C > Command-V) and now we need to move the copy to the
right. Set the X value to 400 px in the transform panel.
Now if you look at your picture, you’ll see
that its left edge matches its right edge. As a result, if we stick
several images together, they will create a long, seamless panoramic image that
can be repeated endlessly. This is so that we can form a scrolling horizontal video-game background.
The only thing we need to do here is to fix
the central part of the image, making both halves match.
Step 4
Now we can drag both forest groups out of
their mask rectangles in the Layers
panel. And let’s start combining the darkest bottom layers of the ground.
Select
both shapes and merge them with the Add Operation. Take the Node
Tool (A) and select the dimple that appeared on the upper edge of the
ground. Delete (Backspace) it,
making the shape smooth.
Step 5
If the ground spots on the left side of the
image turned out to be somewhere beneath, find them in the Layers panel and drag them on top.
Step 6
Repeat the same for the next layer of the
ground—select the two halves and use the Add
Operation to merge them. Delete
the unneeded node using the Node Tool
(A).
Keep using the same technique for the third layer, creating a single shape with the Add Operation.
Step 7
Select one of the bushes that popped out in
the foreground and Move it to Back (Shift-Command-[). Then move it one position up, placing it right above the greyish-blue background (Command-]).
Step 8
Now that we’ve stitched all the parts
together and rearranged the elements, our image should look like this. We can’t
really see the edge between the pictures, which makes it perfectly seamless.
As
you may notice, I’ve added some small circles above the bushes in the
background in order to make the composition more busy and balanced. You can add
more stones in the bottom part or more grass if you feel that you need to
cover any empty spots of the image.
4. Using Gradients to Make the Background
Vivid
Our background is already complete by this
stage, and you can leave it as it is and proceed to export. However, we can tweak
it even more, adjusting the colors and enlivening the whole scene. Let’s go on
and try out the Fill Tool (G)!
Step 1
First of all, select the top dark-purple
layer of the tree crowns and take the Fill
Tool (G). Click and drag over the object, placing the gradient in a vertical
position.
Now you can select the upper marker of the gradient fill slider (the
circle tip) and set the color you want using the color wheel in the Colour panel. Make the top of the shape
lighter and brighter, applying a pinky-purple color.
Step 2
This method works only for the shapes, but
not for strokes and outlines. So if we want to apply a smooth gradient fill to the
trees, first of all we need to turn their branches into shapes. Let’s select
those trees in the background and go to Layer
> Expand Stroke.
Great! Now if you select any expanded
branch and check the Colour panel,
you will see the fill color applied. However, if you face the problem that your
branches are still strokes, then you may need to select the branches inside each tree group, using the Layers
panel. And then expand them. Try both options and see what works for you.
Step 3
Use the Fill Tool (G) to apply a vertical linear gradient to the trees. You
don’t need to apply it to every tree one by one—just select the entire group
in the foreground and drag the slider of the Fill Tool (G). Adjust the colors, making the top of the trees a bit
darker than the bottom.
Step 4
Apply the gradient to the distant bushes as
well, making their top a bit lighter.
Step 5
As for the ground, I’ve decided to apply a
gradient only to the first, darker layer in order not to make the image
overloaded with gradients. Make the difference between the gradient colors of
the ground barely visible, just adding a bit more depth to the picture.
Step 6
Let’s add a few more details in order to
finish the background. Use the Ellipse
Tool (M) to add a group of circles in the upper part of the image, filling
the top of the tree crowns. Leave some space between the circle groups and keep
them away from the edges, so that the image remains seamless.
Apply a pinky-purple vertical gradient to
the circles, slightly darker than the tree crowns. This will make the trees a
bit more three-dimensional, without making the image overloaded with details.
Here’s what you should get.
Step 7
You can File > Export the picture in the desired format and combine several
copies together in order to get a seamless result. Or you can extend the width
of the document in Affinity Designer, using the Document Setup in the upper control toolbar.
Copy the picture and move it 800 px to the left and to the
right, making sure that it is perfectly seamless.
Awesome! Our Seamless Game Background Is
Finished!
We’ve finished designing the
background and did a great job, using basic shapes, gradients and some
simple operations to make a balanced forest composition for a nice, seamless
game background.
Feel free to use these techniques to create various backgrounds, such as green forests, rocky mountains, sandy deserts, or whatever you can imagine.
If you want to get this particular background
in other vector formats, such as EPS, that are ready to be imported in a game
and also include alternative color schemes, then feel free to take a look at
this seamless game backgrounds pack, which might be useful!
Have fun with Affinity Designer, and don’t
forget to share your results!