Chapter 5. 5 Programming Backgrounds for Video Games

5.2.1. Types of Static Backgrounds

Static backgrounds come in a variety of styles depending on the game’s design, visual direction, and performance needs:

• Full-Screen Static Image: A single image that fills the entire screen
  • • Common in puzzle games, RPG towns, menus, and narrative scenes
  • • Easiest type to implement
  • • Often painted or rendered as a complete scene
• Tiled Backgrounds: Built from smaller repeated tiles (e.g., 16 × 16, 32 × 32, or 64 × 64 pixel tiles)
  • • Saves memory compared to large images
  • • Provides modularity and easy level creation
  • • Common in platformers (Mario, Metroid, Celeste)
• Layered Static Backgrounds (Non-Parallax): Multiple static layers (foreground, mid-ground, background), but none that scroll or move
  • • Used for atmospheric depth
  • • Allows artists to organize elements logically (e.g., walls, props, sky)
• Static with Selective Animated Elements: A static background with a few animated components (e.g., flickering lights, moving water)
  • • Still considered “static backgrounds” because the world behind gameplay does not scroll
  • • Often implemented using sprites placed on top of the static image
  • • Good compromise between aesthetics and performance
• Room or Scene Backgrounds (Adventure/Visual Novels): Highly detailed illustrations representing rooms, landscapes, or story locations
  • • The player character may not move relative to the background
  • • Widely used in visual novel engines and point-and-click adventures
• UI-Integrated Backgrounds: Backgrounds forming part of the user interface or menu system
  • • Main menus, inventory screens, pause menus
  • • Sometimes blurred or darkened gameplay screens

5.2.2. Technical Considerations

Regardless of art style, implementing static backgrounds follows common technical patterns. In Allegro 5 with C++, the basic steps are as listed here. (For brevity, the header section is omitted from some code examples unless it is required.)

1. 1. Loading Background Assets

   Static backgrounds are typically stored as:

   • • PNG (most common, supports transparency)
   • • JPG (smaller file size, used for detailed/nontransparent art)
   • • BMP (large, rarely used today)

     Using Allegro 5:

   ALLEGRO_BITMAP *background = al_load_bitmap("background.png");

   Best practices:

   • • Keep background resolution consistent with your game resolution
   • • Compress images appropriately
   • • Preload backgrounds during scene initialization to avoid in-game stutter
2. 2. Drawing the Background

   Static backgrounds should always be drawn before all movable objects.

   Basic method:

   al_draw_bitmap(background, 0, 0, 0);

   For tiled backgrounds:

   for (int y = 0; y < SCREEN_H; y += tile_h) {

               for (int x = 0; x < SCREEN_W; x += tile_w) {

                           al_draw_bitmap(tile, x, y, 0);

               }

   }

3. 3. Scaling, Centering, or Fitting Backgrounds

   Depending on your display resolution, you may need to:

   • • Scale the background to fit
   • • Letterbox to maintain aspect ratio
   • • Crop and center

     Example for scaling:

   al_draw_scaled_bitmap(

   background, 0, 0, original_w, original_h,

   0, 0, SCREEN_W, SCREEN_H, 0);

4. 4. Managing Layers

   Static backgrounds may consist of multiple layers (foreground, middle ground).

   Use separate bitmaps:

   al_draw_bitmap(bg_far, 0, 0, 0);

   al_draw_bitmap(bg_mid, 0, 0, 0);

   al_draw_bitmap(bg_near, 0, 0, 0);

   Even without parallax movement, this can create depth and easily accommodate special effects.

5. 5. Optimizing for Performance

   Because static backgrounds do not change, the following can be used for optimization:

   • • Load them once, not every frame
   • • Avoid redrawing complex tiles unless necessary
   • • Use Allegro’s bitmap flags for speed:

   al_set_new_bitmap_flags(ALLEGRO_VIDEO_BITMAP);

   For retro-style pixel art:

   al_set_new_bitmap_flags(ALLEGRO_MIN_LINEAR | ALLEGRO_MAG_NEAREST);

Static backgrounds are ideal for levels or scenes where the environment does not need to change or move. They are often used in side-scrolling games, adventure games, and certain RPGs.

Classic games like Super Mario Bros. and The Legend of Zelda use static backgrounds to create immersive worlds without the need for complex animations.

5.2.3. Steps to Take

The next section will show a complete example of implementing a static game background using Allegro in C++. Here are the steps for creating this code:

1. 1. Initialize Allegro

   Make sure you have Allegro5 installed and properly set up in your project.

2. 2. Load the Background Image

   Use Allegro functions to load your background image.

3. 3. Draw the Background

   In your game loop, draw the background image before drawing other game elements.

