<html>

<head>
<title>loonygames presents: Beaker's Bent - game design 'rants</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%" height="49"> 
      <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.13</font></a>://<a href="index.html"><font color="#7C420E">beaker's bent</font></a>://1, 
        <a href="index2.php"><font color="#7C420E">2</font></a>, <a href="index3.php"><font color="#7C420E">3</font></a> 
        </font></b></h5>
    </td>
    <td align="right" valign="top" width="28%" height="49"> 
      <div align="right"> 
        <h5><a href="../../cgi/printme.pl?url=%252F2.13%252Fbent%252F"><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"> 
             </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>
             
            </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>
<p align="CENTER"><img src="../../images/thumbs/bgnbn.jpg" width="98" height="120" align="MIDDLE" border="0"></p><p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../2.2/bgnbn/index.html">The Bargain Bin</a>: Reviews of games you can actually afford to buy.</font></p>


<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"> 
              <h5 align="right"><b><font face="Arial, Helvetica, sans-serif" color="#00025E"><img src="../../images/icons/bent_final.jpg" width="192" height="243" align="left"><loonystart>Vol. 
                2, Issue 13<br>
                February 25, 2000 </font></b></h5>
             <br>
              <div align="center">
                <p align="center"><b><font face="Arial, Helvetica, sans-serif" color="#0000FF"><i><font color="#904C10" size="3">Beaker's 
                  Bent:</font></i></font></b></p>
                <p align="center"><b><font face="Arial, Helvetica, sans-serif" color="#0000FF"><i><font color="#904C10" size="6"> 
                  Making the Outdoors<br>
                  <font size="4">(part 2)</font></font></i></font></b></p>
                <p align="right"><font face="Arial, Helvetica, sans-serif">by 
                  Rich &quot;<a href="mailto:rich@loonygames.com">Beaker</a>&quot; 
                  Wyckoff</font></p>
              </div>
              <script language="JavaScript">

<!--
       function gotoSite(obj)
          {
          var s;
          s=obj.options[obj.selectedIndex].value
                         location.href=s;
          }
// -->

</script>
              <form>
  <div align="RIGHT">
    <select name="SiteSelector" size="1" language="JavaScript" onchange="gotoSite(this)">
<option value="http://www.loonygames.com/content/2.13/bent">Jump to an Archived Column!</option>
<option value="http://www.loonygames.com/content/2.13/bent/">Issue 2.13</option>
<option value="http://www.loonygames.com/content/2.7/bent/">Issue 2.7</option>
<option value="http://www.loonygames.com/content/2.5/bent/">Issue 2.5</option>
<option value="http://www.loonygames.com/content/2.3/bent/">Issue 2.3</option>
<option value="http://www.loonygames.com/content/2.1/bent/">Issue 2.1</option>
<option value="http://www.loonygames.com/content/1.41/bent/">Issue 1.41</option>
<option value="http://www.loonygames.com/content/1.39/bent/">Issue 1.39</option>
<option value="http://www.loonygames.com/content/1.38/bent/">Issue 1.38</option>
<option value="http://www.loonygames.com/content/1.36/bent/">Issue 1.36</option>
<option value="http://www.loonygames.com/content/1.34/bent/">Issue 1.34</option>
<option value="http://www.loonygames.com/content/1.30/bent/">Issue 1.30</option>
<option value="http://www.loonygames.com/content/1.28/bent/">Issue 1.28</option>
<option value="http://www.loonygames.com/content/1.26/bent/">Issue 1.26</option>
<option value="http://www.loonygames.com/content/1.24/bent/">Issue 1.24</option>
<option value="http://www.loonygames.com/content/1.22/bent/">Issue 1.22</option>
<option value="http://www.loonygames.com/content/1.20/bent/">Issue 1.20</option>
<option value="http://www.loonygames.com/content/1.18/bent/">Issue 1.18</option>
<option value="http://www.loonygames.com/content/1.16/bent/">Issue 1.16</option>
<option value="http://www.loonygames.com/content/1.14/bent/">Issue 1.14</option>
<option value="http://www.loonygames.com/content/1.12/bent/">Issue 1.12</option>
<option value="http://www.loonygames.com/content/1.10/bent/">Issue 1.10</option>
<option value="http://www.loonygames.com/content/1.8/bent/">Issue 1.8</option>
<option value="http://www.loonygames.com/content/1.6/bent/">Issue 1.6</option>
<option value="http://www.loonygames.com/content/1.4/bent/">Issue 1.4</option>
<option value="http://www.loonygames.com/content/1.2/bent/">Issue 1.2</option>

    </select>
  </div>
