juhara.com

Prerequisite

This article is continued from 2D Animation with Direct3D Part 1 and 2D Animation with Direct3D Part 2. I would like to suggest you to read the article first.

Introduction

Ok let's move on to next topic, of course it's still about 2D animation. In our previous demo, player character is displayed on the top of solid color background. This kind of background is boring. 2D games usually have scrolling background that follows movement of player character. The question now is how to display scrolling background?

Source code is available to download.

Before we answer the question, we need to discuss some issues that will affect design of background scroller that we are going to make.

Memory, luxury that we don't always have.

Background in a game especially adventure type is typically larger than screen area to allow player to explore game level.

If those big backgrounds were saved in a huge memory block (whether it is system RAM or video RAM), there is a good chance that available free memory is not large enough to contain all data of background.

We are going to split background into smaller background pieces and we will tile it over the screen. By using smaller pieces, the chance that memory will available is bigger.

Texture Size Restriction.

At the time of this writing, some 3D graphic cards are only able to display texture with same width and height and must be 2 power n, so valid texture size is 1x1, 2x2, 4x4, 8x8, 16x16, 32x32 and so on. Some old graphic cards such as voodoo, have maximum texture size limit 256x256, newer graphic card usually can store texture with maximum size 1024x1024.

Just like our previous demo, we create texture with D3DXCreateTextureFromFileEx. This function (just like any D3DXCreateTexture*** functions) creates texture by checking size allowed by graphic card.

Our texture sizes usually are rounded up to nearest 2 power n value, so if we create texture from image120x60, there's a good chance texture size will be rounded up to 128x128, where the rest of texture not occupied by image data will be padded with 0.

This eats more resources than we need. If we are lucky, end-user might have graphic card that support any texture sizes, so we can save resources, but as developer we must prepare for the worst case.

To save memory usage. We will split background into pieces of size nxn where n is power of two. For our background scroller this will be 64x64. It's not too big and supported by any graphic cards. If you have any preferences, you can adjust it.

Background Scroller Design

A background will be wrapped in a class called TBackground, derived from T3DObject. We need to override Draw method, with code to draw background pieces. Because background consists of small pieces, we need instance of TSpriteCollection and also TTextureCollection, respectively to store pieces and texture of each pieces.

For public method other than Draw and Init which is overriden from T3DObject, TBackground has constructor Create and destructor Destroy. We add code for allocation and deallocation of instance of TSpriteCollection and TTextureCollection.

Last, we add TBackground with LoadFromFile method to load background image file. File must be D3DX supported format. LoadFromFile will split image into texture pieces. We provide TBackground with Translation, X, and Y properties that we use to change background position. To be able to access Sprite collection and Texture, we add SpriteCollection and TextureCollection properties.

Background Collection Design

In some 2D games, background is not only one, they are aligned and moved with different speed to achieve depth effect.

We will implement this feature. To be able to manage these backgrounds easily, background is stored in an collection instance called TBackgroundCollection derived from T3DCollection, because we will need Engine property of T3DCollection.

TBackground Implementation

Ok, let's implement TBackground. We only talk about two main features of TBackground i.e image file loading and splitting into texture pieces and drawing those pieces.

Image Loading and Splitting Image into Textures

This step is easier to be done if background is already cut into small pieces with tool such as Adobe Photoshop. But it is slower to load many small files compare to loading one big file, and sometime we can't or too lazy to cut this image into smaller ones (just like me).

LoadFromFile addresses this issue. LoadFromFile automatically split big background into small textures. The step is as follow:

1. Take width and height of image. Calculate number of pieces needed.
2. Load all image into temporary surface (IDirect3DSurface8).
3. For each pieces do,
   • Create 64x64 texture.
   • Get texture surface.
   • Copy part of temporary surface into texture surface.

Note: Surface is a representation of data block in memory. The definition of surface in Direct3D is similar to surface definition in DirectDraw. However, in Direct3D, surface is type of IDirect3DSurface8, but in DirectDraw it is IDirectDrawSurface interface. To create surface we use IDirect3DDevice9.CreateImageSurface().