5.2.4. Code Template and Example

Here’s a simple example template to illustrate the steps shown in the previous section:

The main elements from this template will be utilized in the full code example provided next:

1. 1. Initialization

   Allegro and the image add-on are initialized.

2. 2. Loading the Background

   The background image is loaded using al_load_bitmap.

3. 3. Drawing the Background

   The background is drawn in the game loop using al_draw_bitmap.

4. 4. End

   Check to see if the Esc key is pressed to exit the example.

When you test the code, make sure to replace background.png with the path to your actual background image file if you don’t locate it in the same directory as your executable code (which is where it expects to find the image currently):

Complete Coding Example

5.2.5. Questions for Further Study

1. 1. Art Style and Composition
   • • How does the choice of static background art style affect gameplay, mood, or readability?
   • • When should a developer prefer hand-drawn art over photorealistic backgrounds?
2. 2. Memory and Optimization
   • • What are the trade-offs between using a single large background image vs. many smaller tiles?
   • • How does texture resolution affect GPU memory usage?
3. 3. Dynamic vs. Static Backgrounds
   • • When is a static background appropriate?
   • • How does adding parallax or animation change performance and player experience?
4. 4. Resolution Independence
   • • How can developers design static backgrounds for multiple screen sizes and aspect ratios?
   • • What strategies help reduce distortion (stretching, cropping)?
5. 5. Pipeline and Tools
   • • What tools are best for creating background art (Photoshop, Krita, Aseprite, Blender)?
   • • How do level editors or map editors (Tiled, LDtk) integrate static backgrounds into workflow?
6. 6. Transitions and Scene Changes
   • • How should a game fade, slide, or transition between static backgrounds?
   • • What narrative or pacing effects do transitions create?

5.3.1. Types of Background Scrolling

• Horizontal Scrolling: Common in side-scrolling games like Super Mario Bros., where the background moves horizontally as the player progresses.
• Vertical Scrolling: Seen in games like Space Invaders, where the background moves vertically.
• Parallax Scrolling: Uses multiple layers moving at different speeds to create a sense of depth. This technique is often used in platformers and adventure games.

5.3.2. Technical Considerations

• Tile-Based Scrolling: The background is made up of smaller tiles that are drawn and moved as the player navigates the game world.
• Seamless Textures: For continuous scrolling, seamless or tileable textures are used to ensure the background wraps around without visible seams.
• Performance: Efficient scrolling techniques are crucial for maintaining smooth gameplay. This often involves optimizing the drawing process and managing memory effectively.
• Tools and Libraries: Many game development frameworks and libraries—such as MonoGame, Unity, and Allegro—provide built-in support for implementing scrolling backgrounds.
• Artistic Considerations: The design of scrolling backgrounds should complement the game’s theme and enhance the player’s immersion. Artists often create layered backgrounds to achieve a more dynamic and engaging visual effect.

5.3.3. Steps to Take

Creating a scrolling background in a game using Allegro 5 involves a few steps. Here’s a basic guide to help you get started:

1. 1. Initialize Allegro

   Ensure Allegro and its add-ons are properly initialized.

2. 2. Load the Background Image

   Load your background image using Allegro functions.

3. 3. Implement Scrolling Logic

   Update the background’s position to create the scrolling effect.

4. 4. Draw the Background

   Draw the background at its updated position in the game loop.

5.3.4. Code Template and Example

Here’s a simple example template to illustrate these steps:

The main elements from this template will be utilized in the full code example provided next:

1. 1. Initialization

   Allegro and the image add-on are initialized.

2. 2. Loading the Background

   The background image is loaded using al_load_bitmap.

3. 3. Scrolling Logic

   The background’s x-coordinate (bg_x) is updated to create the scrolling effect. When the background moves completely off-screen, its position is reset.

4. 4. Drawing the Background

   The background is drawn twice to ensure seamless scrolling.

5. 5. End

   Check for a key press of the Esc key to end the example.

This is a basic implementation. You can adjust the scroll_speed variable to control the scrolling speed or add more complex logic for different scrolling effects.

Code Example

5.3.5. Questions for Further Study

1. 1. How do you add multiple layers for parallax scrolling?
2. 2. Can you explain bitmap handling in Allegro 5?
3. 3. What are some common performance tips for scrolling backgrounds?

5.4.1. Types of Dynamic Backgrounds

• Animated Backgrounds: These include moving elements like clouds, water, or other environmental effects.
• Interactive Backgrounds: They may change based on player actions or game events, such as day-night cycles or weather changes.
• Procedural Backgrounds: Generated algorithmically, these can create unique and varied environments each time the game is played.

