2D Sprite and Atlas

Purpose:

The assignment was to

• Add sprite and atlas support in the engine.

Final Output:

Sprite is a two-dimensional image / flat images seamlessly integrated into complicated three-dimensional scenes. Although our regular textures on 3D models does not support Alpha Blending, Sprites do.

• Alpha blending in simpler terms is translucency, i.e., you can pretty much see behind a 2D image where ever the alpha values are greater than zero.

• Since we always want sprite UI to draw in front of everything in scene, we need to disable depth tests on 2D sprite rendering. In order to do this, I have Begin2D and Begin3D functions. I call each function once before rendering Mesh and Sprite to enable and disable respectively.

• Sprite has to be rendered after all the 3D meshes are drawn in the scene. If you don’t, the sprites get rendered behind all the 3D meshes like below.

Pix instrumentation:

I have added a larger collapsible event that encapsulates each Mesh rendering and Sprite rendering events separately.

Below PIX output shows the setting of DirectX RenderState for Mesh and Sprite

Below image shows the setting and drawing of sprites,

Output state tab in PIX can be referred to double check if Alpha blending is enabled and Depth test is disabled.

Resolution Independent:

Part of the assignment requirement was to render the sprites without changing the aspect ratio. For example, if a sprite is rendered at 1028 x 800 resolution with a sprite at upper left of the screen,

A change in resolution 600 x 800 as below, you can see that the sprite does not stretch or shrink in width. Same can be tested with height.

The logic behind the working is as below. If the aspect ratio is greater than one, which means the width is greater than the height, which is true generally, the left and right position of the sprite is divided by it. This makes sure that the sprite does not get stretched sideways. And if aspect ratio is less than one, in which case it means the height is greater than width, like in mobile screens, the height is multiplied by a number less than one but greater than zero. This makes sure that the height of the sprite stays consistent with resolution.

Atlas:

Atlas is a large image containing a collection of sub-images, each of which is a sprite or texture for some part of a 3D object. The sub-textures can be rendered by modifying the texture coordinates of the object's UV map on the atlas, essentially telling it which part of the image its texture is in. Think of it like this 2D sprite below that has multiple smaller same sized images that can be referenced by specifying the appropriate UVs.

If there are 10 images in one sprite, each image can be referenced by changing the UV’s. First image can be referenced by UV = {0.0, 1}, second can be referenced by UV = {0.1, 1}, and so on.

Time Spent:

Add sprite support: 5hrs

Add atlas support: 2hrs

Write-up: 1hr

Total: 8hrs

BUILD