Byron 3D Games Studio

Home | Links | Forum | Guestbook | About | Partners | Contacts
Lionheart Remake | Presentation | Screens | Downloads
Artificial Life III - Tournament | Presentation | Screens | Downloads
Weapons Online | Presentation | Screens | Downloads
Insane Spaceships | Presentation | Screens | Downloads
Populous - The Aftermath | Presentation | Screens | Downloads
Misc | GfxRip Tutorial | Lionheart Remake MakingOf | 2D Tutorial | DjThunder

2D Tutorial

----------------------------------------------------------------------------------------------------

2D Tutorial

Summary

----------------------------------------------------------------------------------------------------

  1. Introduction


  2. When i say 2D Game, you will certainly think about games like Mario, Lionheart ... also called 2D Platform games.
    2D Games may not be so hard to make, but you really need to know what you will have to do.
    Think about how to make the Player moves, what about the Background, how to make Maps ...
    In this part, we will see how to do a scrolling background, the sprites rendering priority (Player first, Background last)...



  3. The Gfx


  4. For this example, i will use some of Lionheart Gfx. Here we go:

    1. A colored background


    2. This is a gradient color data, which can be used to fill the background.


    3. Some clouds


    4. This image will be used as a Sprite. As you can see, it countains differents clouds. We will virtually cut this sprite into the memory in order to paste each cloud as if they came from one unique image.
      Why ? It is faster, and also memory saving using that way to store such a sprite.


    5. A mountain


    6. Just a funny mountain to cover the rest of the Background field.


    7. Our full scrolling background

    8. But, here, we only have one cloud, one mountain ... The idea is to make as if it was infiny.
      Here you have the main screen '[ ]', with the background '-' => [- ]. But how to get the 'infinity effect' ?
      You just need to render some sprite out of screen area. Like this: '-[--]-'
      Then, when the background is scrolling, getting the end of the screen: '[--]--', the last sprite (right-right) is useless;
      so, we can change the offset with ease, like this: '--[--]'. You won't see anything, but now, the background is ready to move again without any black part on the screen.
      Finally, you should get something like this if everything is good:




    9. A Player


    10. As the coulds, it is better to work using one image to animated a sprite.
      Each frames are stored in this way:
      1 2 3 4 5
      6 7 8 9 10

  5. The Code


  6. Here a sample in C++ using GDK lib (visual studio 2008 project):
    Download 2D Platform (source & exe)

    ----------------------------------------------------------------------------------------------------


    2D Tutorial

    Pierre-Alexandre
    Byron 3D Games Studio

Home | Forum | Partners | About | Contact | ©2007 - 2009 Byron 3D Games Studio