Leave a comment

Maui Tasks Update (2/28)

In February, Kokua Games continues working on Maui. After several QA test and meeting. I fix some debugs and do some new tasks:

  1. start menu’s debug
  2. change the gameplay for story scene
  3. update wave test scene ( may need to use in the future)
  4. Halau system
  5. arrow indicator update and put in the scene

We are going to attend GDC from March 14 to 18, so we need to have a complete build for GDC.

Leave a comment

Back for last semester

Maui team is back for last semester!

Last semester, we created our first level for IGF and prototype of second level. This semester, we want to polish our game and make it published. For the artists, they create a new island and make the animation smoother. For the engineering, we replace the island, fix the bugs and QA issues.

My task is to maintain the main menu and pause menu. Since that we don’t have the technique to delete the saving data, I create a button to start a new game in main menu, which will delete the saveGame.xml. When the saveGame.xml file was replaced by other saving technique made by other engineer, I need to change from the old function to the new one. For the pause menu, we have new interface so that I need to replaced them all.

The task for next week is to put the arrow indicator into our game scene.

Leave a comment

Game Engineering II Final Project

螢幕快照 2015-12-18 上午12.52.19

Falling Down Game

download link: D3D Version

The Way to Play it:
While Alice is falling down to the rabbit hole. Use WASD to move Alice to the gap. The player have 5 chances to live. After 5 chances, the game is over and “Game Over” sign will show up.
螢幕快照 2015-12-18 上午12.56.32

The Way I Made It:
Since that I have almost everything in my game engine, I need to add something to create a game.

  • This game only need to change Alice’s position, so I delete the player control for rotation and camera’s control. However, I need to make the game looks like Alice falls down automatically, I also need to add both Alice and camera’s z-axis change automatically.
  • Except of Alice, I also add new meshes for this game: pipe with dirt texture, two layers with 4 different material, one plane mesh for showing “Game Over” sign, and one plane mesh for showing life image.
  • To set the game objects, I create two pipes and three layers. After the camera pass through the pipe or the layer, it will change to the deeper position so that the scene look like infinite. For the layer, every time when the position change, it will have random layer between two meshes and 4 materials so that it will look different every time. Also, I use random function to create random rotation for each layer so that the gap will at different place.
  • To make the game, I also need collision because every game need collider. I create a collider class with 2D size and 2D position. To get the colliders’ size, I create two invisible mesh at the place of layer’s gap. Similar to the meshes, I use MeshBuilder to create binary file for them and use the same way to read the mesh file. The only different is that I don’t need the whole sVertex data, so when I read the vertex data from the binary file, I find the maximum and minimum of x and y from all the vertex to create the size, and get the center position of the collider. The way to make collider works is that when Alice at the same height as the layer, her position should be in the collider (which means she is at the gap).
  • Because layer now have a mesh and a collider at the gap, I create a struct in Graphics to have both of them. When I get the rotation angle from layer, I also need to rotate the gap.
  • I have some problem at the presentation day, and suddenly realize that it’s not about my collider system. Because the layer with gap at the side has more flexibility than the layer with gap at the center, I set random number from 0 to 4 so that the chance to use the former is 3/4 and the latter is 1/4. However, I forgot to read the right mesh when I using the collider, that’s why it made a huge problem.

I’m glad that I create a complete game by myself within two week. However, I still want to add more stuff like light and better collider in it. Maybe during the winter break, I’ll make it more complete.

Leave a comment


Last Friday is the biggest activity for EAE student every semester. On EAE day, we will show our games made within this semester and let the guests play.

Basically we have all our minor levels built, but the levels I build is better for the game (not prototype). So we change the first level and put those minor levels in the first level. Is this way, we make those new levels as on part of the training.

During that day, many people come to play our game, some people are attracted by the art design. I introduced the game to some people, and they love the way we talk about the Hawaiian culture and they want to learn more. (Except a kid who thinks our game takes too much time to play)

Also, I found some bugs in our game. Maybe we will discuss about them after the next semester begin.

