<html>

<head>
<title>loonygames presents: Anatomy of a Video Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a { text-decoration: none; }
a:hover { color:000000;  text-decoration: underline; }


</style>
</head>

<body bgcolor="#FFF4D0" link="#3333FF" vlink="#000000" alink="#000000">
<center>
</center>
<table width="100%" border="0" bgcolor="#3596B3" height="58">
  <tr> 
    <td height="69" width="29%" align="left" valign="top"> 
      <div align="left"> <font face="Arial, Helvetica, sans-serif" color="#FFFFFF"><b><i><img src="../../images/logo_new.jpg" width="182" height="63" border="0" usemap="#logoa"> 
        </i></b></font></div>
    </td>
    <td height="69" width="29%" align="center" valign="top"> <center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2373963192914918";
/* 468x60 */
google_ad_slot = "3417104156";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
 
    </td>
  </tr>
</table>
<table width="100%" border="0" bgcolor="#3596B3" height="29">
  <tr> 
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../about.1"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font size="2">about</font></b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../feedback.1"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><b>feedback</b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../archives/index.html"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><b>archives</b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <b><a href="../../../submissions/index.html"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">submissions</font></a></b></td>
  </tr>
</table>
<div align="center"> <br>
</div>
<table width="100%" border="0">
  <tr> 
    <td width="72%"> 
      <h5><b><font face="Arial, Helvetica, sans-serif">//<a href="../../../index.html"><font color="#7C420E">loonygames</font></a>://<a href="../index.html"><font color="#7C420E">issue 
        2.8</font></a>://<a href="index.html"><font color="#7C420E">Anatomy of a 
        Video Game</font></a>://<a href="index.php"><font color="#7C420E">1</font></a>, 
        <a href="index2.php"><font color="#7C420E">2</font></a>, <a href="index4.php"><font color="#7C420E">3</font></a>, 
        4, <a href="index5.php"><font color="#7C420E">5</font></a>, <a href="index6.php"><font color="#7C420E">6</font></a>, 
        <a href="index7.php"><font color="#7C420E">7</font></a>, <a href="index8.php"><font color="#7C420E">8</font></a></font></b></h5>
    </td>
    <td align="right" valign="middle" width="28%"> 
      <div align="right"> 
        <h5><a href="http://www.loonygames.com/includes/printme.pl?url=/2.8/feat/&amp;withimages=yes"><img src="../../images/icons/print01.gif" width="27" height="27" align="baseline" border="0" alt="switch to printer-friendly version"></a></h5>
      </div>
    </td>
  </tr>
</table>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td align="center" valign="top" width="25%"> 
      <table border="0" width="99%" bgcolor="#D7B582" align="center" bordercolor="#E0E0E0">
        <tr> 
          <td align="LEFT" valign="TOP" width="100%"> <font color="#000000" face="Arial, Helvetica, sans-serif" size="2"> 
            <!--#exec
cgi="/includes/rand_quot.cgi"--> </font> <p><webdog><font face="Arial, Helvetica, sans-serif" size="2" color="#0022A8"><b><font color="#693A0C">What's 
           new today:</font></b></font> 
          
<p><b><font face="Arial, Helvetica, sans-serif" size="2"><a href="../../../index.html" target=""><b><font color="#00025E">New!!!</font></b></a><br></b>
  The archives have been cleaned up, dead links fixed, and the printable versions restored! Also, don't miss the new comments on the main page!</font></p>

 
<p><b><font face="Arial, Helvetica, sans-serif" size="2"><a href="../../2.15/feat/index.html" target=""><b><font color="#00025E">Livin' 
  With The Sims</font></b></a><br></b>
  theAntiELVIS explores the wild and wacky world that is Will Wright's <b>The Sims</b>, 
  asking the inevitable quesiton, &quot;is <b>The Sims</b> the first step toward a virtual 
  life where everyone is Swedish?&quot;</font></p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><a href="../../2.15/pixel/index.html" target=""><b><font color="#00025E">Pixel 
  Obscura </font></b></a></font><font face="Arial, Helvetica, sans-serif" size="2"><br>
  Josh Vasquez on <b>Omikron: The Nomad Soul</b>.</font></p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><a href="../../rl/index.html" target=""><b><font color="#00025E">Real 
  Life </font></b></a></font><font face="Arial, Helvetica, sans-serif" size="2"><br>
  Check out our newest comic strip, <b>Real Life</b>! Updated daily!</font></p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><a href="../../uf.1" target=""><b><font color="#00025E">User 
  Friendly</font></b></a></font><font face="Arial, Helvetica, sans-serif" size="2"><br>
  Updated daily!</font></p>
<p></webdog> </p>
 
            <p></p>
            <p> </p>
            <p></p>
            <!--#include virtual="/includes/includes/commerce_ssi.htm" --> 
            <!--#include virtual="/includes/includes/art_ssi.htm" --></td>
        </tr>
      </table>
      <br>
      <table width="100%" border="0" bgcolor="#D7B582">
        <tr bgcolor="#D7B582"> 
          <td> 
            <div align="center"> 
              <p align="left"><font size="-1"><font face="Arial, Helvetica, sans-serif" size="2" color="#0022A8"><b><font color="#00025E">Random 
                Feature:</font></b></font> </font> </p>
              <p><!--#exec
