Skip navigation

File Link(.exe)

Click Me


This assignment wants us to draw sprites in the game.

Draw a Sprite

There are many ways to implement sprite rendering in DirectX, and I considered several points when design my version:

1. The vertex buffer should not be re-created every frame or per-sprite, so I should use GPU as much as possible to do the calculating, such as transforming and texture atlas.

2.  The texture can’t be distorted when the resolution changes.

3. The methods of the sprite class should be easy to understand and comfortable to use.


Next I will talk about how I implement my Sprite:

1. Share one vertex buffer and make them various in shader

There is only one vertex buffer that All of the sprite will share it. I just put a simple quad in that vertex buffer, which I called “Identity Quad”.

I also added a const to indicate a transform matrix in my sprite vertex shader, this matrix is responsible to tell the shader how to scale the size of the “Identity Quad” and where it should be move to.

In order to make it display a sub part of my texture ( also called texture atlas ), I added a constant ( float4(left, top, width, height) ) to indicate which part of my texture will show.

My sprite method to draw a part field of the texture:

 Sprite->SetTextureRect(left, top, width, height);

for example:

SpriteNum->SetTextureRect(0.1, 0.0, 0.1, 1.0);



SpriteNum->SetTextureRect(0.3, 0.0, 0.1, 1.0);



2. resize the sprite to fit the resolution

The game screen usually get wide, but  my sprite can’t be distorted with it. I added lines of code to calculate the window aspects when loading the user settings and used that aspect to set my sprite width.

Sprite.SetRect( left, top, width, height ) // WRONG, the sprite will distort when the window get wider.

Sprite.SetRect(left, top width / aspect, height) //BETTER, the sprite will keep the size

However, I didn’t solve the problem when the window get longer, it doesn’t happen often in PC games, but is really usual in mobile game. In the mobile game , we can get the current device direction so we can make changes depends on which  screen state (vertical or horizontal) the player are on.

Screen shots, my sprite doesn’t distort when the window get wilder (1024 x 768   vs  1024 * 400).



3. Just like drawing a picture…

I want the my sprite methods be understandable, So I trans the D3d coordinate system to a 2d plane.


The “Identity Quad” is from (0,0,0) to (2,2,0) in DX and in default the scale is 1 and the translate is (-1,-1,0)




1. The depth test should be unable and the alpha blend should be enable while rendering the sprite

the screen shot of the depth test and alpha blend states for your sprite draw call:


2. I Added new events for sprite rendering to make it looks better in PIX


Time estimation

Reading and searching — 0.5 h
Coding / Debugging — 3 h
Writing blog — 1 h
Total — 4.5 h

Leave a Reply