Little Fighter Empire - Forums
Alectric's BG tut!!! :D - Printable Version

+- Little Fighter Empire - Forums (https://lf-empire.de/forum)
+-- Forum: Little Fighter 2 Zone (https://lf-empire.de/forum/forumdisplay.php?fid=7)
+--- Forum: Sprites (https://lf-empire.de/forum/forumdisplay.php?fid=15)
+---- Forum: Tutorials & Resources (https://lf-empire.de/forum/forumdisplay.php?fid=16)
+---- Thread: Alectric's BG tut!!! :D (/showthread.php?tid=2955)

Pages: 1 2 3

Alectric's BG tut!!! :D - Alectric - 05-27-2009

Hullo ever-y-body!
i have just finished possibly one of the most awesome-est tuts ever devised!
i have received quite a few requests from around the forum to make a tut which helps you sprite the BG.
there is gonna be that element, but there is also gonna be a DC element in there too! so, lets start!!!
Aim: to create a BG with animation, and parrallax scrolling
Method: here WE GO!

first, we need to create a new black document, 1000x200. (the size of a BG without scrolling is 794 [width] or less).
Here, ill help: (Click to View)
This will be our Ground sprite, where the battle area will be.

create a new layer on top of the black layer.
ok, now grab a very big brush, with a dark or dull colour.(its so it doesnt hurt the players eyes ;) ) and paint roughly, this is for realistic effects, because ground is rarely even.
Something like this is fine: (Click to View)
-
ok, once you are happy with that, grab a darker shade of the ground colour and paint over it again, make sure it is only on the lower half. again, it doesnt matter if it is too rough.
it should look like this (Click to View)
-
ok now you should grab the smudge tool, and just move the mouse up and down in a zig-zag way along where the dark colour meets the bright colour. again, make it rough for effect. keep smudging untill you are happy, but dont go too deep with the smudging.
something like this: (Click to View)
-
now we are going to add some rocky style effects and smeerings of dirt. With the original Ground colour, make a lighter shade, and paint big dots on the lighter part of the ground. Now grab a darker shade of the same colour (darker than the bottom part) and do the same.
It should look something like this: (Click to View)
-
got it? ok now grab back the smudge tool again, and smudge the dots horizontally, and smudge it a lot. It doesnt matter if it looks a bit bad at the moment, but i will pay off in the end ;).
now it should look a bit like this (Click to View)
-
now this bit, you'll have to add some noise. Go to filter>Noise>add noise and add about 16.50%, with monochromatic noise. make sure you have the ground layer selected, and not the black one.
look at this, i know it doesnt look good now (Click to View)
-
this adds some nice texture to the ground. We dont want it that rough, so we go into filter>blur>gaussian blur at around 4% or less.
you should get something that looks like this:
like this (Click to View)
-
it starting to come together now! now we want a bit more of a rocky texture so go into filter>pixelate>crystalise, with cell size on 10.
now we are getting somewhere! (Click to View)
-
ignore the funny colours up the very top and around the edges. they can be removed later. Now to make it less fake, we will blur it again. go to filter>blur>motion blur and make the angle 0 and the distance about 25.
this is what i got, how bout you? (Click to View)
-
ok, get and eraser, make it about 13pt, and erase around the top of the ground (where the ground meets the black) and get rid of the funny colours now. Also, this will later help us in not having to clean up the black pixels as much.
(no spoiler ;) )
-
now what i did was make it slighty darker my going to image>adjustments>brightness & contrast, and lowering the Brightness a bit till i was satisfiyied (dont do too much).
ok we are finished on the ground! (Click to View)
-
now before we finish, save it as "ground.bmp". then select the blank area of the ground layer and press del only once or twice. this gets rid of all the ugly black pixels.
here is and example of some other effects. i used a gradient, and some embossing on the crystalize filter: (you dont have to do this)
just a variation (Click to View)
-
phew, thats a lot of typing and uploading!

now though, we want to do a sky/background. For my BG i made a starry sky. i wont go through how to do that, but here is the Tut to tell you how.
HERE.

You dont have to make a starry night, you can get a photo (and use filters for lf2 style) or make your own variations. You decide ;). But for the sake of this tut, make sure it is about 795x370. Here is mine:
you can use it if you want (Click to View)
save it as "sky.bmp"

now for another lot of BG depth. i am gonna add some mountains. it is exactly the same steps as the Ground, but it has to be more mountain shapes (more lumpy). i added a few more effects to mine, but you dont have to do the exact same, so you can choose what kind of effects are on it.
Mountains (Click to View)
-
now you should have a sky sprite, mountain sprite, and ground sprite.
lets add some more objects in to add some interest, and have it more exciting to look at ;)

i wont go into how i did these sprite, but i can tell you i did them from scratch:
you can make your own versions (Click to View)
-
btw, i have named the BG 'Julian shrine'

i have made a flipped copy of the pillars, and made an animation for the julian ball.

here is the Data for the BG.
    DC-Code: 