cgi="/includes/rand_thumb.cgi"--><i><font face="Arial, Helvetica, sans-serif" size="-2"> 
                </font> </i></p>
            </div>
          </td>
        </tr>
      </table>
      <br>
      <table width="99%" border="0" bgcolor="#D7B582">
        <tr> 
          <td> 
            <div align="center"> 
              <form method="get" action="http://www.google.com/custom" name="">
                <font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Search 
                the Archives!</font></b></font> 
               
                 <INPUT TYPE=text name=q size=12 maxlength=255 value="">
 <INPUT type=submit name=sa VALUE="Google Search">
 <INPUT type=hidden name=cof 
VALUE="LW:216;L:http:/home/loonygames/loony.timedoctor.org/content/images/logo1.jpg;LH:55;AH:center;S:http://www.loonygames.com;AWFID:13a298c7abe84fd0;">
<input type=hidden name=domains value="loonygames.com"> 
<input type=hidden name=sitesearch value="loonygames.com">               
</div>
              </form>

              <p align="left"><i> </i></p>
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td width="75%" align="center" valign="top"> 
      <table width="90%" border="0" cellpadding="0" align="center">
        <tr> 
          <td width="50%" valign="top"> 
            <div align="center"> 
              <table width="98%" border="0">
                <tr> 
                  <td width="55%"> 

                    <div align="left"> 
                      <p><b><font face="Arial, Helvetica, sans-serif" color="#0000FF"><i><font color="#904C10" size="3">Anatomy 
                        of a Video Game</font></i></font></b><br>
                      <div align="right"> <font face="Arial, Helvetica, sans-serif" size="-1">By 
                        <a href="mailto:jsimpson@ravensoft.com">Jake Simpson</a></font></div>
                    </div>
                  </td>
                  <td width="45%" align="right" valign="top"> 
                    <h5 align="right"><b><font face="Arial, Helvetica, sans-serif" color="#00025E">Vol. 
                      2, Issue 8 <br>
                      January 10, 2000&nbsp; </font></b></h5>
                  </td>
                </tr>
              </table>
              <loonystart>
              <p align="left"><font face="Arial, Helvetica, sans-serif" size="+1"><b>Modeling 
                and Animation Systems</b></font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">I&#146;m 
                going to assume some familiarity here with 3D systems, and how 
                3D coordinates are handled in a 3D system. Part of this will be 
                covered in the tools section, since what ever it is you use to 
                create and animate the models is by definition a tool. However 
                you decide to create and animate your 3D models, once its done 
                outside of the game, you have to decide how to get this data into 
                the game, and then on the screen. For arguments sake we&#146;ll 
                take the example of a walk sequence on a biped human figure. We&#146;ll 
                gloss over how this model and animation sequence is created, and 
                get straight into the meat of the matter. There are two basic 
                approaches to animation systems, skeletal and mesh based. We&#146;ll 
                deal with mesh based first, since that&#146;s actually what <b>Quake</b> 
                uses. Mesh based animation takes the form of physically calculating 
                all the positions of each vertex of a model for each frame of 
                the animation, and apply that to the model over time. </font></p>
              <p align="center"><img src="images/mesh.gif" width="446" height="319"></p>
              <p align="left"></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">So, here 
                you see a 3D model. Each point of each triangle on the model is 
                called a vertex. Each vertex has a 3D coordinate relative to the 
                origin of the model. As the model animates though a couple of 
                frames, you can see that the 3d coordinate for the example vertex 
                moves in 3D space with model relative coordinates. (This means 
                they are relative from the origin of the model, so vertex + model 
                origin = real world coordinate). Mesh based animation physically 
                calculates each vertex 3D coordinate for each frame, and exports 
                that into the game. We just stuff those values in to the model 
                in the computer for each frame, and viola, the model moves. There 
                are some advantages of this approach, since you can do mesh deformation. 
                This means you can get skirts to wave, hair to move with the breeze 
                and so on really easily, and with no extra processor time, its 
                all calculated before time. Plus its quick. Since we aren&#146;t 
                doing huge amounts of transformations on each vertice, its really 
                processor friendly.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">The drawbacks 
                to this system are a bit heavy though. Firstly, all that data 
                takes a ton of space. There are things you can do to make it less 
                of a space hog, such as compression, relative motion and so on, 
                but its still pretty expensive. Plus, another drawback is that 
                the animation can only be used on one type of model. You can&#146;t 
                use the same animation on two different models, such as female 
                and male, since the shape of the model is intrinsic to the animation. 
                One last draw back is that it&#146;s hard to break a model using 
                this system. For instance, if you want to blast a limb off, there 
                needs to be a replacement animation with no arm attached. You 
                can imagine how that drives up space requirements.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">The next 
                system is skeletal based. The idea here is that all you animate 
                is a skeleton within the model itself. </font></p>
              <p align="center"><img src="images/skeletal.gif" width="421" height="291"></p>
              <p align="left"></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">You can 
                see here the skeleton within the model of our human. Each vertice 
                is assigned to one of the bones within the model. What we do is 
                animate just the skeleton, and then apply each bones animation 
                to the vertices of the actual model... as the arm bone moves, 
                so do all the vertices in the arm model. This is a powerful way 
                of moving stuff around, since given on skeletal movement, you 
                can apply it to many different models. Plus, you can blow limbs 
                off really easily since its defined in a hierarchical way... one 
                bone connected to the next. There are some draw backs... its pretty 
                expensive on processor time, doing all this 3D geometry... plus, 
                joints between bones can give you some grief, causing seams or 
                model overlap to appear. There are ways around this, but it&#146;s 
                a little too in depth to go into right now. </font></p>
              <p align="left"></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">I&#146;ll 
                briefly mention level of detail, something that a lot of people 
                are using now. LOD is where you reduce the detail of any given 
                model in direct relation to its size. If our human is way off 
                in the distance, then there&#146;s no reason to draw him with 
                all his details, like ears, noses and fingers, since you can&#146;t 
                distinguish all those details when he&#146;s only 10 pixels high. 
                It&#146;s the same as in movies, where those at the back of the 
                crowd scenes don&#146;t get all the cool outfits, since they aren&#146;t 
                really seen clearly. Doing this reduces load on the processor, 
                since it&#146;s not trying to do geometry on so many polygons. 
                Skeletal lends itself to this more than mesh based does. Again, 
                there are two schools of thought here, one is replacement models, 
                so instead of having one model, you have three or four, all at 
                different levels of detail, so when the model gets further than 
                position X from the camera, you simply swap which model you draw 
                with one with less detail. </font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">With Mesh 
                based however, since you have new models at a reduced resolution, 
                you have a new set of animations to deal with, and up goes memory 
                usage. The second approach to LOD is to reduce the complexity 
                of the model on the fly. Having an algorithm that will drop vertices 
                as the model reduces in screen size. Its definitely possible, 
                but balance has to be made to ensure that the routine that&#146;s 
                doing this reduction doesn&#146;t take longer than the processor 
                would take to do the math on all the points in the first place. 
                There is much more to be said on this topic, but that&#146;s beyond 
                the scope of this article.</font></p>
              <p align="left"></p>
              <p align="left"></p>
              <p align="left"></p>
              <p align="left"></p>
              <p align="left"></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif"><br></loonystart> 
                </font></p>
              </DIV>
            <div align="center">
                <p align="left"><font face="Arial, Helvetica, sans-serif"> </font><font face="Arial, Helvetica, sans-serif"> 
                  </font></p>
              </div>
              <table width="100%" border="0">
                <tr> 
                  
                <td width="50%"><font face="Arial, Helvetica, sans-serif"><a href="index3.php"><font color="#7C420E"><b><font size="+1">&lt;&lt;Prev</font></b></font> 
                  </a></font></td>
                  <td width="50%"> 
                    <div align="center"> 
                      <p align="left"></p>
                      <p align="left"></p>
                    </div>
                    
                  <p align="right"><font face="Arial, Helvetica, sans-serif"><a href="index5.php"><font color="#7C420E"><b><font size="+1">Next 
                    &gt;&gt;</font></b></font> </a></font> 
                </td>
                </tr>
              </table>
    
            </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<br>