</form>              <p align="right">&nbsp;</p>
              <p align="right">&nbsp;</p>
              <p align="right">&nbsp;</p>
              <p align="left"> <font face="Arial, Helvetica, sans-serif"><img src="../../images/letters_new/w.jpg" width="34" height="37" align="left"></font><font face="Arial, Helvetica, sans-serif">elcome 
                back, after a long delay, to Beaker’s Bent.  It’s been two months 
                since my last column, where I started to describe some of the 
                techniques I’ve built up over the years for making realistic outdoor 
                environments.  Hopefully no aspiring designers of outdoor environments 
                have been forced into anything drastic out of frustration while 
                waiting for this new installment.  At any rate, they can relax 
                now as I divulge some details about the geometry of outdoor environments.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">Last time, 
                I discussed texturing and lighting, two aspects of an outdoor 
                level which actually supercede the geometry in importance.  With 
                excellent textures and sparkling, sun-like lighting even very 
                simplistic geometry can capture some of the feeling of the outdoors.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">Geometry 
                of an outdoor level is highly dependent on the engine involved.  
                Many outdoor-oriented engines use height-mapped terrain engines.  
                For the true neophytes out there or those who have never touched 
                anything beyond an FPS, a height-mapped engine uses a grid of 
                points of varying heights, with the geometry between those points 
                often out of the designer’s control.  It is possible to programmatically 
                reduce detail in height-mapped terrain as it gets further away 
                from the player, which allows for extended viewing distances as 
                the furthers hills are rendered with the minimum number of polygons.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">It is 
                also very easy to apply fractal algorithms to a grid of points 
                to quickly get mountains and valleys, and to make simple editing 
                tools that can raise or lower hills.  However, this very ease 
                of use contributes to one of the most common problems with outdoor 
                geometry: what I call, until I can come up with a shorter description, 
                the “metal balls in a rubber sheet” look.  In short, the most 
                simple fractal algorithms and editing tools, which are often all 
                that get put into a game editor for height mapped terrain, create 
                a generic and unnatural look to the terrain.  Keep an eye out 
                for landscapes made of many hills and valleys of similar size 
                distinctive, bell-curve shape (as if metal balls had been pressed 
                up through or laid down on a rubber sheet).  You’ll begin to notice 
                this effect in the most hastily assembled outdoor scenes, both 
                real time and pre-rendered.</font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">There 
                are, indeed, some parts of the real world that look similar to 
                “rubber sheet world,” but the far more interesting parts of the 
                world (those which you would like to put in a game) have much 
                more variation than this.  Achieving this kind of terrain requires 
                much more thought and hard work than merely applying fractal noise 
                and a smoothing routine to a grid of height points, and I’ll write 
                more about the technique in a moment.  However, the very nature 
                of the height-mapped terrain engine also contributes to this.  
                </font></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif">The biggest 
                technical drawback to height-mapped terrain is that overhangs 
                or even completely vertical surfaces are impossible to create, 
                since none of the height points could possibly overlap another.  
                A secondary and related drawback is that it is difficult to reproduce 
                very fine detail, such as the branching run-off patterns that 
                you see on the sides of real hills, or the rounded banks of small 
                streams.  Better height-mapped engines have variable-resolution 
                grids, which means that in areas which need high detail such as 
                stream banks or the foundation of a building, the spacing between 
                height points can be decreased.  This also allows for near-vertical 
                slopes, but still not overhangs of course.  The overhang issue 
                can be avoided by using objects cleverly placed on or in the terrain, 
                but it can be difficult to mask the transition between the terrain 
                and the overhang object itself.</font></p>
<p align="left"></p>
              <p align="left"><font face="Arial, Helvetica, sans-serif"></loonystart></font></p>
              <p align="right"><font face="Arial, Helvetica, sans-serif"><a href="index2.php"><font color="#7C420E"><b><font size="+1">Next 
                &gt;&gt;</font></b></font> </a></font></p>
              </DIV>
            </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">  </font></div>
    </td>
  </tr>
</table>
<p><i><font face="Arial, Helvetica, sans-serif" size="-2">Credits: Illustration 
  &copy; 2000 Dan Zalkus. Beaker's Bent is &copy; 2000 Rich Wyckoff. All other 
  content is &copy; 1999 loonyboi productions. Unauthorized reproduction is prohibited, 
  so don't do it or we'll sick our lawyers on you. Muhahahahahahahah. ph3ar our 
  m@d l3gal sk1lz y0.</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>
