tag:blogger.com,1999:blog-37842608155559889142024-03-12T17:52:05.914-07:00Development LogKennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.comBlogger29125tag:blogger.com,1999:blog-3784260815555988914.post-82841040114426777552015-11-04T21:34:00.001-08:002015-11-04T21:34:56.384-08:00Wunderworld<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYN_YZs34dunEKPTB9LcAxDjD4VevWmgIhYozGLdTabU1KwnYN6OVjs96xnAFrHcWPOOtjt3tuP9pZTiu6JjcF7349eatrYndChUZt06Uc3fVkEHjtdnSwyoxoIhbFVXvT7ZO6n9jBPjQ/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYN_YZs34dunEKPTB9LcAxDjD4VevWmgIhYozGLdTabU1KwnYN6OVjs96xnAFrHcWPOOtjt3tuP9pZTiu6JjcF7349eatrYndChUZt06Uc3fVkEHjtdnSwyoxoIhbFVXvT7ZO6n9jBPjQ/s400/1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFnNsNoiP-hHfFvB7yuKl1KTCP4K8AlPFPoVaRSJZNo92M-Vcl9MqrfhhfFFogYcSuFj3RhFD1Hac2t-hmzdzGIyBrXqUrtTUsFxHcFFBgab43wpib_l06vXvvmbczAqwYwHbWcvpWps/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFnNsNoiP-hHfFvB7yuKl1KTCP4K8AlPFPoVaRSJZNo92M-Vcl9MqrfhhfFFogYcSuFj3RhFD1Hac2t-hmzdzGIyBrXqUrtTUsFxHcFFBgab43wpib_l06vXvvmbczAqwYwHbWcvpWps/s400/2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9IB-O-GUoG6TDjvJNefxVnuR9OYCaVApPhxJbYyaiVgxyNuUokObgx77sGDggl1eR7MfkaUcUSGUi8PS8mFabnV7WAyI1q5oa0IG_q7duoF_xRi8u4HI8gRTm-SYCxNcz9Rbn4XWUa0/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9IB-O-GUoG6TDjvJNefxVnuR9OYCaVApPhxJbYyaiVgxyNuUokObgx77sGDggl1eR7MfkaUcUSGUi8PS8mFabnV7WAyI1q5oa0IG_q7duoF_xRi8u4HI8gRTm-SYCxNcz9Rbn4XWUa0/s400/3.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOeNBCiDWn-RygQO_nT9Ms0nH9mSsypyE6NtV3I52aYjkWu2PSHG-T9qIRyTxUwQ5XNE64h31zgiS5M4wI5gw8OC7Yzv6t2C1R8cvSZgmOXvZexpwqyFLrs2oHf-sTckh1IKrr6-bjyo/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOeNBCiDWn-RygQO_nT9Ms0nH9mSsypyE6NtV3I52aYjkWu2PSHG-T9qIRyTxUwQ5XNE64h31zgiS5M4wI5gw8OC7Yzv6t2C1R8cvSZgmOXvZexpwqyFLrs2oHf-sTckh1IKrr6-bjyo/s400/4.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqyOM2EbQtcuNEFqT3yqtT5282K2vsISgRbQkk9OuesEnxVknrzumTw7ULczkqDXhFr0PPrliaXazssWNwb4GGpk18Kc5aeVj8LwQR69Lh21Q94j4tRfbmWdBIrzzLOj64SQZkNlDhoA/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqyOM2EbQtcuNEFqT3yqtT5282K2vsISgRbQkk9OuesEnxVknrzumTw7ULczkqDXhFr0PPrliaXazssWNwb4GGpk18Kc5aeVj8LwQR69Lh21Q94j4tRfbmWdBIrzzLOj64SQZkNlDhoA/s400/5.png" width="400" /></a></div>
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-11710907864795278892014-12-03T19:14:00.000-08:002014-12-03T19:14:12.513-08:00Game Engines Blog 5 - level editor<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHqv5DRYfuOmM85Yuj8mZRyTbUZpOFNfZlRyRFAMyLz40xgXlRpZB1Lhg9OGv00s8Sc6Nww5RPtNcslaZiyZRX0yQZk2ivzSCT1Ehew0OOp3aYnu21uzZNAGmK1XkWKgnLtSncfbrD_8/s1600/medlc_ring.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHqv5DRYfuOmM85Yuj8mZRyTbUZpOFNfZlRyRFAMyLz40xgXlRpZB1Lhg9OGv00s8Sc6Nww5RPtNcslaZiyZRX0yQZk2ivzSCT1Ehew0OOp3aYnu21uzZNAGmK1XkWKgnLtSncfbrD_8/s1600/medlc_ring.png" height="211" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We've pretty much finished out prototype for this semester's GDW. It has a tutorial and all of our gameplay mechanics implemented.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIpCsABWQh7aGn863dsubXripg_v_d8yr88sWMe4Rn70cPLnGx55VWNf6Mg0pKyMXsb0XWydG1l8GRulm2YhlXoccFsUYcvERWLG1Q_qPvBMguzDAUjw4yTu1njnJv4wxv-_7ujV01f0/s1600/forge.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIpCsABWQh7aGn863dsubXripg_v_d8yr88sWMe4Rn70cPLnGx55VWNf6Mg0pKyMXsb0XWydG1l8GRulm2YhlXoccFsUYcvERWLG1Q_qPvBMguzDAUjw4yTu1njnJv4wxv-_7ujV01f0/s1600/forge.png" height="211" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIpCsABWQh7aGn863dsubXripg_v_d8yr88sWMe4Rn70cPLnGx55VWNf6Mg0pKyMXsb0XWydG1l8GRulm2YhlXoccFsUYcvERWLG1Q_qPvBMguzDAUjw4yTu1njnJv4wxv-_7ujV01f0/s1600/forge.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> </a> </div>
<br />
So for our offline tool I've implemented a level editor that allows you to move around and manipulate various gameplay triggers like spawn points and to be able to save their positions to a text file.<br />
<br />
Here's some of the code for reading the spawn positions.<br />
<br />
core_str::String fileSource;<br /> core_str::String fpath("/Save/Multiplayer_Spawns.txt");<br /> core_io::Path filePath((GetAssetsPath() + fpath));<br /> core_io::FileIO_ReadB fileRead(filePath);<br /> fileRead.Open();<br /> core_str::String filecontents;<br /> fileRead.GetContents(filecontents);<br /> const char * filecontents_char;<br /> filecontents_char = filecontents.c_str();<br /> int characterIncr = 0;<br /> int posIncr = 0;<br /> char character[50];<br /> for (int i = 0; i < 50; i++)<br /> {<br /> if (filecontents_char[i] == '-' ||<br /> filecontents_char[i] == '0' ||<br /> filecontents_char[i] == '1' ||<br /> filecontents_char[i] == '2' ||<br /> filecontents_char[i] == '3' ||<br /> filecontents_char[i] == '4' ||<br /> filecontents_char[i] == '5' ||<br /> filecontents_char[i] == '6' ||<br /> filecontents_char[i] == '7' ||<br /> filecontents_char[i] == '8' ||<br /> filecontents_char[i] == '9')<br /> {<br /> character[characterIncr] = filecontents_char[i];<br /> characterIncr++;<br /> }<br /> <br /> if (filecontents_char[i] == ',')<br /> {<br /> //convert to number<br /> characterIncr = 0;<br /> float number;<br /> number = (float)atoi(character);<br /> <br /> if (posIncr < 3)<br /> spawn_beacon[0].pos[posIncr] = number;<br /> else<br /> spawn_beacon[1].pos[posIncr - 3] = number;<br /> posIncr++;<br /> for (int a = 0; a < 20; a++)<br /> {<br /> character[a] = ',';<br /> }<br /> <br /> }<br /> }<br /> fileRead.Close();<br />
<br />
<br />
and writing<br />
<br />
core_str::String fileSource;<br /> core_str::String fpath("/Save/Multiplayer_Spawns.txt");<br /> core_io::Path filePath((GetAssetsPath() + fpath));<br /> core_io::FileIO_ReadAndWriteEmptyB fileWrite(filePath);<br /> fileWrite.Open();<br /> for (int x = 0; x < 2; x++)<br /> for (int i = 0; i < 3; i++)<br /> {<br /> char text[32];<br /> int num = (int)spawn_beacon[x].pos[i];<br /> sprintf(text, "%d", num);<br /> core_str::String line = core_str::Format(text);<br /> fileWrite.Write(line);<br /><br /> fileWrite.Write(",");<br /> }<br /> <br /> fileWrite.Close();<br />
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-82559705014258864542014-11-25T14:49:00.000-08:002014-11-28T15:43:50.608-08:00Game Engines Blog 4 - 2LoCThis blog I'm going to be talking about my experience using the 2LoC engine as a 3rd year student game developer. This engine in no doubt gives a lot of useful tools for easily rendering simple geometry or text and is pretty organized with its entity and component system. The samples included gives a lot of useful examples to obtain code and learn some of the functionality of the engine. The project setup with cmake allows me to create multiple instances of a project with all of them sharing the same assets path saving space. But while all of these aspects are great, I feel that it comes with a lot of drawbacks. To start off, there is very limited documentation available online and not much of a community which makes it more difficult for me to resolve an issue in a short period of time, and there have been many instances where I was completely clueless as to why some things weren't functioning properly or having massive frame rate drops without knowing the underlying cause. Another example would be the random euclidean values being assigned to floats belonging to other entities when creating new separate materials completely unrelated to those objects. There are also instances where behaviors of certain entities change every time I re-run the project even though none of the code was changed. These unpredictable behaviors and being unable to understand the background operations has caused some deal of frustration at times and has often led me no choice but to look for a work around fix. Some of things I was easily able to accomplish in last year's framework takes more effort to mimic in 2Loc and may run slower as well. I've also found sending in uniforms to the shaders is more of a complex task then it needs to be. Compared to last year, I feel I have a lot more overhead when working with 2LoC in this year's workflow. But the engine is pretty sophisticated and I'm overall impressed with the modularity of its entity and component systems, but I feel that it still needs some work and optimization to remove these unpredictable behaviors and slow downs.KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-40760668579822494272014-11-02T09:31:00.001-08:002014-11-02T09:40:56.523-08:00Game Engines Blog 3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_cLziH5AVQmSdysy-rFtEZToePRk_aSGJknSX5VveOFkaxPYnswjBR_abeTQuLn_czeivig_gYA44K1y-XUzct8QzibSf_5-U7kyKx9NvZPrf36-vVYaQcjAB7UCoib4c4_I7pgcpZc/s1600/pinnacle_global_illum2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_cLziH5AVQmSdysy-rFtEZToePRk_aSGJknSX5VveOFkaxPYnswjBR_abeTQuLn_czeivig_gYA44K1y-XUzct8QzibSf_5-U7kyKx9NvZPrf36-vVYaQcjAB7UCoib4c4_I7pgcpZc/s1600/pinnacle_global_illum2.png" height="210" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(In game screenshot)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
These past few weeks I have been playing around with more texture backing and global illumination. And seeing how our maps will be static, this made sense for us to bake some of the lighting effects. I think the end result looks pretty nice, it gives a more realistic look to our levels. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've added some bloom post processing effect to our game as well. This was done by creating an FBO with color and depth attachments along with a post processing shader that works on a single texture. </div>
<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMidojdZx2NIc8PtdjaCkELWggdXWur1NX6BmbALd9x71VwCnhLaj_1dk45c9SsH_BjauM98Zfgfybxjk0ZvwwC8FrPUSLdPPOCvO0mxTl5e3dM97HOrwmslFfHW4UYk8EmJPH9GvM8-c/s1600/pinnacle_multiplayer_test.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMidojdZx2NIc8PtdjaCkELWggdXWur1NX6BmbALd9x71VwCnhLaj_1dk45c9SsH_BjauM98Zfgfybxjk0ZvwwC8FrPUSLdPPOCvO0mxTl5e3dM97HOrwmslFfHW4UYk8EmJPH9GvM8-c/s1600/pinnacle_multiplayer_test.png" height="216" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(In game screenshot)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Our gameplay will have a heavy focus on multiplayer, so I wanted to have a quick way to test it early. What I did was implement a familiar library called SDL_Net, which does very simple server to client communication with TCP/IP packets.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0Z0sDp8B0-T_z87FpHi7eH9FzBIus7QHvnt-1tLy2tYbKubzQjitlTWjxq5ncUAl0X60fy7t7e6cN_4MahfSfRqt6ZlRSTf4yNZK_75Agq82wgylZkwGnRRaLag1rxclMx6hLe70Yak/s1600/server.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0Z0sDp8B0-T_z87FpHi7eH9FzBIus7QHvnt-1tLy2tYbKubzQjitlTWjxq5ncUAl0X60fy7t7e6cN_4MahfSfRqt6ZlRSTf4yNZK_75Agq82wgylZkwGnRRaLag1rxclMx6hLe70Yak/s1600/server.png" height="212" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
//networking</div>
<div class="separator" style="clear: both;">
if (isOnline)</div>
<div class="separator" style="clear: both;">
{</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>net->send(&netPlayer);</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>net->recieve(&opponent, &netPlayer);</div>
<div class="separator" style="clear: both;">
}</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've set up a simple server that will assign IDs to each game client. The clients have 2 functions, Send and Recieve, once the server receives a packet, it will send out the packet to other clients that isn't the sender. This is a very basic form of networking and can work through LAN connection by assigning the client's with the appropriate IPv4 address.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Each packet data simply contains player data stitched into a single char array format then sent to the server application.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
math_t::Vec3f pos = p->model.position;</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
//this packs data into a single char array (tmp)</div>
<div class="separator" style="clear: both;">
// 1 = packet id, %d = ID, %f positionX, %f positionY, %f positionZ, %1f rotation_angle</div>
<div class="separator" style="clear: both;">
//%d for int, %f for float, %1f for double</div>
<div class="separator" style="clear: both;">
sprintf(tmp, "1 %d %f %f %f %lf \n", p->getID(), pos[0], pos[1], pos[2], p->rotation_angle);</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
int size = 0;</div>
<div class="separator" style="clear: both;">
int len = strlen(tmp) + 1;</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
while (size < len)</div>
<div class="separator" style="clear: both;">
{</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>size += SDLNet_TCP_Send(connection, tmp + size, len - size);</div>
<div class="separator" style="clear: both;">
}</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
And that's the current state of our game. We plan to use this to polish our gameplay and test various forms of PVP game types in the near future.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-69399576557979009832014-10-15T16:27:00.004-07:002014-10-17T06:12:59.821-07:00Game Engines Blog 2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipBJKkPgdZOtMvNlup9if3MwP6OtwgXT30SAyycBSEPfBVV8EOBiGBvm-MOsqWxSq8fFwlHi79sn7M8EUgankcGCxBStfCM2HnnLi0xqORFne_618Rg1vh5RdSTTaM-2yW97fHJB0jU8/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipBJKkPgdZOtMvNlup9if3MwP6OtwgXT30SAyycBSEPfBVV8EOBiGBvm-MOsqWxSq8fFwlHi79sn7M8EUgankcGCxBStfCM2HnnLi0xqORFne_618Rg1vh5RdSTTaM-2yW97fHJB0jU8/s1600/1.png" height="225" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;">We’ve decided to change our game idea to a competitive
first person shooter. We wanted our game to have a fast paced, fun and
competitive feel, and by incorporating elements like wall running can add
variation to gameplay similar to Mirror's Edge. Another great aspect was the game's camera
movement, it gives the player a very intense feeling when maneuvering through
obstacles and looks more realistic. These are the elements I want to focus on
the most while my other team member wants to focus on the shooting. <o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HNYTXDAJwQE6Zn8rP50jkhB7kRZsCrnq8Ba9lqe6mnEAd345mftx97MvzzWOLx2Lmiq0BViVLzB5XQVOWaCZSDQd9T95rymDh85VUMvIfIn9dZZhZwjw9i2R9U7FiYVC1285OxXD640/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HNYTXDAJwQE6Zn8rP50jkhB7kRZsCrnq8Ba9lqe6mnEAd345mftx97MvzzWOLx2Lmiq0BViVLzB5XQVOWaCZSDQd9T95rymDh85VUMvIfIn9dZZhZwjw9i2R9U7FiYVC1285OxXD640/s1600/2.png" height="210" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;">So for this week I started to implement basic
movement, physics and model loading into the engine. We want swift movement
along with a wall running mechanic to have fast gameplay. I started off with a
basic camera class that moves in a FPS fashion by calculating the forward,
right and up vectors and moving the entity along those directions. <o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;">I have also created an object class to easily create
new obj entities in the scene in only 3 lines of code. <o:p></o:p></span><br />
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">OBJModel</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> player;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> player.Load(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Crate.obj"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"crateTexture.png"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 107%;"> player.Init(entityMgr, cpoolMgr,
shaderPathVS, shaderPathFS);</span><span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;"><o:p></o:p></span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;">For collision, a map class was made to extract the
vertex information of a map obj file to be used with collision checking. <o:p></o:p></span><br />
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">bool</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Map</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::Load(core_str::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">String</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">model</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, core_str::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">String</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">texture</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Model.Load(</span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">model</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">texture</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> gfx_med::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ObjLoader</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">vert_cont_type</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> model_verts = Model.Get_Vertices();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (gfx_med::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ObjLoader</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">vert_cont_type</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">iterator</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> itr = model_verts.begin(), itrEnd = model_verts.end();
itr != itrEnd; ++itr)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math::types::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vector_TI</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">float</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, 3> vert =
itr->GetPosition();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> mesh.push_back(math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">(vert[0], vert[1], vert[2]));<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//also
needs verts to be transformed by the modelmatrix (NEEDS UPDATING)</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 107%;">}</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 107%;"><o:p></o:p></span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 107%;"><br /></span>
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 107%;">
<u1:p></u1:p></span><br />
<div style="margin-bottom: .0001pt; margin: 0cm;">
<u1:p></u1:p></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 107%;">Once that’s
done I’ve implemented mesh collision between each individual triangle of the
mesh and a sliding sphere.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 107%;"><br /></span></div>
</div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt;">bool</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">camera</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::Collide(core_conts::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Array</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">> </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, input_hid::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">keyboard_b_vptr</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">& </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt;">keyboard</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">)</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">bool</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> result = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">false</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">int</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> verts_size = </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.size();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (verts_size > 0)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">int</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> i = 0; i < verts_size; i += 3)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Collision_Tools</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::GetInstance()->IntersectsTriangle(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Coll_Sphere, </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i], </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i + 1], </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i + 2]))<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> &vertex1 = </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i];<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> &vertex2 = </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i + 1];<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> &vertex3 = </span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">coll_verts</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">[i + 2];<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> closestpt = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Collision_Tools</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::GetInstance()->NearestPointOnTriangle(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Coll_Sphere.center,
vertex1, vertex2, vertex3);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> closestpt_subtr_coll_sphere
= (closestpt - </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Coll_Sphere.center);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> closestpt_subtr_coll_sphere.Normalize();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> PlaneNormal =
closestpt_subtr_coll_sphere;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">float</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> penetrationdepth = abs(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Coll_Sphere.radius -
closestpt.Distance(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->Coll_Sphere.center));<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">float</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> velocityAlongNormal =
velocity.Dot(PlaneNormal);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">float</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> dotangle =
abs(PlaneNormal.Dot(math_t::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Vec3f</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">(PlaneNormal[0], 0, PlaneNormal[2])));<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (dotangle < 0.6f)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->on_ground = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> PlaneNormal[0]
*= 0;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> PlaneNormal[2]
*= 0;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ((dotangle > 0.8f
&& dotangle < 1.2f) && !on_ground)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> wall_normal =
PlaneNormal;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (mode == 1)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> previous_direction
= direction;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> previous_direction[1]
= -0.08f;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (</span><span style="background: white; color: grey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">keyboard</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->IsKeyDown(input_hid::</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">KeyboardEvent</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">::</span><span style="background: white; color: darkslategrey; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">space</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">) || wall_run_timer
> 0)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> wall_run_timer
= 0.2f;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (velocityAlongNormal >
-penetrationdepth)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">->velocity -= PlaneNormal
* (penetrationdepth + velocityAlongNormal);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//this->state.velocityAlongWall =
glm::normalize(this->velocity);</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> result = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> result;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">}</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="font-size: 12.0pt; line-height: 107%; mso-ansi-language: EN-US;">This algorithm calculates the velocity of the player
against a wall. <o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US">For the
rest of the week, I made a prototype testing out the wall running mechanic. In
this example, I made a map where the player needs to wall run across to get to
the other side of the building.<o:p></o:p></span><br />
<span lang="EN-US"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyibFoYFWtqYBtJxhNWAtN4cAaHbvlwD6hdka_PU6cae07ofs6q7z3X8AxWIg2-LI7K7FhgxPWc0AVuzz_kyGtAtdQu0Y8eiBxfY2gXv3ogKCOwaDFCCVESURY9FN3j1JEQqKRl8-xIk/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyibFoYFWtqYBtJxhNWAtN4cAaHbvlwD6hdka_PU6cae07ofs6q7z3X8AxWIg2-LI7K7FhgxPWc0AVuzz_kyGtAtdQu0Y8eiBxfY2gXv3ogKCOwaDFCCVESURY9FN3j1JEQqKRl8-xIk/s1600/3.png" height="400" width="385" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US">This is
done by simply moving the player against the inverted normal of the wall and
moving the player in the forward velocity along the wall. <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-26475341532753473592014-09-25T17:32:00.000-07:002014-09-25T17:34:27.882-07:00Game Engines Blog 1<div class="MsoNormal">
<span lang="EN-US">So for this
week, after getting tloc set up and running I began to look at a couple of
samples. I just wanted to get a camera setup and running with a model so I
looked specifically at the obj loader sample with the arc ball camera. At first
I wasn’t used to the amount of use of inheritance and pointers used in tloc,
but I quickly got used to the entity and component concept because I’ve been
playing around with the Unity game engine all summer and have made some
prototypes using it. I tried changing the positioning and rotation of the
camera however it wasn’t behaving properly so I decided to write my own view
matrix function which returns a 4 by 4 matrix determining where the camera will
look at. This has allowed me to focus the camera on our player object. <o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">math_t::Mat4f GetViewMatrix(<span style="color: blue;">const</span> math_t::Vec3f& eye, <span style="color: blue;">const</span>
math_t::Vec3f& target)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
up = math_t::Vec3f(0.0f, 1.0f, 0.0f);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
zaxis = math_t::Vec3f(eye - target);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> zaxis.Normalize();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
up_cross_zaxis;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> up_cross_zaxis.Cross(up,
zaxis);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
xaxis = up_cross_zaxis;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> xaxis.Normalize();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
zaxis_cross_xaxis;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> zaxis_cross_xaxis.Cross(zaxis,
xaxis);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Vec3f
yaxis = zaxis_cross_xaxis;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">float</span> dot_xaxis_eye = xaxis.Dot(eye);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">float</span> dot_yaxis_eye = yaxis.Dot(eye);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">float</span> dot_zaxis_eye = zaxis.Dot(eye);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Mat4f
viewMatrix(xaxis[0],yaxis[0],zaxis[0], 0,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> xaxis[1],yaxis[1],zaxis[1], 0,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> xaxis[2],yaxis[2],zaxis[2], 0,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> -dot_xaxis_eye, -dot_yaxis_eye, -dot_zaxis_eye,
1);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">return</span> viewMatrix;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US">Next was to
rotate the player box and have the camera follow the rotation and face where
the player is facing. This was simply done by taking in the player’s rotated
angle and calculating the rotation of the camera around the player’s position.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: green; font-family: Consolas; font-size: 9.5pt;">//rorate the entity around the Y axis</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;">void</span><span style="font-family: Consolas; font-size: 9.5pt;"> RotateEntity(<span style="color: blue;">const</span>
core_cs::entity_vptr a_ent, <span style="color: blue;">double</span> angle)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_cs::transform_sptr
transform = a_ent->GetComponent<math_cs::Transform>();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_cs::Transform::orientation_type
orien(transform->GetOrientation());<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: green;">//rotating around Y axis test</span><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> math_t::Mat3f
RotationMatrix((<span style="color: blue;">float</span>)cos(angle), 0, (<span style="color: blue;">float</span>)sin(angle),<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> 0, 1, 0,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> (<span style="color: blue;">float</span>)-sin(angle),
0, (<span style="color: blue;">float</span>)cos(angle));<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"> transform->SetOrientation(RotationMatrix);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br />
I've also added spring physics to the camera so it adds a bit of a delay following the player.<br />
<br />
<div>
<br /></div>
<div>
//camera with spring physics (chase camera) for adding delay while following the player<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>static math_t::Vec3f camVelo(0);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>math_t::Vec3f originalPos = transform->GetPosition();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>math_t::Vec3f targetPos = newCamPos;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>float stiffness = 0.8f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>float damping = 0.15f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>float mass = 0.005f;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>math_t::Vec3f stretch = originalPos - newCamPos;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>math_t::Vec3f force = -stiffness * stretch - damping * camVelo;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>math_t::Vec3f acceleration = force/mass;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>camVelo += acceleration * 0.001f;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>newCamPos = originalPos + (camVelo * 0.001f);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>newCamPos[1] = targetPos[1];</div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvEmCo1KRfY3egc6txp0FCNYCQaZAoPps46l643hUkywhla8l40r6dYH1meGFZjYTdqZXVKKkHKVl0Acq3wXxFFSzDDj5b6R3Pz26Ts4YniP5LuV6gdf3n9W0bvxI6ODhhI0k5EwgK1Y/s1600/blog1pic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvEmCo1KRfY3egc6txp0FCNYCQaZAoPps46l643hUkywhla8l40r6dYH1meGFZjYTdqZXVKKkHKVl0Acq3wXxFFSzDDj5b6R3Pz26Ts4YniP5LuV6gdf3n9W0bvxI6ODhhI0k5EwgK1Y/s1600/blog1pic.png" height="232" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<div class="MsoNormal">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-12218433828364472032014-03-31T00:48:00.004-07:002014-03-31T01:14:12.520-07:00UOIT Game Dev - Development Blog 10 - The art of Journey<div class="separator" style="clear: both; text-align: center;">
<a href="http://thatgamecompany.com/wp-content/themes/thatgamecompany/_include/img/journey/journey-game-screenshot-1-b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://thatgamecompany.com/wp-content/themes/thatgamecompany/_include/img/journey/journey-game-screenshot-1-b.jpg" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For a long time I have been amazed and captivated by the unimaginably beautiful art style of TGC's playstation 3 title "Journey". The game features a robed figure that players control to explore different types of terrain in different climates and the purpose is to reach the peak of the mountain seen in the distance. The gameplay mechanics mainly revolve around simple platforming and collecting pieces of scarves. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
<a href="http://static.giantbomb.com/uploads/original/8/88760/2204681-vlcsnap_2012_05_11_19h58m37s41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://static.giantbomb.com/uploads/original/8/88760/2204681-vlcsnap_2012_05_11_19h58m37s41.png" height="225" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
It was one of the few games I have come across which art style and graphics had brought so much emotion to a player. To me it felt like a disney movie, the design that went into this game was truly beautiful.</div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
So I wanted to look up how the rendering was done for terrain and I've come across several sources including a power point presentation from TGC. </div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZUbxouhyRXglCktdFAemmNtxyYQ5NR3p016aVweVOLILTRiXAgQPnM5jWbkOpscyORA2m9DpNSiZOnRKm9nenb3RZug39JkJXpIiTnZldnyEBnGsBmym48tKUOzikWGBj5CYUkP9nYjk/s3200/journey_shipping.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZUbxouhyRXglCktdFAemmNtxyYQ5NR3p016aVweVOLILTRiXAgQPnM5jWbkOpscyORA2m9DpNSiZOnRKm9nenb3RZug39JkJXpIiTnZldnyEBnGsBmym48tKUOzikWGBj5CYUkP9nYjk/s3200/journey_shipping.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
And not surprisingly, the process takes several steps.</div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<b>- Heightmaps </b></div>
<div class="" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfJ-LH-sDLKT7TsiyAm51OFC9r-_-MyG6SduQMcu0NGfnEPACtgHR35c0UTlDMXkR_zEQ0Gym0M8Txdkhadoxeu6oYN8Ib5mKqN1DL95Y0W0fP6NTqQSp4kLJ97GCbI4X6gv2AupFHv4/s3200/Journey_heightmap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfJ-LH-sDLKT7TsiyAm51OFC9r-_-MyG6SduQMcu0NGfnEPACtgHR35c0UTlDMXkR_zEQ0Gym0M8Txdkhadoxeu6oYN8Ib5mKqN1DL95Y0W0fP6NTqQSp4kLJ97GCbI4X6gv2AupFHv4/s3200/Journey_heightmap.png" height="320" width="160" /></a></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
There are actually 3 types height maps used. A single 256x512 artist generated image was used for generating the terrain, this was done by using B-Spline interpolation to smooth out the hills during real time. I found this to be a really clever way to avoid using a massive resolution height map as it could take up a lot of space. Detail height maps were used to create the ripples in the sand, various types of tiled maps were interpolated between to give the terrain more unique details. And a 3rd type of height map was used to create sand waves.</div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<b>- Diffuse Contrast</b></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAOWroChJBXqWDyrnoduegmqgmEgM6Z9JNybeB5KJ6dWDAkHYI_fv73glL3Tj1ko7LMiIJ2aNUdIYuSN7zF1noAJC41WFtRd2XS5hRWd1oylpjCt5v_8u0_NJ-7_PYvcCILYpzQVGRv0/s3200/Journey_shading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAOWroChJBXqWDyrnoduegmqgmEgM6Z9JNybeB5KJ6dWDAkHYI_fv73glL3Tj1ko7LMiIJ2aNUdIYuSN7zF1noAJC41WFtRd2XS5hRWd1oylpjCt5v_8u0_NJ-7_PYvcCILYpzQVGRv0/s3200/Journey_shading.png" height="119" width="320" /></a></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
A modified version of the Lambertian model was used in the final product, the Oren-Nayar model helped bring out more contrast out of the terrain.<br />
<br />
this is the shader code used:<br />
<br />
<div style="direction: ltr; margin-bottom: 0pt; margin-left: 0in; margin-top: 0pt; mso-line-break-override: none; punctuation-wrap: hanging; text-align: left; unicode-bidi: embed; word-break: normal;">
<span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">OrenNayarDiffuse</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">(
half3 light, half3 view, half3 norm, half roughness )<br />
{<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">VdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> =
dot( view, norm );<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">LdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> =
dot( light, norm );<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">cos_theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> = </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">LdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">;<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_r</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> = </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">acos</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">VdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">
);<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> = </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">acos</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">cos_theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">
);<br />
<span style="mso-spacerun: yes;"> </span>half </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">cos_phi_diff</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> =
dot( normalize( view - norm * </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">VdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> ),</span></div>
<div style="direction: ltr; margin-bottom: 0pt; margin-left: 0in; margin-top: 0pt; mso-line-break-override: none; punctuation-wrap: hanging; text-align: left; unicode-bidi: embed; word-break: normal;">
<span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"><span style="mso-spacerun: yes;"> </span>normalize( light -
norm * </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">LdotN</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> )
);<br />
<span style="mso-spacerun: yes;"> </span>half alpha = max( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">, </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_r</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> )
;<br />
<span style="mso-spacerun: yes;"> </span>half beta = min( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">, </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">theta_r</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> )
;<br />
<span style="mso-spacerun: yes;"> </span>half sigma2 = roughness *
roughness;<br />
<span style="mso-spacerun: yes;"> </span>half A = 1.0 - 0.5 * sigma2 /
(sigma2 + 0.33);<br />
<span style="mso-spacerun: yes;"> </span>half B = 0.45 * sigma2 / (sigma2
+ 0.09);<br />
<span style="mso-spacerun: yes;"> </span><br />
<span style="mso-spacerun: yes;"> </span>return saturate( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">cos_theta_i</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> ) *</span></div>
<!--StartFragment-->
<!--EndFragment--><br />
<div style="direction: ltr; margin-bottom: 0pt; margin-left: 0in; margin-top: 0pt; mso-line-break-override: none; punctuation-wrap: hanging; text-align: left; unicode-bidi: embed; word-break: normal;">
<span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"><span style="mso-spacerun: yes;"> </span>(A + (B * saturate( </span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;">cos_phi_diff</span><span style="color: black; font-family: "Courier New"; font-size: 10.0pt; language: en-US; mso-ascii-font-family: "Courier New"; mso-bidi-font-family: "Courier New"; mso-color-index: 1; mso-fareast-font-family: +mn-ea; mso-fareast-theme-font: minor-fareast; mso-font-kerning: 12.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: black; mso-style-textfill-fill-themecolor: text1; mso-style-textfill-type: solid;"> ) *
sin(alpha) * tan(beta)));<br />
}</span></div>
</div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<b>- Sharpened mip-maps </b></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://atmosfear.crommcruac.com/images/mipmaps.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://atmosfear.crommcruac.com/images/mipmaps.jpg" height="200" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
One issue with mip-mapping is that objects or terrain further in the distance begin to lose a lot of detail and have more of a smoother look. The sand in Journey needs to have more of a grainy look, so sharpened mip-maps were used to bring out the detail and texture of the sand in further distances. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwGVp2Q18EY_o0wahVJ1hYkXrSUN6kfUXsPzEFHb6oqwh25ezUl0jCN291TY7r7ibSJ2Pcz8L7F_M5gT67DW4AVxrWyOyTPR8s-HaVl0FUQwOrf6sMwPpjZhgx_GSZYSHDicC8LHwvCo/s3200/Journey_sharpmipsOFF.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwGVp2Q18EY_o0wahVJ1hYkXrSUN6kfUXsPzEFHb6oqwh25ezUl0jCN291TY7r7ibSJ2Pcz8L7F_M5gT67DW4AVxrWyOyTPR8s-HaVl0FUQwOrf6sMwPpjZhgx_GSZYSHDicC8LHwvCo/s3200/Journey_sharpmipsOFF.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Sharp mip-maps off</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYxz4AFfwsvVYUWVcCm6dcASKy1AizTqUmoi83M14bm9bT2xtoONqWVj2Qpkzj5nCTmRyA6PoEKHho5HryPBRRvB9Qm5tIg4J5yETsCpZNTcVPHREQtKCfs0zRBCTeWueMN3v6FStH3hQ/s3200/Journey_sharpmipsON.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYxz4AFfwsvVYUWVcCm6dcASKy1AizTqUmoi83M14bm9bT2xtoONqWVj2Qpkzj5nCTmRyA6PoEKHho5HryPBRRvB9Qm5tIg4J5yETsCpZNTcVPHREQtKCfs0zRBCTeWueMN3v6FStH3hQ/s3200/Journey_sharpmipsON.png" height="224" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Sharp mip-maps on</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<b>- Specular glitter</b></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpccSOYMX2ZnmYYgALEW0DVp8O2lMFXEH4qqgbtumcW-8Rpd_11UuDvgS3IQ8H4-M1u6LtDhy_nDew9HfN1fdwLjlnaYlxj5H_VH7hRBCcxl4nfGbiKVSUBi0FmqepN9nUGuDxdvzc4Qk/s3200/Journey_sand.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpccSOYMX2ZnmYYgALEW0DVp8O2lMFXEH4qqgbtumcW-8Rpd_11UuDvgS3IQ8H4-M1u6LtDhy_nDew9HfN1fdwLjlnaYlxj5H_VH7hRBCcxl4nfGbiKVSUBi0FmqepN9nUGuDxdvzc4Qk/s3200/Journey_sand.png" height="239" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
When I first saw the game, what stood out to me the most was the glittering sand effect. Naturally, sand is comprised of rocks and minerals that reflect like sharp crystals shining specular sun light into our eyes giving that glitter effect.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyua5f8KN1gdTI18284dqlf4l-civddcADmxVdkh0oJZJvKxEk-olAxOEQLe5lhwQ4zV38g_JSkrewABKTb-DY43uEUukeZOrZmS3qbznDE0SRTL9MNsLcFFrSlfE5MoEassUu8DuQom4/s3200/Journey_noise.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyua5f8KN1gdTI18284dqlf4l-civddcADmxVdkh0oJZJvKxEk-olAxOEQLe5lhwQ4zV38g_JSkrewABKTb-DY43uEUukeZOrZmS3qbznDE0SRTL9MNsLcFFrSlfE5MoEassUu8DuQom4/s3200/Journey_noise.png" height="320" width="229" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Most of the sand texture was derived from noise normal maps. This was used bring out the specular detail of individual grains of sand. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>- Anisotropic masking</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The effect had an issue though, some parts of the terrain had an unusual concentration of glitter which gave an unnatural feel. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQP1V1y9tKIUn0PT2lRjUpxysJAg0VgzAnbXBX1znuLYk9nNxguEAj5J-cHVVqiCS8kULlK82uD30jtoC317F46bJ1AZpagNkJNWHHeMouBVEkZEYZifUcJxb3qA1252qXWQa5EsTkd2k/s3200/Journey_Ano.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQP1V1y9tKIUn0PT2lRjUpxysJAg0VgzAnbXBX1znuLYk9nNxguEAj5J-cHVVqiCS8kULlK82uD30jtoC317F46bJ1AZpagNkJNWHHeMouBVEkZEYZifUcJxb3qA1252qXWQa5EsTkd2k/s3200/Journey_Ano.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To solve this, a mip-mapped texture containing values based on distances from the camera filters out the inappropriate specular highlights. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8l8MiB5VqzICiQ-KTk3XiRVzNLVIPjAK7XTN0kgJvoGYH0-ra-38_xx2eqMvT3ZOUIi4WJZgiCzERbKld3TdtyvGR3VaKBTWxUPQnbeE0Nh0VEq33ZkYq-jQkYBZ8wqIsH9MDg01-K4w/s3200/Journey_Ano2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8l8MiB5VqzICiQ-KTk3XiRVzNLVIPjAK7XTN0kgJvoGYH0-ra-38_xx2eqMvT3ZOUIi4WJZgiCzERbKld3TdtyvGR3VaKBTWxUPQnbeE0Nh0VEq33ZkYq-jQkYBZ8wqIsH9MDg01-K4w/s3200/Journey_Ano2.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And that's most of it, the rest include fluid simulation, a dust system and bloom. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is my 10th and final post and I would like to mention that I've learned so much over the past year. Computer graphics is truly amazing and you don't need to be a mathematician to do it, games like Journey have inspired me to really dive into it. This year I didn't really have too much time as I liked on shaders, building a 3D game from scratch and incorporating all of the functionality was a challenge. However, next year we get to use a pre-built game engine and I definitely plan to give shaders a lot of attention and create a beautiful game. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Thank you for reading :)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com1tag:blogger.com,1999:blog-3784260815555988914.post-89636578668177428842014-03-23T20:28:00.003-07:002014-03-23T20:31:47.049-07:00UOIT Game Dev - Development Blog 9 - Motion BlurSo this week we've covered motion blur in games, which is pretty interesting. I've always had an idea but never really understood how it was properly done. When objects move fast in a scene, or when the viewer camera moves at a quick pace objects in scene become blurry. When you record something with a camera and quickly rotate it, the image will have a quick horizontal blur effect.<br />
<br />
This is because when a camera captures incoming light, depending on the shutter speed, the image sensor will be exposed to light for a period of time. When an object moves quick enough, you are essentially exposing the camera to multiple frames which become blended together and averaged. The objects or pixels that remain roughly in the same position become clearer than the rest when averaged.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://api.ning.com/files/UKR6RTdFcZk1rRqt6yb1yPZeWNSXpGTH4p6*s9QoaqRrqt2GW1Biqvdgwl6OTUCczgYG*deNuBRelcVoaJKOFx2WFjmw63Zx/motionblurphotos16.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://api.ning.com/files/UKR6RTdFcZk1rRqt6yb1yPZeWNSXpGTH4p6*s9QoaqRrqt2GW1Biqvdgwl6OTUCczgYG*deNuBRelcVoaJKOFx2WFjmw63Zx/motionblurphotos16.jpeg" height="266" width="400" /></a></div>
<br />
<br />
<b>How do we do it in games?</b><br />
<br />
- Old fasion way.<br />
<br />
Simulate real life, create a buffer that takes in multiple frames over a period of time and average it. Last frame will have the highest weight for blending. It's basically emulating how a normal camera would function, we record a number of frames of an interval, and slowly over time each frame will become less visible. Although practical, this method is obviously very inefficient and can be slow as a number of frames need to be rendered.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://what-when-how.com/wp-content/uploads/2012/05/tmp1cfe198_thumb2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://what-when-how.com/wp-content/uploads/2012/05/tmp1cfe198_thumb2.png" height="151" width="320" /></a></div>
<br />
<br />
<br />
- Modern way<br />
<br />
We have something called motion or velocity vectors, and we basically take a few things into account. In the first pass we extract each pixel position from the current scene, then we take those positions, transform it from screen space back to world space with the inverted camera view projection matrix, then we use the previous camera view projection matrix to get the pixel at the previous frame's position. So we have 2 versions of the pixel, 1 in the last frame's position and the one in the current frame's position. We simply take the difference of the two and that would give us a velocity vector or the direction and length of the blur for that pixel.<br />
<br />
I was really excited to try to implement this technique as it seemed pretty straight forward. I think this technique would really compliment out quick paced GDW game.<br />
<br />
Unfortunately, this turned out to be a lot more difficult than I thought. My implementation looked awful and the screen jitters strangely. There was probably something wrong in transforming the pixel locations or related calculations. Oh well..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.gagful.com/uploads/2012_5/1337404942_at_least_you_tried_gag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.gagful.com/uploads/2012_5/1337404942_at_least_you_tried_gag.jpg" height="313" width="320" /></a></div>
<br />
On the bright side though, I did come up with a makeshift simple motion blur shader that doesn't take the pixel position into account and does a cool sweep blur when you turn the camera quickly. It doesn't require 2 passes and looks pretty nice anyway.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7kmKhTyAb9WmMKmsMNRAyon3FlS5FHASO_DcX9objkJ1dYegbeslBZypAgCLkSUBW3NbR0-SK9A8E89TwlDbUMRyrs4czX0-RcfFm5xQAZAVYhJBqLghP4ZNsqCYxKgmBHbNSEyoe1E/s1600/lameMotionblur.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7kmKhTyAb9WmMKmsMNRAyon3FlS5FHASO_DcX9objkJ1dYegbeslBZypAgCLkSUBW3NbR0-SK9A8E89TwlDbUMRyrs4czX0-RcfFm5xQAZAVYhJBqLghP4ZNsqCYxKgmBHbNSEyoe1E/s1600/lameMotionblur.png" height="233" width="400" /></a></div>
<br />
<br />
<br />
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-31959563117094803272014-03-16T20:56:00.003-07:002014-03-16T21:02:07.555-07:00UOIT Game Dev - Development Blog 8 - The Portal ChallengeSo this week instead of another lecture, we were given a challenge. And that challenge was to create functioning portals from the game Portal in 1 hour and 30 minutes. This was a very interesting challenge since prior to that class I wasn't able to successfully render FBO textures to 3D quads.<br />
<br />
So we formed a group of 4 and began to brainstorm thoughts. First thing was to get an actual quad in there, so all I did was model a plane in Maya and imported it into my game. Then we tried to render "something" onto that plane, we wanted to have the quad display the scene from our camera's perspective.<br />
<br />
What I did next was use my HDR shader class to render the scene to an FBO texture. I drew the scene in the first pass to get the scene texture, then render it again with the quad's texture replaced with the FBO texture.<br />
<br />
What happened next was weird. Although we were able to render something on the quad, the texture looked really stretched, all we could see were lines of colour. It took us about 10 minutes to figure out what was wrong and it turned out to be the way we declared the texture parameters for our FBO texture. I replaced the parameters with the same ones we used to load our texture for the models and it worked flawlessly.<br />
<br />
So with that out of the way we wanted 2 portals with each of them displaying the scene. This was really simple as we simply repeated step1.<br />
<br />
Now how do we make it so one portal displays what ever the other portal is looking at? hmm....<br />
Well this requires more passes and saved camera transformations.<br />
<br />
We saved the initial camera matrix prior to rendering, took our camera and set it up on Portal A's position and view then rendered the scene. We did the same with Portal B and now there are 2 scene textures available rendered at 2 different locations.<br />
<br />
All we did for the final render pass was apply Portal B's scene texture to Portal A and vice versa.<br />
This pretty much did the trick, however we still didn't have parallax working so it seemed strange to have the portal display a static image.<br />
<br />
But luckily this was an easy fix, we simply took the directions from the camera to each of the portal positions, found out the angle of the direction, then rotated it about 180 degrees to face the player. This was the final tweak that allowed us to come up with a functioning portal (other than the actual physics part lol).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnBt619rmb8lNoyp_egx-_fiAsDhvWp9IFqzPsCKZLAb_5qFl0BnmI1u8zUMlX_aKjpeJMkY8vxNQdWgkN4KVIPbVrUMiSVJyVgJNyBA_dAnX4860y_kZsD21nP3UejQshYyOkpRlqAU/s1600/tETmUBFi28-JuXJChdKGp_HbbJoFxapIdsLqr8nd4QA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnBt619rmb8lNoyp_egx-_fiAsDhvWp9IFqzPsCKZLAb_5qFl0BnmI1u8zUMlX_aKjpeJMkY8vxNQdWgkN4KVIPbVrUMiSVJyVgJNyBA_dAnX4860y_kZsD21nP3UejQshYyOkpRlqAU/s1600/tETmUBFi28-JuXJChdKGp_HbbJoFxapIdsLqr8nd4QA.png" height="207" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
On the development side, I've finally decided to implement tangent space normal mapping. It added a lot more detail to our map and looks pretty nice. Also, Gimp's normal mapping plugin is amazing and pretty much allowed me to make normal maps in less than a minute. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKG1LZTa01nJDsLZx20isiDra63ZDnW4bDDFfanD5eigQn1LyRv_CniOJhSP3aMdETgUhtl942kA0d163X4kJs-qcru8HaWJJizivx-NAjzkGPK-8Uy_DgHZxluMVgZ-kUYy6tnpw6iJI/s1600/sokhXo3WJudoJJ5yzXv8rixU78VLN5tpzMAqt9H5Exk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKG1LZTa01nJDsLZx20isiDra63ZDnW4bDDFfanD5eigQn1LyRv_CniOJhSP3aMdETgUhtl942kA0d163X4kJs-qcru8HaWJJizivx-NAjzkGPK-8Uy_DgHZxluMVgZ-kUYy6tnpw6iJI/s1600/sokhXo3WJudoJJ5yzXv8rixU78VLN5tpzMAqt9H5Exk.png" height="223" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Well, that's all for this week. Our game is near beta, we should have all of the functionality done by next week. </div>
<br />
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-83543645644004444302014-03-09T18:45:00.000-07:002014-03-09T18:58:15.394-07:00UOIT Game Dev - Development Blog 7 - Road to Alpha<b>The progress so far...</b><br />
<div>
<br /></div>
After all of the assignments and midterms being thrown at us in the third month, I have finally found some time to work on our game once again. There is roughly 3 weeks left and a lot of things still need to be implemented. Thankfully, we have done the majority of the gameplay in the past week and have a lot of the core mechanics working as well.<br />
<br />
I have finished up our night level "Nightfall" which should be the second map the player plays during the campaign. <br />
<br />
The enemies are properly implemented with path following and chase behaviours. I have implemented a Game Manager class that will take care of managing things like (enemy spawn locations, wave wait time, wave count, when to end the wave and camera). Each wave, the game manager will spawn more enemies with higher stats and will also determine how many waves until the player is completed the level.<br />
<br />
In terms of mechanics for our character, I've decided to take some inspiration from one of my favourite childhood games "GunZ: the duel". In it the player can do things like wall run and roll which makes the gameplay really fast paced and fun. So now our character can roll in any direction and also run a long walls which is pretty neat.<br />
<br />
In addition, we have added turrets to our level, the player may spawn turrets to aid in battle once they have the required amount of resources. These turrets will aim and shoot at nearby enemies when intersecting the attack radius.<br />
<br />
Lastly for aesthetic purposes, I have made use of our particle system to create a volumetric fog-like effect. It worked out pretty nicely and makes the overall map look a lot better.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOdET-YHcIbOHJSU983pa0iCmBUjUfXMEe2p3B_Zl3UqsigVjcL8Vizhtsjkp_4Sl2gphoKuKIrZlKtEIM_RHpOUa9BFEhnwJYLLppbbVhORh7ZfZ_HTbAjL49GsHfe1TIOeJxOAexUus/s1600/nf1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOdET-YHcIbOHJSU983pa0iCmBUjUfXMEe2p3B_Zl3UqsigVjcL8Vizhtsjkp_4Sl2gphoKuKIrZlKtEIM_RHpOUa9BFEhnwJYLLppbbVhORh7ZfZ_HTbAjL49GsHfe1TIOeJxOAexUus/s1600/nf1.jpg" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We now have a few things left to do:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
- get our card system working</div>
<div class="separator" style="clear: both; text-align: left;">
- add in the additional enemies and their behaviours</div>
<div class="separator" style="clear: both; text-align: left;">
- add in the 2 last weapons</div>
<div class="separator" style="clear: both; text-align: left;">
- have a function generator or nexus for the player to defend</div>
<div class="separator" style="clear: both; text-align: left;">
- work on the other levels (shouldn't be difficult once we have all of the mechanics in place)</div>
<div class="separator" style="clear: both; text-align: left;">
- tighten up the graphics on level 3 <a href="https://www.youtube.com/watch?v=BRWvfMLl4ho">https://www.youtube.com/watch?v=BRWvfMLl4ho</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-91900097690191790442014-02-16T18:03:00.000-08:002014-02-17T09:18:03.008-08:00UOIT Game Dev - Development Blog 6 - Size MattersThis will be different from my usual blog posts about computer graphics, instead it will be more of a journal entry about our team's experience developing a 48 hour game for The Great Canadian Appathon, and the things I've learned.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJFHirQI_IhsRcEl4pszMYP9C6JdSVFI5qeiB5RkdMWoWfc5sGPa-_YG3tWyGZmBmWZxyeikjlDoNr1nBglryUcyziG1aR20YG6cAP1_QLsO9OgbM1nHuCRfRgE8c9aT8jeQmCEi22bE/s1600/small_GCA4_Website_Banner_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJFHirQI_IhsRcEl4pszMYP9C6JdSVFI5qeiB5RkdMWoWfc5sGPa-_YG3tWyGZmBmWZxyeikjlDoNr1nBglryUcyziG1aR20YG6cAP1_QLsO9OgbM1nHuCRfRgE8c9aT8jeQmCEi22bE/s1600/small_GCA4_Website_Banner_5.png" height="158" width="400" /></a></div>
<br />
When the theme "Fantasy" was announced, I had no clue what to think about. Well, other than dragons, fairies, mage and knights, there was very little I can come up with for a mobile game. So after class we headed over to Jord's place to figure out what we were going to make.<br />
<br />
There were a couple of ideas thrown around, very indie ideas like entering a white spacious room and what not. After a couple of minutes we decided to brain storm interesting mechanics rather than story. Ok so the theme was fantasy and we knew the majority of the teams were going to make quest games, or games where you fight a dragon, but we wanted to come up with some mechanic that very few games have.<br />
<br />
We also took into consideration that this was going to be played on mobile devices, so we later agreed on some sort of infinite runner. Infinite runners are quite popular, I personally enjoyed games like "Robot Unicorn Attack", "Subway Surf" and "Temple Run". Also, these type of games really allow us to focus on the mechanics while only making 1 continuous level, so the scope was pretty easy to follow. We essentially wanted to make a very simple game with 1 fun mechanic.<br />
<br />
After 20 minutes of brainstorming, Josh came up with the brilliant idea of scaling the level while running. Both me and Jord thought he was talking about scaling the character instead, however we all loved that idea too. We thought of ways one can change the dynamics of the game when the character is in 3 different size states:<br />
<br />
<b>Small: Jump highest, fit through tunnels, fall slower</b><br />
<br />
<b>Regular: jump 1 block high, fall at normal speed</b><br />
<br />
<b>Large: break through blocks, walk over small holes, fall faster</b><br />
<br />
That's all we thought of really, but we were certain that there was at least a couple of games out there that have this main mechanic already. To our surprise, there weren't any endless runner we could find or think of that had it.<br />
<br />
So instantly we knew what we wanted to make, an infinite runner where you can scale the character. Simple.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmgOGsX7rfmAgUqs1JoiKowo_lgwge8QQk_O7iMBOFby0c7IGVz5-jjTYiVQES8CM-SI7swc2VhDjiSWmVIi-ShEOLsN4LkJKpLzJcSii8FUmmzxo-4YFTakjVd7kgMBEreby1Yy9BGY/s1600/1513655_667686743254659_1060697908_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmgOGsX7rfmAgUqs1JoiKowo_lgwge8QQk_O7iMBOFby0c7IGVz5-jjTYiVQES8CM-SI7swc2VhDjiSWmVIi-ShEOLsN4LkJKpLzJcSii8FUmmzxo-4YFTakjVd7kgMBEreby1Yy9BGY/s1600/1513655_667686743254659_1060697908_n.jpg" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Soon after, we headed over to the room where they were hosting the event. After a short introduction, Jord and Josh went ahead and discussed about art styles. It wasn't too long until Harry showed up to join our team since his previous group had lacked programmers. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The day was pretty productive. However, since I was new to programming in Unity, I had run into a bunch of annoyances and script errors. But by the end of the day I've managed to get a basic random level sequence generator working. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oI0r4mZT5FnaTMkARoMF7kBA2Wll_oFd_ab3S9NtV4vJvIOwzXzKHwFJZUYvma1pCLl6o52plY73rTRNjjMmJ6bfeeLma1yoUX-vEF_4KHK08LNngdMxbYmqMcgb_P2plYtVa1S5I7M/s1600/tiletest.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oI0r4mZT5FnaTMkARoMF7kBA2Wll_oFd_ab3S9NtV4vJvIOwzXzKHwFJZUYvma1pCLl6o52plY73rTRNjjMmJ6bfeeLma1yoUX-vEF_4KHK08LNngdMxbYmqMcgb_P2plYtVa1S5I7M/s1600/tiletest.png" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The numbers represent the index for the different types of blocks that will be made to scroll while the character is running. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
On the second day, I woke up and found that Jord had finished the scaling mechanic and was able to run it on the phone. The full character running animation was also completed. After implementing my random level sequencing along with some basic placeholder tiles, I began to play with the mechanics. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPE8rBJN-ZZX6K9CE-ZrHzxNie6wR6DnirAR-bM1llYJnqWOparbVeykJQXjd-1h_8uFyskItYFFudRBfNSVYjtzonT26uHVS_R3qma2QGTZ2hJVN3om3rr4lzLvWY-OsCnK5lJt73A1c/s1600/main+run.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPE8rBJN-ZZX6K9CE-ZrHzxNie6wR6DnirAR-bM1llYJnqWOparbVeykJQXjd-1h_8uFyskItYFFudRBfNSVYjtzonT26uHVS_R3qma2QGTZ2hJVN3om3rr4lzLvWY-OsCnK5lJt73A1c/s1600/main+run.png" height="64" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I discovered right away the amount dynamics this mechanic can offer. For instance I would sometimes jump too early and would normally crash into a block, but if I change the mouse's size to the smallest amount at the last second I would still be able to make the jump. Just playing around with the sizing mechanic alone felt pretty enjoyable and I immediately believed that this game had a lot of potential. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The third day we pretty much had almost all of our assets completed, all was needed was completing the tile arrangements and level design. We wanted to get all of the assets and functionality in as soon as possible to allow us more time for polishing and play testing. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIprfCIVttvNh7mt-WpwCkDvTlrq33ONXzvMg02q-CrDTJWVMLnqB3zX48kph3rlu9mZ6SZlSbqmCBmeTAhb3WGQleLSO8KKJfxvj6KjVx2iiCOfQg0zp0o_8jLfv_bc0iAIRDQYlvPk/s1600/scrn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIprfCIVttvNh7mt-WpwCkDvTlrq33ONXzvMg02q-CrDTJWVMLnqB3zX48kph3rlu9mZ6SZlSbqmCBmeTAhb3WGQleLSO8KKJfxvj6KjVx2iiCOfQg0zp0o_8jLfv_bc0iAIRDQYlvPk/s1600/scrn.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
During this process there was a lot of reiteration done changing the tile arrangements. We didn't want the levels to feel too difficult nor did we want them to be too simple. This was probably the most tedious process, not only did I have to arrange tiles in a way that allowed difficulty to be balanced but I also had to make sure that every single set can be randomly sequenced behind one another without making it impossible for the player to surpass. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A couple of hours have passed, we've managed to get a working game with a points system. There was about 2-3 hours left before the submission deadline and we immediately ported what we had over to the phone for others to test out. The response was quite positive, people seemed to like the idea and learned about the mechanic rather quickly. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We even had the founder of XMG Studio Ray Sharma come play our game in the last hour during his surprising visit at UOIT (What are the odds? lol). I remember him saying that our game was one of the better ones he had played. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After further polishing and adding in all of the menus, we finally submitted the game and celebrated. It felt good making a whole game in only 48 hours, and we were pretty proud of what we've accomplished. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It wasn't until a week later until we found out about making the top 25 list. 3 UOIT teams have managed to make it in total which was pretty amazing. We were all excited and looked forward to the following week where they will reveal the top 15.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtiS5n_x2w4d401W2TckqjoS2_BpuBcOgstN4ZkGjEqGFohF5L-5w2iohWPTGbdHCgggAOZo9hmpTHXf7BdibtM_RsPb73lRV-JMjKVY5qM_SSuyMQzG4SNFaOCQoz_b-3wEqZnI331Y/s1600/75917_10152136701618346_658316076_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtiS5n_x2w4d401W2TckqjoS2_BpuBcOgstN4ZkGjEqGFohF5L-5w2iohWPTGbdHCgggAOZo9hmpTHXf7BdibtM_RsPb73lRV-JMjKVY5qM_SSuyMQzG4SNFaOCQoz_b-3wEqZnI331Y/s1600/75917_10152136701618346_658316076_n.jpg" height="300" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Thursday of the following week, I was pretty anxious to find out if we have made it to the top 15 list. That alone would have satisfied me at the time since the 15 teams get a special invite to the "Canadian Open Data Experience" (CODE). Also, making it that far would already be a great achievement to put on our resumes. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It took a while for XMG to release the list, but as soon as they did I immediately began to look for our Team. I scrolled down to finally find our name and was relieved to see it on there. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
...After a closer glance, I was surprised to find that we had not only made the top 15, but we were among the 3 finalists! I really couldn't believe it at the time, it was quite shocking and I didn't really think we'd make it this far. It was one of the most exciting moments I've had in a long time. My other group mates were in joy of finding out the news and we were all super excited. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaZGEQgASSMEovIGzyPpcNbSnNW1xz6HXUKxL38dZLd9jpb0aT4HC9TPoykK64fDhYbzeFB8JGRIs4YdYRb-gUDN9VFC7NG5btawX9RWLyqVJ4wT6jiW4NXmWNpf-p1pKomwzguQNyc4/s1600/1743728_10151928482739135_1685638545_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaZGEQgASSMEovIGzyPpcNbSnNW1xz6HXUKxL38dZLd9jpb0aT4HC9TPoykK64fDhYbzeFB8JGRIs4YdYRb-gUDN9VFC7NG5btawX9RWLyqVJ4wT6jiW4NXmWNpf-p1pKomwzguQNyc4/s1600/1743728_10151928482739135_1685638545_n.jpg" height="320" width="316" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Next week...</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We prepared for our 5 minute pitch presentation about the game and headed straight to Toronto. It was long ride there but we made it. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xwnDACxiErrkejoS4dB5fb3mGcJbjy4IiJMT-IrdVL34gSxdzBxr9WIo5s_bt-4RYLSWXtGX6K9bq5Z7ehRSmkIQklpn__1oWCh5ukWNy-y-d82_1RPBv-_tQH1MzRKpv3RMNEZKD5c/s1600/IMG_0782.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xwnDACxiErrkejoS4dB5fb3mGcJbjy4IiJMT-IrdVL34gSxdzBxr9WIo5s_bt-4RYLSWXtGX6K9bq5Z7ehRSmkIQklpn__1oWCh5ukWNy-y-d82_1RPBv-_tQH1MzRKpv3RMNEZKD5c/s1600/IMG_0782.JPG" height="300" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The venue was like some sort of VIP party, there were XMG employees, industry people, photographers and people from the media. Phones and tablets were on display with the top 15 games on it for people to play. Free food and drinks were offered to everyone and there was also a DJ playing music. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It was simply amazing.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We also met two other students from UOIT including Kevin. His game won an award for most challenging game play. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHevuSE0nSSfBDscVVnPE2cHB-IEqfjbP43Otz43sh1ZxLAnkWSU-RONOhGWIHzfspwuAJPEM9SHlKZ69eO-xu32Ktsl7LbvRoZbOmESNqYajQyWKLabkhrzDNau6lninqc1tZkFCVa0/s1600/IMG_0780.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHevuSE0nSSfBDscVVnPE2cHB-IEqfjbP43Otz43sh1ZxLAnkWSU-RONOhGWIHzfspwuAJPEM9SHlKZ69eO-xu32Ktsl7LbvRoZbOmESNqYajQyWKLabkhrzDNau6lninqc1tZkFCVa0/s1600/IMG_0780.JPG" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpE4K5Ezwfx-CnIo8-hOC9x55QX0zud9zWBgeN-_cCJnKDjOw10BCYLQVTWH9UgTgZRP37yQwx-3QOEdBWeAIdpFkfIlHqL89WzvZ16tpq40RRHPvbgmeTkLej4dRO7K-b4LlZEB0t4I/s1600/IMG_0775.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpE4K5Ezwfx-CnIo8-hOC9x55QX0zud9zWBgeN-_cCJnKDjOw10BCYLQVTWH9UgTgZRP37yQwx-3QOEdBWeAIdpFkfIlHqL89WzvZ16tpq40RRHPvbgmeTkLej4dRO7K-b4LlZEB0t4I/s1600/IMG_0775.JPG" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After a good hour of networking, everybody headed over to the other room in order to prepare for the top 3 teams to pitch their games.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8S_YO2vYYU0gqajF0y3LpAwdaIZAbwrxpJOD2Y7C_mnZYwtF1UALCojNDlhpESO2Aj_KnAwE-S_xJvvbjjV0thAMSeVx4-JHVaoUlppWvlgq7PktpHjGZQoVYT23Ll-LDkGi5VvlVz8/s1600/IMG_0787.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8S_YO2vYYU0gqajF0y3LpAwdaIZAbwrxpJOD2Y7C_mnZYwtF1UALCojNDlhpESO2Aj_KnAwE-S_xJvvbjjV0thAMSeVx4-JHVaoUlppWvlgq7PktpHjGZQoVYT23Ll-LDkGi5VvlVz8/s1600/IMG_0787.JPG" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
The host along with the founder Ray Sharma gave an introduction speech and showed a brief history video about the The Great Canadian Appathon.<br />
<br />
After some cheers and applause, it was time for us 3 teams to present.<br />
<br />
Both teams from UofT had pretty interesting games<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOhvmUlGbUYredtrUaZkErSz98QwVhdTp1RM2DD_LdARoRc0xp6chBcXXh8QC28vAaN4f4kPgq-QBUoyN8tM2DYW-bua534Ed8YCnv8Iul4s6ubPKo23N7TirqGXmqvRjJx80sE28kNk/s1600/BgZWBDeCQAA5UK-.jpg-large.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOhvmUlGbUYredtrUaZkErSz98QwVhdTp1RM2DD_LdARoRc0xp6chBcXXh8QC28vAaN4f4kPgq-QBUoyN8tM2DYW-bua534Ed8YCnv8Iul4s6ubPKo23N7TirqGXmqvRjJx80sE28kNk/s1600/BgZWBDeCQAA5UK-.jpg-large.jpeg" height="240" width="320" /></a></div>
<br />
<br />
Team Last Minute's "Wild Fire" is a game where you have to utilize the touch screen to drag the villagers away from the dragons and into a safe home.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg67ng-hTc2pCblDOE2zj7-GgAhZ5Iajvzs0VyXT42_7Glg9Ola1VxBNprAW-4ERmJgDK0ainAyIZLv2bPmmFSFYF-XD6pvaZZdd2JP8YLTy03KWk7DbcLv1xJGS2oFkyIvNyW4itoFs/s1600/BgZW7yyIcAADMNN.jpg-large.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg67ng-hTc2pCblDOE2zj7-GgAhZ5Iajvzs0VyXT42_7Glg9Ola1VxBNprAW-4ERmJgDK0ainAyIZLv2bPmmFSFYF-XD6pvaZZdd2JP8YLTy03KWk7DbcLv1xJGS2oFkyIvNyW4itoFs/s1600/BgZW7yyIcAADMNN.jpg-large.jpeg" height="240" width="320" /></a></div>
<br />
Team Cool Beans with "Kingdom Crushers" had a cool concept where you mine 3 different types of ores with 3 different types of miners, each miner must be used with their specific type of rock earning resource in order to defend your castle.<br />
<br />
Then it was our turn to present our game "Size Matters".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkfneL4EVhyczwZ6OlD5HKnjsqxngrl2e1e9b4vQL38ZxVFXxvey_xPjG1UK24Et0rsNUtUrf7yTgL9uR2M0QBDP87adJcNIXqDutuppi7bP2ZTBitFIMMwxAYUrspgC-ycdJ3LIQopI/s1600/BgZYsxACYAAy4nm.jpg-large.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkfneL4EVhyczwZ6OlD5HKnjsqxngrl2e1e9b4vQL38ZxVFXxvey_xPjG1UK24Et0rsNUtUrf7yTgL9uR2M0QBDP87adJcNIXqDutuppi7bP2ZTBitFIMMwxAYUrspgC-ycdJ3LIQopI/s1600/BgZYsxACYAAy4nm.jpg-large.jpeg" height="240" width="320" /></a></div>
<br />
<br />
After our 5 minute pitch, the judges questioned about why we had a giant worm chasing a mouse... There wasn't really a good explanation behind that random design decision, so we did our best to answer and laughed it off. We sat back down and the judges proceeded to leave the room to decide on the winners. This was the most anticipating moment of the night.<br />
<br />
Tony Clement finally came on stage and began delivering a speech.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghbLHYoMCOKqUKaUs8gQY38L4rTl_YiMJOlrEHEquMiJ2z-vRBhpuCbJTo0Yi9vPRhDVhqMF4kzijbQ-uaxeoOfTlRuADKVnYdvsD8PabTmuF87wevqEaxCfvvTdcVtAWqJg7OpBQ67Gc/s1600/BgZese-IIAAVxzU.jpg-large.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghbLHYoMCOKqUKaUs8gQY38L4rTl_YiMJOlrEHEquMiJ2z-vRBhpuCbJTo0Yi9vPRhDVhqMF4kzijbQ-uaxeoOfTlRuADKVnYdvsD8PabTmuF87wevqEaxCfvvTdcVtAWqJg7OpBQ67Gc/s1600/BgZese-IIAAVxzU.jpg-large.jpeg" height="300" width="400" /></a></div>
<br />
It wasn't long until we were up there with the President of the Treasury Board holding a big check for 25 grand. It all occurred really fast and I was still in shock about everything that had happened. I don't think I've ever felt this much success before, and I really couldn't have done it without our team.<br />
<br />
It's amazing how something you can make in 48 hours can bring you so much and take you so far. 2 days was all it took, and the amount of things I've learned from this and the Game Jam alone is unimaginable.<br />
<br />
Thank you for reading :)<br />
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-78400471255394198662014-02-08T23:53:00.004-08:002014-02-09T00:01:51.496-08:00UOIT Game Dev - Development Blog 5 - ShadowsIn terms of visuals, shadows play a very important role in games. It can make a very simple yet dull scene look beautiful. It adds depth, allowing the player to see how far or tall an object is, and it can also give the player a sense of elevation by looking at the shadow cast by a floating object.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dragengine.rptd.ch/wiki/lib/exe/fetch.php/dragengine:modules:opengl:imprshalig.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dragengine.rptd.ch/wiki/lib/exe/fetch.php/dragengine:modules:opengl:imprshalig.png" height="160" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://dragengine.rptd.ch/wiki/lib/exe/fetch.php/dragengine:modules:opengl:imprshalig.png)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://gameangst.com/wp-content/uploads/2010/01/psm0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://gameangst.com/wp-content/uploads/2010/01/psm0.jpg" height="179" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://gameangst.com/wp-content/uploads/2010/01/psm0.jpg)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.geeks3d.com/public/jegx/200910/hd5770_shadow_mapping_near_light_8192x8192.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.geeks3d.com/public/jegx/200910/hd5770_shadow_mapping_near_light_8192x8192.jpg" height="258" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://www.geeks3d.com/public/jegx/200910/hd5770_shadow_mapping_near_light_8192x8192.jpg)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I can go on and on, but the main point is that shadows add so much more detail and realism to a game which can make all the difference visually. So there are a few ways games do shadows in real time:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Screen Space Ambient Occlusion</b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawKRcIOUzsZzdzS0OOXQszuMVE29ZStvvNj7hEttRa6ZFiuWqwNd5vww13Y1pBQGZpC3pz3l3N58YhOFC1DYXlqZQTTH7CUwS_N4PbYGB6p8l01Zw50rz-I4z9_HJr_gmnp-3WeANTfM/s1600/AO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawKRcIOUzsZzdzS0OOXQszuMVE29ZStvvNj7hEttRa6ZFiuWqwNd5vww13Y1pBQGZpC3pz3l3N58YhOFC1DYXlqZQTTH7CUwS_N4PbYGB6p8l01Zw50rz-I4z9_HJr_gmnp-3WeANTfM/s1600/AO.jpg" height="227" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawKRcIOUzsZzdzS0OOXQszuMVE29ZStvvNj7hEttRa6ZFiuWqwNd5vww13Y1pBQGZpC3pz3l3N58YhOFC1DYXlqZQTTH7CUwS_N4PbYGB6p8l01Zw50rz-I4z9_HJr_gmnp-3WeANTfM/s1600/AO.jpg)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This technique basically takes the rendered depth scene, samples it and darkens areas in which objects occlude one another. Essentially, if an object or mesh is close to one another, then light around that area will bounce an extra amount of times losing intensity creating a slight darkness. So we would need to take a pixel of the rendered screen, sample the neighboring pixels (occluders) rotate them, then reflect them around a normal texture. This technique is quite effective in adding detail to a scene while sampling 16 or less times per pixel. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Radiosity</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://upload.wikimedia.org/wikipedia/commons/5/55/Radiosity_Comparison.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Radiosity_Comparison.jpg" height="160" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
(http://upload.wikimedia.org/wikipedia/commons/5/55/Radiosity_Comparison.jpg)</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
While global illumination looks stunning, it simply can't be done in real time due to the number of rays needed to compute such a scene. Radiosity can be a solution as it minimizes the amount of computation needed to create a decently lit scene. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I think this link does a very good job explaining the algorithm.(http://freespace.virgin.net/hugo.elias/radiosity/radiosity.htm)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Basically, there are several passes to this technique, during each pass we have to account for all the polygons in the scene and look through their perspective. The more light it sees the more lit it will be, and after a few passes it can collect light from other lit polygons. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Shadow Mapping</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://fabiensanglard.net/shadowmappingPCF/simpleShadowMap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://fabiensanglard.net/shadowmappingPCF/simpleShadowMap.jpg" height="251" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is probably the most widely used technique. Most easily done with direction lights, we take the perspective depth from the light's point of view creating a depth texture. This depth texture will be used to determine which pixels of the scene from the camera's point of view will be in shadow. During the scene pass we would have to convert each scene pixel to the coordinate from the light's point of view and finally determine if there's anything in front of it. This 2 pass algorithm gives us a realistic shadow projection from objects in the scene. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Previous tests</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcvSnpjoFPJiu8BJtzVXM1A9yy4M0YT4WR2ftKkjfejYdFaFJZ3q1umEBWi0KI6Z6mMjbOZiLOww2yNZ39dME9bjy9kNQWm3bT6gJ22UfGvwP7fMhyphenhyphenPPqz602wxvR-rBgRa6V_jIS5Ck/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcvSnpjoFPJiu8BJtzVXM1A9yy4M0YT4WR2ftKkjfejYdFaFJZ3q1umEBWi0KI6Z6mMjbOZiLOww2yNZ39dME9bjy9kNQWm3bT6gJ22UfGvwP7fMhyphenhyphenPPqz602wxvR-rBgRa6V_jIS5Ck/s1600/Untitled.png" height="308" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've played with some shadow mapping in the past and I quickly realized of the limitations created by this algorithm. In the scene above you can see 2 things right away; the shadow is a bit pixelated and there is a cut off point near the top of the image. This is because shadow maps are stored on a texture with a limited resolution. While it worked fine for a small area of the scene, 1 shadow map wouldn't work for a larger scene as individual shadows will lose a lot of detail and become fuzzy. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the prototype submitted for last semester, I essentially clipped the light projection to the character's position so there would always be a crisp shadow no matter where he goes. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvza2qhYmcRxHO8VZXhaP5Vqg0zcB2zHJhZoxm1Dn5qdUDVzI3mh2FGhcLFRQYRzHvbd_yP2FqA4rsmSgUIoMUICD_hI0MvCN8lAd6jl0OMT7qUu4h6xbzik1X7CgC5lfneaBlgnUE1NI/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvza2qhYmcRxHO8VZXhaP5Vqg0zcB2zHJhZoxm1Dn5qdUDVzI3mh2FGhcLFRQYRzHvbd_yP2FqA4rsmSgUIoMUICD_hI0MvCN8lAd6jl0OMT7qUu4h6xbzik1X7CgC5lfneaBlgnUE1NI/s1600/Untitled.png" height="215" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I don't know much about the cascaded shadows mapping yet but I assume it's something similar where you have a shadow projection clipped to each object then compute the final scene through multiple shadow maps. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-58551339194220431012014-02-01T22:47:00.001-08:002014-02-01T23:22:16.749-08:00UOIT Game Dev - Development Blog 4 - HDR and frustrations with Deferred Shading<b>This week...</b><br />
<br />
So we've been talking about blurring techniques and how they are applied in computer graphics. Conveniently some of the techniques were already mentioned in my previous blog so the material wasn't new to me, but what had really caught my attention was the down sampling technique.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.cg.cs.tu-bs.de/static/teaching/seminars/ss12/CG/webpages/Maximiliano_Bottazzi/images/BlurAwareHeader.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.cg.cs.tu-bs.de/static/teaching/seminars/ss12/CG/webpages/Maximiliano_Bottazzi/images/BlurAwareHeader.png" height="139" width="320" /></a></div>
<div style="text-align: center;">
(http://www.cg.cs.tu-bs.de/static/teaching/seminars/ss12/CG/webpages/Maximiliano_Bottazzi/images/BlurAwareHeader.png)</div>
<div style="text-align: center;">
<br /></div>
It's a pretty neat trick. All you really need to do is scale down the image losing pixel information, then scale it back up creating a more pixelated/blurred version. I might give this a try sometime in the near future.<br />
<br />
I've always had mixed feelings about HDR bloom. When used correctly, games can really benefit from it and look a lot brighter, however sometimes it can be too bright or too blurry (like the one below) which can outright distract the player ruining the experience.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/lwk8w.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/lwk8w.jpg" height="180" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://i.imgur.com/lwk8w.jpg)</div>
<br />
But I'm really interested in figuring out how dynamic light exposure is done in games. When playing certain maps with a lot of daylight in Counter Strike Source, I would walk out of a dark area (like a tunnel) and my whole screen would be blinded by light for a split second, then it would go back to normal. Similarly, I can walk into a darker area and have my screen dimmed before adjusting to the darkness. This just seems so cool and natural, hopefully I will have some time in the future to implement this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://in.hl-inside.ru/TrainHDR.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://in.hl-inside.ru/TrainHDR.jpg" height="180" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://in.hl-inside.ru/TrainHDR.jpg)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>What I've been working on...</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
My main focus was trying to get multiple lights to render in our game. I've looked up a lighting technique called "Deferred shading" which was brought up in the first week or two of class. To be honest, I've never really understood this technique at first, calculating and rendering lights in a frame buffer really confused me.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But after reading a couple of web pages on the topic, I finally understood the concept. We essentially need to create something called the G buffer, which job is to store pixel data (position, color, normal, etc) from the rendered geometry. We then bind those textures in the light pass using the appropriate pixel data to calculate the light intensity. This is a lot more efficient since we are only calculating light data on the visible pixels in a frame. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So I created the G buffer and the passthrough shader to output the appropriate values:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJpPdZJ8W0B3LmEORYnoi-oEEXWVLeWjhvy9JBko_F8NNrfccnVysecqg2k5jaQq4ytBj8VTnbZL3_OpFTxuE85oNKLPQ0ejDFk_cdjjc5GjBjtPC60TXE1R3zV8OUwfOb2QeW9qPDaw/s1600/scrn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJpPdZJ8W0B3LmEORYnoi-oEEXWVLeWjhvy9JBko_F8NNrfccnVysecqg2k5jaQq4ytBj8VTnbZL3_OpFTxuE85oNKLPQ0ejDFk_cdjjc5GjBjtPC60TXE1R3zV8OUwfOb2QeW9qPDaw/s1600/scrn.png" height="212" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
No problems there, it works fine. So then I uniformed the textures into my light pass shader calculating a simple directional light. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIDpUDhbrDnvGvAMG3_twOpRlrG5C0lE50xCZCs3ToLtWvj7_hhPzbtfawCmpOU8FAL_ju689QKc37b2Z70BBxd4EdhfqkoLdm-TA7TzAGLqXGa39VTDoLQtUEB7uRnPm8eN9bJe42HIM/s1600/scrn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIDpUDhbrDnvGvAMG3_twOpRlrG5C0lE50xCZCs3ToLtWvj7_hhPzbtfawCmpOU8FAL_ju689QKc37b2Z70BBxd4EdhfqkoLdm-TA7TzAGLqXGa39VTDoLQtUEB7uRnPm8eN9bJe42HIM/s1600/scrn.png" height="213" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It seems to work fine, the correct values are being passed over and the final result looked rather accurate. But there's 1 thing in particular that bothered me, and that was the noticeable drop in frame rate. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Why was this happening?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Isn't deferred shading suppose to be more efficient?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've spent hours trying to figure what was wrong and the frame rate was simply unacceptable. While I was unable to fix this issue, I've discovered something in the geometry pass that was causing the lag. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
fragPosition = position;</div>
<div class="separator" style="clear: both;">
fragDiffuse = texture(myTextureSampler, UV).xyz;</div>
<div class="separator" style="clear: both;">
fragNormal = normalize(normal);</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
for some reason, outputting the position and normal values creates a strain on processing. I simply commented out the following</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
//fragPosition = position;</div>
<div class="separator" style="clear: both;">
fragDiffuse = texture(myTextureSampler, UV).xyz;</div>
<div class="separator" style="clear: both;">
//fragNormal = normalize(normal);</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
and it ran smooth, but of course I wasn't able to compute the light since I had missing values. After a few more hours I finally gave up and decided to go with forward rendering for the multiple lights. It's really unfortunate but I guess I will seek help next week in hopes of resolving the issue.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Right before writing this blog, I spent the entire day working on the lighting for our night level. This is what I have so far:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtz169dMSg_TUzcgNWHK9VynkPk06tC8EvQxTdnfjOP1NUivgCWZc9xuHIy5qcWfBPsKj7Z8XE5ejLIIjOFjPERH2g9TzacvPFrRhqI0BBvqwA2sRWEktzAlKYn_R37lSmfPC9HTXxJg/s1600/nightfall2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtz169dMSg_TUzcgNWHK9VynkPk06tC8EvQxTdnfjOP1NUivgCWZc9xuHIy5qcWfBPsKj7Z8XE5ejLIIjOFjPERH2g9TzacvPFrRhqI0BBvqwA2sRWEktzAlKYn_R37lSmfPC9HTXxJg/s1600/nightfall2.png" height="206" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeR3efRkewMCt5zlZXZEdgJZDjNzFkf7DP7K94XTYLF6vCIBbA-ubbGGH32ZnzWjn0v2BKictcLyB_JsoJvhp6C_4zuYbStAPvlOqIY7rVIjtPnpRvfqZwSzeIttOfXl9faHnu9KbJA0/s1600/nightfall.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeR3efRkewMCt5zlZXZEdgJZDjNzFkf7DP7K94XTYLF6vCIBbA-ubbGGH32ZnzWjn0v2BKictcLyB_JsoJvhp6C_4zuYbStAPvlOqIY7rVIjtPnpRvfqZwSzeIttOfXl9faHnu9KbJA0/s1600/nightfall.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It mainly consist of point lights and glowing objects for now. I plan on adding a lot more to the scene next week, hopefully it will look a lot better by then. </div>
<div class="separator" style="clear: both;">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com1tag:blogger.com,1999:blog-3784260815555988914.post-84339473192662640062014-01-25T11:57:00.002-08:002014-01-25T12:10:29.323-08:00UOIT Game Dev - Development Blog 3 - Shading techniques ...and Glow!<b><u>What we've covered...</u></b><br />
<br />
Alright, so this week we've gone through the following shading techniques:<br />
<br />
<br />
Emissive: emits light or simulates light originating from an object.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://udn.epicgames.com/Three/rsrc/Three/Lightmass/SmallMeshAreaLights.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://udn.epicgames.com/Three/rsrc/Three/Lightmass/SmallMeshAreaLights.jpg" height="128" width="200" /></a></div>
<div style="text-align: center;">
(http://udn.epicgames.com/Three/rsrc/Three/Lightmass/SmallMeshAreaLights.jpg)</div>
<div style="text-align: center;">
<br /></div>
Diffuse: a light ray that is cast and reflected from a surface and scattered into different directions<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/17.png" height="200" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/17.png)</div>
<br />
Ambient: Basically, a really simply hack to simulate light bouncing around or "light that is always there". It is lighting that lights up the model even when there are no lights around.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/images/dirdiffonlyvert.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/images/dirdiffonlyvert.gif" height="124" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/images/dirdiffonlyvert.gif)</div>
<br />
Specular: it shows a bright spot of light simulating light reflection. It is often used to give surfaces a metallic or reflective look.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/19.png" height="200" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://www.directxtutorial.com/Lessons/9/B-D3DGettingStarted/3/19.png)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Also, the last 3 techniques are combined to make the "phong" shading model </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tomdalling.com/wp-content/uploads/800px-Phong_components_version_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://tomdalling.com/wp-content/uploads/800px-Phong_components_version_4.png" height="111" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://tomdalling.com/wp-content/uploads/800px-Phong_components_version_4.png)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
By adding all of these components together, we get a nice reflection which is a basis for most lighting techniques. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b><u>The math...</u></b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To perform light calculations you'll need components like a vector's normal vector, light source position, view direction, reflected light vector (there's way more but these are just the most common ones).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Diffuse </b>is done by taking the dot product of the normal and light direction vectors. This will give you an intensity from 0 to 1 which you multiply with your final color. values closer to 0 will give a darker color while values closer to 1 will give you a brighter color. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
so it should look like : DiffuseLight = N dot L * DiffuseIntensity;</div>
<div class="separator" style="clear: both; text-align: left;">
and of course you can factor in a intensity variable shown above to adjust how bright it would be. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Specular </b>is done by obtaining the reflected light vector then getting the dot product of the view direction and reflected light vector. Once our view direction gets closer to the reflected light, the value becomes closet to 1, which is how we get that spot of light on a surface.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
SpecularLight = pow((R dot V), SpecularShininess);</div>
<div class="separator" style="clear: both; text-align: left;">
in this one you can factor in a shininess variable, and set the specular value to the power of a certain value to intensify it. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Ambient </b>is the easiest of them all, all you'll need to do is hard code in a set color value like (0.1,0.1,0.1) and you're done! this allows the object to be lit in areas where there is no light present. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
AmbientLight = vec3(0.1,0.1,0.1);</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
then you just add them all together to get the final color.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
FinalColor = AmbientLight + DiffuseLight + SpecularLight;</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>We've also covered toon/cel shading which is pretty interesting..</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dailyemerald.com/wp-content/uploads/2013/09/Wind-Waker-Windfall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dailyemerald.com/wp-content/uploads/2013/09/Wind-Waker-Windfall.jpg" height="180" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(http://dailyemerald.com/wp-content/uploads/2013/09/Wind-Waker-Windfall.jpg)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Toon shading isn't really difficult, you're just doing the same shading techniques like the ones mentioned earlier however the final color values are clamped into specified ranges, giving that cartoony effect. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Now back on the development side...</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We really need nice glow and holographic effects for our game since it takes place in a vibrant night city. </div>
<div class="separator" style="clear: both; text-align: left;">
I've done a bit of research and came across this article</div>
<div class="separator" style="clear: both; text-align: left;">
(http://www.gamasutra.com/view/feature/2107/realtime_glow.php)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
after reading it, I found it to be actually pretty simple. I've come up with a few ideas...</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's what I did.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Have 2 different types of textures, 1 regular texture and 1 glow texture.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgmA9Ggn5lBsDSNqVXMDRqGPDkFI-jA9IM3xllLspplm7zGyhd54_rcI7ipcizTruywKfh_p5ZBjHmCT04ax1f8pi3qaXOlBk5njUPo0jmcGPjsdgCbOSn3TaSO0yl5WXLqjhFMBzfpo/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgmA9Ggn5lBsDSNqVXMDRqGPDkFI-jA9IM3xllLspplm7zGyhd54_rcI7ipcizTruywKfh_p5ZBjHmCT04ax1f8pi3qaXOlBk5njUPo0jmcGPjsdgCbOSn3TaSO0yl5WXLqjhFMBzfpo/s1600/Untitled.png" height="233" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(Kevin Pang's shotgun texture)</div>
<div class="separator" style="clear: both; text-align: center;">
(for glow texture, all black pixels won't glow)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Create multiple frame buffers to store the glow and blurring post processing effects.</div>
<div class="separator" style="clear: both; text-align: left;">
This will need multiple draw passes</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pass 1: render all geometry with the glow texture applied</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-TJFnPQxCTY9z0pd85nkOWR2en-7uUNu3_PvRnh_IAsniMwp9DJYgcauQCZeBQ_MNLE4JlnVgsdO7h0tY7DwV3yy37-gm-2f2xhVNV58_huw7QlLZdEboqX5wWv7l3txb2eEUhXzi-o/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-TJFnPQxCTY9z0pd85nkOWR2en-7uUNu3_PvRnh_IAsniMwp9DJYgcauQCZeBQ_MNLE4JlnVgsdO7h0tY7DwV3yy37-gm-2f2xhVNV58_huw7QlLZdEboqX5wWv7l3txb2eEUhXzi-o/s1600/scrn1.png" height="215" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pass 2: Ok now blur everything using gaussian blur (this step actually takes 2 passes to blur things horizontally then vertically)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCN2m-RY2YZp1wVpw2BJdJYqtIDynUdxVU1xGOzKDyd1k2b-drzb_wLb6KBYxISI9Cyecbpj4m1nt0MdEgJcVBxVJDRUZe8qMOVGhA9tPOrdTlxnQx7vognZIwG-bf9lyxgG5lILIbl4Y/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCN2m-RY2YZp1wVpw2BJdJYqtIDynUdxVU1xGOzKDyd1k2b-drzb_wLb6KBYxISI9Cyecbpj4m1nt0MdEgJcVBxVJDRUZe8qMOVGhA9tPOrdTlxnQx7vognZIwG-bf9lyxgG5lILIbl4Y/s1600/scrn1.png" height="215" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pass 4: Render objects normally with normal textures</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8uJpiyjdEx4DQC79eu82OdgP6Bd59gTHNKjXBIIccS3JjBTBNslTq3KOKI7jSoUaG4fhxJMrkYdVBHZBMomwzXAsFaDyjD_6qD40AlbNm0xkEav1GpFdnQ-GMrCBZWYisAYvMRZltw4g/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8uJpiyjdEx4DQC79eu82OdgP6Bd59gTHNKjXBIIccS3JjBTBNslTq3KOKI7jSoUaG4fhxJMrkYdVBHZBMomwzXAsFaDyjD_6qD40AlbNm0xkEav1GpFdnQ-GMrCBZWYisAYvMRZltw4g/s1600/scrn1.png" height="215" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pass 5: Apply the final glow frame texture onto the regular scene frame and BAM</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYtCNDAdfo28LFKs6OuCkocvBfEhHJSwOOqZ37rJgdF5sfkv1f9M_BQClDliTSZ93YAFNhF86iHalUkhMc5sqHquWJJUleaH3kbJFU2w750fUKrxK5AZzG_UjV76k_nTkFOO5ZGVuch4/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYtCNDAdfo28LFKs6OuCkocvBfEhHJSwOOqZ37rJgdF5sfkv1f9M_BQClDliTSZ93YAFNhF86iHalUkhMc5sqHquWJJUleaH3kbJFU2w750fUKrxK5AZzG_UjV76k_nTkFOO5ZGVuch4/s1600/scrn1.png" height="268" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
My group members including myself agree that it makes things pop a lot more, and I'm quite happy with this effect. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvZBkH1bsHe7onSWrlzSJcQkSW6yP7-y621ZvnY0ilZMRio2PzzrvrQFqzI7wIOXpC0h5_G8y4B25Ug89-3YONgwbrr7J1siUJlxla-k5bpOl2InmpkarMenO-CqljzpBNvFCaQwQ1_E/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvZBkH1bsHe7onSWrlzSJcQkSW6yP7-y621ZvnY0ilZMRio2PzzrvrQFqzI7wIOXpC0h5_G8y4B25Ug89-3YONgwbrr7J1siUJlxla-k5bpOl2InmpkarMenO-CqljzpBNvFCaQwQ1_E/s1600/scrn1.png" height="268" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMbP6fka_sZPttcwUBzvA6BhYxoc4pMUDN8xpQMHL2xB8yIZNgb1mR76f5-LojfjIqDL-r7SCVpqwWpkAIjToYrcHu4LW_EUNpJZ4utBkomEl_nMAio8q4mpYYKXgkW0R7UoGouJRUEfQ/s1600/scrn1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMbP6fka_sZPttcwUBzvA6BhYxoc4pMUDN8xpQMHL2xB8yIZNgb1mR76f5-LojfjIqDL-r7SCVpqwWpkAIjToYrcHu4LW_EUNpJZ4utBkomEl_nMAio8q4mpYYKXgkW0R7UoGouJRUEfQ/s1600/scrn1.png" height="268" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(hologram test lol)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I'll be looking forward to using this effect in my night city. Well, that's all for this week, later!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-30170708841556934212014-01-19T17:14:00.004-08:002014-01-19T17:24:46.117-08:00UOIT Game Dev - Development Blog 2<u><b>What we've learned this week...</b></u><br />
<br />
This week we've been covering the graphics pipeline, along with VBOs and FBOs.<br />
<br />
The graphics pipeline consists of several stages. You create your vertices or have it loaded from an object loader, store them into an array and send it off to the vertex shader. The vertex shader will then convert the vertices into screen space by multiplying it with the projection and view matrix. Once that's done the vertices will be assembled into primitives forming a shape which will then be rasterized into a 2D image. Next, the fragment shader will sample textures with UV coordinates to fill in the pixels with rgb color values. Then finally, the result will be displayed on the screen framebuffer.<br />
<br />
What's beautiful about this pipeline is that it allows a programmer the flexibility to modify and affect the resulting image by changing the way this pipeline affects an object's vertices or the object's lighting through the use of mathematical algorithms conducted with the vertex attributes (position, normals, uvs) .<br />
<br />
Our framework uses custom shaders to render various lighting techniques like phong, diffuse, and lambert shading.<br />
<br />
VBOs (Vertex Buffer Objects) allow vertex data to be stored on video memory for easy access without having to send it over each frame. There are many methods to store vertex data in these buffers, a common way (the way our framework is currently doing it) is creating 3 separate buffers for the position, normals and uvs.<br />
<br />
glGenBuffers(1, &tempMesh.vertexbuffer);<br />
glBindBuffer(GL_ARRAY_BUFFER, tempMesh.vertexbuffer);<br />
glBufferData(GL_ARRAY_BUFFER, tempMesh.vertices.size() * sizeof(glm::vec3), &tempMesh.vertices[0], GL_STATIC_DRAW);<br />
<br />
glGenBuffers(1, &tempMesh.normalbuffer);<br />
glBindBuffer(GL_ARRAY_BUFFER, tempMesh.normalbuffer);<br />
glBufferData(GL_ARRAY_BUFFER, tempMesh.normals.size() * sizeof(glm::vec3), &tempMesh.normals[0], GL_STATIC_DRAW);<br />
<br />
glGenBuffers(1, &tempMesh.uvbuffer);<br />
glBindBuffer(GL_ARRAY_BUFFER, tempMesh.uvbuffer);<br />
glBufferData(GL_ARRAY_BUFFER, tempMesh.uvs.size() * sizeof(glm::vec2), &tempMesh.uvs[0], GL_STATIC_DRAW);<br />
<br />
However, I decided that I'm going to interleave the data storing it in 1 single buffer after hearing about the benefits of it during Dan's tutorial. So soon enough, I should have 1 buffer that contain the vertex data in this fashion [position1, normal1, uv1, position2, normal2, uv2, position3...]<br />
<br />
FBOs or (Frame Buffer Objects) is essentially a location in video memory that stores color data (rgb values). These can be used for many various shader effects like shadow mapping and all the cool post processing effects like bloom, motion blur, glow and shadow mapping.<br />
<br />
I plan on using the the post processing method discussed in this article to create a glow effect for our night city level. http://www.gamasutra.com/view/feature/2107/realtime_glow.php<br />
<br />
<b><u>On the development side...</u></b><br />
<br />
My challenge for the week was blending and running 2 different animations into 1. Our shooter game like many 3rd person shooters involves having the upper body animate independently from the legs much like Nathan Drake from Uncharted. Basically, we need to allow the character to reload, shoot or switch weapons at any time while running or walking without interruption.<br />
<br />
This was not an easy task as we can't simply just replace the upper torso bone transformations with the second animation skeleton. If 2 animations have different transformations with the spine bone, the animation would have an unnatural torso offsetting from the legs.<br />
<br />
Instead, I just decided to replace the torso bones local transform with the new animation bones, then peform forward kinematics again each frame reconstructing the skeleton. This has allowed the animator to make any upper body animation they'd like and still have the spine body connect with the legs without having an offset.KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-26319380601916452012014-01-09T23:35:00.002-08:002014-01-10T07:53:28.494-08:00UOIT Game Dev - Development Blog 1Welcome to my very first blog post about my second year university experience in the Game Dev program at UOIT. I will be posting a blog per week for the next 10 weeks regarding the things I've learned in our graphics class and the development (graphical side) of our game. I hope you enjoy :)<br />
<br />
After a good long winter break, I feel refreshed and ready to start learning new things. This year is off to a good start, none of our group members have dropped out so our studio is still still intact.<br />
<br />
We've been working on a game since September called "Project Horizon". This game features a guy running around with a sword in a futuristic floating city.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh31caF1Qto9ZcCxdeKP-L4ZEml0l3XSudBWGkSU86KQWuf79CRgm04GFzo0JI6WqVJd8uz8lI7-zedPXtmgXxfuSHoD_cvFY3eYYj_n88lVLSeJWDNOZbwe0YBlnTL5pUp1in3Wlu7aZ8/s1600/presentation_scrn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh31caF1Qto9ZcCxdeKP-L4ZEml0l3XSudBWGkSU86KQWuf79CRgm04GFzo0JI6WqVJd8uz8lI7-zedPXtmgXxfuSHoD_cvFY3eYYj_n88lVLSeJWDNOZbwe0YBlnTL5pUp1in3Wlu7aZ8/s1600/presentation_scrn.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you can see there are already some shading techniques used in this demo such as shadow mapping and bloom. However there are still a lot of things lacking such as multiple lights, normal mapping, bump mapping etc. So I was excited to start our second semester intermediate graphics course.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After a brief introduction to the course, we were taken through the syllabus and then after we were revealed the homework questions. Knowing that our year has only slightly touched on shaders I expected the questions to only contain the basic textbook fundamentals like phong, reflection, multi-lights etc. BUT much to my surprise some of the questions involves very interesting shading techniques that got me very excited like:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Ambient Occlusion</i></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Motion Blur</i></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
and</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Fluid Dynamics</i>?! (Woah)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Needless to say I am very excited to learn and implement all of these techniques into our game and this class automatically became my favorite course of the semester.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Back on the development side, knowing that we only have 4 months remaining, we have decided to re-scope our game. Instead of traversing through a large linear level, the player would be fighting waves of enemies in a smaller arena like level. This re-scoped game has sprung up a new issue, and it is that the framework must be able to handle large volumes of enemies at the same time. The problem with this is that the skinning operations is quite expensive on CPUs.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
While this was good for what we imagined before (few enemies along the linear path), sending thousands of vertex data every frame wasn't exactly efficient. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As a simple stress test, I tried to run as many copies of our characters at one time. The results were very poor, the game was only able to support a maximum of 4 characters before the frame rate drops. This was bad.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
So I finally decided to look into GPU skinning, and it turns out not to be all that difficult! It only requires you to send the mesh and weights data over once, and simply uniform over the bone matrix transformations each frame. Then within the vertex shader, multiply each vertex with the appropriate bone transformations along with the corresponding weight factors. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Thats it! and boom now we can have 16 characters (each with over 3000 vertices and 37 bones) and still run at a good frame rate. Our enemies contain much less polygons and bones, and with a few adjustments we should be able to hopefully handle over 30 enemies at one time. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjrnb5VzAiMIUsynu_rsJBFaQEWHKPeoTEQEv8Xpz5RXmCBYByt_TdP1UeYFUht98aswOGSohsF-oLtT3MW3oMS78_MDmhWeuiKsgWTQtvc_f3dhyphenhyphenWMEi45Qu0cDCD5j9F1mPZ5_0Zw1w/s1600/gpu_skinning.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjrnb5VzAiMIUsynu_rsJBFaQEWHKPeoTEQEv8Xpz5RXmCBYByt_TdP1UeYFUht98aswOGSohsF-oLtT3MW3oMS78_MDmhWeuiKsgWTQtvc_f3dhyphenhyphenWMEi45Qu0cDCD5j9F1mPZ5_0Zw1w/s1600/gpu_skinning.png" height="210" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For future implementations, I plan on adding motion blur when turning the camera, glow for our night level, normal mapping along with bump mapping for surface detail, ambient occlusion and hopefully various particle effects for our enemies. </div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-51025926493061285422013-04-10T06:56:00.000-07:002013-04-13T16:08:10.281-07:00<span id="goog_60502476"></span><span id="goog_60502477"></span><br />
Feel free to check out the trailer for the game "Bits"<br />
<a href="http://vimeo.com/63971245?fb_action_ids=487518097969514&fb_action_types=og_vimeo%3Aupload&fb_ref=og_api&fb_source=timeline_og&action_object_map=%7B%22487518097969514%22%3A101723060028037%7D&action_type_map=%7B%22487518097969514%22%3A%22og_vimeo%3Aupload%22%7D&action_ref_map=%7B%22487518097969514%22%3A%22og_api%22%7D">http://vimeo.com/63971245?fb_action_ids=487518097969514&fb_action_types=og_vimeo%3Aupload&fb_ref=og_api&fb_source=timeline_og&action_object_map=%7B%22487518097969514%22%3A101723060028037%7D&action_type_map=%7B%22487518097969514%22%3A%22og_vimeo%3Aupload%22%7D&action_ref_map=%7B%22487518097969514%22%3A%22og_api%22%7D</a><br />
<br />
Thanks to Seymour Zeynalov for making the video!KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-35928809514425581642013-04-09T16:26:00.000-07:002013-04-09T16:28:35.253-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8XnjcLbml2TezUCHfUnhQv69rmNTnlcVpq9gJHX3RX1-g9cpVbXLUoqx6E1ECfBtVbekvjWUVMgpPJdcAhuXOxLowPJX_vy4bzl7G1j8NRq5Uh8oNqcf62_BIpaca9oXvEpKYnrtZ8SA/s1600/68900_10151511003373346_1046007182_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8XnjcLbml2TezUCHfUnhQv69rmNTnlcVpq9gJHX3RX1-g9cpVbXLUoqx6E1ECfBtVbekvjWUVMgpPJdcAhuXOxLowPJX_vy4bzl7G1j8NRq5Uh8oNqcf62_BIpaca9oXvEpKYnrtZ8SA/s320/68900_10151511003373346_1046007182_n.jpg" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
We won 1st year people's choice award for our game "Bits" at UOIT!</div>
<div>
<br /></div>
KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-90602020108227938852013-04-04T09:11:00.000-07:002013-04-04T09:11:13.392-07:00Had a good time showcasing our game "Bits" at the Toronto Design Exchange!<br />
<br />
planning to post updates on the game soon.KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-66785080187507608812013-02-13T18:07:00.006-08:002013-02-13T18:07:52.231-08:00Looks like our game "Misery Ship" was nominated for the "Coolest Premise Award"<br />
http://www.escapistmagazine.com/videos/view/the-escapist-presents/6789-2012-Indie-Speed-Run-AwardsKennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-62851984135100207822013-01-28T08:35:00.000-08:002013-01-28T08:35:17.222-08:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7709mL-eGHwWfusSwLJzCNvtmUfmNpGl-svxMuIiDO1KvKGZC-Oe2BhYyE-0XC3G0cbNEO48Nou8OYkA9xOsLruyp8Xk57aQck4RCEkkTIhOu31EW22wSB57z3MeOMdKeBbPAwISFvm8/s1600/ScreenShot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="397" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7709mL-eGHwWfusSwLJzCNvtmUfmNpGl-svxMuIiDO1KvKGZC-Oe2BhYyE-0XC3G0cbNEO48Nou8OYkA9xOsLruyp8Xk57aQck4RCEkkTIhOu31EW22wSB57z3MeOMdKeBbPAwISFvm8/s400/ScreenShot.jpg" width="400" /></a></div>
<br />
Finally done our game "Follow your heart" after participating in Global Game Jam 2013.KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-54209141230249788812013-01-05T20:17:00.002-08:002013-01-23T07:38:35.682-08:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenZNWNZfeP7eUbEmm6m-1exaGWcJqw2Wb1nH4DFz90zOdBJdM6eh0Nh60HOrBsBy48bfmmOMuDE53M5ajl-Uap8y35dNyHIk14ErsOtds-wAfXLMtqcMYupGgEsWgiad2aQ6TGQyEBbk/s1600/MiseryShip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenZNWNZfeP7eUbEmm6m-1exaGWcJqw2Wb1nH4DFz90zOdBJdM6eh0Nh60HOrBsBy48bfmmOMuDE53M5ajl-Uap8y35dNyHIk14ErsOtds-wAfXLMtqcMYupGgEsWgiad2aQ6TGQyEBbk/s400/MiseryShip.png" width="400" /></a></div>
<br />
Here's a game we made for the 48 hour 2012 Indie Speed Run game jam "Misery Ship".<br />
<br />
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 28px;">"Have you guys tried Misery Ship? It's got a fun little twist ending:"</span><br />
<span style="color: #333333; font-family: Georgia, Times New Roman, serif;"><span style="font-size: 22px; line-height: 28px;">- Indie Speed Run</span></span><br />
<br />
https://twitter.com/IndieSpeedRun/status/294102703120986112KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-6805452880015492062012-12-19T18:30:00.000-08:002012-12-19T18:30:55.184-08:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVCDwvdfX9pen_iTrLPlzt970rgWWLgOAN7pIss0v1rLWtMe8ChOqtZ5pcrCxVQkFbSOSqhc7HWcZJMKQNOkwvyhYMHWQDeAmI8jNrzhmYc7Ja-2eS4WTxM7FzF18cYljkCK8VGzg6H0/s1600/bits.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVCDwvdfX9pen_iTrLPlzt970rgWWLgOAN7pIss0v1rLWtMe8ChOqtZ5pcrCxVQkFbSOSqhc7HWcZJMKQNOkwvyhYMHWQDeAmI8jNrzhmYc7Ja-2eS4WTxM7FzF18cYljkCK8VGzg6H0/s400/bits.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">Excited to work on our second semester University game project Bits!</span></div>
<br />KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-39239422750837260692012-12-11T14:42:00.003-08:002012-12-11T14:42:49.777-08:00My university UOIT mentioned about our Appathon game's success in an article.<br />
<br />
http://news.uoit.ca/archives/2012/12/fbit-game-development-students-capture-award-in-2012-great-canadian-appathon-.php<br />
<br />
Thanks!KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0tag:blogger.com,1999:blog-3784260815555988914.post-55454911862091228242012-11-10T08:58:00.004-08:002012-11-11T11:14:19.334-08:00My iOS game "Stickma" is finally up on the app store! Check it out.<br />
<a href="https://itunes.apple.com/us/app/stickmav1/id576070041?ls=1&mt=8" rel="nofollow" style="background-color: white; color: #3b5998; cursor: pointer; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 13px; line-height: 17px; text-decoration: initial;" target="_blank">https://itunes.apple.com/us/app/stickmav1/id576070041?ls=1&mt=8</a><br />
<br />
<br />
<br />
(Update) Stickma has reached nearly 3000 downloads in less than 2 days!KennyWhttp://www.blogger.com/profile/12448155249955873495noreply@blogger.com0