Skip navigation

File Link(.exe)


Click Me

The Game


My final is a game that you control a car to dodge obstacles, and the map and obstacles are randomly generated. the control is pretty easy: press “Left” key to make the car move left and go right with “Right”.

The game looks like this:

Capture

Debug Lines


To implement the debug lines, I do the following steps:

1. When the game begins, I create the buffer of debug lines and load the debug line shaders.

2. on each frame before rendering, I clear the debug lines and add new lines to the buffer.

3. Then render the line buffer to display the debug lines.

I added three lines with red,blue and green to indicate x,y,z axis, the lines look like this:

Captur1e

Time estimation


Reading and searching — 1.5 h
Coding / Debugging — 10.5 h
Writing blog — 0.5 h
Total — 12.5 h

File Link(.exe)


Click Me

Objective


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);

1

 

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

3

 

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).

side2

wide

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.

myvsd3d

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)

 

Others


 

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:

Capture

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

redering

Time estimation


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

File Link(.exe)


Click Me

Objective


In this assignment, I leaned how the lighting works in video game rendering as well as implemented a diffuse light demo.

Lighting and Normals


My step of lighting the model:

1. I added lines of code to make my Maya exporter plug-in export the normal data, and changed code of my MeshBuilder so it will load my human-readable mesh.lua file to binary mesh file with normal data.

2. I expended space of my vertex structure to include the normal information, which is actually 3 float (12 bytes). then register the new vertex format to DirectX 3D.

3. My vertex shader now changed to calculate and output the local normal data  world space.

4. My pixel shader now has constants to pass 3 values: the color of ambient light, the color of direction light and the direction of the direction light. I use those them and the world space normal data to calculate the final light color.

frag

5. And at last in my pixel shader I combine the light color with the texture pixel to get and output the final color.

This is what my demo looks like:

left: no lighting

right: with lighting

 

beforeaft

 

Debug the fragment shader


Steps to debug a pixel

1. enter a draw call in PIX

2. In the render tag of Details window, right click a pixel to debug

3. In the Debugger, click the link of the pixel to view the source code.

debgshader

Time estimation


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

File Link(.exe)


Click Me

Objective


In this assignment,I learned:

1. how to create a maya plug-in to export the mesh data from maya to my custom lua format.

2. Using setting file to configure the game.

3. How to use PIX instrumentation

Export Model from Maya


I made a maya export plug-in to export meshes to my custom mesh format:

1. I coded the export plug-in based on Maya API. The Maya API can automatically collect mesh data from Maya for me. So I just call its functions to get the data and output them as my own file format, which is actually a lua file that return a table to indicate the mesh.I configured it to build a x64 version in Build->Configuration Manager since I’m using the x64 version Maya.

2. I made Visual Studio to put my plug-in to the Maya plug-in folder after building. And enable my plug-in in Window->Settings/Preferences->Plug-in Manager in Maya to make sure my plug-in is running.

3. I downloaded a free licence model, import it into Maya and export it to my custom format with my Maya. Then I build it with my mesh builder and load it to show in the scene in the game.The model in my game looks like this:

ccc

 

Remark:

Maya’s coordinate system is different to default D3D, There are some changes I made while exporting

1. Position : x,y, -z

2. Normal: nx,ny,-nz

3.Texture Coord : u, 1.0 – v

PIX instrumentation


I added my custom “event” to make the PIX show the information more organized. I used  D3DPERF_BeginEvent() and D3DPERF_EndEvent() to wrap my material setting and draw function. that’s what they look like in PIX:

Cacce

User Settings


 

I added a user settings file to my project which will be copy to the root folder of my final game and will be loaded when the game is initializing. The user settings file provided information about some options to initialize the game, such as window size and full screen mode option.

Time estimation


Reading and searching — 2.5 h
Coding / Debugging — 6 h
Writing blog — 1 h
Total — 9.5 h

File Link(.exe)


Click Me

Objective


The assignment 07 wants me to custom my own mesh format as a lua file and to make the project to generate binary version of mesh data in the building process. Then, we should be able to read the binary mesh file in run-time and display it as before.

The assignment 08 basically asked me to add texture to the mesh in run-time. We need to build the images to the target file format(“.dds”) with texture builder, load them in game and add the textures to the mesh according to the texcoords of vertices of the mesh.

My Mesh File Format  


I have customed my personal mesh file format, which looks like this:

dataformat

The comments explain the details about this format. the format has three main parts: First one is the metadata, which can tell some basic information about this file such as name and numbers of vertex and triangle. The second parts is vertices, which contains the list of all vertices of this mesh. The last part is triangles, which has the triangle list of this mesh.

Add Texture to the game world!


 

In order to add texture on the mesh, there are several steps I did. First of all, I make the engine convert all of the image files to dds file during the building process with TextureBuilder, then I add lines in the material to indicate the texture file path and the name of the sampler. The next step is to add texture coordinates for each vertex of the mesh, which will tell the shader how the texture “pin” on the mesh. At last I ask DirectX to pass the texcoords and textures to the GPU and add  codes to fragment shader to render the texture on the mesh.

This is what the game looks like now and the screenshot in PIX.

 

screen game

scrren pix

Time estimation


Reading and searching — 3 h
Coding / Debugging — 6 h
Writing blog — 0.5 h
Total — 9.5 h

File Link(.exe)


Click Me

Objective


This assignment wants me to replace the arguments in the old command line  with a lua file which contains a assets list that show how the assets should be build. Also in this assignment, instead of compiling shader files in the run-time, I need to compile them with Shaderbuilder in the building process and load the binary data of shaders while the game is running.

Assets build list 