5.4.2. Technical Considerations

• Animation: Use sprite sheets or frame-based animations to create dynamic objects on backgrounds.
• Shaders: Utilize shaders for complex visual effects like water reflections or dynamic lighting.
• Event-Driven Changes: Implement background changes triggered by specific game events, such as entering a new area or completing a level.
• Performance Considerations: Dynamic backgrounds can be resource intensive. Optimize performance by managing memory efficiently and minimizing the number of draw calls.
• Tools and Libraries: Many game development frameworks and engines—such as Unity, Unreal Engine, and Allegro—provide built-in support for creating dynamic backgrounds.
• Artistic Considerations: Dynamic backgrounds should enhance the game’s atmosphere and complement the overall art style. They can be used to convey mood, indicate progress, or provide visual feedback to the player.

5.4.3. Steps to Take

Creating a dynamic background for games in C++ with Allegro 5 can add a lot of visual interest to your game. Here’s a basic guide to get you started:

1. 1. Initialize Allegro

   Ensure Allegro and its add-ons are properly initialized.

2. 2. Load the Background Image

   Load your background image using Allegro functions.

3. 3. Implement Dynamic Elements

   Add elements that change over time, such as moving objects or changing colours.

4. 4. Draw the Background

   In your game loop, draw the background and update the dynamic elements.

5. 5. Cleanup

5.4.4. Code Template and Example

Here is a basic template:

For movements here, we will use a random number generator to provide the animation for the circle-star object. We use the event timer to trigger the star’s movement and adjust its position based on the randomly generated values to offset the x and y positions.

Code Example

5.4.5. Areas for Completion and Enhancement

5.4.6. Questions for Further Study

1. 1. How can you implement animated sprites in the background?
2. 2. Can you explain colour-changing effects?
3. 3. What are some tips for optimizing dynamic backgrounds?

5.5.1. Types of 3D Backgrounds

• Static 3D Models: These are prerendered 3D models that do not change during gameplay. They provide a detailed and realistic backdrop.
• Dynamic 3D Environments: These backgrounds can change in real time based on player actions or game events. Examples include changing weather, day-night cycles, and destructible environments.
• Parallax Scrolling: This technique involves multiple layers of 3D backgrounds moving at different speeds to create a sense of depth.

5.5.2. Technical Considerations

• Performance Considerations: Rendering 3D backgrounds can be resource intensive. Optimizing performance involves techniques like level of detail (LOD), culling, and efficient use of shaders.
• Tools and Engines: Modern game engines like Unity, Unreal Engine, and Godot provide robust tools for creating and managing 3D backgrounds. These engines offer features like real-time lighting, physics, and advanced rendering techniques.
• Artistic Considerations: The design of 3D backgrounds should complement the game’s art style and enhance the atmosphere. Artists often use a combination of textures, lighting, and environmental effects to achieve the desired look.

5.5.3. Steps to Take

Creating a 3D background for games in C++ with Allegro 5 is a bit more complex than working with 2D graphics, as Allegro 5 is primarily a 2D graphics library. However, you can achieve 3D effects by integrating Allegro with OpenGL, which Allegro supports.

1. 1. Initialize Allegro and OpenGL

   Ensure Allegro and OpenGL are properly initialized.

2. 2. Set Up OpenGL

   Configure OpenGL settings for 3D rendering.

3. 3. Load and Render 3D Models

   Use OpenGL functions to load and render 3D models.

4. 4. Draw the Background

   In your game loop, draw the 3D background using OpenGL.

5.5.4. Code Template and Example

This is a basic implementation template. For more complex 3D backgrounds, you can load and render 3D models using libraries like assimp for model loading and more advanced OpenGL techniques:

In this example, there are the following key steps:

1. 1. Initialization

   Allegro and OpenGL are initialized.

2. 2. OpenGL Setup

   OpenGL settings are configured for 3D rendering.

3. 3. Drawing the Background

   A simple 3D cube is drawn as the background.

In the next example, we’ll build on the template to create a simple multicolour rotating cube.

Complete Coding Example

5.5.5. Questions for Further Study

1. 1. How can lighting models (such as ambient, diffuse, and specular lighting) be incorporated to improve the realism of 3D backgrounds?
2. 2. What techniques can be used to optimize the performance of complex 3D backgrounds, especially on lower-end hardware?
3. 3. How could texture mapping be applied to 3D background geometry to enhance visual detail?
4. 4. In what ways can camera movement and perspective changes contribute to immersion when using 3D backgrounds?
5. 5. How might modern shader-based rendering (e.g., using GLSL) be integrated with Allegro and OpenGL to create more advanced visual effects?