1. Side Scrolling Game
Development

2. Game Design Superman 64 Elf Bowling
The first step in game design is having an idea for the game. This may seem like an odd statement but it is the first step and is skipped more often than you might suppose.
Superman 64
Elf Bowling
Leisure Suit Larry: Box Office Bust
Charlie's Angels
Catfight
Desert Bus
Aquaman: Battle for Atlantis
Big Rigs: Over the Road Racing

3. Artwork
Once you have your game concept defined you should begin developing your artwork. This usually begins with the background image which can help to establish the overall style of your game.
In this example, we use Power Point to construct simple scenes and characters.
We copy these images to Paint Shop Pro for additional manipulation (any bitmap editing program will do for this step.
For sprite sheets we are using magenta (255,0,255) as the transparency color. Magenta rectangles can be created in Power Point and placed as to background of any objects placed in the foregound.
A screenshot of PPT slides or simply selecting and copying these objects to a bitmap editing program such as Paint Shop Pro will convert these collections of vectorize dobjects into bitmap images.
If your source images have anti-aliasing features the magenta background may get blended at the borders which will produce magenta halo around your sprites. This can be removed by reducing the number of colors in the bitmap and then editing the palate to force all near-magenta pixels to the transparency color.

4. Power Point can be used to
arrange simple shapes into a scene.

5. For a side scrolling game you might want to build the background in sections.

6. A few simple shapes can be copied and re-arranged to add variety while maintaining continuity.
As segments of the background scene are ready they are converted to bipmaps by transferring them to an image editing application such as PaintShopPro.

7. Using techniques such as cut-and-paste, flip, and mirror you can tweak your scene within the bitmap editing application.
This scene is 4096 x 480 pixels. If you are building a game for a mobile device or a desktop computer that does not support HiDef, you will be limited to a maximum dimension of 2048 pixels.
For now we will use a simple red ball as our character which will be placed in a 32x32 pixel sprite sheet.
PPT source
image
PNG sprite sheet
from Paint Shop Pro

8. SideScrollingDemo
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
KeyboardState kbd; // game will use keyboard interface
Rectangle bkgdisplay; // display window will be set to 640x480
Rectangle CharRect; // character rectangle will be 32x32 pixels
Vector2 CharPosDisp; // handles maxY at bottom of display issues
Vector2 CharOrig; // will be set to (16,16) which is the center of the character
Vector2 CharPos; // character position
Vector2 CharVel; // character velocity
Vector2 CharAcc; // character acceleration
Vector2 bkgorig; // adjusted to keep character in center of scene when not near extremes
Vector2 orig = new Vector2(0, 0); // upper-left corner of display region
Vector2 TextOrig = new Vector2(15, 1); // location for start of text banner for key legend
bool contact; // ensures that character is in contact with a surface before jumping
Texture2D character; // will hold character sprite sheet
Texture2D bkg; // will hold background bitmap image
SpriteFont font; // font to display key legend at top of screen
The variables defined for this game include the character position, velocity, and acceleration which will be used to define the display of the character and the portion of the backgound image for each frame.

9. Setting up the Game with the Initialize( ) & LoadContent( ) Methods
protected override void Initialize() {
base.Initialize();
graphics.PreferredBackBufferWidth = 640; // display is set to 640x480
graphics.PreferredBackBufferHeight = 480;
bkgdisplay = new Rectangle(0, 0, 640, 480);
graphics.IsFullScreen = true; // game will run in fullscreen mode
graphics.ApplyChanges();
CharAcc.Y = (float)-0.3; // a constant downward acceleration simulates gravity
CharRect.X = 0;
CharPos.X = 0;
CharRect.Width = 32;
CharRect.Height = 32;
CharPos.Y = 0;
CharOrig.X = 16;
CharOrig.Y = 16;
CharPosDisp.X = 16;
CharPosDisp.Y = CharPos.Y;
contact = true; }
protected override void LoadContent()
spriteBatch = new SpriteBatch(GraphicsDevice);
bkg = Content.Load<Texture2D>("side_scroller_bkg");
character = Content.Load<Texture2D>("character");
font = Content.Load<SpriteFont>("SpriteFont1");
bkgorig.X = 0;
bkgorig.Y = 0;

10. Driving the Character using Acceleration
protected override void Update(GameTime gameTime) {
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
kbd = Keyboard.GetState();
if (kbd.IsKeyDown(Keys.Q))
if (kbd.IsKeyDown(Keys.Right))
CharAcc.X = (float)0.4;
if (kbd.IsKeyDown(Keys.Left))
CharAcc.X = (float)-0.4;
if (kbd.IsKeyDown(Keys.Space) && contact)
CharVel.Y = (float)7.0;
contact = false; }
if (kbd.IsKeyUp(Keys.Right) && kbd.IsKeyUp(Keys.Left))
CharAcc.X = (float)0.0;
CharVel.X += CharAcc.X;
CharVel.Y += CharAcc.Y;
CharPos.X += CharVel.X + (float)CharAcc.X / 2;
CharPos.Y += CharVel.Y + (float)CharAcc.Y / 2;
While left or right arrow keys are pressed the acceleration of the character in the X direction is set to -0.4 or +0.4 respectively.
If character is in contact with a surface (for now this is just the ground) pressing the SpaceBar sets the Y velocity of the character to +7.0.
When arrow keys are up the character acceleration is set to 0.0.
Laws of Kinematics applied here. Note for simplicity delta-time is assumed to be unity (1.0).

11. Character not permitted to move beyond left-side of play region.
if (CharPos.X < CharSize / 2) {
CharPos.X = CharSize / 2;
CharVel.X = (float)0.0;
CharAcc.X = (float)0.0; }
if (CharPos.X > bkg.Width - CharSize / 2)
CharPos.X = bkg.Width - CharSize / 2;
if (CharPos.Y < CharSize / 2)
CharPos.Y = CharSize / 2;
CharVel.Y = (float)0.0;
contact = true;
if (CharPos.Y > bkg.Height - CharSize / 2)
CharPos.Y = bkg.Height - CharSize / 2;
CharVel.X *= (float)0.9;
bkgdisplay.X = (int)CharPos.X - graphics.PreferredBackBufferWidth/2;
if (bkgdisplay.X < 0)
bkgdisplay.X = 0;
if (bkgdisplay.X > bkg.Width - graphics.PreferredBackBufferWidth)
bkgdisplay.X = bkg.Width - graphics.PreferredBackBufferWidth;
CharPosDisp.X = CharPos.X - bkgdisplay.X;
CharPosDisp.Y = CharPos.Y;
base.Update(gameTime);
Character not permitted to move beyond left-side of play region.
Character not permitted to move beyond right-side of play region.
Character not permitted to move below bottom of play region (ground surface).
Character not permitted to move above top of play region.
Character X velocity slows to zero when not being accelerated by arrow keys.
When character reaches edges of play region, background image is blocked to keep it in the display.

12. Draw( ) Method
protected override void Draw(GameTime gameTime) {
//GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(bkg, bkgorig, bkgdisplay, Color.White, 0, orig, 1, 0, 1);
spriteBatch.Draw(character, CharPosDisp, CharRect, Color.White, 0, CharOrig, 1, 0, 0);
spriteBatch.DrawString(font, "Left Arrow = move left Right Arrow = move right
Space = jump Q = quit", TextOrig, Color.CadetBlue);
spriteBatch.End();
base.Draw(gameTime); }
The Draw( ) method puts the background image at level 1 (back) and the character at level 0 (front).
The Key Legend is displayed at the top of the screen and remains fixed relative to the display as the backgroun scrolls behind it.
For now our character is a red ball. As we continue to develop or game it will be replaced with an animated character.