<table width="100%" border="0" bgcolor="#3596B3" height="29">
  <tr> 
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../about.1"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><b>about</b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../feedback.1"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><b>feedback</b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <a href="../../../archives/index.html"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><b>archives</b></font></a></td>
    <td height="20" width="25%" align="center" valign="middle" bgcolor="#86531A"> 
      <b><a href="../../../submissions/index.html"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">submissions</font></a></b></td>
  </tr>
</table>
<table width="100%" border="0" bgcolor="#3596B3" height="29">
  <tr> 
    <td height="20" width="35%"><a href="../../../index.html"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF"><b><i>loonygames</i></b></font></a></td>
    <td height="20" width="65%"> 
      <div align="right"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF"><!--#exec
cgi="/includes/rand_bot.cgi"--></font></div>
    </td>
  </tr>
</table>
<p><i><font face="Arial, Helvetica, sans-serif" size="-2">Credits: Illustration 
  &copy; 2000 <a href="http://www.3dpalette.com/dimension">Durrenberger David 
  (dines)</a>. This article is &copy; 2000 Jake Simpson. All other content is 
  &copy; 2000 loonyboi productions. Unauthorized reproduction is prohibited. So 
  don't do it, or we'll dissect you.</font></i></p>
 <map name="logoa">
  <area shape="rect" coords="52,47,112,59" href="http://www.bluesnews.com">
  <area shape="rect" coords="3,3,179,46" href="../../../index.html">
</map>
</body>
</html>
