tag:blogger.com,1999:blog-75318864377899523142024-03-13T07:59:18.463-07:00Michael's BlogAnonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-7531886437789952314.post-3610855706366290582013-12-13T00:25:00.000-08:002013-12-13T00:25:13.250-08:00Domain Specific Languages: Concept and Implementations in all 3 #UOITGameDev Projects<div class="MsoNormal">
A Domain Specific Language (DSL) is essentially a mini language which is
designed to solve specific set of problems. In other words, with language like
C++, the programmer can do almost anything they desire but with a DSL they can
only do a finite list of similar tasks designed to solve one specific problem. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJVxUpdjr36m-1RaWteJ1uU2Jn0rNOETVJAvXMDtjjSvwkYWWem-NTmkQEBQibOjZcX_zCJHVeOsOFZSDak8qRzes_I9vi6Qby4VzpsUNyeSBSwQ-fMCWXjaraQac-BjUquMHXJujJ1YN/s1600/dlslooklike.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJVxUpdjr36m-1RaWteJ1uU2Jn0rNOETVJAvXMDtjjSvwkYWWem-NTmkQEBQibOjZcX_zCJHVeOsOFZSDak8qRzes_I9vi6Qby4VzpsUNyeSBSwQ-fMCWXjaraQac-BjUquMHXJujJ1YN/s320/dlslooklike.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of what a DSL may look like. Source: GDC 2011 </td></tr>
</tbody></table>
<div class="MsoNormal">
This is an example of a DSL. This is just XML but the
attribute names in the nodes all relate to a specific task, in this excerpt the
DSL is describing a cutscene. We can see the name of the cutscene, start
position, duration etc. Very simple, you can then simply parse this XML into
your program and depending on the attribute names, treat the data correctly.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I have unknowingly actually created domain specific languages
in all three of my years at UOITGameDev. Every year they’ve gotten better, this
is because I always learn from the mistakes of the previous year.</div>
<h3>
Evolution of DSLs Over the Years</h3>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7n9Xt1YTF4V5cCQG0U820HrH3zndk2CClESITffVgu1lWJo4UGbtC_wuDazimicV7kUBwdt6JsKnj2CCXZ8kqmvU0YuJ0x6gbUWQ9l0Pooaf0oITtZbwJlexJv-JjhQgCNdYz7K1k8Zo/s1600/dslRoboy1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7n9Xt1YTF4V5cCQG0U820HrH3zndk2CClESITffVgu1lWJo4UGbtC_wuDazimicV7kUBwdt6JsKnj2CCXZ8kqmvU0YuJ0x6gbUWQ9l0Pooaf0oITtZbwJlexJv-JjhQgCNdYz7K1k8Zo/s1600/dslRoboy1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DSL used in first year project, Roboy</td></tr>
</tbody></table>
<div class="MsoNormal">
Look at this…trash. It kills me to say this but this is just
awful. Back in first year this was my greatest accomplishment as a programmer.
I created a level editor which allowed the user to place blocks where each block has a unique identifier (the first integer) and the X, Y position of the block
(the second two integers, respectively). I say this is awful because, if I did
not tell you what these numbers meant, you’d have no idea what they
represented. Heck, I’m surprised I remember what these numbers mean.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNb0psEdtvmnWl6bMD3g2oGUZAsaqYyIJri-cA9jmFjGnQ6DP3sWieePNAz8h2uqVhKIuIQqct-HFt3lEBR9zco-0Ar8009QaLcjMp32ewtAFZ0hSEMMIH-yb7hIeexK1BfbPvPAT48BN/s1600/roboy1leveleditor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNb0psEdtvmnWl6bMD3g2oGUZAsaqYyIJri-cA9jmFjGnQ6DP3sWieePNAz8h2uqVhKIuIQqct-HFt3lEBR9zco-0Ar8009QaLcjMp32ewtAFZ0hSEMMIH-yb7hIeexK1BfbPvPAT48BN/s320/roboy1leveleditor.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">First year level editor. You choose a block type, and place it on the grid.</td></tr>
</tbody></table>
<br /><div class="MsoNormal">
In second year, we also made a level editor and this time
our DSL has evolved quite a bit.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Wsk8cHjWacyUCfYde9wLET5WHsLlUS-MbiotuykmPpm_MAdtKZm_njB2RlOsouW6LF09UiEzAbK4uT7Ys92ygG-0vmJA0ay5uXz72yCkjACbVDI-_i0-purne2ZvEK8niesG7cPYvs3v/s1600/dslcotm.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Wsk8cHjWacyUCfYde9wLET5WHsLlUS-MbiotuykmPpm_MAdtKZm_njB2RlOsouW6LF09UiEzAbK4uT7Ys92ygG-0vmJA0ay5uXz72yCkjACbVDI-_i0-purne2ZvEK8niesG7cPYvs3v/s320/dslcotm.png" width="296" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DSL in A Case of the Mondays, second year GDW game</td></tr>
</tbody></table>
<div class="MsoNormal">
As you can see above, instead of integers, we went with a
straight up human readable format. This is better in my opnion because it
allows everyone to be able to infer what these values mean. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGb-k1sCqpHnQw2phSeTLEh3N2ZdxRQhoc6skQ3G4AibpUWy38LIvI2LFPp3RUtH3AH0NiVyh1o966YSgAyiLLbDZgrg1X3tn-NRCtKqowgHBd9-REhpwT_Is4CHXAN-N6ZPUwyFfqOk2/s1600/cotmeditor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGb-k1sCqpHnQw2phSeTLEh3N2ZdxRQhoc6skQ3G4AibpUWy38LIvI2LFPp3RUtH3AH0NiVyh1o966YSgAyiLLbDZgrg1X3tn-NRCtKqowgHBd9-REhpwT_Is4CHXAN-N6ZPUwyFfqOk2/s320/cotmeditor.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Second year level editor. Horrible time sink. Limited functionality. But it got the job done.</td></tr>
</tbody></table>
<div class="MsoNormal">
Finally, the latest and greatest (so far): Roboy in the
Hood. From our past experiences we knew that making level editors are huge time
sinks, with minimal return. Going into this year we knew we wanted to use Maya
as our editor, this would give us the ability to not only place objects but use
Maya to bake in lighting effects and generate cube maps. Our DSL this year
looks like this:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4tWAjQJ18sgilrDMEij07T_dKf_iyc_saFllhXYsT9caNaRwRVANxW6chZdUkxHPObtt-V0Zl06KcTH2ZcxF3HrREhoFXk3q4EDNL9uPUdA89FEFfRUkKnlQvnK5gCx9SfqnAXyEs6zag/s1600/dslroboy2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4tWAjQJ18sgilrDMEij07T_dKf_iyc_saFllhXYsT9caNaRwRVANxW6chZdUkxHPObtt-V0Zl06KcTH2ZcxF3HrREhoFXk3q4EDNL9uPUdA89FEFfRUkKnlQvnK5gCx9SfqnAXyEs6zag/s640/dslroboy2.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DSL used in Roboy in da Hood.</td></tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We have switched to an XML format this year. The data in
this XML is used to construct the scene. Similarly to the previous years, we
have to ability to output positions and rotations but this year we’ve added the
ability to export materials and scripts. Below is a list of the current elements
in our DSL. In the left hand column, you see the short hand notation used in Maya and on the right you see their respective meanings.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
o, t, l, p<o:p></o:p></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Object, trigger, Light, path. First character of model name in Maya
to ID what a block of data is<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
-s, -d<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Static, dynamic. Tag to denote if object is static or dynamic. Can
only be used if data has object identifier.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
mat, script, anim<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 239.4pt;" valign="top" width="319">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Material, script, animation. Denotes which material, script or animation
set a block of data should use. A block of data may have none, all or any
combination of these components.<o:p></o:p></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Since we used Maya as our level editor, we made it so the
designer had to give the models specific names; these names are used by the
exporter to generate nodes in the XML document. The XML document is then used
by the importer to reconstruct the asset in game.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDZuIe8sRYbZNdFlCtvnjwLUd50WoT8Keqonp6DTKwoeJvO29eUfuWdSblcVcdOrRuUvFs22l1BbY5nuruMHHZOP7q1MzjcepDd3oSsFD1_pDJE1np9glgiq2i9Zo3_o1Xe_Bo37OLw5U/s1600/namingexample.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDZuIe8sRYbZNdFlCtvnjwLUd50WoT8Keqonp6DTKwoeJvO29eUfuWdSblcVcdOrRuUvFs22l1BbY5nuruMHHZOP7q1MzjcepDd3oSsFD1_pDJE1np9glgiq2i9Zo3_o1Xe_Bo37OLw5U/s320/namingexample.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Application of our DSL in Maya.</td></tr>
</tbody></table>
<div class="MsoNormal">
In the image above, our block of data is named:
o_truck_mattruck_scriptIceCream_d<o:p></o:p></div>
<div class="MsoNormal" style="text-indent: 36.0pt;">
This translates to: Object with a
truck model, using a material named truck, with a script named IceCream that is
a dynamic rigid body. Our importer and exporter has its own domain specific
language which is used to help us identify data. <o:p></o:p></div>
<div class="MsoNormal" style="text-indent: 36.0pt;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVKgU8AN0T1WMHLiGO5SgnAidt3_vYOru1djZRSZ_dwf-Y8qBRe05G7SJZBZufBJsonUtfgrFcNqLhtV0-E2YXEPOy9UJqnSMXHYsnujWrPTkgmbB5h32ps0cDxLi21dWqEiLGjB-cKqC/s1600/roboy2dsl2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVKgU8AN0T1WMHLiGO5SgnAidt3_vYOru1djZRSZ_dwf-Y8qBRe05G7SJZBZufBJsonUtfgrFcNqLhtV0-E2YXEPOy9UJqnSMXHYsnujWrPTkgmbB5h32ps0cDxLi21dWqEiLGjB-cKqC/s640/roboy2dsl2.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Translation of short hand notation used in Maya to DSL used by importer.</td></tr>
</tbody></table>
<br />
<div class="MsoNormal">
Now that you’ve seen some examples of domain specific
languages, hopefully you see the usefulness in them. Imagine having to type out
or export out a straight up C++ file containing the object placments in a game.
Furthermore, by using DSLs, we are making the project more accessible to
non-programmers.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In all of my samples, I described setting up scenes, but why stop there? You can make a DSL to actually define gameplay elements for example:</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijP0nuAc-qHsc67SJcEHriGRxq3vAJ1fZEsC02mi0WbnDbhjvMphbnWgQ2T7SgTr2DZXMbRUad_uwX2KxmYmGLqbiMk_y_g3mO9E7jM4TZ4-VKkhzYS0Jbwml_cr7Mpp23EkP3qBICw657/s1600/dsllooklike2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijP0nuAc-qHsc67SJcEHriGRxq3vAJ1fZEsC02mi0WbnDbhjvMphbnWgQ2T7SgTr2DZXMbRUad_uwX2KxmYmGLqbiMk_y_g3mO9E7jM4TZ4-VKkhzYS0Jbwml_cr7Mpp23EkP3qBICw657/s320/dsllooklike2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Imagine making a script using these simple keywords. It wraps up all the calls to the low level functions into simple to use commands. This is beneficial because it allows non-programmers to write scripts and it also prevents people from messing up the low level functions that the game depends on.</div>
<div class="MsoNormal">
<br /></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-9073412980779437092013-12-10T22:15:00.001-08:002014-07-27T15:48:16.309-07:00Guide to PhyreEngine Part III: Setting up Media Paths<div class="MsoNormal">
<span style="background-color: white;">This is the third and final part of my little “Guide to
PhyreEngine” series of posts. The objective of this post is to describe how to set up local media
directories for your project. I will begin by describing how the PhyreEngine samples handle this and explain why we may not want to do it like the samples. Note that there are tons of ways
to do this and in this post I am describing how we did it.</span><o:p></o:p></div>
<h3>
Media Paths in the
PhyreEngine Samples</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2u7aJ0R7oyL9RT1mtUSAzMzOwx_43F46kVyl1i1vAlBEeFIN931CdEiTi7BAOEOW2P9YGjqaA8VEz_YjlHeFuTi-ZidP5MvmF_yHNcaVNnZkSZtPNigHigCMaBglyUXWn8NlJj63bnAt/s1600/assetsBasic.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2u7aJ0R7oyL9RT1mtUSAzMzOwx_43F46kVyl1i1vAlBEeFIN931CdEiTi7BAOEOW2P9YGjqaA8VEz_YjlHeFuTi-ZidP5MvmF_yHNcaVNnZkSZtPNigHigCMaBglyUXWn8NlJj63bnAt/s640/assetsBasic.png" height="82" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Excerpt from the Asset XML file used in the Basic Sample</td></tr>
</tbody></table>
<div class="MsoNormal">
As mentioned in the previous post, the PhyreEngine uses an
XML file to specify locations to assets. The assets listed in this XML file are
converted to a platform specific binary format and the paths for the newly
generated files are stored in a header file. In the line of code in the red
box, you can see the name of the generated header file (“BasicAssets.h”) this
header file is stored relative to your <i>media
directory</i>. In the bit in the green box, you can see the path to the asset,
relative to media directory. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Definition</b>: Media
directory, the directory where <b>all</b> of your assets are located. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
As you can see by examining the file path to the asset, the
asset in this sample are stored in a directory under the PhyreEngine install
directory. For our project, we do not want to store our assets in this
directory. We want to store our assets in a directory local to our project
directory.</div>
<h3>
Setting Up a Local
Media Directory</h3>
<div class="MsoNormal">
This is one of those things that is very simple and trivial
to do, but required some figuring out. Let’s begin by creating some folders for
our assets. <br />
<!--[if !supportLineBreakNewLine]--><br />
<!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";">%ProjectDir%\src <span style="color: #6aa84f;">//folder for source code</span><br />
%ProjectDir%\media <span style="color: #6aa84f;">//folder
for assets</span><br />
%ProjectDir%\media\models <span style="color: #6aa84f;">//sub directory
for models</span><br />
%ProjectDir%\media\shaders <span style="color: #6aa84f;">//sub directory for shaders</span><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";"><br /></span></div>
<div class="MsoNormal">
You may want to
make more sub directories for other types of assets but for the sake of
simplicity, I will keep this guide to the bare minimums and use source from the
Basic sample.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Using the project
we set up from the first part of this guide, copy the following files into the, <span style="font-family: "Courier New";">%ProjectDir%\src </span>folder: (<o:p></o:p>if you made any changes to them, make sure they are all vanilla)</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";">%SCE_PHYRE%\Samples\Basic\Basic.cpp<br />
%SCE_PHYRE%\Samples\Basic\Basic.h<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";"><br /></span></div>
<div class="MsoNormal">
Copy the following
files into the<span style="font-family: "Courier New";"> %ProjectDir%\media
</span>folder.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Courier New;">
%SCE_PHYRE%\Samples\Basic\Assets.xml </span><span style="color: #6aa84f; font-family: 'Courier New';">//stores
file paths for assets</span><br />
<span style="font-family: Courier New;">
%SCE_PHYRE%\Media\PhyreAssetScript.lua
</span><span style="color: #6aa84f; font-family: 'Courier New';">//black magic used by the PhyreAssetProcessor</span><br />
<span style="font-family: Courier New;">
%SCE_PHYRE%\Media\PhyreAssetSpec.xml </span><span style="color: #6aa84f; font-family: 'Courier New';">//Specs for the PhyreAssetProcessor, allows us to specify where binary files
will be generated and what types of files to attempt to convert to binary</span><span style="font-family: Courier New;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";"><span style="color: #6aa84f;"><br /></span></span></div>
<div class="MsoNormal">
<span style="font-family: inherit;">Copy all of the contents from: </span><span style="font-family: Courier New, Courier, monospace;">%SCE_PHYRE%\Media\Shaders </span><span style="font-family: inherit;">to </span><span style="font-family: 'Courier New';">%ProjectDir%\media\shaders</span></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";"><span style="color: #6aa84f;"><br /></span></span></div>
<div class="MsoNormal">
Now that we have
the bare minimums, we can modify them to suit our needs. Let’s begin by
modifying Basic.cpp:<o:p></o:p></div>
<div class="MsoNormal">
We just need to
change one line of code which specifies the Media Directory for our project. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmBG0U83_oL3GVOkHH70shVtgPSxGIixA_bhORHbsfYVPc5uycEo4u2Ls9k5YgvrJ_hT07Hhe9kbO-CNvdaSQT9gO_VU8f56P5PK6MtZNTmUtE8mschFrGpJuZOXlA0fywdjupSNSybOYJ/s1600/phyremedia.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmBG0U83_oL3GVOkHH70shVtgPSxGIixA_bhORHbsfYVPc5uycEo4u2Ls9k5YgvrJ_hT07Hhe9kbO-CNvdaSQT9gO_VU8f56P5PK6MtZNTmUtE8mschFrGpJuZOXlA0fywdjupSNSybOYJ/s640/phyremedia.png" height="43" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Vanilla Basic.cpp, currently the Media directory is set to the media directory in the PhyreEngine install path</td></tr>
</tbody></table>
<div class="MsoNormal">
As you can see in
the above excerpt (shout out to well commented code!), the media directory is
set to the PhyreEngine install directory <span style="font-family: "Courier New";">(%SCE_PHYRE%)</span>, we want to set this to our local media
directory. We do this by simply making the following change:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyKims7MD10e4jiKfHSGGdLVvfEhJjhgMe20DbMAyt1TdHtktOKfc6W28zf9cN-7AKFlUMSvp93EYGfRnigFWjacbTyz5jXgVCqiyotLPLZTS_8LgEmt7nc_cTT5ObzVAoqbqkSCvonG5T/s1600/localmedia.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyKims7MD10e4jiKfHSGGdLVvfEhJjhgMe20DbMAyt1TdHtktOKfc6W28zf9cN-7AKFlUMSvp93EYGfRnigFWjacbTyz5jXgVCqiyotLPLZTS_8LgEmt7nc_cTT5ObzVAoqbqkSCvonG5T/s640/localmedia.png" height="43" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Modified Basic.cpp, now our project uses our local media folder</td></tr>
</tbody></table>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="Picture_x0020_4"
o:spid="_x0000_i1027" type="#_x0000_t75" style='width:392.25pt;height:27pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\100455~1\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png"
o:title="localmedia"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
Now that we have
set our media directory, we may specify our asset paths relative to this
directory in the XML file.<o:p></o:p></div>
<br />
<div class="MsoNormal">
Remember, ALL
assets must be inside the media directory, so this means we just have to copy
the assets from figure one into our local media directory and it will just work…right?
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKseMJs1SK43ZXFeIe34Y_5N6Zd_b26q91eCpBOkzhyB7YVqphNOTSXfmxeFmykjMt3ROUMsAcj1fvHkrt8WIi87AGyl0Lq-qs6zZp3-QX_BO43fsvQSRCO12n0TFLxHzZ1Pmoz5bS4Tu/s1600/willthiswork.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKseMJs1SK43ZXFeIe34Y_5N6Zd_b26q91eCpBOkzhyB7YVqphNOTSXfmxeFmykjMt3ROUMsAcj1fvHkrt8WIi87AGyl0Lq-qs6zZp3-QX_BO43fsvQSRCO12n0TFLxHzZ1Pmoz5bS4Tu/s640/willthiswork.png" height="64" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="Picture_x0020_5"
o:spid="_x0000_i1026" type="#_x0000_t75" style='width:467.25pt;height:48pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\100455~1\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png"
o:title="willthiswork"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
Before we can test
this, we must set up our pre-build event which converts the asset to a binary
platform. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The easiest way to call a batch file, I don’t want to get in trouble
posting SCE confidential code so I’ll try to describe how to create this batch
file:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Copy the following
file to your project directory:<o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";">%SCE_PHYRE%\Media\DonkeyTrader\ConvertDonkeyTraderAssetsForPlatform.bat<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Courier New";"><br /></span></div>
<div class="MsoNormal">
Open the file in
NotePad and change it to say this:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTQUu7eGDT5g-HxJ_pYzr24y7pgS2yFk-1a__LVvUMr0N00oDelCy3S7jU450WQx4KgapNPtP2PS2gYdxnQ7FwcedtOEIRotxVBcHdwSLbZZfgRfvKsxosSg7-38vKtvY5YiqNlD_WSGO/s1600/batch.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTQUu7eGDT5g-HxJ_pYzr24y7pgS2yFk-1a__LVvUMr0N00oDelCy3S7jU450WQx4KgapNPtP2PS2gYdxnQ7FwcedtOEIRotxVBcHdwSLbZZfgRfvKsxosSg7-38vKtvY5YiqNlD_WSGO/s640/batch.png" height="91" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Modified ConvertDonkeyTraderAssetsForPlatform.bat</td></tr>
</tbody></table>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="Picture_x0020_6"
o:spid="_x0000_i1025" type="#_x0000_t75" style='width:400.5pt;height:66pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\100455~1\AppData\Local\Temp\msohtmlclip1\01\clip_image007.png"
o:title="batch"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
Now we simply tell
visual studio to call this batch file as a pre-build event:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrsaMB9UyXvPcqk9DeT0Q5jj9p50nAZQmfUoD2mVAp2tX4Gd2mqwQzIIB8ccSi_DulZ7Z2EZ7x5Uj5i5ylC2_EONh2JbNFuOoEfCSyM5zE5vcy4YEeJXYYeF1fOtgAfKTz3XYevkcTWdw/s1600/prebuild.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrsaMB9UyXvPcqk9DeT0Q5jj9p50nAZQmfUoD2mVAp2tX4Gd2mqwQzIIB8ccSi_DulZ7Z2EZ7x5Uj5i5ylC2_EONh2JbNFuOoEfCSyM5zE5vcy4YEeJXYYeF1fOtgAfKTz3XYevkcTWdw/s640/prebuild.png" height="457" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Setting the Pre-Build Event in Visual Studio. Note this is only for the Win32GL platform with a Debug configuration, for other configurations see the Phyre documentation.</td></tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now when we build
our project, this command will be executed. Note that I am only showing you how
to do this for Win32GL with a Debug configuration, I’m sure you can infer how
to set this up for other platforms.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Anyways, if we try
running the project, it will not work. Even though we put our Collada asset
file in our media folder, it references other assets files (textures, shaders) which are not in our media folder. When assets reference
other assets, it is important to make sure that all assets are in the media
directory.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For simplicity, I
will show how to export a simple cube in Maya:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Create a cube,
right click on it and click add new material:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDaXf8HcIgmQW9S4l2DwwfsFjSPdm3BHtyD7Eh5P5cagw7K3cSHCQZKxJ9gh5gxHgRLQdwkHm3bf2_npg_UVtibLUuiVj6Cn-BgvGdbqqqjhyzXOaI6L6tEJBeDyrbDZIx8yYYNMYj92K/s1600/cubemayamat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDaXf8HcIgmQW9S4l2DwwfsFjSPdm3BHtyD7Eh5P5cagw7K3cSHCQZKxJ9gh5gxHgRLQdwkHm3bf2_npg_UVtibLUuiVj6Cn-BgvGdbqqqjhyzXOaI6L6tEJBeDyrbDZIx8yYYNMYj92K/s320/cubemayamat.png" height="320" width="268" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Add a collada
Shader:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklt6wJGdI0WipGdELS7cwHN5aDLQdKiVApXG-j8oqT690ohRjIV1o_ief94ehFEAQkDWv8VGvgJYTpGCAE-Az74Y1aSYXH2Tx16NKDmtK4iq2UO8CNxP0rgR86WG29oC16p7ew0IXOLbL/s1600/colladashader.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklt6wJGdI0WipGdELS7cwHN5aDLQdKiVApXG-j8oqT690ohRjIV1o_ief94ehFEAQkDWv8VGvgJYTpGCAE-Az74Y1aSYXH2Tx16NKDmtK4iq2UO8CNxP0rgR86WG29oC16p7ew0IXOLbL/s320/colladashader.png" height="265" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now navigate to the
shader’s attributes and set the shader.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGckO3udiTHnxmBO95OHO4C9fViiIh5rE2RDx2yMfR1YdoUzfs844D4-0-8M1NCc7BBLqdEqtCWFi1OLu0N2vFT-EVzohUD5JNgWqzwIEmjyO8lONjtCD3UJVRCGmrbxipSajOvJ2B9VkT/s1600/addshader.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGckO3udiTHnxmBO95OHO4C9fViiIh5rE2RDx2yMfR1YdoUzfs844D4-0-8M1NCc7BBLqdEqtCWFi1OLu0N2vFT-EVzohUD5JNgWqzwIEmjyO8lONjtCD3UJVRCGmrbxipSajOvJ2B9VkT/s320/addshader.png" height="279" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
We want to make
sure our reference to the shader asset is relative, not absolute. There are two ways to do this. The
sure-fire way would be to create an environment variable which stores your
project’s directory and reference all of your assets using that variable or the
shoddy way to do it is to use the “Set Project” option in Maya. For simplicity,
I will show you the shoddy way, I call this the shoddy way because sometimes
the paths are relative, sometimes they’re not. This is only an issue if you want to recompile the project on different computers, or if you move your project directory after you export an asset.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuU7skOtPkttpVWD0CJmdn0gCXUe_uKdkAzQDX8ERvzsioBrtRistRjUJLdGzO5sfQaJ7ZyP6Bn4xjNMbJXQIMYeG_nSRTD6V-WOcRduh74NWfcraKYarU1FMA8oacukP8PZ9-U-bSxWey/s1600/setproj.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuU7skOtPkttpVWD0CJmdn0gCXUe_uKdkAzQDX8ERvzsioBrtRistRjUJLdGzO5sfQaJ7ZyP6Bn4xjNMbJXQIMYeG_nSRTD6V-WOcRduh74NWfcraKYarU1FMA8oacukP8PZ9-U-bSxWey/s320/setproj.png" height="176" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click set project
(shown above), navigate to your media directory and set the directory.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now select the ColladaDefaultShader.cfgx
located in your media directory, and export the model to the model folder in
your media directory.</div>
<br />
<div class="MsoNormal">
Now we just modify
the XML file to use the cube we just exported and we should see it! Of course, since
we are not exporting any lights, it will not be shaded but now that you have an
asset loading, I’ll let you figure out the rest <span style="font-family: Wingdings; mso-ascii-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-hansi-font-family: Arial; mso-symbol-font-family: Wingdings;">J</span>.<o:p></o:p><br />
<br />
Remember that this guide just showed the bare minimums to get started, for example, in my project I modified the PhyreAssetSpec.xml and the intermediate directory property to organize the generated data a bit better.<br />
<br /></div>
<div class="MsoNormal">
I hope that my "Guide to Phyre" series of posts was enough to give you a push in the right direction with PhyreEngine. I know when I had to figure this stuff out, the internet was pretty much useless, and it was up to me to figure everything out. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Perhaps this isn't the best way or maybe you're still having troubles, if you have any questions or comments tweet me @MikeGameDev</div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-11255698231219727182013-12-08T12:22:00.005-08:002013-12-10T22:18:43.628-08:00Guide to PhyreEngine Part II: The Phyre Asset Pipeline<div class="MsoNormal">
<span style="background-color: white;">In the last post we ended with a window which rendered a
solid blue screen. In this post I will outline what happens when you build a
project and describe what must be done in order to load and render an object to
the screen.</span></div>
<h4>
The Phyre Asset Pipeline</h4>
<div class="MsoNormal">
Models, textures, scripts and just about every other type of
asset must be converted to the Phyre format. The .phyre files are platform
specific binary versions of your asset. This is not unusual practice, for example Ogre
does something similar with .mesh files which are binary versions of your mesh
that Ogre can load. What is the point of converting assets to binary formats? To answer this you must understand what a binary file is.</div>
<h4>
Binary Objects</h4>
<div class="MsoNormal">
If you’ve ever opened up an asset file, such as a Collada
.dae file you will see that it is human readable XML. This data is then parsed
by the engine which looks for attribute names in the XML file<span style="background-color: white;"> <span style="background-position: initial initial; background-repeat: initial initial;">and does something with it.</span> If you do not serial</span>ize your data to a binary format this
means the engine must parse this human readable data every time you start your
program.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The best way to explain this (and almost anything!) is with
a sample. Below I will describe how you would go about parsing a mesh in your
day to day life. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Say you have a Wavefront .obj file. You export your mesh
from Maya into an .obj file which contains a “mesh”. What is a mesh? A mesh is
just a bunch of vertex positions and maybe you have normals and texture
coordinates too but at the most basic level, you must have at least vertex
positions. If you open the .obj file you will see something that looks like
this:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLQ785c9n1_9dkFQ5bj93jK57acJzRC9ydNi46oYU4Z4AAL3DA8X5AUnYQkM6UwdeqbZzNWiAEMR7p2CaowJvk2ejNhsztjpMRanlNWfX3xiD3uUWOPZtyL8xvmIuGwSdd1zdTxgCjpxQ/s1600/obj.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLQ785c9n1_9dkFQ5bj93jK57acJzRC9ydNi46oYU4Z4AAL3DA8X5AUnYQkM6UwdeqbZzNWiAEMR7p2CaowJvk2ejNhsztjpMRanlNWfX3xiD3uUWOPZtyL8xvmIuGwSdd1zdTxgCjpxQ/s640/obj.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sample OBJ data, source: <a href="http://en.wikipedia.org/wiki/Wavefront_.obj_file">http://en.wikipedia.org/wiki/Wavefront_.obj_file</a></td></tr>
</tbody></table>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Notice what we have here? At the start we have identifiers,
v for vertex and vt for texture coordinates etc. The simplest way to parse this
data would be to scan the first letter in each line, do a string compare:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Courier New, Courier, monospace;">If (firstChar == “v”)<br /> vertices.push_back(loaded vertex)<br />
if (firstChar ==”vt”)<br /> texCoords.push_back(loadedUV)</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNormal">
Assume loadedVertex is a simple struct which has four floats.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This is tedious as heck, but it works. We are loading each
vertex and adding it to a list of vertices. This array of vertices is
eventually thrown into a vertex buffer which is then sent to the GPU to render.
If you do not serialize to binary, you have to do the whole string compare
parsing process every single time. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Every time you parse your data, you will end
up with the exact same array which is sent to the GPU. This is very slow,
imagine loading a mesh with thousands of vertices; this leads to an absurd
amount of string comparisons (which are slow) furthermore, imagine you had to
debug something and had to wait for this data to be parsed every time you ran
the project. You’d go insane!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Binary serialization allows you to skip the whole text
parsing process by essentially writing the array generated from the parsed data to a file. Then instead of
parsing text every time, you can just load that array and It is up to the engine
to do treat the data correctly. This is very fast because you are just taking a
chunk of data from a file and putting it into memory. Of course, there is more to generating the array, different platforms may require different things to be done to the data, this is why Phyre must generate a different binary file for different platforms.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This is the basic idea behind binary formats. I know I’m not
the best with words and what not but hopefully from this example you understand
the idea and need for binary formats.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Back to Phyre, PhyreEngine generates it’s platform specific
binary files as a pre-build event. Let me explain what this means: <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
PhyreEngine is a multiplatform engine, it supports windows
with DirectX and OpenGL, bit, PS3 and PSVita. Depending on which platform you
are building for, the engine will generate a binary .phyre file which is
optimized for that platform. This is done in a build event. <o:p></o:p>In my past experiences, when I clicked “build and run” Visual Studio would starting building MY project and run my game. PhyreEngine introduced me to the concept of “build events”.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
What the heck is a build event? <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hfchx_jwg9_Vb8q0xeBdJdJcHLUrHs-B_Qm0UOw1aKQ9raMTxE_Du3g9r110kXdakqPGvTzupkSvmx2iKiuKtoTFjIHaCydy9Me3UHV8ANdn8s3UAXC6rCsHjZWHBPIygW6s1r0Bh0KV/s1600/prebuild.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hfchx_jwg9_Vb8q0xeBdJdJcHLUrHs-B_Qm0UOw1aKQ9raMTxE_Du3g9r110kXdakqPGvTzupkSvmx2iKiuKtoTFjIHaCydy9Me3UHV8ANdn8s3UAXC6rCsHjZWHBPIygW6s1r0Bh0KV/s320/prebuild.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pre-build events in Visual Studio. Note the red box, at different stages of the build you can choose to add additional tasks. The green box is the command to call the PhyreAssetGather tool, I will describe this in detail in the next post.</td></tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This means when you click “build” you can tell Visual Studio
to do things before it starts running your project. As you can probably infer
from the image above, you can tell Visual Studio to do intermediate task at
different parts of the build process. PhyreEngine uses a pre-build event to call
the AssetGather tool.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The AssetGather uses
a .xml file which describes which assets need to be loaded as well as their
file paths and generates a header file. Notice in the first line of the XML
file below, there is a bit called “pathfix” this means all of your assets need
to be under that directory. This directory is known as your media directory and
you want all of your assets to be stored relative to that path. It is crucial
that you do this because it will save a lot of headaches caused by assets not
being found.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvhCdS9wsNdbRL7tuOj74JnP03Twfki4O0UsZ0UzMuW4l3XnPSIB8RqFaUW8UNcpMquYGsCiKmMfNBRtFgD8ATkYpQ8kpK45FWhBHa-lUB4a7sCIH-iZPPGg_0LGtscBxNBl7LFk-ijYKU/s1600/assetsxml.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvhCdS9wsNdbRL7tuOj74JnP03Twfki4O0UsZ0UzMuW4l3XnPSIB8RqFaUW8UNcpMquYGsCiKmMfNBRtFgD8ATkYpQ8kpK45FWhBHa-lUB4a7sCIH-iZPPGg_0LGtscBxNBl7LFk-ijYKU/s640/assetsxml.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Excerpt from our asset XML file.<br />
<div style="text-align: left;">
<span style="font-family: inherit; font-size: small;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: small;">This XML file is processed and turned into a .h header file</span></div>
</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVoJXb3PA6EMJgoRjaa1UgsUxNAktVzy8BjnF4mmzlU7xeEoEriJCHV8Qa947WjF_8PohVa3x0lYtucRd3wtjHS_AldeqsdCGLRiugpqKLJKfzeLn-IpuWCnhYjFaj0gdjZo7s-k3ujFKL/s1600/asseths.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVoJXb3PA6EMJgoRjaa1UgsUxNAktVzy8BjnF4mmzlU7xeEoEriJCHV8Qa947WjF_8PohVa3x0lYtucRd3wtjHS_AldeqsdCGLRiugpqKLJKfzeLn-IpuWCnhYjFaj0gdjZo7s-k3ujFKL/s640/asseths.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Excerpt from the header generated from the XML file. Note that all assets have been converted to .phyre format. This header is included in our project and is used to load assets from disk. </td></tr>
</tbody></table>
<div class="MsoNormal">
<span style="background-color: white;"><span style="background-position: initial initial; background-repeat: initial initial;">This is
why the AssetGather tool must be run before your project can be built. This
tool generates a header which your project includes</span>. E</span>ssentially, you
are including a header that does not exist when you click the build button for your
project. It is generated as a pre-build event which occurs prior to the
compiling of your code.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The AssetGather tool calls the AssetProcessor for each asset
defined in the XML file. The AssetProcessor is a beast of its own and at this
time I can only describe its interworking’s as black magic, fortunately
PhyreEngine’s source is very well commented and one day I plan on looking into
it.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now that we have a better understanding of what the pipeline
is like, we can move on in this guide. In the next post, I will demonstrate how
to correctly set up your media directories and the pre-build events shown above.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com1tag:blogger.com,1999:blog-7531886437789952314.post-73752510441423179332013-12-05T21:38:00.002-08:002014-07-27T15:46:41.900-07:00Guide to PhyreEngine Part I: Setting up a Project<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
In this and the next few blog posts, I will outline every
single step required to get started with the PhyreEngine from building a
project to rendering an object on screen.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Before we start, I will begin with a little background:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Our professor warned us before we started our project that
using PhyreEngine to develop our game would be a rough road, and let me tell
you, he wasn’t kidding. The alternative to using PhyreEngine was using the 2LOC
engine (created by a UOITGameDev grad). The 2LOC engine has a really handy “project
generator” tool which automatically generates projects based on your configuration
options, the project has all the dependencies and build configurations set for
you. Unfortunately PhyreEngine does not have such a tool. This made something
as trivial as setting up a project quite the challenge. <o:p></o:p><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PLm6qSLc0XDeLxQZ-pWzAYBL3zq4rCzla0uDEhnDF1ojqq39TVqzI_I5vZi0YUWkMi3mmiWX8Ky6nWLH838rkuC2_BflocOVIQM4qy_4StssPmP0j9PBH2ggOv1gC7Vl0VIv-DfizUi-/s1600/IMG_01122013_012304.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PLm6qSLc0XDeLxQZ-pWzAYBL3zq4rCzla0uDEhnDF1ojqq39TVqzI_I5vZi0YUWkMi3mmiWX8Ky6nWLH838rkuC2_BflocOVIQM4qy_4StssPmP0j9PBH2ggOv1gC7Vl0VIv-DfizUi-/s320/IMG_01122013_012304.png" height="320" width="284" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The 2LOC project generator</td></tr>
</tbody></table>
</div>
<div class="MsoNormal">
Creating a Phyre project is actually quite simple but took
quite a bit of figuring out to accomplish. People always ask me “how is working
with the PhyreEngine?” to which I reply “depressing.” Now don’t get me wrong,
PhyreEngine great, but it is also a constant reminder of how much
more I need to learn. Setting up a project was a challenge simply because there
were a whole slew of concepts I did not know. In this post I will share the
knowledge I gained from solving this problem and describe each of the steps
required from setting up a project with the PhyreEngine, with pictures!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Note that we are using PhyreEngine 3.4.</div>
<div class="MsoNormal">
<h4>
Step One: Create a new visual studio project.</h4>
</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1Zt67VLJTIJYsOr13yhyEPsPUTYTscFllEfMvUTELTXRsbztI0qrKpmNxS1zNLcXxbSJY94FwysrDjg-ikbCiojcjS0yP2sRFW0VJ2VI94-ZIuwwO0r-BLaG4PHFksO2wbrLjc7eo5fU/s1600/p1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1Zt67VLJTIJYsOr13yhyEPsPUTYTscFllEfMvUTELTXRsbztI0qrKpmNxS1zNLcXxbSJY94FwysrDjg-ikbCiojcjS0yP2sRFW0VJ2VI94-ZIuwwO0r-BLaG4PHFksO2wbrLjc7eo5fU/s320/p1.png" height="222" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
This step is pretty straight forward, just open up Visual
Studio and create a new Win32 project. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWngM2A2wtT11anJDXMI4kggR7ABdvOK5rGjRODt3nFW8SC2K2Ikzg-NKDazxnJAR2qA4qU60zmP3pexRAyMeizSAoYUVAzOJkZ0qar_EWcp8Ncv0A_JZp3lRBqYtIwCSbBkMZyZXWDRux/s1600/p2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWngM2A2wtT11anJDXMI4kggR7ABdvOK5rGjRODt3nFW8SC2K2Ikzg-NKDazxnJAR2qA4qU60zmP3pexRAyMeizSAoYUVAzOJkZ0qar_EWcp8Ncv0A_JZp3lRBqYtIwCSbBkMZyZXWDRux/s320/p2.png" height="269" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Make sure you start with an empty project.</div>
<div class="MsoNormal">
<h4>
Step two: Linking our project and solution with the PhyreCore
and PhyreFramework</h4>
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vdtk_WM0fRCD11yk26Th1h23F1dmvRkhdfJf-q6UQ6jkHeV7hzytRB7WxYVeK1GTyMzzMae9nI_rAtbI3Ugy9zWiKV_2ZMJKwJVQfE9TpICGzU03C8I8Q-b7Mlgp-THzqvsk8Dv6KkBr/s1600/p3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vdtk_WM0fRCD11yk26Th1h23F1dmvRkhdfJf-q6UQ6jkHeV7hzytRB7WxYVeK1GTyMzzMae9nI_rAtbI3Ugy9zWiKV_2ZMJKwJVQfE9TpICGzU03C8I8Q-b7Mlgp-THzqvsk8Dv6KkBr/s320/p3.png" height="180" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Right click on the solution and add the existing PhyreCore
and PhyreFramework projects to the solution. This brings up the question, what
is a solution? A solution is a sort of manager or container for projects. It
simply maintains the dependencies between project. This brings up another
question “what kind of dependencies are there between projects?” We’ll talk
about those a little later.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-uN3QsqGWkR9OvHkDCd_fVcfKBsQIIGKM-ngjIC79jPFDySnaELsEkZxcLEZY6SjqTK-XMCLJPzpx4luaE4rgrTwLK5UTd5CLoXhdu7t-3bN_1xvdH0BEHH4z0wZj-lLexGQVx_pAJLb/s1600/p4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-uN3QsqGWkR9OvHkDCd_fVcfKBsQIIGKM-ngjIC79jPFDySnaELsEkZxcLEZY6SjqTK-XMCLJPzpx4luaE4rgrTwLK5UTd5CLoXhdu7t-3bN_1xvdH0BEHH4z0wZj-lLexGQVx_pAJLb/s320/p4.png" height="189" width="320" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Navigate to the PhyreCore project and add it. Repeat this
process for the PhyreFramework.<o:p></o:p></div>
<div class="MsoNormal">
Next we need to establish a relationship between the
PhyreCore, framework and our project. This is done by making our project
dependent of the projects we just added to our solution.</div>
<div class="MsoNormal">
<h4>
Step Three: Setting Project dependencies</h4>
</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8sxzCTNzJgUiTVpNNVTIbkm-r200VduecjV6bpxpnbZ8dQFMDFMKqBxMWh2m_rcb3Bh2jO0zi2v298ywJdbJc60IZ2JJj_5mAuvGSpNda1Gvq8k8742NvihuVF7U5ZVMiARtG9Ha7R9q/s1600/p5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8sxzCTNzJgUiTVpNNVTIbkm-r200VduecjV6bpxpnbZ8dQFMDFMKqBxMWh2m_rcb3Bh2jO0zi2v298ywJdbJc60IZ2JJj_5mAuvGSpNda1Gvq8k8742NvihuVF7U5ZVMiARtG9Ha7R9q/s320/p5.png" height="275" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Right click on our project and click project depandancies and references<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1qv6mwzxGl3zAoc1A4XLG6LdcW9Yt433prW5yx5TeOTf_O_ew0HrW8b-gZ1AZ-NgUov6W7Je66ZCc0KRAdbE-xzOMZYxo8F9K8WUbY8QiZPYiLpYBOfQXtTZeO7f15ikl7cy9o6EE2QY/s1600/p6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1qv6mwzxGl3zAoc1A4XLG6LdcW9Yt433prW5yx5TeOTf_O_ew0HrW8b-gZ1AZ-NgUov6W7Je66ZCc0KRAdbE-xzOMZYxo8F9K8WUbY8QiZPYiLpYBOfQXtTZeO7f15ikl7cy9o6EE2QY/s320/p6.png" height="293" width="320" /></a></div>
<div>
<br /></div>
<div class="MsoNormal">
Add PhyreCore and PhyreFramework to the dependancies.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the build order tab, make sure your build order is:<o:p></o:p></div>
<div class="MsoNormal">
PhyreCore<br />
PhyreFramework<br />
*Your Phyre Project*</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You may not be able to build your project if is not in this
order.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now this next step may be redundant, but now I believe we
need to add the PhyreCore and PhyreFramework as references to our project, I
observed strange Intellisense behaviour when the projects weren't added as
references…but then again when isn’t Intellisense exhibiting strange behavior?<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPffkpmq1xLEZQZa9Ut9_INNF1tCj0AhR7kpdk75OkdIMbKXGLWFnIax_daJISY3_ofREKqkYqRa4WtuoF-hThnsngq0YvUp3RzGNwBZiYNv-835FTR_FdKjkf7d8Ogcez9jVWbT8wyS3/s1600/p8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPffkpmq1xLEZQZa9Ut9_INNF1tCj0AhR7kpdk75OkdIMbKXGLWFnIax_daJISY3_ofREKqkYqRa4WtuoF-hThnsngq0YvUp3RzGNwBZiYNv-835FTR_FdKjkf7d8Ogcez9jVWbT8wyS3/s320/p8.png" height="227" width="320" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4Q0LRRWVKDYDG9Uzt2y_oya0zjH1_o1HjhtoJmpT1Gptpzzds6W0fxyBadJIIHkodgxQES9DT5aRp48a91_KdK4zj8O9ayy9AWcNiwZqsn3z-l1UAHwzYP2ONpJUeqG5vH-3Cn8IZwFL/s1600/s9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4Q0LRRWVKDYDG9Uzt2y_oya0zjH1_o1HjhtoJmpT1Gptpzzds6W0fxyBadJIIHkodgxQES9DT5aRp48a91_KdK4zj8O9ayy9AWcNiwZqsn3z-l1UAHwzYP2ONpJUeqG5vH-3Cn8IZwFL/s320/s9.png" height="226" width="320" /></a></div>
<br />
<div class="MsoNormal">
Now that we have our project linked to the PhyreEngine, we
need to set up our build configurations. This introduced me to the concept of property
sheets. Normally when you set up a project, you need to go into your project
settings and set which directories, libraries, pre-processor definitions
manually. A property sheet will look at your current build configuration and
automatically set these values for you.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPOrsVmbfH3hdCA2aICfqfD2iagTrvD1d96AZgTWu0oJSnFqtZnN30SDuHe5EJ0Rlyhku6nJ2CuVzX2_ymrsuEV-FBahrhEVMnUkqn-8rfRDvMuWco01aPGAcGQkcgvXwDWsgRmcwTY9I0/s1600/s10_1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPOrsVmbfH3hdCA2aICfqfD2iagTrvD1d96AZgTWu0oJSnFqtZnN30SDuHe5EJ0Rlyhku6nJ2CuVzX2_ymrsuEV-FBahrhEVMnUkqn-8rfRDvMuWco01aPGAcGQkcgvXwDWsgRmcwTY9I0/s320/s10_1.png" height="55" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is an excerpt from the PhyreApp property sheet. Notice that the conditions are looking for the current platform the project is set to and is setting the additional library includes accordingly.</td></tr>
</tbody></table>
<div class="MsoNormal">
<h4>
Step 4: Setting up Project Configurations</h4>
</div>
<div class="MsoNormal">
First we must open our configuration manager:</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCiqPcUtUjrvvKlvvpNZz7kgtlwzJYe79hpclFTW_i3kOmn_GeppGeAii1LDZ2CjONzZfhN3Wb5gVfTJjiHBXsDt4iX4ZF0OkXiQyLT6DD0-r6V0R_TSv9SPjedna5eiXvpRE72jQEOpd0/s1600/s11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCiqPcUtUjrvvKlvvpNZz7kgtlwzJYe79hpclFTW_i3kOmn_GeppGeAii1LDZ2CjONzZfhN3Wb5gVfTJjiHBXsDt4iX4ZF0OkXiQyLT6DD0-r6V0R_TSv9SPjedna5eiXvpRE72jQEOpd0/s320/s11.png" height="168" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the Edit Solution Platforms dialog box (under the active
solution platform dropdown), we want to select the Win32 platform and rename it
to Win32GL. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZOOszSkFIYYDP9Ngbw7RvOgBnNE_dcsDv7pWIwQiw_lZRz6zw6qPAGY4FKPm2Tw10jCZ0HYL6WP73oh9GZkmGSijY3Z2dwVraJIRENe3yScaXX30lKirXA2obAcUExp0QYmI2WexpogI/s1600/s14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZOOszSkFIYYDP9Ngbw7RvOgBnNE_dcsDv7pWIwQiw_lZRz6zw6qPAGY4FKPm2Tw10jCZ0HYL6WP73oh9GZkmGSijY3Z2dwVraJIRENe3yScaXX30lKirXA2obAcUExp0QYmI2WexpogI/s320/s14.png" height="203" width="320" /></a></div>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Next we want to set our Active Solution Configuration to
Debug. Notice that the PhyreCore and PhyreFramework will automatically change
to GLDebug, we want to make our project’s configuration also say GLDebug. We do
this by creating a new configuration:<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN2iMTZMwuRgsOWzSGB0smpi0bG4DCfG3rjNLkgSbc5e_afWHcrcw3lA44izf0jedgnQPWikPGPdQzNDG6KtWBn0t5d2qH0s_WvjQpifYPwWhwMG8X7nxM8V45iynjlfVNuBf2iTkppWeI/s1600/s15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN2iMTZMwuRgsOWzSGB0smpi0bG4DCfG3rjNLkgSbc5e_afWHcrcw3lA44izf0jedgnQPWikPGPdQzNDG6KtWBn0t5d2qH0s_WvjQpifYPwWhwMG8X7nxM8V45iynjlfVNuBf2iTkppWeI/s320/s15.png" height="203" width="320" /></a></div>
</div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuQ2q-fXTWtgtre2cfY0Ae5Kz2T6qvil7VHyk-lzx7QppfMJMhe3fzlGNemCO3aLt0fBC5xsK2pldQr425A4_95ishB39H7g6bfmwShg335pVUTPdMX4C_RfKYTaHtTglsuaioJii_Fnr/s1600/s16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuQ2q-fXTWtgtre2cfY0Ae5Kz2T6qvil7VHyk-lzx7QppfMJMhe3fzlGNemCO3aLt0fBC5xsK2pldQr425A4_95ishB39H7g6bfmwShg335pVUTPdMX4C_RfKYTaHtTglsuaioJii_Fnr/s320/s16.png" height="199" width="320" /></a></div>
<br /></div>
<div class="MsoNormal">
By creating our project configuration with this name, the
project will use the PhyreApp property sheet to set the project properties
up for us. Repeat this process for GLDebugOpt and GLRelease and for any other
platforms you wish to support.<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
Once you set up your configurations, you need to actually
tell the project to use the property sheet. This is done by opening the
Property Manager (View > Other Windows > Property Manager), right
clicking on the project and navigating to the directory below:<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGsiOEKpS8ZoI6O31fKEbWvfZ8Tqko6J6YR0ZXVzHE8r3uEv83crGkzlqhs7wKU1L2Bo0UvmYGa1m0-xmyr4BywsTUQnpEVQbXp4aySZAqvGID2pOpOIZAcENnPc2XlamUYZvrs8sgr6d/s1600/s18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGsiOEKpS8ZoI6O31fKEbWvfZ8Tqko6J6YR0ZXVzHE8r3uEv83crGkzlqhs7wKU1L2Bo0UvmYGa1m0-xmyr4BywsTUQnpEVQbXp4aySZAqvGID2pOpOIZAcENnPc2XlamUYZvrs8sgr6d/s320/s18.png" height="188" width="320" /></a></div>
<br /></div>
<div class="MsoNormal">
You want to add the PhyreCommon.props and PhyreApp.prop
property sheets to your project.<br />
<h4>
Step Five: Clean up</h4>
</div>
<div class="MsoNormal">
Finally, all we need to do now is a little bit of clean up
in our .vcxproj and .sln files. Currently, Visual Studio added the PhyreCore, PhyreFramework
and the property sheets with absolute paths. This is bad, we want relative
paths. I was not able to find a way to change this in Visual Studio, so we must
use good ol’ NotePad++.<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
Open the .vcxproj file and search for any absolute paths and
make them relative by using environment variables. An easy way to do this is by
searching for “..\”. In the image below we see some nasty absolute paths. Note: depending on where your project is located, you may have a different absolute paths, so modify accordingly.</div>
<div class="MsoNormal">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3s7nCKkmo_0nhhZLX2Y9T1lhPz6Ua9D_6V8ZsQw2rRqwxDns63ijpQptI6KgJ8mXiK-YXGIUEe_kr8KIHPdI7LPGvBbn-4kCGSFisL_AftAQKtH9N4MHaq2YzV6nDjK_6cegCOOMfal_R/s1600/s19.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3s7nCKkmo_0nhhZLX2Y9T1lhPz6Ua9D_6V8ZsQw2rRqwxDns63ijpQptI6KgJ8mXiK-YXGIUEe_kr8KIHPdI7LPGvBbn-4kCGSFisL_AftAQKtH9N4MHaq2YzV6nDjK_6cegCOOMfal_R/s320/s19.png" height="62" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Exerpt from the Phyre project's vcxproj file. Note the ../../, this is an absolute path meaning, if we were to share this project with teammates as is, they would have to put the project folder in the exact same directory we put it in.</td></tr>
</tbody></table>
</div>
<div class="MsoNormal">
We can fix this by using the $(SCE_PHYRE) environment
variable. The easiest way to do this is by using NotePad++’s find and replace
feature.<o:p></o:p><br />
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrOfFYBO0iUhpKuNvYu2V4RK03NYThO0f-1sqPhPGUzMhZGW7kBpYMrp8o-U6tqGMFhihHHHfungizOJTpmgU9DHYt-MY_KhAzG-93Pvu_WjsPD53DyKkuaGKL83CjuBjdaexSmdXenRx/s1600/s20.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrOfFYBO0iUhpKuNvYu2V4RK03NYThO0f-1sqPhPGUzMhZGW7kBpYMrp8o-U6tqGMFhihHHHfungizOJTpmgU9DHYt-MY_KhAzG-93Pvu_WjsPD53DyKkuaGKL83CjuBjdaexSmdXenRx/s320/s20.png" height="202" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Again, depending on where you created your project, the "Find what" value may be different for you. </td></tr>
</tbody></table>
<div class="MsoNormal">
We must do the same thing for the .sln file. The syntax for
environment variables is different in the .sln. You use the following: <o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe4GWTsIXKDl2i6VKb421eL9S3kFWa6Gjs-zjI6olDVMYYvu47jrtseLl6y3Encil_o_PuvczqS9GRafMEcQ67SuLwK9H1xwGDAFcab-UJyAIzDKB5dWhloxBP5udLkLhUEjqqxc_9vrx/s1600/s20_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe4GWTsIXKDl2i6VKb421eL9S3kFWa6Gjs-zjI6olDVMYYvu47jrtseLl6y3Encil_o_PuvczqS9GRafMEcQ67SuLwK9H1xwGDAFcab-UJyAIzDKB5dWhloxBP5udLkLhUEjqqxc_9vrx/s320/s20_1.png" height="206" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now we have nice clean relative paths:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp6SaduoEO56V-d90TffYSeQV0_CxCPzOZmyhyphenhyphenqvSOt2krtia1iw53lSP_44xJdpa84GgbjIcqdcSaD7ISkPDWdRQkKs52CxBivVnm_YRup-Us_hTkEA2ubXJgQ9q0Vbgh-ZOg30uOIkNc/s1600/s25.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp6SaduoEO56V-d90TffYSeQV0_CxCPzOZmyhyphenhyphenqvSOt2krtia1iw53lSP_44xJdpa84GgbjIcqdcSaD7ISkPDWdRQkKs52CxBivVnm_YRup-Us_hTkEA2ubXJgQ9q0Vbgh-ZOg30uOIkNc/s320/s25.png" height="78" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Excerpt from the Phyre project's vcxproj file after modification. Note the we are now using environment variables, this is a relative path meaning, if we were to share this project with teammates, they can put it anywhere they want on their computer.</td></tr>
</tbody></table>
Once you have set up the configurations for each of the platforms you wish to support, you may wish to delete unnecessary project configurations to clean up your configuration drop down menu. This is optional.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RlSV7FYhNQIYJmT93QTRj2fILcKhhCPBAt5M1I3mJaLxpesu-na7-M5qwTWtsViesu-TaNnsiUnR1fOJGesGUe-8NVa8pizKtYFTdk83Hddk3jx0sD0IIo76eRxR5IywRIMU80e8HWI/s1600/s23.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RlSV7FYhNQIYJmT93QTRj2fILcKhhCPBAt5M1I3mJaLxpesu-na7-M5qwTWtsViesu-TaNnsiUnR1fOJGesGUe-8NVa8pizKtYFTdk83Hddk3jx0sD0IIo76eRxR5IywRIMU80e8HWI/s200/s23.png" height="200" width="114" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Currently our dropdown looks like this</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxKgHNljJmErJltCPfz0OHHTnmSOrIGwhpZvzXywnjYzchylxz1GDWQCZe3sXbWfBoSdhpNgxKRKvBXX1MlEQXtGL8arEbHeg_qaV5C1dogyRaXK0kHoA9sWxlgSitvGC4wymQqo9vkzV/s1600/s24.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxKgHNljJmErJltCPfz0OHHTnmSOrIGwhpZvzXywnjYzchylxz1GDWQCZe3sXbWfBoSdhpNgxKRKvBXX1MlEQXtGL8arEbHeg_qaV5C1dogyRaXK0kHoA9sWxlgSitvGC4wymQqo9vkzV/s200/s24.png" height="135" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">We want it to look like this</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
You can remove all of these unnecessary configurations by going back into the configuration manager and deleting the Debug, DebugOpt and Release solution configurations.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIT-oLc0sOxkr39qlr7cO2wgJL0FJx7c-SZAgATthVBBFjD0XoHwYq0A9gIgaFKFDSBBr-6LChdpMUhRWiRG7qDte8cumbbGabW-CRNtqXlDNykJwslKX6N1T_DpdvXSbZZ4lfEJBvU_4d/s1600/s22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIT-oLc0sOxkr39qlr7cO2wgJL0FJx7c-SZAgATthVBBFjD0XoHwYq0A9gIgaFKFDSBBr-6LChdpMUhRWiRG7qDte8cumbbGabW-CRNtqXlDNykJwslKX6N1T_DpdvXSbZZ4lfEJBvU_4d/s320/s22.png" height="204" width="320" /></a></div>
</div>
<div class="MsoNormal">
<br />
Again, you may remove everything except for the Debug, DebugOpt and Release configurations. You may also do this same process to remove platforms you are not supporting.<br />
<br />
At this point we should have all of our dependencies linked
and once we add some code the project will be able to compile. To test this
yourself, you can add the “basic.h” and “basic.cpp” source files to your
project from the “Samples” folder in the Phyre install directory and comment
out every line which has “s_loadedClusters” or “m_cluster” in it. This will
give you a window with a blue color. If you do not comment these lines out,
your application will crash instantly. <o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Now that we have a project which builds let’s load and render
an object to the screen. This is easier said than done, in order to truly
understand what happens when you click that build button, you must understand
the Phyre asset pipeline, which I will cover in my next post.<br />
<br />
Feel free to tweet me at @MikeGameDev if you see any problems or if you need any help, I'll try my best to help you out.</div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-86401300291061811602013-11-28T21:11:00.003-08:002013-11-28T21:11:45.137-08:00Navigation Mesh, Path Finding and Implementation in Resistance 3<div class="separator" style="clear: both; text-align: center;">
</div>
<i>Artificial intelligence is creating the illusion of
intelligent agents.</i><br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In class we discussed that a navigation mesh is a simplified
version of the complex level mesh. We also talked about Recast which is a handy
tool that will import the mesh of your level and will create a nav mesh from
that. Now how does it do that? The image below outlines the process at
a very high level:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydbRGJ83q9sKuqp_JpDX0Hua4wbj_l6GZCMyq5ElVNRZc9avxLBQCncLbbTAsEYKqMZpB61wjcD7HBulwA8bZefTPONJ4JsVGDn4emKmaE0cYl7G3gCA2OYtWrsINU0_dnW4l-iVeEAFM/s1600/a2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydbRGJ83q9sKuqp_JpDX0Hua4wbj_l6GZCMyq5ElVNRZc9avxLBQCncLbbTAsEYKqMZpB61wjcD7HBulwA8bZefTPONJ4JsVGDn4emKmaE0cYl7G3gCA2OYtWrsINU0_dnW4l-iVeEAFM/s320/a2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Figure 1: Recast's Navigation mesh generation algorithm. Source: Insomniac Game's GDC 2011</td></tr>
</tbody></table>
<div class="MsoNormal">
I wanted to talk about something that we sort of touched on
in class but didn`t go into too much detail about: so you setup Recast,
generate your Nav Mesh…now what?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
What algorithms and data structures do you use to store this
data and once you store this data, how do you use it to create “intelligent”
agents?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You may say “just put it in a graph and traverse the graph
using the A* algorithm”, and that’s correct but what type of graph
implementation should you use and how do you implement A* traversal? In this
post I will talk about a couple different ways to store graph data and the A*
graph traversal algorithm. I will also briefly talk about Insomniac Game’s
implantation of these things in Resistance 3.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h3>
Storing The Data</h3>
<div class="MsoNormal">
Well let’s reflect on the data we have from our nav mesh. We
have nodes, which are the vertices which make up the triangles and edges which
are the lines that connect the vertices together. Consider the following
example:</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fV3b8EUzMWYEgcOnCDGp2XOWhmIDwywPDkOE1r7WklTHBQSAvl4WZN6D5AMGnGqRZ78JV2SJy4QevIuec4BGBCHYNZmSISMIHcMJpXoQuMqri4JylJVU2ErdFwyLOW3qU3z5PO7-ZNE8/s1600/a4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="305" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fV3b8EUzMWYEgcOnCDGp2XOWhmIDwywPDkOE1r7WklTHBQSAvl4WZN6D5AMGnGqRZ78JV2SJy4QevIuec4BGBCHYNZmSISMIHcMJpXoQuMqri4JylJVU2ErdFwyLOW3qU3z5PO7-ZNE8/s320/a4.png" width="320" /></a></div>
<div class="MsoNormal">
How would you, the human capable of thought go from the
green square to the red square? Nothing is blocking you so you would simply say
“just go in a straight line”, which is absolutely correct. But the real
question is how would the computer perform this task? The computer knows which
node it is currently on (the green one) and which node it needs to get to (the
red one) and that’s it. We must define a relationship between the nodes. These
relationships are known as edges. An edge connects two nodes and defines that
if I am on node X I may travel to node Y. The question now is how do we do
this? Well we could just have a giant matrix and store Boolean values which
specify whether two nodes are connected or not. This is known as an adjacency
matrix.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0s9uQsEvEX3XqXdSTsV66LvERS5Di0YWgAGviQsDiJfF6XQdhTCLsBleBBERUM3KoH28hIsA9faDcDQWDxKt-ST-rSFuscmM3oKbw8Tt40ntqdehUKGYRJPfFB6Sc-C9wtzJCvY3ZFseo/s1600/a5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0s9uQsEvEX3XqXdSTsV66LvERS5Di0YWgAGviQsDiJfF6XQdhTCLsBleBBERUM3KoH28hIsA9faDcDQWDxKt-ST-rSFuscmM3oKbw8Tt40ntqdehUKGYRJPfFB6Sc-C9wtzJCvY3ZFseo/s320/a5.png" width="320" /></a></div>
<div align="center" class="MsoCaption" style="text-align: center;">
Example of an
adjacency matrix. Source: Programming Game AI by Example by Mat Buckland<o:p></o:p></div>
<div align="center" class="MsoCaption" style="text-align: center;">
<br /></div>
<div class="MsoNormal">
In the example above, the matrix stores which nodes a given
node is connected to and which nodes it isn’t connected too. A "1" defines that
there is a valid connection and a "0" defines that there is not a valid
connection. This is a perfectly valid data structure but it wastes quite a bit
of memory. Another more memory efficient data structure are adjacency lists.
Adjacency lists allow you to deduce the same relationship between nodes but use
significantly less memory. This is done by simply storing which nodes a given
node is connected too and making the assumption that any other node not on the
adjacency list is not connected.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7k5ipeCbwN-decG9laRnTfy8TFr6O7RJ9uNkqLDli2SBMdcw4Nqc43_GnAfisxV1BeflDThRjETBfkYtFU42UCSUNP0RCpF4Qq-un4TvuZYHUoO5erZQm2D1tCrNxHDCGtZxUdZQjwIpF/s1600/a6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7k5ipeCbwN-decG9laRnTfy8TFr6O7RJ9uNkqLDli2SBMdcw4Nqc43_GnAfisxV1BeflDThRjETBfkYtFU42UCSUNP0RCpF4Qq-un4TvuZYHUoO5erZQm2D1tCrNxHDCGtZxUdZQjwIpF/s1600/a6.png" /></a></div>
<div align="center" class="MsoCaption" style="text-align: center;">
Example of an
adjacency list. Source: Programming Game AI by Example by Mat Buckland<o:p></o:p></div>
<div align="center" class="MsoCaption" style="text-align: center;">
<br /></div>
<div class="MsoNormal" style="page-break-after: avoid;">
For each node, you must specify
which nodes it is connected to. Storing an adjacency matrix for each node would
be a memory massacre so use an adjacency list instead. Below is how you could
go about storing your navigation data.<o:p></o:p></div>
<div class="MsoNormal" style="page-break-after: avoid;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALl8s3uDR7jdCGtYZ3lPh6Au3Z__qr5JZqb_ry1PkZD-9oCz0Qy7PnUAl1f64_-HaM9U-iCw_uvOb8E216cf2ZvuHC7mWBPjnKUb6dhl672U3wwWdw_L-iu0bjKs6cIA7ONo2cB1zK0Qj/s1600/a7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALl8s3uDR7jdCGtYZ3lPh6Au3Z__qr5JZqb_ry1PkZD-9oCz0Qy7PnUAl1f64_-HaM9U-iCw_uvOb8E216cf2ZvuHC7mWBPjnKUb6dhl672U3wwWdw_L-iu0bjKs6cIA7ONo2cB1zK0Qj/s320/a7.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">How I stored data for navigation in a past project</td></tr>
</tbody></table>
<div class="MsoNormal">
Each node has an ID which I use as an index into the two
lists in the code above. For example: Data about Node 0 is stored in index 0 of
the<span style="font-family: Courier New, Courier, monospace;"> _nodes</span> list and the adjacency list for Node 0 is stored in index 0 of the
<span style="font-family: Courier New, Courier, monospace;">_edges</span> list.</div>
<h3>
Traversing the Graph</h3>
<div class="MsoNormal">
Now that you have your data organized in a nice graph, you
can finally traverse the graph. There are many algorithms to traverse a graph,
if you are interested in learning about these algorithms I highly recommend the
book “Programming Game AI By Example” by Mat Buckland, this book goes into
great detail about each traversal method and provides excellent examples. The
A* algorithm really is the best of the bunch, not only does it find the most
efficient path from A to B, it’s also the fastest.<o:p></o:p></div>
<div class="MsoNormal">
Suppose I place some obstacles in our example above:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_O9xSNU4Sz_M5gRs1rVbK6P7nJwJ9hV476l20QD0hduQGnAsd_lcHCnNTYopPLjx1LhVGh3k0-OTYXHgs7DBiBfQc2cwsOpsetMuQUmBd70OPcCV5bq0dTfxNXUypS2CWDjLpFN59oGiB/s1600/a8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_O9xSNU4Sz_M5gRs1rVbK6P7nJwJ9hV476l20QD0hduQGnAsd_lcHCnNTYopPLjx1LhVGh3k0-OTYXHgs7DBiBfQc2cwsOpsetMuQUmBd70OPcCV5bq0dTfxNXUypS2CWDjLpFN59oGiB/s320/a8.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
The blue path is the most optimal route returned by the algorithm.
Those red branches are all of the paths that the algorithm once considered.
Clearly from this visualization, you should be able to see that the computer’s
method of finding the most optimal path varies significantly from a human’s.
The A* algorithm is a cost based search. This means each edge has a cost associated
with it. It also means that the most optimal path may not necessarily be the
one with the least amount of nodes.</div>
<h3>
Resistance 3</h3>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
In the Insomniac Game’s GDC 2011 talk about navigation they
discussed that the Recast library was used to generate their navigation meshes.
Their usage of AI using navigation meshes is rather straight forward, it is
outlined below: <br />
<!--[endif]--><o:p></o:p></div>
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaI2l9yc0ZTDeKkBJcuDnIKNNO-_MmixcODiYZZoiGRMffazbnkrPQLrxEnETiPS-NpqGOUNYjiUTZ6AKm61C5v5lui6vwbfRBNWTRPRMHt6R5EjEhkcjCF_nbVFuwh449qJU4MB_Mnrj6/s1600/a3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaI2l9yc0ZTDeKkBJcuDnIKNNO-_MmixcODiYZZoiGRMffazbnkrPQLrxEnETiPS-NpqGOUNYjiUTZ6AKm61C5v5lui6vwbfRBNWTRPRMHt6R5EjEhkcjCF_nbVFuwh449qJU4MB_Mnrj6/s320/a3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
First they are requesting and setting the requirements that
an agent needs, then they are finding and smoothing a path. Smoothing a path is
done to create a more natural movement of an agent as the follow a path. An exaggerated
example of this can be seen below. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
They are then using an obstacle avoidance steering behaviour
to ensure the agent does not get stuck. The obstacle avoidance steering behaviour
is not very difficult, you essentially just cast a sphere around your agent and
test for collision, if there is no collision then carry on if there is the
obstacle avoidance function will return a direction vector pointing away from
the obstacle. Since steering behaviours can be summed together (via weighted
average), if you are performing both avoidance and path following on an agent,
the direction will point away from the obstacle and will still guide your agent
to the next node in it’s path. In the most simple implementation of steering
behaviours, this direction will be multiplied by your agent’s speed and
therefore move your agent in that direction.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Since the agent is not just sliding along the path, its also
animating so they may have special animations when specific obstacles are
encountered. For example if there is a knee high obstacle, instead of making
the agent awkwardly run around it, they may just play a “stepping over” animation.
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I asked this question before, but I’ll ask it again: You the
human see a knee high obstacle, what do you do? You just step over it. Now how
will the computer know that an obstacle is knee high? The way Insomniac solved
this problem was by having a designer go in and place identfiers on specific
obsticales in the world and when an enemy encourters one of these identifiers,
they would handle it accordingly. For example there is an enemy who is able to
jump onto roof tops and there is another enemy who must go around. Both enemies
use the same nav mesh, by placing identifiers around the world, and giving each
AI a type, you could do a condition: <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Courier New, Courier, monospace;">If (obstacleIdentifier == Building && agent.Type ==
roofJumper)</span></div>
<div class="MsoNormal" style="text-align: start;">
<span style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;"> agent.jumpOnRoof()</span></span></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-family: Courier New, Courier, monospace;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: Courier New, Courier, monospace;">If (obstacleIdentifier == Building && agent.Type ==
roofJumper)<br /> agent.goAround()</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<br />
<div class="MsoNormal">
Now ofcourse this is just a simple example, but hopefully it
gets the point across.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-71029396417589406332013-11-12T18:13:00.000-08:002014-07-27T15:48:38.158-07:00Compiling PhyreEngine’s Collada Plugin for Maya 2014In the previous post we went over PhyreEngine’s setup process, the previous post was more of a tutorial and with this post I’m going to take a different approach and try to walk you through my thought process. <b>If you are not interested in my thought process and just want to see how to compile the plugin for Maya 2014, scroll down to the TLDR at the bottom of this post.</b><span style="background-color: white;"><span style="color: white;">*space*</span></span><br />
The asset pipeline in PhyreEngine at a very high level is as follows:<br />
<div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">I.</span><span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">Create asset in Maya or 3DS Max</span><span style="font-size: 7pt; text-indent: -36pt;"> </span><br />
<span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">II.</span><span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">Export asset in Collada (.dae) file format</span><span style="font-size: 7pt; text-indent: -36pt;"> </span><br />
<span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">III.</span><span style="font-size: 7pt; text-indent: -36pt;"> </span><span style="text-indent: -36pt;">Convert asset data to platform specific runtime asset</span><br />
<ul></ul>
<div class="MsoListParagraphCxSpMiddle" style="text-indent: -36pt;">
<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="text-indent: -36pt;">
<o:p></o:p></div>
<div class="MsoNormal">
This is a heavily simplified version of Phyre’s asset pipeline, in a future blog post I will get down and dirty with Phyre’s asset pipeline and go into a lot more detail about it.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
When we installed PhyreEngine, there was an option to install exporters for Maya. So that means Phyre installed the Collada plug-in for us…right?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So I went into Maya 2014 and of course, the exporter wasn’t there. First thing I did was try looking for the exporter in the Phyre directory.<o:p></o:p></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiH7jmsPB5GKu21I-YDgIMnkjOz_3itqx64rN3MB7qTVSa3lQ0m5oAuZjWykxOZVumHxMHGUt9zMijTzKwI4SggA_3zBhvOXybJe2qN0KQD1T-MCfY_TLK15L6nIzX7d84N9c0az0dcZC/s1600/collada7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiH7jmsPB5GKu21I-YDgIMnkjOz_3itqx64rN3MB7qTVSa3lQ0m5oAuZjWykxOZVumHxMHGUt9zMijTzKwI4SggA_3zBhvOXybJe2qN0KQD1T-MCfY_TLK15L6nIzX7d84N9c0az0dcZC/s320/collada7.png" height="320" width="223" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 1.</b> Versions of Maya PhyreEngine 3.4 installs the exporter for</td></tr>
</tbody></table>
<div class="MsoNormal">
It turns out PhyreEngine 3.4 installs the exporter for every version of Maya…except the version we’re using, Maya 2014.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Collada files have the .dae file extension. I noticed that Maya has a .dae exporter so I figured it wouldn’t hurt to give it a shot. Long story short, it didn’t work. The engine would complain and wants us to export models using their exporter.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So at this point, the way I see things, I have two options:<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: 54pt; text-indent: -18pt;">
1.<span style="font-size: 7pt;"> </span>Use Maya 2013<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt;">
2.<span style="font-size: 7pt;"> </span>Solve the problem<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt;">
<br /></div>
<div class="MsoNormal">
Spoilers: I solved the problem.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Jumping to Maya 2013 would be taking the easy way out and was considered the last resort. Now I am going to go through my process of solving this problem. The first thing that came to mind when I saw all these different versions of the same plugin for the different versions of Maya was “has the creators of Collada written a version for Maya 2014?” so I went to the Google and searched for “Collada”, of course I went straight to <a href="http://en.wikipedia.org/wiki/COLLADA" target="_blank">Wikipedia</a>. To my dismay I saw that the latest version of Collada was created in August 2008, 5 years ago. So I immediately started to wonder: “how could it be that a plugin that was written in 2008 is able to work with a program created in 2014?”<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
My first thought was: maybe all of the Collada plugin files are the same and Phyre’s install just simply copies the plugin into the appropriate Maya directory (defined by an environment variable), but since Maya 2014 wasn’t released when this version of PhyreEngine (3.4) was built, Phyre doesn’t know the name of the Maya 2014 environment variable and therefore cannot put the plugin in the appropriate folder. So I tried simply copying the Maya 2013 plugin into the Maya 2014 plugin directory.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Maya’s plugin manager was able to find the plugin. However enabling the plugin resulted in several errors, so obviously this means each version of the Collada plugin for Maya is in some way different. Let’s try and figure out how.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Fortunately PhyreEngine gives us the source for the Collada plugin for Maya. I opened the source and I had no idea where to start. So I tried to just build the project, and it failed. Never in my life have I been so thankful for a project to fail compiling.<o:p></o:p></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtd01dwVTRGjek9_P08v9pIbBcJ5cg0kvdZoIuGcR898FHt8nX_GkmM34DwZptK21zokkp0Suo9PIODpMSXTQ5G7q4aLZs4-UZLfLBdhsOBbIKIvoGAQw_r7Fy-YeMw2TA4SXj70znGf2j/s1600/collada1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtd01dwVTRGjek9_P08v9pIbBcJ5cg0kvdZoIuGcR898FHt8nX_GkmM34DwZptK21zokkp0Suo9PIODpMSXTQ5G7q4aLZs4-UZLfLBdhsOBbIKIvoGAQw_r7Fy-YeMw2TA4SXj70znGf2j/s320/collada1.png" height="193" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 2. </b>Errors when attempting to compile Maya exporter</td></tr>
</tbody></table>
<br />
<div class="MsoNormal">
The compiler is very clearly telling us that it cannot find a file. Also we see that the directory it is looking for is using angled brackets, rather than quotes. This means that the directory that the project is looking for was added to the “Additional Include Directories” project property.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Navigating to the Additional Include Directories property (Under C/C++) and inspecting the values we see:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YXbO_2qfVx7DTVgQ4LMqBcyUgYdUf-L6368hUMeehWgtiHx_XCTwWCIgcVorMWKu3avw3U67G_Gw3fz9A6WpZC0JY5m0RbRsOXDEIDWhgxNXxYIYrUTVGAi73a1WmTxYA4PZRyPjT73u/s1600/collada2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YXbO_2qfVx7DTVgQ4LMqBcyUgYdUf-L6368hUMeehWgtiHx_XCTwWCIgcVorMWKu3avw3U67G_Gw3fz9A6WpZC0JY5m0RbRsOXDEIDWhgxNXxYIYrUTVGAi73a1WmTxYA4PZRyPjT73u/s320/collada2.png" height="226" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 3. </b>Include directories for Maya 2013 plug-in. Note the "2013" in the file path.</td></tr>
</tbody></table>
<div class="MsoNormal">
In the image above we see that the project is looking for the Maya 2013 environment variable which defines Maya 2013’s directory. Very, very interesting. Let’s look at Maya 2012’s property pages.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mbLoGRD4ydHwBpbEjcY0-LgfSsIr_r0mtzzpkDSxri5O39QknaLglvv47yOeV9z7vGOLRHmvrAj86GMUeKicERDhgrJir4PHPlXxx2xr-3hK12eYOGwQ5Nw6BGVcu29AvJWmG14RVOM0/s1600/collada3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mbLoGRD4ydHwBpbEjcY0-LgfSsIr_r0mtzzpkDSxri5O39QknaLglvv47yOeV9z7vGOLRHmvrAj86GMUeKicERDhgrJir4PHPlXxx2xr-3hK12eYOGwQ5Nw6BGVcu29AvJWmG14RVOM0/s320/collada3.png" height="227" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 4. </b>Include directories for Maya 2013 plug-in. Note the "2012" in the file path.</td></tr>
</tbody></table>
<div class="MsoNormal">
We see the exact same thing. This means my first thought wasn’t that far off. Each of these Phyre build configurations were manually made by the PhyreEngine team to specify the install directory of a specific Maya Version. Since Maya 2014 wasn’t out when this version of Phyre was released, they could not make a configuration for it.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So how do we fix this? I created a new build configuration for Maya 2014 in the configuration manager. I also chose to copy the settings from the Maya 2013 build configuration.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pgVX5v_GH8WijHHByNiykFy4-y067S2tNSN303GkPLRGqgluk_oGfNUNgicqv2v_jwuslz16legcbs228trg5hQgy4c8fMt3Tbpkaw_PTiuuynGZRXpomV0u4aRVKAOpFJ8_jCgFaH8D/s1600/collada4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pgVX5v_GH8WijHHByNiykFy4-y067S2tNSN303GkPLRGqgluk_oGfNUNgicqv2v_jwuslz16legcbs228trg5hQgy4c8fMt3Tbpkaw_PTiuuynGZRXpomV0u4aRVKAOpFJ8_jCgFaH8D/s320/collada4.png" height="199" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 5. </b>Visual Studio Configuration Manager. I am creating a new config named Maya 2014.</td></tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now lets set the correct include directory for the newly created configuration. The error says it was looking for MBoundingBox.h, well where the heck is MBoundingBox.h? There is this very useful program called <a href="http://www.voidtools.com/" target="_blank">“Everything”</a> which very quickly searches every file on your computer so I simply entered “MBoundingBox.h” into Everything and sure enough, it found it in the Maya 2014 directory. </div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKk8QLzmIZN2xtFS6TC5c-vaJknqC_PuLTCj10Mop3_UuDp_pFRBkyzKrP0loOj4GtBzaIpLo2xjOJhXNFNlsevbpdfRPeOymkvI-sfF_BdyWnPyy8zEJJhWBcqtswBliGsmbJsftrfBXJ/s1600/erthing.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKk8QLzmIZN2xtFS6TC5c-vaJknqC_PuLTCj10Mop3_UuDp_pFRBkyzKrP0loOj4GtBzaIpLo2xjOJhXNFNlsevbpdfRPeOymkvI-sfF_BdyWnPyy8zEJJhWBcqtswBliGsmbJsftrfBXJ/s320/erthing.png" height="59" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 6. </b>I used the handy program "Everything" to locate the location of the file on my computer. Observe that the file path is the exact same as the paths for the Maya 2013 and 2012 versions with the only difference being "2014"</td></tr>
</tbody></table>
<div class="MsoNormal">
Now that we know where the file is located, lets simply add its directory to the VC property page. Let’s try rebuilding the project, and of course it fails.<br />
<br /></div>
<div class="MsoNormal">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUgskQbSm9qPlx2gG9LJIpnqbL57ZpdhIvB3b_gtUh-G5RCBOUaLG5CKxOuArHlRD0ABCNp1XlryazbB17cSmiP7qi9gwZHD6Do_M0mN_FsSQpEGuFWHdiZzO2H3CLjEEVswNERGHBYTP/s1600/collada8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUgskQbSm9qPlx2gG9LJIpnqbL57ZpdhIvB3b_gtUh-G5RCBOUaLG5CKxOuArHlRD0ABCNp1XlryazbB17cSmiP7qi9gwZHD6Do_M0mN_FsSQpEGuFWHdiZzO2H3CLjEEVswNERGHBYTP/s320/collada8.png" height="15" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 7. </b>Now the compiler is telling us it cannot find a library file.</td></tr>
</tbody></table>
<br /></div>
<div class="MsoNormal">
Can’t find a library file…well is there a lib folder in the Maya directory? Why yes there is. Let’s go ahead and add that.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now the solution builds successfully. Going back to the exporter directory, we see our newly built Maya 2014 plugin. </div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1nDvsXcZkgXylfFA4QsSh5VaCHNJS8lXujhjwf_Bbz7ItzVPjtYGpUeqkUN8Rhi0kkfIgkfox7LJDNr5-aetm8Mg0FOUvsEFbHs4NoIChgrSq5hObNb0oBTFUQY945_x0lo1y7OYBQ478/s1600/collada11.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1nDvsXcZkgXylfFA4QsSh5VaCHNJS8lXujhjwf_Bbz7ItzVPjtYGpUeqkUN8Rhi0kkfIgkfox7LJDNr5-aetm8Mg0FOUvsEFbHs4NoIChgrSq5hObNb0oBTFUQY945_x0lo1y7OYBQ478/s320/collada11.png" height="320" width="194" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><b>Image 8. </b>Observe that a 2014 version of the exporter has been built.</td></tr>
</tbody></table>
<div class="MsoNormal">
Now the question is, will it work?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We install the plugin by putting the generted .mll file in the Maya plugin directory:<o:p></o:p></div>
<div class="MsoNormal">
%MAYA_INSTALL_DIR%/bin\plug-ins<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
And putting the associated scripts in the scripts folder:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
C:\Users\%USERNAME%\Maya2014\bin\plug-ins\My Documents\ maya\2014-64x\scripts<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We can now go back into Maya and successfully load the Collada plugin and export without error.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now that we finally have a model exported in a format Phyre likes, let’s import it and render it in engine…actually lets save that for another day.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><u>TLDR;</u></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
PhyreEngine 3.4 does not install the Collada plugin for Maya 2014, I am not sure if PhyreEngine 3.5 does or not, but if it doesn't I am confident that these same steps will apply.<br />
<br />
Steps to build PhyreEngine's exporter for Maya 2014:<br />
<div class="MsoNormal">
<ol>
<li>Build a new configuration in the configuration manager, copying settings from Maya 2013. (Image 5)<br /> <span style="color: white;">*space*</span></li>
<li>Update the Visual Studio Project include property (C/C++ > Additional Include Directories) to the include folder in Maya 2014's path (<span style="font-family: Courier New, Courier, monospace;">%MAYA_INSTALL_DIR%\include</span>)<br /><span style="background-color: white; color: white;"> *space*</span></li>
<li>Update the Visual Studio Project Library directory (VC++ Directories > Library Directories) to include the lib folder in Maya 2014's path (<span style="font-family: Courier New, Courier, monospace;">%MAYA_INSTALL_DIR%\lib</span>)<br /><span style="background-color: white; color: white;"> *space*</span></li>
<li style="text-align: left;">Copy the generated .mll (located at <span style="font-family: Courier New, Courier, monospace;">%SCE_PHYRE\Tools\Exporters\ColladaMaya\<i>*YOUR CONFIG NAME*</i></span>) file <br />to: <span style="font-family: Courier New, Courier, monospace;">%MAYA_INSTALL_DIR%/bin\plug-ins<br /> </span><span style="color: white;">*space*</span></li>
<li style="text-align: left;">Copy the mel scripts associated with the exporter (located at <span style="font-family: Courier New, Courier, monospace;">%SCE_PHYRE%\Tools\Exporters\ColladaMaya\Scripts</span>) <br />to: <span style="font-family: Courier New, Courier, monospace;">C:\Users\%USERNAME%\Maya2014\bin\plug-ins\My Documents\ maya\2014-64x\scripts<br /> </span><span style="color: white;">*space*</span></li>
<li>Enable the Plug-in in Maya's plugin manager.</li>
</ol>
</div>
<br /></div>
<div>
Note: <span style="font-family: Courier New, Courier, monospace;">%MAYA_INSTALL_DIR%</span> is the path where you installed Maya, you may not have a environment variable with this name. Fore example, my install directory for Maya is: <span style="font-family: Courier New, Courier, monospace;">C:\Program Files\Autodesk\Maya2014</span></div>
<div>
<br /></div>
<div>
IMO It's always fun to list the steps after you solve a problem like this, comparing how simple the solution is to all the things you tried. It's kinda funny, you can spend a few hours trying to figure out something that only takes a minute to to. As usual, if you have any questions tweet me at @MikeGameDev and I'll try my best to help you out.</div>
</div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-6189942382151988762013-11-10T17:50:00.000-08:002014-07-27T15:48:02.741-07:00Installing PhyreEngine and the PSVita and PS3 SDKsThis year we have the amazing opportunity to use PhyreEngine
and develop a game for the Playstation 3. This is the first of many posts
relating to the development of our game. One of the first challenges we faced
was installing the engine, in this post I will describe the process with
detail.<br />
<div>
<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Installing PhyreEngine is rather straight forward, but it
took quite a bit of figuring out get right. In this post I will outline all the
steps required to get PhyreEngine 3.4 up and running and deploying samples to
the PS Vita and PS3.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Before we start, I want to throw in a bit of a disclaimer
and mention that I realize that some of these steps may seem redundant but I
wanted to ensure that each one of my team mates and I had the exact same setups.
So if you do choose to use this guide just know that this is what worked for me
and my teammates on our machines.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This setup assumes Visual Studio 2010 is already installed,
it will cover installation of Visual Studio 2010 Service Pack One, the Windows
SDK (which was a bit of a pain), the DirectX SDK, the CGToolKit and finally,
PhyreEngine itself. Once we have PhyreEngine up and running some samples, we
will then install the PSVita and PS3 SDKs and get the samples running on those
platforms.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Step One: Setting up the requirements for PhyreEngine<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->a)<span style="font-size: 7pt;">
</span><!--[endif]-->If you do not already have it, download and
install Visual Studio 2010 SP1:<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 54.0pt; mso-add-space: auto;">
<a href="http://www.microsoft.com/en-ca/download/details.aspx?id=23691">http://www.microsoft.com/en-ca/download/details.aspx?id=23691</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->b)<span style="font-size: 7pt;">
</span><!--[endif]-->Uninstall the following if you have it installed
(don’t worry, we’ll reinstall them later):<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>I.<span style="font-size: 7pt;">
</span><!--[endif]-->Microsoft Visual C++ 2010 x64 Designtime<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>II.<span style="font-size: 7pt;">
</span><!--[endif]-->Microsoft Visual C++ 2010 x64 Redistributable<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>III.<span style="font-size: 7pt;">
</span><!--[endif]-->Microsoft Visual C++ 2010 x64 Runtime<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>IV.<span style="font-size: 7pt;">
</span><!--[endif]-->Microsoft Visual C++ 2010 x86 Redistributable<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>V.<span style="font-size: 7pt;">
</span><!--[endif]-->Microsoft Visual C++ 2010 x86 Runtime<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->c)<span style="font-size: 7pt;">
</span><!--[endif]-->Install the Windows SDK (the reason why we
uninstalled the above)<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>I.<span style="font-size: 7pt;">
</span><!--[endif]-->Download the Windows SDK:<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto;">
<a href="http://www.microsoft.com/en-ca/download/details.aspx?id=8279">http://www.microsoft.com/en-ca/download/details.aspx?id=8279</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>II.<span style="font-size: 7pt;">
</span><!--[endif]-->Make sure you uncheck Visual C++ Compilers and
Microsoft Visual C++ 2010 (important!)</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>III.<span style="font-size: 7pt;">
</span><!--[endif]-->Download and install this Windows SDK patch:<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto;">
<a href="http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=4422">http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=4422</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->d)<span style="font-size: 7pt;">
</span><!--[endif]-->Download and reinstall the Visual C++ 2010
Redistributable Packages (click repair if it says you already have it)<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>I.<span style="font-size: 7pt;">
</span><!--[endif]-->x86: <a href="http://www.microsoft.com/en-us/download/details.aspx?id=5555">http://www.microsoft.com/en-us/download/details.aspx?id=5555</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 90.0pt; mso-add-space: auto; mso-list: l1 level2 lfo1; mso-text-indent-alt: -18.0pt; text-indent: -90.0pt;">
<!--[if !supportLists]--><span style="font-size: 7pt;">
</span>II.<span style="font-size: 7pt;">
</span><!--[endif]-->x64: <a href="http://www.microsoft.com/en-us/download/details.aspx?id=14632">http://www.microsoft.com/en-us/download/details.aspx?id=14632</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->e)<span style="font-size: 7pt;">
</span><!--[endif]-->Download and Install the DirectX SDK:<br />
<a href="http://www.microsoft.com/en-ca/download/details.aspx?id=6812">http://www.microsoft.com/en-ca/download/details.aspx?id=6812</a><o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->f)<span style="font-size: 7pt;">
</span><!--[endif]-->Download and install the CGToolKit<br />
<a href="https://developer.nvidia.com/cg-toolkit-download">https://developer.nvidia.com/cg-toolkit-download</a><br />
<!--[if !supportLineBreakNewLine]--><br />
<!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
Step Two: Installing PhyreEngine<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]-->a)<span style="font-size: 7pt;">
</span><!--[endif]-->Extract PhyreEngine zip to HDD root<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]-->b)<span style="font-size: 7pt;">
</span><!--[endif]-->Run PhyreInstaller.exe<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -18.0pt;">
<br /></div>
<div class="MsoNormal">
Its that simple! At this point PhyreEngine should be up and
running for the Windows platform. You may be wondering why I told you to
uninstall all those Microsoft Visual C++ files, only to have you reinstall them
later. The reason for this is that I was having issues getting the Windows SDK
to install successfully and found that uninstalling these files solved the
problem. To set up PhyreEngine for the PS3 and PS Vita platforms you must do
the following:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Step Three: Installing PSVita SDK<o:p></o:p></div>
<div class="MsoNormal">
Step Four: Installing the PS3 SDK<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Both SDKs have similar installers and the instructions to
install them are the exact same. When you first run the installers, you will be
greeted with a screen asking you to choose a path. This screen is not your
install path, but is just a path where the installer will extract files to. I
believe you may safely delete the path after installation of the SDK (I haven’t
noticed any problems).<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Once the files are extracted, you will be asked to select
which features you want as well as your install directory. We just chose to
install everything and used the default directories chosen by the installers
should be fine. Now a little note about the install directory, technically you
could install it anywhere, but I wouldn’t recommend that, unless you are big on
tinkering with environment variables and Visual Studio project properties. The
PhyreEngine documentation has a list of environment variables and “sample”
values for the variables; however I found that there were some issues with
parts of the engine if the environment variables weren’t set to the exact same
values in the table. I would post the table here but I do not think I am
allowed to, if you have PhyreEngine this table can be found in the getting
started document. Now you should be able to build PhyreEngine projects for Windows, PSVita and PS3. Note that the Playstation platforms have a bunch of tools you may want to install (ie. PSVita Debugger, PS3 Target Manager etc.), these tools aren't required but may make your life easier.</div>
<br />
<div class="MsoNormal">
Anyways, that’s all for now. Now you know how to install
PhyreEngine! If you have any problems you can Tweet me at @MikeGameDev and
I’ll try my best to help you out.<o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com2tag:blogger.com,1999:blog-7531886437789952314.post-73137708768833706592013-10-13T20:57:00.003-07:002013-10-13T20:57:44.084-07:00The Visual Game ExperienceIn Lecture 8 of Game Design and Production, we talked about
the visual game experience. Now before we get into the knowledge keeping of
this post, I got a confession, on the day of this lecture, since this class is
at 8am, I opted for an extra hour of sleep over actually going to class. But
because of the awesome hybrid of in class and online awesomeness of this
course, I was able to watch the lecture online and catch up no problem. So
shout out to in class online hybrid courses, here’s to hoping more classes in
the future start doing this.<div>
<br /><div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
So what is the visual game experience? It’s what you see.
When you are playing a game it is the data that your eye sees and processes. Is
that simple, but creating and designing visually appealing data for your eyes
can be quite the challenge.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFq5n3A5CLyMV8cX3FpM_8pdHnTlB4Z19Kcr3XM2lEcAONtRU6zIraoT05zjWSGm08tvgT-w57KdXNhCVeyMV8_FmykEXv7dZg41ihblQph3itB4lxuWhTMQXJFUvo3-FM94n1a4cBhqin/s1600/Art-illusion-29.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFq5n3A5CLyMV8cX3FpM_8pdHnTlB4Z19Kcr3XM2lEcAONtRU6zIraoT05zjWSGm08tvgT-w57KdXNhCVeyMV8_FmykEXv7dZg41ihblQph3itB4lxuWhTMQXJFUvo3-FM94n1a4cBhqin/s320/Art-illusion-29.jpg" width="257" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Is this a tree, person and town...or is it a face!?</td></tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We talked about optical impressions, which involves:pattern recognition
and motion tracking; Optical art (pictured above) and visceral reactions.
Visceral reactions include aesthetic sensibility “does what I’m looking at make
sense?”, primal reactions, dark = scary and taught reactions, reactions that we
have learned from life for example, guy walking towards you with a hokey mask
and knife at night, chances are he’s not going to give you a cookie and you
should probably run.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The bulk of the lecture was spent talking about Alexander’s
15 Properties of Living Structures.</div>
<h3>
<u>Alexander’s 15 Properties of Living Structures</u></h3>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->1.<span style="font-size: 7pt;">
</span><!--[endif]-->Levels of scale – The visibility of goals, scoping of the level to accommodate the current objective.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->2.<span style="font-size: 7pt;">
</span><!--[endif]-->Strong Centers – Strong areas of focus for example depth of field to add emphasis on what you should be focusing on.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->3.<span style="font-size: 7pt;">
</span><!--[endif]-->Boundaries – The ability to see the limitations, so instead of having invisible walls, place an obstacle..<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->4.<span style="font-size: 7pt;">
</span><!--[endif]-->Alternating Repetition – “Repeating elements to
give sense of order” for example in Super Mario Bros. when you have the grey
brick tiles with the black background, you know theirs a boss fight coming up.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->5.<span style="font-size: 7pt;">
</span><!--[endif]-->Positive Space – Keeping focus on objective,
backgrounds that do not detract the player from their current goal.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->6.<span style="font-size: 7pt;">
</span><!--[endif]-->Good Shape – Keeping things simplistic<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->7.<span style="font-size: 7pt;">
</span><!--[endif]-->Local Symmetries – Keeping things small for
example in Portal several smaller rooms are easier to grasp than one big room.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->8.<span style="font-size: 7pt;">
</span><!--[endif]-->Deep Interlock and Ambiguity – The phenomenon that
occurs when things are so dependent on each other, you cannot have one without
the other.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->9.<span style="font-size: 7pt;">
</span><!--[endif]-->Contrast – Using strong opposites to achieve
difference. For example in Portal, white tiles = portalable and black tiles =
not portalable<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->10.<span style="font-size: 7pt;"> </span><!--[endif]-->Gradients
– Things that change gradually. For example in GTA V there is a transition
between the city and the country side.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->11.<span style="font-size: 7pt;"> </span><!--[endif]-->Roughness
– Imperfections that are put there on purpose. This could prevent things from
looking weird for example a room where everything is perfectly packed away may
lead you to think “Is anyone actually living here or is this all set up for
show?”<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->12.<span style="font-size: 7pt;"> </span><!--[endif]-->Echoes
– Involved using previously discussed proprieties but modified a little. For
example two objects that are different but perform the same function, for
example the cubes in Portal the pink and blue cubes do the same thing but the variance
allows for a breath of fresh air.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->13.<span style="font-size: 7pt;"> </span><!--[endif]-->The
Void – Calm contrasts, large empty spaces can create the feeling of calmness.
For example the church in Bioshock Infinite.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->14.<span style="font-size: 7pt;"> </span><!--[endif]-->Simplicity
& Inner Calm – This involves using only the essential objects for a scene.
No additional props or anything, just what’s required for the player to play.<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->15.<span style="font-size: 7pt;"> </span><!--[endif]--> Not Separateness – How all elements of the
game come together. Why are these object here?<o:p></o:p></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This was a very informative lecture, especially as a guy who’s
into graphics programming this gave me a real sense on where I should spend
resources for maximum visual appeal.<o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-7812436513903482872013-09-07T15:28:00.002-07:002013-09-07T15:28:23.837-07:00Game Engines Blog 1<h3>
<b>Game Idea </b></h3>
<div class="MsoNormal">
Open world (GTA style) game where player plays as
a robot who thinks he is a boy fighting crime in the hood. We’ll call it “Roboy
in da Hood”. This is a direct sequel to our first year GDW game “Roboy”. In
this post I will talk about some of the core engine features we need to
implement to make this game happen.</div>
<h3>
<b>AI</b></h3>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
There are going to me many entity types in the game; cars,
pedestrians, enemies etc. All entities will need to select the appropriate
action for based on what’s going on around it. Then it will need to be able to
determine where it needs to go to accomplish the action selected and finally it
needs to figure out how it’s going to get there.<o:p></o:p></div>
<h3>
Physics</h3>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
To my limited knowledge of physics engine (hopefully that
changes after this course) a physics engines only jobs are: applying kinematic
forces and collision detection. Those are two hefty jobs which are vital to
Roboy in Da Hood (and just about every game ever). We are using Havok as our
physics engine which is used by many commercial games. Hopefully with a little
elbow grease we can use it to its full potential.<o:p></o:p></div>
<h3>
Audio</h3>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Based on the first lecture slides, 2LOC, the engine we are
using has support for FMOD and OpenAL which are two libraries that handle
audio. I’ve only ever worked with FMOD and it gets the job done. Not sure why
it has both FMOD and OpenAL but then again I don’t know a whole lot about audio
programming.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We will use audio to help set the mood and theme of the
game. There will be ambient audio and music which just plays over top
everything and there will be audio which will be played from collision call
back functions such as:<o:p></o:p></div>
<div class="MsoNormal" style="text-align: center;">
onCollisionEnter(), onCollision(), onCollisionExit();<o:p></o:p></div>
<div class="MsoNormal" style="text-align: center;">
<br /></div>
<div class="MsoNormal">
I don’t know if 2LOC has these functions (or some variation
of) implemented or not but I expect to use those three functions a lot
throughout the development of this game.<o:p></o:p></div>
<h3>
Rendering</h3>
<div class="MsoNormal">
<o:p></o:p></div>
<br />
<div class="MsoNormal">
Ahh rendering. What could be said about rendering? Rendering
is the cat’s meow. The bee’s knees. Needless to say, rendering is my cup of
tea. This year we are using Ogre as our rendering engine. I've never actually
worked with Ogre but I heard things about its architecture which leaves me kind
of skeptical. But looking at the 4 images in the <a href="http://www.ogre3d.org/gallery" target="_blank">Ogre gallery (click)</a>, they
look pretty good. I can see bloom, depth of field and shadow mapping effects in
all their glory which leaves me kind of confused because if the guy who made
that demo can pull off those effects with Ogre then surely with a little perseverance,
passion and time with the Ogre documentation I can pull off those same effects
in Ogre…right? Right??<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
It says we need to draw a picture...well okay:</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipMANB8kIhHX24GXtDrCAFV-h2qyV940AmnxT7KBqf5j3Mjto1czjBScjp34GfezWqJDFrhlEoZTtBlZUaByH_VWSdelDBDrJlc964WHQzFcdi-uyqMzMcm4HCUQ42xPex5e1DOTm7jvvc/s1600/pic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipMANB8kIhHX24GXtDrCAFV-h2qyV940AmnxT7KBqf5j3Mjto1czjBScjp34GfezWqJDFrhlEoZTtBlZUaByH_VWSdelDBDrJlc964WHQzFcdi-uyqMzMcm4HCUQ42xPex5e1DOTm7jvvc/s320/pic.png" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-42788870714420930902013-04-12T20:57:00.000-07:002013-04-12T22:00:01.733-07:00General Purpose GPU ProgrammingGeneral Purpose GPU Programming is a huge interest of mine. Having multiple threads in a program is one thing, but having thousands to perform a complex mathematical computation, that's a whole different story.<br />
<br />
With GPGPU programming we can do hundreds of calculations at the same time, rather then doing one at a time sequentially. Since modern GPUs have thousands of cores, we can put a calculation on each core and perform many calculations at once.Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-41989387527617925242013-04-12T20:44:00.002-07:002013-04-12T20:44:27.623-07:00Showcasing our Game<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
The Level Up Showcase was on April 3<sup>rd</sup>, 2013.
Level Up is an annual event where students from all around the GTA showcase
their games. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Level Up was an experience to remember. It was held in the
Design Exchange in Downtown Toronto. We arrived at the location at 10 am and
stayed there until 11 pm. Needless to say, it was a long day. All throughout
the day, the place was packed. There were very few moments where someone wasn’t
playing our game, whether it was a fellow student, a visitor or an industry
professional.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Level Up was neat because we were able to see the games
produced by other students from other post-secondary institutions in the GTA.
We exchanged business cards with industry professionals and other students. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEjaQiLW5xYPKEJcIkH3asj7tehV5jzegbDjhgrpTr7O5LCa82PSJ8XFqY-Ctjf9LK79S9k8TiChj-XnLmAKLZqn4yyY9D-X2dfRwAbX9c1dvaiwlZ11L-RnFPkPeZ4Gtd3rasvnmD6moP3IrRhFLcV2uJf0Syg=" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjaQiLW5xYPKEJcIkH3asj7tehV5jzegbDjhgrpTr7O5LCa82PSJ8XFqY-Ctjf9LK79S9k8TiChj-XnLmAKLZqn4yyY9D-X2dfRwAbX9c1dvaiwlZ11L-RnFPkPeZ4Gtd3rasvnmD6moP3IrRhFLcV2uJf0Syg=" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
UOIT GameCon was on April 9th, 2013. GameCon is a UOIT event where all UOIT Game Dev. students come together to showcase their game. GameCon is awesome because we get to see what our fellow classmates were able to create over the semester. </div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEgh0m8ytUmoBWVJoOPBWpyF8z70YE6p9CJgJeRAEcsbMddiqVtxjDFf3nJMmLHNNYWKt64miAsl77G5T873h68hgYaFVC-di6afpXEs19PEeZoHgpNiI4mErTmiTnWMmkYhlU-gk7MRyOJRU0XEPbDHZBwarsA=" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEgh0m8ytUmoBWVJoOPBWpyF8z70YE6p9CJgJeRAEcsbMddiqVtxjDFf3nJMmLHNNYWKt64miAsl77G5T873h68hgYaFVC-di6afpXEs19PEeZoHgpNiI4mErTmiTnWMmkYhlU-gk7MRyOJRU0XEPbDHZBwarsA=" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Our game, A Case of the Mondays won an award for Player's Choice Best Second Year Gameplay. That was pretty cool, it is very rewarding to know people enjoyed playing our game.</div>
<!-- Blogger automated replacement: "http://images-onepick-opensocial.googleusercontent.com/gadgets/proxy?container=onepick&gadget=a&rewriteMime=image%2F*&url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBHbB6NyCcAEbsSE.jpg%3Alarge" with "https://blogger.googleusercontent.com/img/proxy/AVvXsEgh0m8ytUmoBWVJoOPBWpyF8z70YE6p9CJgJeRAEcsbMddiqVtxjDFf3nJMmLHNNYWKt64miAsl77G5T873h68hgYaFVC-di6afpXEs19PEeZoHgpNiI4mErTmiTnWMmkYhlU-gk7MRyOJRU0XEPbDHZBwarsA=" --><!-- Blogger automated replacement: "http://images-onepick-opensocial.googleusercontent.com/gadgets/proxy?container=onepick&gadget=a&rewriteMime=image%2F*&url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBG90joDCIAEf8Ll.jpg%3Alarge" with "https://blogger.googleusercontent.com/img/proxy/AVvXsEjaQiLW5xYPKEJcIkH3asj7tehV5jzegbDjhgrpTr7O5LCa82PSJ8XFqY-Ctjf9LK79S9k8TiChj-XnLmAKLZqn4yyY9D-X2dfRwAbX9c1dvaiwlZ11L-RnFPkPeZ4Gtd3rasvnmD6moP3IrRhFLcV2uJf0Syg=" -->Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-51263782339285368332013-04-12T20:10:00.004-07:002013-04-12T20:10:48.093-07:00Evolution of the Graphics in A Case of the MondaysFrom the start we wanted to create a great looking and game.
Since we have three programmers on our team, I was able to focus on the
rendering and graphics programming while the other programmers focused on the game play. By splitting the work this way, we were able to achieve the best of both worlds.<br />
<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
I wanted to make the game look as good as possible and in
order to do that, I had to use modern OpenGL 3.0 functionality. This included
VBOs, VAOs, shaders and use of our own matrix stack.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Here is a screenshot of the game as it appeared back in
December 2012.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHfeHiJ3OnIvVN5lUc45oUU9mGNp_63ynK9PhBO13F04z7fwjgmhMM_jMQ70rDg9oGycIcxrYiutXbORc_CNyRYL7ZfU4AglYkY1X5hRwR2iT6XBJ2bcANHUydXeA0USoOrTtiHYDW9Sa/s1600/hidden.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHfeHiJ3OnIvVN5lUc45oUU9mGNp_63ynK9PhBO13F04z7fwjgmhMM_jMQ70rDg9oGycIcxrYiutXbORc_CNyRYL7ZfU4AglYkY1X5hRwR2iT6XBJ2bcANHUydXeA0USoOrTtiHYDW9Sa/s320/hidden.png" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Here he have basic per-vertex shader being performed by
depreated OpenGL lighting functions. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We then implemented basic shaders to perform per fragment
lighting. In the image below we have two per fragment spot lights which light
our scene. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5O6Xwdr3YjTUUKSnlxR2mlr5pf6zmlC1NDxVfVKa5_FuZ5CPofaKWX9wXjb8yh-KiuW8WqZ9flOZcbVIeuQcnrghprOFPLQjGy0cWJaRuCkbdWo2tnTsBuW8TZoj6Iog6SD_cGyBkiwtz/s1600/hdroff.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5O6Xwdr3YjTUUKSnlxR2mlr5pf6zmlC1NDxVfVKa5_FuZ5CPofaKWX9wXjb8yh-KiuW8WqZ9flOZcbVIeuQcnrghprOFPLQjGy0cWJaRuCkbdWo2tnTsBuW8TZoj6Iog6SD_cGyBkiwtz/s320/hdroff.png" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
As soon as first semester needed it became apparent to us
that we could make a pretty game at our experience level. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Here are some screenshots of the final build of the game. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7AIZ1bbNxh7_tmlsfpyv1WEAPHUcgeeaRawS_xQKrLsrKrWLxEbFEmiHkiXZMWDQ2oeP_PLE8CDTWubnRWlsZLkOBHYxTA1I_YAdr569Ay2cEHQRc4ScDIQz6iimgw-v6O_HDM-rcL9d/s1600/s3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7AIZ1bbNxh7_tmlsfpyv1WEAPHUcgeeaRawS_xQKrLsrKrWLxEbFEmiHkiXZMWDQ2oeP_PLE8CDTWubnRWlsZLkOBHYxTA1I_YAdr569Ay2cEHQRc4ScDIQz6iimgw-v6O_HDM-rcL9d/s320/s3.png" width="320" /></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/AVvXsEi0yeLTXXNxQl2GKV4mhduhxZB9UtkvUOLj5gGxTWnGLKBsoKN_l_fGrCsyf4VEJDXf4SIm6yFaYtctuMyQ9LqYN_5qA3DMfbfqYprmXfboslSdd0WrlUXCOp8FLLIRYnLq5YKohR8EmOJl/s1600/s4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yeLTXXNxQl2GKV4mhduhxZB9UtkvUOLj5gGxTWnGLKBsoKN_l_fGrCsyf4VEJDXf4SIm6yFaYtctuMyQ9LqYN_5qA3DMfbfqYprmXfboslSdd0WrlUXCOp8FLLIRYnLq5YKohR8EmOJl/s320/s4.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Lb4bw7j5MgVCxBRKAk90VmZr3iCwpoBuAlBEi3BAnG019OHZLFxMj9JhZl5JhuvK1Pe2ksTpeKhehdoIN2rpxN2c-ZEg5kG3C2rtjN-I60XcQeXHBddZBoiMwrACrV7HUh139gHc1X-B/s1600/s1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Lb4bw7j5MgVCxBRKAk90VmZr3iCwpoBuAlBEi3BAnG019OHZLFxMj9JhZl5JhuvK1Pe2ksTpeKhehdoIN2rpxN2c-ZEg5kG3C2rtjN-I60XcQeXHBddZBoiMwrACrV7HUh139gHc1X-B/s320/s1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">We are using deferred shading to allow us to have dozens of lights on screen, we have written our own blending shader, shadow mapping and we apply a bright pass filter to make the lit ares of the game look brighter.</span></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
The images below compare shadow mapping vs no shadow mapping.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxciEbfp3zNKFvdW4NVSFn5IROYuLaqot8Z0nmeq4ruNd_6abKwybq51x8hdF-UYJh9rmCyFd1o-qXdoA_uvIuS4IIlilgeQ9IkfTjZGB7NTUQkoLTRb3N8c-Ses9PtVChPc6c4WoAARE/s1600/s2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxciEbfp3zNKFvdW4NVSFn5IROYuLaqot8Z0nmeq4ruNd_6abKwybq51x8hdF-UYJh9rmCyFd1o-qXdoA_uvIuS4IIlilgeQ9IkfTjZGB7NTUQkoLTRb3N8c-Ses9PtVChPc6c4WoAARE/s320/s2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Shadow mapping disabled</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixs5Fkq2GkEOX068iuD4ai1lwbfjJGmV3n4tfVAvToWUDUEDu1HOCu69RV4kuED8RATLmYPFp5DLmKao9vvVgv-d3RhAcPTQJ-EA2c8YMqIw6PgYJFPXrvUvKKgeqJV-uSe9hEIMRqmU_0/s1600/s11.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixs5Fkq2GkEOX068iuD4ai1lwbfjJGmV3n4tfVAvToWUDUEDu1HOCu69RV4kuED8RATLmYPFp5DLmKao9vvVgv-d3RhAcPTQJ-EA2c8YMqIw6PgYJFPXrvUvKKgeqJV-uSe9hEIMRqmU_0/s320/s11.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Shadow mapping enabled</td></tr>
</tbody></table>
Shadow mapping provides a subtle but welcome addition to the scene.<br />
<br />
<div class="MsoNormal">
The difference between the first semester screenshots and
the second semester screenshots really make me proud to say that I worked on
this game. Graphically it looks like a pretty decent game, in my opinion.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-60620745198820513882013-04-12T19:47:00.003-07:002013-04-12T19:47:28.738-07:00Prototyping Composition in PhotoshopThis blog post is more of a tutorial. We explore ways to
composite two rendering passes together. You could just keep jimmying values in
your shaders until you get your scene rendering how you like or you could save
some time and use a tool like Photoshop to prototype.<br />
<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Prototyping your composition in Photoshop is mind blowingly
easy. First lets reflect what composition actually does, it takes two images
and outputs one image comprised of the two input images.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
A traditional method of composition is using an additive
blend where you just take the color of the two input images and add them
together to get your composted image. The code looks like this:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rKUpw4eli4UyYCotBnBjYzHP3RaNDzzjA5HilVSLKHwkelCL1eSHl5BkF3taS9Y4o0wywCUsXSnlxa9EmQcPSygOBrcxHYaFGLjB6jCs41dxW2vnWzu2btIxYc5GmtYqJ4IaykQfRT2B/s1600/add+code.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rKUpw4eli4UyYCotBnBjYzHP3RaNDzzjA5HilVSLKHwkelCL1eSHl5BkF3taS9Y4o0wywCUsXSnlxa9EmQcPSygOBrcxHYaFGLjB6jCs41dxW2vnWzu2btIxYc5GmtYqJ4IaykQfRT2B/s320/add+code.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">It's dead simple.</td></tr>
</tbody></table>
<div class="MsoNormal">
Photoshop has a whole list of blending modes that can be
applied to layers. To prototype your composition in Photoshop all you need to
do is take screenshots of the two images you want to composite, put them in
their own layers in Photoshop and cycle through the blend options.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmF82mQVJQkbjDi8_1JtrqlCmsfvFOBiQ-5xGdbckkKcHOVs7voF2a3ZkgPADhvEN3c5Bwd3vW6PTpUh4gyXxVy05d2rDOYwBV0GEzEtZT4NQ07htV91WK_Yex9yAOcCPdJPhsTcls40u1/s1600/image1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmF82mQVJQkbjDi8_1JtrqlCmsfvFOBiQ-5xGdbckkKcHOVs7voF2a3ZkgPADhvEN3c5Bwd3vW6PTpUh4gyXxVy05d2rDOYwBV0GEzEtZT4NQ07htV91WK_Yex9yAOcCPdJPhsTcls40u1/s200/image1.png" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHOeDJOn7ZLZpXqUneLmhqjGXyamS-Gx1ZDL-LiD0UJMYMiAoeA16ugZcQCVWT1VLvyD3ZspncEWv8LWdPqhVwzohgfuwWHKuvJqPFWCj2bmqjMknkNf5rrwBFl6hzaJUenP4nhERgkEc/s1600/image2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHOeDJOn7ZLZpXqUneLmhqjGXyamS-Gx1ZDL-LiD0UJMYMiAoeA16ugZcQCVWT1VLvyD3ZspncEWv8LWdPqhVwzohgfuwWHKuvJqPFWCj2bmqjMknkNf5rrwBFl6hzaJUenP4nhERgkEc/s200/image2.png" style="cursor: move;" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Above are the two images I want to composite together. On the left is my unlit scene and the right is my light.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="MsoNormal">
Here I am applying a divide blend on my two images.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhXX0pJZIlOqUiqXnj17pn_EvpicwXa7uBvRrJqvnmhFLCYKdc5KbQKTYo1lBQRKjXijgk4OvR3zR-t4qVja1U1ZtXSfMbmo_OWeRECgik51WmeJmSlOaj5bqLIfB-36FMKhAaISHlsZG/s1600/tutorial.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhXX0pJZIlOqUiqXnj17pn_EvpicwXa7uBvRrJqvnmhFLCYKdc5KbQKTYo1lBQRKjXijgk4OvR3zR-t4qVja1U1ZtXSfMbmo_OWeRECgik51WmeJmSlOaj5bqLIfB-36FMKhAaISHlsZG/s320/tutorial.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Using different blend options to composite images can create a wide array of different effects.</td></tr>
</tbody></table>
<div class="MsoNormal">
Here is a multiplicative blend.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNnbOS_NcklnLEk-L-Y-WqtMZDd3KnjuHVXx0Zz1DngZRKfndpz8IQuxfWXzcN_FeFPauSCSJLoslhhgMjw-gvYT2sYNR7jsgOKlccX0V9NefuQNqyS2zxgjZ_EsW-kExj6bEsN9QITPA/s1600/mul.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNnbOS_NcklnLEk-L-Y-WqtMZDd3KnjuHVXx0Zz1DngZRKfndpz8IQuxfWXzcN_FeFPauSCSJLoslhhgMjw-gvYT2sYNR7jsgOKlccX0V9NefuQNqyS2zxgjZ_EsW-kExj6bEsN9QITPA/s320/mul.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The multiplicative blend creates a very dimly lit scene.</td></tr>
</tbody></table>
<div class="MsoNormal">
And here is a soft light blend, which is what we use in <i>A
Case of the Mondays</i>. </div>
<div class="MsoNormal">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe37ZvsvcptAtuhsOfO2wNHhjjtU2WfGNuEzCQAgNL1rauIPvCGmqDsmr_ZhW21WnaXtRuaMo8-YYsedGKoMvQADsapbscX-AMNp3-A7j0aI4osaa_yzfYr19FpRiVfhpHJnkLgvA32Y1S/s1600/softlight.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe37ZvsvcptAtuhsOfO2wNHhjjtU2WfGNuEzCQAgNL1rauIPvCGmqDsmr_ZhW21WnaXtRuaMo8-YYsedGKoMvQADsapbscX-AMNp3-A7j0aI4osaa_yzfYr19FpRiVfhpHJnkLgvA32Y1S/s320/softlight.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The soft light blend creates a scene with a heavier light influence.<br /></td></tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
By performing a simple Google search, you can find the mathematical formula to perform almost any blend. Here is the function for a soft light:</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkcm-BRqOKb-WxP_h4xrkxfNCuNBZpCyew7fptqKcGuNzX0PKlMfEB98T8ZMENtyvQ_Pww4lNNJiANN06hALASjXekPBIvgIykJCyTAqpvqrC_lBwPMmitfF9vbR6R0tQgQsb7vp3SCnj/s1600/softlightfunc.png" imageanchor="1" style="font-size: 13px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkcm-BRqOKb-WxP_h4xrkxfNCuNBZpCyew7fptqKcGuNzX0PKlMfEB98T8ZMENtyvQ_Pww4lNNJiANN06hALASjXekPBIvgIykJCyTAqpvqrC_lBwPMmitfF9vbR6R0tQgQsb7vp3SCnj/s1600/softlightfunc.png" /></a></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
From this function, we can easily create a shader which implements it:</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9s28TLDK96PSqcVXjBW1z-3LevWtBULC8x5ERPhyphenhyphen2pKLy9rnn_zxF6cmOvy5xYf2RjBgBmNUt9XODA9VJ7-lT8_LpV0u8OdIaV9d9yfp7N0C77ioduefHTAjCl0MaGXSq7TFxZFPa4gOJ/s1600/softcode.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="51" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9s28TLDK96PSqcVXjBW1z-3LevWtBULC8x5ERPhyphenhyphen2pKLy9rnn_zxF6cmOvy5xYf2RjBgBmNUt9XODA9VJ7-lT8_LpV0u8OdIaV9d9yfp7N0C77ioduefHTAjCl0MaGXSq7TFxZFPa4gOJ/s320/softcode.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">It's literally one line of code.</td></tr>
</tbody></table>
<div class="MsoNormal">
If you cycle through all the blend modes and you cannot
find one that you like, your free to make your own. You can play with the
opacity levels of the images, the hue, saturation etc. until you create the
look you are going for. Then to create your own blending equation, just look at
your history in Photoshop and you should be able to derive a shader that
performs the effect by looking up each of the functions for the effects you applied and throwing them into a shader.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-86411479830590527152013-04-12T18:43:00.002-07:002013-04-12T18:43:16.510-07:00Blending in OpenGL<br />
<div class="MsoNormal">
OpenGL has a wide array of different blend functions that it
will do for you with the change of a state. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
However getting your scene to blend
nicely can be tricky, especially when you have multiple passes you want to
composite together and having transparent objects just makes blending even
trickier. <o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.opengl.org/wiki/Blending">The OpenGL wiki</a> has a fantastic page about all of the
different blending options in OpenGL so I won’t spend a lot of time restating what that very
descriptive wiki page already states. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The basic idea of blending is: if you are
drawing an object on top of another, how do the overlapping fragments behave.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
If you have an opaque
object with depth testing enabled, the fragments that belong to the object that
is closer to the camera will be drawn with full opacity. Simple enough but if
you have a transparent object in front of an object, you need to take the alpha
channel of the fragment into considering. Fortunately there are built in OpenGL
blend functions that do this for you. However it is up to you to draw the
objects in the correct order (transparent objects are drawn last).<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Here is a demonstration of the light accumulation pass in <i>A
Case of the Mondays</i> using a couple of
different blending modes.</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgXYl1WOaiwAxeckTazhymARl67po3x5AHBqFvJaiXSNaPiHoJvyX7VG3z5Ozha35d-pCOiorzR82h_AmvWG3G0ofO6OSlbikz7VC-PYVbFvqj5pUvfzEAPVHl2ZWuPwsYxUyDCqrrI82k/s1600/srcmone.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgXYl1WOaiwAxeckTazhymARl67po3x5AHBqFvJaiXSNaPiHoJvyX7VG3z5Ozha35d-pCOiorzR82h_AmvWG3G0ofO6OSlbikz7VC-PYVbFvqj5pUvfzEAPVHl2ZWuPwsYxUyDCqrrI82k/s320/srcmone.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Above is a screenshot of the light accumulation using the following blending states: </div>
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9LLUhrqlNOxjxruFpZpUtdkIVxZYfjqyWKAoQ0end5T7KNB8MvT7AV934by9K2eM5_CmIkBpa_VcSp7Z3k7b0XEcnXhkWkw1waCfsw9Pc-_cxM_jFBnCBvvEEQRjSugEMgMzXaaIXEe8L/s1600/addadd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9LLUhrqlNOxjxruFpZpUtdkIVxZYfjqyWKAoQ0end5T7KNB8MvT7AV934by9K2eM5_CmIkBpa_VcSp7Z3k7b0XEcnXhkWkw1waCfsw9Pc-_cxM_jFBnCBvvEEQRjSugEMgMzXaaIXEe8L/s320/addadd.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Here is the same screenshot using different blending options:</div>
<div class="separator" style="clear: both; text-align: center;">
glBlendEquation(GL_FUNC_ADD);</div>
<div class="MsoNormal" style="text-align: center;">
glBlendFunc(GL_ONE, GL_ONE);</div>
<div class="MsoNormal" style="text-align: center;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
Notice that the two images look very different and all I did was change a few OpenGL states. The first image is a lot darker than the second. In the game we use the second option simply because the light has more of a presence and therefore influence in the scene.</div>
<div class="MsoNormal">
<br /></div>
<br />
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-35438847003353575862013-02-07T21:35:00.003-08:002013-02-07T21:56:15.899-08:00The Case of the Square ShadowRecently I have been working on getting shadows in our game.
I was having this problem where my entire scene would be in shadow. I zoomed the camera out and I discovered that
the entire scene wasn’t in shadow but rather just a large square area of it.<br />
<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
At first I thought my depth map had to be incorrect but I displayed
it to the screen and it looked alright to me.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXM8CKouDL4atYg8NkJmjXxxeXJjsj_wTpEi4TXP0UK10QhZM9MDNilG-RXIbADcyTapQPaX9gRAXnTs28MmgUX-xC1YmjLYfGtBzsJ-cVGY7WH3C_GmGTZ82BO-IVc21XM4P2DanzmT_/s1600/depth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXM8CKouDL4atYg8NkJmjXxxeXJjsj_wTpEi4TXP0UK10QhZM9MDNilG-RXIbADcyTapQPaX9gRAXnTs28MmgUX-xC1YmjLYfGtBzsJ-cVGY7WH3C_GmGTZ82BO-IVc21XM4P2DanzmT_/s320/depth.png" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Then I thought I wasn’t performing my space transformations
correctly, but I went over the transformations time and time again and I was
convinced there was nothing wrong with my math. So I decided to do something I
should have done from the beginning, instead of rendering the depth I rendered
the color. Nothing could have prepared me for what happened next…<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2bF_Rn7tSFpDf7bZnJK-UJe03L2M3MP5nkPCthPZZ5z1kNRHm2AAsf8dwH8KfIF1zWbHIoHpz7vpyzybggMLMLXrXjO5p06ot04kobR3uHh0x_hyphenhyphenXGfJP28gpL4iS1ZUxnsNIBa6x7zz/s1600/color.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2bF_Rn7tSFpDf7bZnJK-UJe03L2M3MP5nkPCthPZZ5z1kNRHm2AAsf8dwH8KfIF1zWbHIoHpz7vpyzybggMLMLXrXjO5p06ot04kobR3uHh0x_hyphenhyphenXGfJP28gpL4iS1ZUxnsNIBa6x7zz/s320/color.png" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
That’s right, there is a floating floor in my light’s view.
That probably explains the square shaped shadow. I have no idea why that floor
is there. But when I saw that I just turned off my computer. I made this
discovery a couple of weeks ago and I still don’t know why that floor is there.
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
There is a lesson to be learned here, if you are ever having
problems with shadow mapping, make sure your depth map doesn’t have any artifacts
in it. Remember, depth maps can be deceiving. In my depth map (pictured above)
it looks normal but given how precise the values stored in a depth map are,
just because you can’t see something doesn’t mean it isn’t there.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0tag:blogger.com,1999:blog-7531886437789952314.post-45953338519020198452013-01-20T17:25:00.001-08:002014-07-27T15:47:46.699-07:00Shaders for the FutureHere is a gameplay screenshot of <i>A Case of the Mondays:</i><br />
<div>
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79OQXFiRI51fmdhfYtlL6o2oIuQJa3kCjZZCbLKk3dPxnjMhe_ylQZEFGsoNfoTle6qVDh0CXr0iLK69W4KKb02ACvQQFkiGl5yYz99nAV97fieXn8l0qNe9Q5XBatP0UDjdvMBUUVxpc/s1600/hidden.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79OQXFiRI51fmdhfYtlL6o2oIuQJa3kCjZZCbLKk3dPxnjMhe_ylQZEFGsoNfoTle6qVDh0CXr0iLK69W4KKb02ACvQQFkiGl5yYz99nAV97fieXn8l0qNe9Q5XBatP0UDjdvMBUUVxpc/s400/hidden.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;">
Now where is the main character? He's hidden behind that darn mysterious object. We need to implement some kind of "x-ray vision" so that the character is always visible to the player. Something like this:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjese4VI_BBcSEY9S84ENzZwkxdUMAgWzn5DDxVi6SHeNovQ_cEZ4vQzM_eKw4JRAqD6y7bVZ5rg5LvRiIYG4_il4CXm73rAuRGX3_D4CjgxEnkDleDjwp3K8yRidaLN6IgWauGy9VFfwpl/s1600/nothidden.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjese4VI_BBcSEY9S84ENzZwkxdUMAgWzn5DDxVi6SHeNovQ_cEZ4vQzM_eKw4JRAqD6y7bVZ5rg5LvRiIYG4_il4CXm73rAuRGX3_D4CjgxEnkDleDjwp3K8yRidaLN6IgWauGy9VFfwpl/s400/nothidden.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;">
In the image above, the object that is blocking the player from being seen is made transparent so we can see our little trouble maker. This second image was created in Photoshop, but how can we implement something like this in game? My original thought was to cast a ray from the player's position to the camera's position, loop through each object in the game and test for collision with the ray, if the ray hits an object, make the object transparent. If you know of a better way to do this with a shader and feel like offering a suggestion, tweet me at @MikeGameDev or leave a comment below.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here is the same screenshot again but with shadows.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJ3Vk3moyPaf4k5IRoUUnw92dVvSkgIfuOsjkdPXctHzR8BL0TocYQz8uGFl763PxE8-PRNBRNmRXgeue0y-TAj-28kEJrwix0YXyW6q4nYNeWY1UOtgoGranc1yEPruVo099ANtxllx1/s1600/shadow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJ3Vk3moyPaf4k5IRoUUnw92dVvSkgIfuOsjkdPXctHzR8BL0TocYQz8uGFl763PxE8-PRNBRNmRXgeue0y-TAj-28kEJrwix0YXyW6q4nYNeWY1UOtgoGranc1yEPruVo099ANtxllx1/s400/shadow.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;">
You can't have lighting without shadows, it just doesn't look right. Even Super Mario 64 had some shadows, granted it was just a circle of darkness below Mario but even in this primitive form we knew what it was. The original plan for our game's shadows was to just have simple hard shadows but after viewing the #i2350 homework questions, it looks like we are going to have soft shadows and maybe a stencil buffer.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here is a similar screenshot to the ones above but this time instead of a single boring grey per vertex light source, we two slightly more interesting per fragment light sources.</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/AVvXsEicL87DoMnguTCZ0BWWjqkjfZZU0ToF2I0ooBxDHX4P5SkkQkIUJYZEeC7B5rX4mPYoMS1Thyphenhyphen1IYo2INf00lGer5mNdeWjn-RgrjTS8UCvkFfQ8WTLrf2KER7JHKAGua-LJV8DeNhyLCHuY/s1600/hdroff.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicL87DoMnguTCZ0BWWjqkjfZZU0ToF2I0ooBxDHX4P5SkkQkIUJYZEeC7B5rX4mPYoMS1Thyphenhyphen1IYo2INf00lGer5mNdeWjn-RgrjTS8UCvkFfQ8WTLrf2KER7JHKAGua-LJV8DeNhyLCHuY/s400/hdroff.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
With the addition of just two light sources (note the two specular highlights on the mysterious object, one from each light source) the game transforms from dull and grey to red and exciting. But it still looks a little bland...</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9T9gYc9j3_hxIK3GTUYcq97DHv0qMcinJrx4fLXWKtNritOqPl9CqROku74JQ2H8VMU61QaROB6GpL7-soOJNU_B260qIMmsjieiaaQn4gloOQOxUBvVSY7iqRdUf_QXxuVDlH00ObxQE/s1600/hdron.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9T9gYc9j3_hxIK3GTUYcq97DHv0qMcinJrx4fLXWKtNritOqPl9CqROku74JQ2H8VMU61QaROB6GpL7-soOJNU_B260qIMmsjieiaaQn4gloOQOxUBvVSY7iqRdUf_QXxuVDlH00ObxQE/s400/hdron.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
The above shot is with the addition of HDR, now things that are dark are darker and things that are light are lighter. Bump mapping would sure look nice in the above image but I don't feel like getting into code mode...yet.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The above images are just some of the effects we plan on implementing in our game this semester. As mentioned, adding just two light sources made the game look significantly better now imagine what it would look like with 50 light sources, I also plan on implementing deferred shading into the game.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
On a side note, if you ever wondered why we named the game "A Case of the Mondays" its a reference from the movie Office Space. It was the night before the game was due and we didn't have a title so we figured why not.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/guv5LUT1AFw?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/05035113543493030455noreply@blogger.com0