In the previous assignments, I put the names of the assets files on the command line to build them, which is fine for a simple example or assignment, however, it will be bad when the project scope becomes large. A better solution is to create a file of assets list and just pass the file name to the command line.

This is what my assets list file looks like:

assetstobild

 

In the root level, I have “generic” and “shader” to indicate different categories of assets, and particular builders will be apply to each of the assets categories. In one category,” builder = “…” ” means which builder will be used to build the assets.The GenericBuilder will just copy the last files from source to target. The ShaderBuilder is responsible for compiling the HLSL text file to the binary file depends on the type of the shader. ” assets = {…} ” is the list of assets that will be built. Each asset has a source file path and a target file path. Also, they all have a arguments list to pass optional arguments to the builder.

Time estimation


Reading and searching — 1.5 h
Coding / Debugging — 3 h
Writing blog — 1 h
Total — 5.5 h

File Link(.exe)


Click Me

Objective


This assignment wants me to create objects in 3D world and display them with a 3D camera.

Cube in 3D


I made a colored cube and a gray plan in the 3D world, you can control the camera with ASDW keys and move the cube with Arrow keys.

That is what it looks like:

cube in 3d cube in 3d 2

Debug a shader


I met a problem when I was debugging the Shader, PIX was keep failing to enable shader debugging. And Finally I found the reason here , the solution is pretty easy.

1. open Regedit and go to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Direct3D

2.Right click the “Direct3D” key—> permissions —> Advanced —> switch to “Owner” tag –> Select Administrators and  click apply.

3.Switch to “Permissions tag” —> select Administrator —> edit —> check full control for it.

4.open PIX again, problem solved 😀

That’s my debug screen:

shader debugger

 

Time estimation


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

File Link(.exe)


Click Me

Objective


This assignment requires me to add a per-material color modifier in fragment shader to change the final  mesh color. Also it wants me to add a per-instance position constant in vertex that will be updated each frame to relocate the mesh on the screen. Besides these, I need to added a specific builder for copying the assets.

Color Modifier


The game will looking for the “color” property in the material file while loading and set the color as a constant to the pixel shader. When the game is running,  the pixel shader will change the output color each round of rendering depends on the constant that we loaded from the material file.

When I set the material color to purple, the result looks like this:

mat color 1color modifier result 1

Then if I set it to gray green, it will look like this:

mat color 2color modifier result 2

 

When we don’t have the color property in the material, the pixel shader will use the default value as the color modifier.

Moves the Rectangle 


In order to move the rectangle with vertex shader, I added a constant in the shader code , which will be updated each frame when the game is running. In the update() function of my Game class, I handle the input ( arrow keys (UP, DOWN, LEFT, RIGHT)) to change the position of the rectangle.

rectagle moving

Time estimation


Reading and searching — 1 h
Coding / Debugging — 4 h
Writing blog — 1 h
Total — 6 h

File Link(.exe)


Click Me

Objective


This assignment requires me to draw a rectangle with indices. Also it wants me to replace the hard-coded shader loading with materials that based on Lua.

Colored Rectangle


rectangle

This is what my rectangle looks like, thank for my artist friend helped me to pick the colors again.

Capture1 Capture2

The difference between this and last assignment is I used indices to draw the triangles. Basically the index indicate the position in the vertex buffer. With the index we don’t have to put each vertices of each triangles into the buffer, which will save a lot of memory when we have a huge number of triangles to draw.

Materials 


Instead of loading shader files in hard coding, the assignment wants me to add materials to load it dynamically. When the game is loading the shader files, it will firstly go to ask Lua engine to load a material file, and the material file contains the information about what vertex shader and pixel shader should be loaded. This is what my material file looks like.

Material

Besides the paths of the shaders, it has other information to describe the material, such as name and color. I put a parent property for the material because I want a new material can be built based on the other material that we already have.  If the child material doesn’t declare a required property, it will automatically use the parent version as default.

I will add more options to the materials. The texture should be a texture array for supporting multiple textures, more properties need to be added to describe features such as reflection and opacity.

time estimation


Reading and searching — 1 h
Setting up solution / Coding / Debugging — 2.5 h
Bug Fixing — 0.5 h
Writing blog — 1 h
Total — 5 h

File Link(.exe)


Click Me

Objective


This assignment has two main objectives. The first one is to render a triangle with colors on the screen and understand the knowledge of it. Besides it, we need to add Lua into the project and replace the old assets builder with the new lua version.

Colored Triangle


Colored Triangle

That’s the triangle that I rendered. In order to make it looks not like a “Hello World”, I asked my artist friend to help me pick colors :D.

 

Capture1

 

It’s very simple to create a colored triangle like this, but a little background knowledge is still needed to understand this. As the minimum unit in the rendering process, a triangle is formed by 3 vertices. a vertex basically is a variable to indicate the position information, (x,y) in 2D for example. But it as well as is a container for more extended data for rendering, such as color, normal vector, texture coordinate and weight. In this case, I added color data for my triangle. As we can see in the PIX, a buffer that contains the vertices of the triangle is passed when the Draw function is called. Each vertex has information about it’s position and color.  And each color data is indicated as ARGB model and is stored in a 16-bit memory space.

Build assets with Lua


Lua is a very useful language to build the script system in game development. Basically, In the game code, we create functions in the format that Lua engine can recognize and register them to Lua engine, and then call the functions that we registered in the script to implement what we want.  In this assignment, Instead of implementing every details in the cpp file, the AssetsBuilder publics several core functions ( such as copyfile ) to the Lua engine, and created lua script for the rest implementations.

time estimation


Reading and searching — 1 h
Setting up solution / Coding / Debugging — 1 h
Bug Fixing — 0.5 h
Writing blog — 1 h
Total — 3.5 h