2/20/2015

How to Draw - 2D Scrolling Backgrounds


In this tutorial I'll be showing you some quick 2D BG looping art.  Drawing the assets will be fairly simple, but you'll need to know good composition and some color theory to make it look good overall in the end.


Start Simple - Cloud, Sun, & Tree



  1. white circle, make it
  2. 2 more white circles, put them on the sides
  3. cut off the bottom
  4. add a radial white gradient so it blends in the sky a little better


  1. for the sun, make a circle 
  2. do a bright radial gradient going from white to orange/yellow and yellow
  3. add an outline and a glow to the circle so it looks brighter
  4. for the rays, make a long triangle
  5. add a gradient going from a 75% opacity white to 0% opacity white
  6. lay out these triangles into a circular ray
  7. compose both, blur the rays a little if you desire 
  8. (happy face optional)


  1. for the tree top, make a circle
  2. add an outline and a gradient.  I made the center a bluish green to make it look like the sun is in the background
  3. put in some leaves so it's not a boring circle
  4. for the trunk, make a box
  5. add a gradient and curve it slightly
  6. add an outline
  7. add a gradient inside so it looks shiny
  8. compose and put some extra detail into it 

Farthest Background - Mountains


  1. start with a gradient box.  I decided to make purple mountains because why not
  2. make them triangly and curvy
  3. add an outline and white on the tips.  Mine are slightly pink so it's not a solid white
  4. make the ice spiky 
  5. add details

Far Background - Hills


  1. gradient green, make sure this is a light green so it blends in the background better
  2. make some curves
  3. add an outline and a small light yellow glow on the top edges
  4. copy one of the hills and put them in the bottom so it's more interesting
  5. add details


Main Ground



  1. green box, this one can be more saturated since it's the foreground
  2. add a brown box for the ground
  3. make some grass
  4. add an outline and shadow for the grass
  5. add details


Compose Everything


You've got all you need to make a looping background now.  Some things to note:

  • you could blur the clouds in the back so they're not too intrusive on in game elements. 
  • trees can be edited by rotating slightly, changing colors to make them greener or bluer so one tree could make the scene look like you have a bunch of different ones.
  • hills and mountains I made slightly bluer so they don't stand out a lot
  • the blue trees in this image are obviously not going to loop, but you can fine tune them so they do loop, I was just lazy.  




Other Notes


  • the way the assets were made means things should be seamless, but in case they're not -
    • cut the individual asset in half
    • put the right side to the left side
    • put the left side to the right side
    • the middle will not match up so fix that
    • now it should loop again so do the same with other stuff if necessary.
  • I would suggest not blurring background stuff that loops because its hard to make them seamless
  • you don't have to make loopable images flush against one another.  Sometimes it's better to have a few pixels of overlap to make sure there's no lines visible in the game.  
Feel free to ask me anything

9 comments:

  1. Hi Izzy.

    About blue tree, do you color it manually or just change the hue (and or saturation). Thanks. :)

    ReplyDelete
    Replies
    1. I do it the advanced color balance menu in flash. Takes more effort to recolor it and I don't think it's necessary when adjusting the RGB values works well enough and faster.

      Delete
    2. Wow, I just realized that feature in flash. Thanks Izzy. (y) :)

      Delete
    3. There are a lot of useful things in flash that most people don't use. Might do some posts were I go in depth on how to use some stuff.

      Delete
  2. Hi Izzy. Nice tutorials as always. I have one question regarding license. If I'm following your tutorial and designed few assets for my game based from your tutorials(trees, tilesets and etc). Can I use it for my game ? Do I need to pay or something ?

    Thanks

    ReplyDelete
    Replies
    1. If you're making the assets from scratch you don't have to worry about paying me, even if they look exactly the same.

      Delete
  3. Hello Izzy, are you using Object drawing mode to draw? Or is there another way to make shapes and draw without them merging together into one shape

    ReplyDelete
    Replies
    1. I actually hate the object drawing mode whenever I accidentally go into it. Don't really see how people make use of it because you're not able to make fills very easily.

      I usually draw a simple object (like a square) and convert it into a movie clip. Then I go into that movie clip and start drawing with the normal draw settings, adding layers if I don't want objects merging. Once I'm happy with that, I might turn some of the layers into movie clips if that object needs to be animated/tweened.

      Delete