name: Julian_Shrine                                    <Name of BG
width: 1000   zboundary: 410 514          <size of BG and where the vertical boundaries are
shadow: bg\sys\js\s.bmp  shadowsize: 37 9    <shadow sprite
 
layer:                                     <layer start 
  bg\sys\js\sky.bmp                      <sprite location
  transparency: 0  width: 800  x: 2  y: 127     <placement and transpareny*
layer_end
 
layer: 
  bg\sys\js\mountain.bmp
  transparency: 1  width: 850 x: 0  y: 200
layer_end
 
layer: 
  bg\sys\js\pillar.bmp
  transparency: 1  width: 900  x: 250 y: 175
layer_end
 
layer: 
  bg\sys\js\pillar2.bmp
  transparency: 1  width: 900  x: 500 y: 175
layer_end
 
layer: 
  bg\sys\js\pillar3.bmp
  transparency: 1  width: 950  x: 225 y: 170
layer_end
 
layer: 
  bg\sys\js\pillar4.bmp
  transparency: 1  width: 950  x: 575 y: 170
layer_end
 
layer: 
  bg\sys\js\jul1.bmp
  transparency: 1  width: 925  x: 380 y: 170 cc: 7  c1: 0  c2: 1      <** 
layer_end
 
layer: 
  bg\sys\js\jul2.bmp
  transparency: 1  width: 925  x: 380 y: 170 cc: 7  c1: 2  c2: 3 
layer_end
 
layer: 
  bg\sys\js\jul3.bmp
  transparency: 1  width: 925  x: 380 y: 170 cc: 7  c1: 4  c2: 5 
layer_end
 
layer: 
  bg\sys\js\jul2.bmp
  transparency: 1  width: 925  x: 380 y: 170  cc: 7  c1: 6  c2: 7 
layer_end
 
layer: 
  bg\sys\js\ground.bmp
  transparency: 1  width: 1000  x: 0  y: 340
layer_end


*Transparency is useful, transparency: 0 means that all black pixels will be shown, and transparency:1 means that all balck pixels wont be shown
** animation tags. cc: is how long the total animation goes for, c1: is when the sprite is shown on the cc: timeline. c2: is when the sprite is no longer shown in the time line.
***width in the layer tags is how fast/slow a sprite moves. this give us our 3Dness.

for more on BG DCing see Marshalls tut HERE

in the end, it should look something like this:
Julian Shrine (Click to View)
-
well this is the longest post i have done =P

well thats about it, only one thing left to do.

here is the download link for the BG:
DOWNLOAD

btw i am not accepting any comments on the BG. Only on the tut. if there are any comments on the BG including improvements or what you dont like about it, i will notify an admin/Noir to remove your post.
that sounds a little nasty, but its not about the BG i made.

Thank you, Alectric~

RE: Alectric's BG tut!!! :D - Daymio - 05-27-2009

thx. it's not very hard and is great

RE: Alectric's BG tut!!! :D - LutiChris - 05-27-2009

Wow, with this tut i can make my own bg, thanks
Spriting characters are easier still

RE: Alectric's BG tut!!! :D - Ascor - 05-27-2009

f***ing awsome i was looking for something like that so long

RE: Alectric's BG tut!!! :D - Silverthorn - 05-27-2009

It's alright, nothing to complain about except for this:
Spoiler (Click to View)
Looks too sharp, imo. But, as you said, just a little variation.

The mountains somehow look a little unreal ("where do you see people that throw energy balls?"). It's a nice filtering but somehow a little too rough, I think. Could need a little more blurring, actually.

--

I must say, this is a really really really really really easy tutorial to follow; everybody that has used an advanced graphics program (aka everything != MSPain(t)) should know what to do. Easily to understand and to follow. Good job, man :)

RE: Alectric's BG tut!!! :D - prince_freeza - 05-27-2009

woooow..nice tut alec you really surpassed your self this time...well done!!

RE: Alectric's BG tut!!! :D - chase123 - 05-27-2009

nice tut will read it thorough some other time but how much i saw i liked it very much good spriting.

RE: Alectric's BG tut!!! :D - Reaper - 05-28-2009

wow, really awesome! can't wait for trying it out.
Thank you very much.

RE: Alectric's BG tut!!! :D - Alectric - 05-29-2009

Glad i helped :)
i wanted to go into a bit more detail with the DCing, because that can make or break a BG, but i was tired that night :P
@BP, i realised the mountains are a little rough, but when i originally did them, it didnt have enough detail, so i added a paint daubs (or something like that) filter and forgot to later blur it :P
but i think it looks cool. (just add a small gaussian blur)

This BG isnt really on earth (sorta).

i also forgot to mention,:
ALWAYS repeat ALWAYS MAKE A BLACK BAR UP THE TOP OF THE BG. in that data for that, make every value of y: over 127, not below. this will gurantee a black barr ;)

I hope to see some more BGs aorund here!

RE: Alectric's BG tut!!! :D - Silverthorn - 05-29-2009

What you could also do is making a black bitmap and place that as the black bar. I'm just too lazy to adjust the images so exactly :D