Leave a comment

Game Engineering II Assignment 13


Download Link to try rendering a little ghost in the graveyard with 4 tombstones and two image for testing:
1. Direct3D.zip
2. OpenGL.zip
(After downloading the file, open the application file to show the work. here is the controller setting:
# Move ghost: Arrow keys on keyboard, left button and right button on mouse
# Rotate ghost: UJ IK OL on keyboard
# Move camera: WASD QZ on keyboard
# Rotate ghost: RF TG YH on keyboard
# Close game: ESC on keyboard or click the “x” button on the right top by the mouse)

Way I do this:

  • The goal for this assignment is to add texture for our material.
  • Texture is to put an image on the mesh, which means that we need to put the images to assets folder and AssetsToBuild.lua to build it from the image type to DDS file. After import the textureBuilder project in the solution and add builder to AssetsToBuild.lua, we can build all the textures files in DDS.
  • To draw texture on the mesh, we need texture coordinate information in mesh file, too. So we need to add some code in MayaMeshExporter project and sVertex structure so that when the mesh file exported from Maya will have texture coordinate data. Because the size and offset of sVertex are changed, we need to change the code in mesh class so that the rendering will be correct.
  • Then I add texture uniform in all the fragment shader and vertex shader files. Also, like all the uniforms, we need to add texture data in the material files. In the last assignment, I only add effect Path and uniformData for color in material files. This assignment I added textureData table after uniformData table, and there will be some table in this data depend on how many texture does this material use. (In this assignment, I only use one texture for each material.) I saved two things for each textures in textureData table: image’s path and texture uniform name. Because I added textureData in material files, I need to add some code in MaterialBuilder to make it builds the binary data for texture, too. After build the new binary material files, the files will look like this (the example is normal texture material without alpha used in Direct3D):
    As you can see, the first part still the path of effect. Then is the amount and the information of color uniformData. Divided by the color, the first part is the amount of data (red box), then is the 8 bytes for uniformHandle (4 bytes in OpenGL) (blue box), 1 byte for shaderTypes (orange box), 32 bytes for uniform value (green box), and 1 bytes for the count in value (purple box). (There are some memory alignment padding, too. (brown dash)) After that is the name of each color uniforms. The last part is the texture data, which are two strings for texture uniform’s name and texture image path.
  • To read and load texture data from material file, I create a texture struct in Graphics project and save texture data from material file in material class. The texture struct has sampler ID, uniform handle, load texture image function and set uniform function. When I read material file, it will get texture name and texture image path, then pass them into the function. The rest part is just like setting color uniform.
  • After I get rendering, the two platforms looks a little different:
    The first one is Direct3D, which is sharper, and the second one is OpenGL, which is smoother.


  • Because we just do the assignment for material, texture part is very similar to last assignment. However, texture is more complicated than the color because we need to change sVertex for mesh. So we need to make sure that the offset for sVertex data is correct in mesh class.
  • Also, I change the gameObject I use because I forgot to save the flame in maya file so that I cannot export the new version with texture coordinate. That why I use the tombstone for the material I used for the fire before.
Leave a comment

New level for EAE day

After IGF, we start to create new level for Maui.

The first level we created for IGF is a little bit like a tutorial. To save his sister, Maui needs to learn and train himself in different skills so that he can face the difficulties in the mountain. The second level we want to make is Maui’s tasks in the mountain. We have 4 minor levels, and my job is to do one of them with Bug. The level we did is wave test. Maui need to use speed to avoid the wave and walk to the center to get the gem and walk back. The technique is to create the wave automatically by time and speed. Because the scene I create is just a prototype, we won’t show this on EAE day.

The other task I do is the center of the mountain. Based on the story, when Maui enters the mountain, he will see the platform in the center and four doors around it. The platform is to gather the gems he collects from different, and the doors are the entrance to different minor level. Sean already have the scene, so the only thing I need to do is to find the way to save the level the player already finished so the he can bring the gem to the platform and won’t disappear after the come back from another minor level.

Leave a comment

Game Engineering II Assignment 12


Download Link to try rendering a little ghost in the graveyard with 4 ghost fire with different color floating in the air:
1. Direct3D.zip
2. OpenGL.zip
(After downloading the file, open the application file to show the work. here is the controller setting:
# Move ghost: Arrow keys on keyboard, left button and right button on mouse
# Rotate ghost: UJ IK OL on keyboard
# Move camera: WASD QZ on keyboard
# Rotate ghost: RF TG YH on keyboard
# Close game: ESC on keyboard or click the “x” button on the right top by the mouse)

Way I do this:

  • The goal for this assignment is to create material for the object rather than just use effect directly. The reason we want to use material rather than effect to run the game is that we can use the same effect ( with or without transparent) but set it in different color by adding uniform value in shader files in the material files.
  • To add material, we need to add something that is very similar to what we do for mesh, effect, and shader assets:
    • create human-readable material file
    • build material builder to build from human-readable to binary files
    • add material class in run-time code.
    • add material type value in graphics
  • First thing I do is to create human-readable material file, which looks like this:
    As you can see, all the material file should have an effect path, which is the path for the binary effect file we want to use for this material. If we use the effect without transparent, we only have colorUniform in the shader so we only need to set one value in uniformData table. On the other hand, if we use the transparent effect, we need to save two uniform data in the table like the image above.  Also, for the next assignment, I create a empty table called texture data to save the texture in the future.
  • Then, I create a project called MaterialBuilder in tool folder. This is very similar to the way I do for effect builder and mesh builder. After finishing writing this part, we need to add material files and builder to AssetToBuild lua file. The binary material file looks like this (I use the material which don’t have transparent):
    As you can see, the first part is my effect Path, the middle part is my uniformData, and the last part is the names for each uniformData. The reason I do this because that we can read effect file when we get the path, then get the uniformData in a struct we create called sParameter without having uniformHandle setting in this data. Finally, we read name in order and use this name to get the uniformHandle and save in the data.
  • In sParameter struct, we create typedef  for uniformHandle. However, the OpenGL is type of GLint and Direct3D is type of const char*. That’s why we have different binary files for OpenGL and Direct3D. (first one is Direct3D, and second one is OpenGL)
  • Before doing anything at run time, we need uniforms in fragment shader file so that we can change the color value by material file.
  • Then I create Material class. Because we have effect path in material file, so we need to create effect value in material, and effect class need to add the function to call color uniform in fragment shader. The rest part of the material class is very similar to mesh class (read binary file), and put some code with using effect from graphics to material. (Also, we need to replace effect to material).
  • If everything is working, I create new mesh like fire and create new scene looks like this:
    Also, I create 6 materials: 4 materials are for 4 fires. Green at front and blue at bake is without transparent, and red at back and original blue color at front is with transparent.  Also, I add 2 material without change color (value = {1, 1, 1}) for ghost (with transparent) and background (without transparent).


  • At first, material file is hard to understand how it works, so I just follow the assignment page to do the assignment. Because that, I have some problem that I shouldn’t have (such as don’t know how to read the uniformData). After asking others and change the way I do in assignment, I can get more understanding what I’m doing right now. The pity thing is that I don’t know how to make right color I want for different fire. As you can see, the original fire I create is blue at the top and changing to white at the bottom. My idea is to change blue part in different color but the bottom is always white. I don’t know how to do that by color uniform, so I may try that after knowing how to add texture.
Leave a comment

Game Engineering II Assignment 11

螢幕快照 2015-11-16 下午6.09.44

Download Link to try rendering a little ghost in the graveyard:
1. Direct3D.zip
2. OpenGL.zip
(After downloading the file, open the application file to show the work. here is the controller setting:
# Move ghost: Arrow keys on keyboard, left button and right button on mouse
# Rotate ghost: UJ IK OL on keyboard
# Move camera: WASD QZ on keyboard
# Rotate ghost: RF TG YH on keyboard
# Close game: ESC on keyboard or click the “x” button on the right top by the mouse)

Way I do this:

  • The goal for this assignment is to create our own Maya plug-in and create mesh file by exporting scene from Maya. Also, we need to add new effect with transparency.
  • Since I have Maya2016 installed in my computer, the only thing I need to download is SDK and put them in the right place. Also, to make macro for Maya, I set new macro called MAYA_LOCATION and MAYA_PLUG_IN_PATH in environment variables
    • I did it wrong at the first time by setting the paths in my Visual Studio solution. It may cause some problem for other computers which don’t have the same path.
  • Second, I added MayaMeshExporter project in my solution and finish TODO part in the project.
    • This project doesn’t have any dependency because it can be run independently. You can just build it while you don’t have this plug-in for Maya or want to update it. When you build it once, you don’t need to waste other build time or run time to build it again.
  • Then we need to debug for this project. To do that, we need to attach Visual Studio and Maya together so that while we are using this plug-in in Maya, we can stop at the break point in Visual Studio to see if the values we want to get is right. (For example, while I was exporting the scene, I want it to save as mesh file. To see if the file name and type are correct, I set a break point and the result looks like this:
    螢幕快照 2015-11-16 下午6.49.14
    Also, to use the plug-in we created, the setting in Maya looks like this:
  • 螢幕快照 2015-11-16 下午6.42.27
    The plug-in with my name is the one I just created.
  • Since we have the plug-in, we can create the mesh we want from Maya.
  • The second goal for this assignment is to create new effect with transparency. I create a new fragment shader file with transparent code. Then in the new effect file, I use this fragment shader and the same vertex shader. To make transparency work, we need to add render state in the effect files. This is how my human-readable effect file looks like:
    螢幕快照 2015-11-16 下午7.08.05
    The values in renderState table are all boolean, so we can use uint8_t to save these data in binary file. To make it simple, I create a enum called renderState and all value in this enum are uint8_t and they are sorting from right to left with the order I show in shader file. When I get the value from effect file, I use |= to save it in uint8_t state(“state |= alpha” for example). Also, because we only have four values in render state, so uint8_t is enough because each boolean value only uses one bit from uint8_t. If we have more than 8 values, we need to change it to uint16_t or more.
  • After we create binary effect files, they looks like this:
    • normal effect:
      螢幕快照 2015-11-16 下午7.24.26
    • effect with transparency:
      螢幕快照 2015-11-16 下午7.24.51
    • Except the fragment files are different, the final 8 bits are different, too. The one without transparency don’t have alpha transparency and have depth write, so the uint8_t value looks like 00001110. The one with transparency have alpha transparency but don’t have depth write, so the uint8_t value looks like 00001011.
  • When we want to use the binary effect files during the run-time, I save the uint8_t value and determine four render values are true or false by & (“if (state & alpha) alphaTransparency = true;” for example)
  • While we have render state, we can do the transparency depends on the state. To render the objects with both effect, we need to render the objects which use normal effect then render the objects with transparency because the object without transparency with cover those transparency objects. This is because we enable to draw transparency object but will close to disable to draw transparency. So if you draw transparent object first, the function for enable to draw transparency will close when we draw the normal objects and they will cover the transparent objects no matter it at the front or back.


  • I have fun in this project because I can finally make some models for the game by myself. The lua part just like the preview assignment so I don’t take much time on it. Transparency took me some times because I put the set effect function in the wrong place. But the most time I spend for this project is making the models in Maya.
Leave a comment

Progress after IGF

After we submitted our game to IGF, we still need some progress for EAE day. Since that Sean and the producers are working on the new levels, we engineers try to add juicy things in the version we submitted.

I have two task that has been done last two weeks. The first one is arrow indicator and the second one is to show the instruction to skip the dialogs.

The arrow indicator is to show the player who or which can give you the mission. I use the script written by one of our engineer to make the indicator in UI type and change the position when the player is moving around (for example, if the people in front of you has mark over his head, that means he has something to tell you or ask you to do. If you turn right or the people is not at front, the mark will change the position so that it will always on top of the people). I also add resize function to change the size by the distance between Maui and the mission.

The instruction for skipping the dialogs is the easy part and juicy part for the game. By the feedback, even thought we have instruction page on pause menu and start menu, people think it would be better to show that in all the dialogs. I add the instruction on the conversation box and make it changeable by the controller player uses (keyboard or controller).

Leave a comment

Game Engineering II Assignment 10


Download Link to try rendering a colorful box and a floor:
1. Direct3D.zip
2. OpenGL.zip
(After downloading the file, open the application file to show the work. You can move the box by using the arrow keys on your keyboard, and use WASD keys to move the camera. click”Esc” or use left-click can close the windows)

Way I do this:

  • The goal for this assignment is to change our whole engine in to 3 dimension, and also add a controller to move the camera.
  • We used to have 2D square and triangles, which only have one face. The thing I do first is to create a box mesh and floor mesh duplicated from square mesh. To make my work in the future easier, I change the Graphics project and AssetsToBuild lua file first to replace the triangle and square mesh files into box and floor mesh files. In Graphics project, I create both of the mesh but draw the box only. (However, I only copy the mesh file from square mesh so it will still a 2D square)
  • To make it 3 dimension, I change many places where only use 2 dimension:
    • sVertex struct
    • meshBuilder project
    • mesh files (add z axis value)
    • vertex shader file
    • effect project
    • After changing the code above, we can still get the same result (which is one square)
  • The next step, which is the most difficult step in this assignment for me, is to use matrix as the position and orientation. We need to change vertex shader file and effect project to fulfill that.
    • For the mesh object, the positions that mesh files give are position in local space. Now this object exist in this world, so we need to transform the local space position into the world space position. Also, the camera just like our eyes, which see this object in a position. That is the object’s position in camera’s view space. After the camera catch the position from view space, we need to transform it into the scene position. If you take a picture by the camera, the object position on the photo is the scene position. That’s how we transform the position for the scene.
  • After the matrix is working for the box mesh. We need to add the other 5 faces for the box. I also change the color for different vertex so that I can see how box works when I move it by the arrow keys.
  • For the floor mesh, I make the color brighter and change the vertex position like this:
    Because it’s is the mesh on the floor, so we don’t have y axis value. After building by meshBuilder, the binary mesh file looks like this:
    Very similar to the square mesh we built before, the first line in binary file is the number of vertices and indices. Then the position and the color will be saved.

    • If the code is right, the build of the game will look like the first image I post above.
  • Then we need to add depth buffer in the graphics project because we want the objects in the scene overlap by their world position rather than the scene’s position (which is the first draw object is always under the last draw object). After adding the depth buffer and make it work, the scene will look like this when the box go down to the plane:
    we clear the depth buffer to 1 because that’s the further depth for rendering, and the reason we use less-than-or-equal as the depth test is that each pixel has their own depth, and when the depth on box is the same as the depth on plane, system will draw the pixel which come first.
  • Finally, I add a camera class to save camera’s position and orientation. I define the camera class in GameObject project because I think camera is also a object, and I create a camera in Graphics project because we want to replace the hard-code part in effect class (where I transform the matrix).
    • Also, I add WASD controller to control the camera’s position. That’s easy because I did that in the same function where the system control and get offset for the box.


  • I met some problem in this assignment, especially when I try to transform the matrix because I always miss something and it’s not possible to render anything correctly if I miss those thing. Rendering is always the hard thing to debug, especially when you made the dump mistake like I do. (I tried to figure out why the rendering is only a square rather than a box, the mistake I made is that I forgot to change the mesh I want to render). Also, the depth part is not very clear so I have some coding order problem (but that’s easy to debug).
  • I’d like to add controller for z axis and the rotation but I need to find the better keys to control. Maybe I’ll do that before I start the next assignment.