Jump to content
A 2021 backup has been restored. Forums are closed and work in progress. Join our Discord server for more updates! ×
SoaH City Message Board

Background Creation Tutorial


Blue Frenzy

Recommended Posts

After seen a post asking about a tutorial about BG's, i decided to make a tutorial of how to make a decent background. This is what i do for making my custom BGs. No bg show here can be used, so no ask about having it. Please, rememer that my 1st language is not english so there will be a lot of mispellings, grammar errors and vocabulary fault, so excuse me about it, notice me about something that is hard to understand or edit it if you have power to do.

1st step: Creating an idea

This is the most important step. Think in what you want and try to make it as background is the most important thing. So, make a clear image in your mind of what you want. Once you has been done it, split that into parralax and ground.

2nd step: Pallete

It is very important to define wich colours you are going to use. It is ugly to watch a level using objects defined in different palletes. Diferent styles of browns ore blues can be annoying. Just define a pallete.

Define how meny colour tunes you are going to use. Parralax and ground can have different palletes. I ussually use 3 colour palletes. The basic, the secondary and the aditional pallete. Each piece that composes a tile, should use just one colour pallete, or 2 in objects that have more than one colour, but no more. For example, grass uses the green pallete and the flowers in the grass uses the red and yellow palletes, but because flowers have 2 colours. Using for example blue and red in the same flower would look good.

Using colours is a really important thing. Be sure that your pallete has enough colours to work on pieces. A sonic game uses like 3-6 colours for one pallete, but depending of the colour quality, it could have more or less. Also be sure ground has more less the same colour pallete than the sprites you are going to use. Having sprites with 64 different colours would look out of place in a 4 colour scenary. Also be sure to have enough contrast between the different colours of the pallete. A bright place has bright colours, sure, but shadows always exist, so be sure to have a dark colour to draw darker parts, or else it would look plain.

Lets use this pallete for the example.

palho4.jpg

3nd step: Ground layer 1- Tiles

A background is composed of different tiles. The join of all the tiles is what makes the ground. The tiles can have any size and each tile can have a different size. But for a "better" join of the tiles i recommend you to use 16x16 or 32x32 tiles. If you need bigger tiles, just multiply that, so you can have 32x32, 64x64, 128x128, 32x64, 64x32 and a large convination of those numbers. Having a 16x16 tile will make you have problems when trying to make all them to fit. Even more problems if tryin to use an non 2 multiplier number (like 13 or 34). So just use 16, 32,64, 128,256...

4rd step: Ground layer 2- Internal ground

Ground is composed of different kind of tiles. I ussually split it in floor, ceiling and internal ground, but it can also be splitted in walls and any other kind you want to.

florceilir9.jpg

Now lets begin with the internal ground. Just make the standard squared tile.

make a 32x32 square and draw on it using the selected palletes. What to draw depends of your idea. Some sand, a metallic ground, leafs, wood, and anything you want. Be sure it does fit itself in the 4 directions. Make a copy of the tile in a 3x3 square and see if everything fits correctly. If not, continue editing. Bricks always fit but not brick ones are hard to fit.

intertilekf4.jpg

If you cant draw yourself yuo can pick tiles from other backgrounds, convinate them and edit them. Sometimes flipping, inverting colours or mixing gives interesting results.

Once you have the main tile done, make new tiles. The more tile variety, the more interesting will the background be. If you have not enough ideas, try looking at other backgrounds. But for sure, make all them to fit between them.

intertile2jl2.jpg

  • Like 7
Link to comment
Share on other sites

5th step: Floor tiles

Now that inside gound is made, its time to make the other kind of tiles. Floor, ceiling and walls.

You should begin using the main tile (the 1st one you did). ading new features and making it fit. For example, making grass. Just add a piece of grass over the ground tile, and a floor tile will be made. That is not completely right, because grass looks out of place. Just adding a shadow between the tile and the grass usually helps a lot.

florceilir9.jpg

There are too many different ways for do this. Some backgrounds can use a set of tiles made by tiles. and instead use single tiles uses sets of tiles for build a 'big' tile.

fulltileit2.jpg

And some other people uses separated platforms for floors, joining them with the inside gound using pipes( Like in oil ocean) or anything you can imagine, even other tiles like done in angel island( Inside tiles are the leafs and floor tiles are the ground. Inside tiles are joined with floot tiles by making leafs overlap the floor). An example of the last method:

exam1kr2.jpg

Use the same process for ceilings and walls.

Step 6: Slopes

Making slopes is the largest and boring step. Its time to make a slope, so whe need to modify the floor and the inside tiles. Usually those tiles are bigger than normal ones mostly because making a 1:4 slope would need 4 tiles, so making a 1x4 size tile would make this task easier.

There are so many different slopes. I distinct the different slopes by a code x:x the first number is how many vertical pixels are increased and the second is how many horizontal pixels are increased, so:

11uc3.jpg

This is a 1:1 slope, because each pixel up you follow the slope, you have to follow just 1 pixel to the right.

12bo8.jpg

This is a 1:2 slope, because each pixel you move up, you move right 2 pixels. Here you can watch how making tiles bigger helps making slopes.

21lc6.jpg

This is a 2:1 2 pixels up, one pixel right.

So, for make a slope, just erase the useles part. The tile will be covered with the floor one (for example, grass) so there is no need of fix it.

Now, the hardest step. How to make the piece that will cover the tile? Is very hard. The best results are moving each collumn of pixels. For example, for a 1:2 slope down, move the first 2 collumns of pixels one position down.

mov1ft5.jpg

now, move the next 2 collumns down one pixel under the last ones.

mov2hf0.jpg

continue on until you finish the whole thing.

mov3li4.jpg

for a 1:4, instead move 2 collumns, just move 4:

tile14ja8.jpg

This procedure is not recomended for y increments bigger than 1, like 2:1 or 4:1. The result is ugly and the grass tile will become so thin. Instead, use the wall tile and instead move collumns, move rows.

Then, you only have to paste it over the slope tile. Be sure to enlarge the tine enough for make all the grass cover all the tile.

tileslopedb2.jpg

Step 7: Loops- The fake technique

This is really annoying and even more large than slopes, but procedure is the same. Imagine that this is the slope.

slopeimagri8.jpg

The black part is the slope, and the red part is the empty space. Then, we really moved the collums of the tile just under the empty space.

sloperestp9.jpg

what about loops? Loops are about the same, but instead a flat surface, a curved one.

loopimwy5.jpg

We should procced of the same way as before. Just move all the collumns of the grass to the bottom part of the empty loop

loopim2jm6.jpg

loopim3zo1.jpg

Now, just make the whole tile by cutting the inside tile and pasting this.

looptileni6.jpg

For loops on ceiling, just use the ceiling tile instead the floor one.

This is so useful, not only for loops, but any kind of structure you want.

otherok0.jpg

New tool by Damizean to make easier the slopes creation.

http://jsonicserver.no-ip.org/files/16/TileAdaptTool.rar

Link to comment
Share on other sites

Step 7: Decoration

Levels looks empty if you just have ground. Use decoration objects for fill the level. Rocks, high grass, flowers, ruins, metallic things, machines, and everything you need. Decoration doesn't need to be just over the floor. You can decorate also the ground. Look at the tubes on scrap brain or the hundreds of decoration on casino night. Just follow the idea you had in mind, and don't forget to use the pallettes you created, other else objects would look out of place.

Step 8: Parralax

Parralax are splitted in layers. For example, emerald hill has the following layers:

-Flower layer

-mountain layer

-sea layer

-islands layer

-sky layer

Just Draw each layer using the palletes you made for parralax, also for ground. When drawing a parralax be sure to know whats further. For example, a lot of mountains. Some mountains are behind other, and they are too far away, so the size is much smaller, but in a forest, different layers for trees doesnt need too much size change because they are closer to the player, even no size cahnge if you play well with the colours.

How? Easy, as the further you go, the colours looks much more like the back colour. If you are in a cave and the back colour is black, everything will turn black as further you go. But, if you are on a desert with the blue sky, sand will become bluish as further it is.

backol3.jpg

This is all for now. Hope this helps. It could be updated with the time. Port here opinions, greetings, addons to the tut and whathever you want.

Link to comment
Share on other sites

I'm not sure if you're aware of the skew function in paint, since your slope method seems a tad long-winded when you can have it done instantly.

skew.png

Might be of help, -22 or -23 would be a 1:2 slope, -45 a 1:1 and -67 or -68 for 2:1. Though for 2:1 you'd be better off rotating it 90º first and using a horizontal skew. Hope that helps anyone who was unaware of it.

Link to comment
Share on other sites

I did taught rael to do it XD

Actually when I said Rael taught me much of it, that much kinda meant your tutorial. =P He told me you showed him much of background creation.

The only comments I have besides the spelling which is excusable is the picture showing the 1:2 slope has a pink dot probably from the selection tool and I also find it interesting what you call the layers of a background. You seem to call the ground you walk on 'background' and the scenery behind you 'paralax'. Paralax is actually the name of the movement method applied to the scenery behind you. It's actually called 'background. The ground you walk on is called 'foreground'. ( Way to remember is it almost looks like front ground. ) Also, the ground in front of you is called 'super foreground', but you didn't go over that part, so it doesn't really matter.

Anyways, once again, awesome stuff. =D

Might be of help, -22 or -23 would be a 1:2 slope, -45 a 1:1 and -67 or -68 for 2:1. Though for 2:1 you'd be better off rotating it 90º first and using a horizontal skew. Hope that helps anyone who was unaware of it.

I only use that for 1:1 slopes as you can't type in 22.5 to get the exact slope and you end up with an edgy effect. What would be awesome is a program that can move the pixels up from the main image to align to the red slope outline ( like in Blue Frenzy's tutorial ) so you don't have to do it yourself.

Link to comment
Share on other sites

I'm not sure if you're aware of the skew function in paint, since your slope method seems a tad long-winded when you can have it done instantly.

[qimg]http://i10.photobucket.com/albums/a149/jwaters1989/skew.png[/qimg]

Might be of help, -22 or -23 would be a 1:2 slope, -45 a 1:1 and -67 or -68 for 2:1. Though for 2:1 you'd be better off rotating it 90º first and using a horizontal skew. Hope that helps anyone who was unaware of it.

the problem of that tool is that it is not exact, and it could cause small distorsions. Cool addon for people who wants something fast done.

Link to comment
Share on other sites

Is this royalty free? Id likie to use it as a test background for future projects.

It is not. It was made for damizean a long time ago, so no one can use it unless he agree with you.

People, post your experiences making bgs to complete the tutorial. Hopefully it will be useful for people wanting to make bgs. Maybe it should be sticked.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

BF: Excellent topic, I've given you a rep point and I'll sticky this if none of the other mods have done it yet. It really does deserve a sticky as it's a relevant topic that was explained very well.

Azu: Yea, I feel the sameway, only I pretty much know I'll never actually come anywhere near finishing a fangame. :L

Link to comment
Share on other sites

  • 8 months later...

A lacking point about this tutorial (In my view) is to tutor people how to draw the tiles themselves. Some people might have experience drawing non-Sonic styled tiles, but when it comes RIGHT to that style, they'll have problem since they probably won't know how to make it, the theme to use, how to approach it and etc. (Also, hue shifting can bring some very cute results! ;))

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...
  • Recently Browsing   0 members

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