📄 landscapeeng.html
字号:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: landscapegenerator</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="jc_style.css" rel="stylesheet" type="text/css">
<script src="klayers.js"></script>
<script>
function cancelCloseMenu(){
if(self.tm) clearTimeout(tm) // cancel delayed closing
}
function showMenu(){
if(!self.menu || !self.submenu){
menu=layer("menulayer")
submenu=layer("submenulayer")
}
cancelCloseMenu()
submenu.moveTo(menu.getAbsoluteLeft(), menu.getAbsoluteTop() + menu.getHeight()) // move second menu relatively
submenu.show()
}
function initiateHideMenu(){
tm=setTimeout("hideMenu()",400) // 1 second delay to close a submenu
}
function hideMenu(){
submenu.hide()
}
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<div align="center">
<a name="top"></a>
<table bgcolor="#737373" border="0" cellpadding="0" cellspacing="0" width="618">
<tr>
<td rowspan="8" bgcolor="#000000"><img src="Pics/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="131" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="13" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="58" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="94" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="81" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="48" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="23" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="38" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="19" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="108" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="5" height="1" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="5"><a href="index.html"><img name="fab_r1_c1" src="Pics/fab_r1_c1.gif" width="131" height="71" border="0" alt="Java cooperation home"></a></td>
<td rowspan="6" bgcolor="#737373"></td>
<td colspan="9" height="15" bgcolor="#737373"></td>
<td rowspan="8" bgcolor="#000000"><img src="Pics/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="5"><div class="colontitul"><!-- InstanceBeginEditable name="Colontitul" -->Tutorial<!-- InstanceEndEditable --></div></td>
<td colspan="2" bgcolor="#737373"><img name="fab_r2_c8" src="Pics/fab_r2_c8.gif" width="57" height="19" border="0" alt="type and press Enter"></td>
<td colspan="2">
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" height="10px"><tr>
<td height="10" valign="middle">
<INPUT TYPE=text name=q size=18 maxlength=60 value="" style="font-size:12px; color:#000000; border-width: 0px;">
<input type=hidden name=domains value="http://javacooperation.gmxhome.de/">
<input type=hidden name=sitesearch value="http://javacooperation.gmxhome.de/" checked>
</td></tr></TABLE>
</td>
</form>
<td><img src="Pics/spacer.gif" width="1" height="19" border="0" alt=""></td>
</tr>
<tr>
<td colspan="9" bgcolor="#666666"><img name="fab_r3_c3" src="Pics/fab_r3_c3.gif" width="474" height="8" border="0" alt=""></td>
<td><img src="Pics/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td colspan="6"><a href="TutorialStartEng.html"><img src="Pics/engpanel_01.gif" width="56" height="22" border="0"></a><a href="OnlineSpieleStartEng.html"><img src="Pics/engpanel_02.gif" width="94" height="22" border="0"></a><a href="DownloadsEng.html"><img src="Pics/engpanel_03.gif" width="76" height="22" border="0"></a><a href="LinksEng.html"><img src="Pics/engpanel_04.gif" width="52" height="22" border="0"></a><a href="KontaktEng.html"><img src="Pics/engpanel_05.gif" width="64" height="22" border="0"></a></td>
<td><img name="fab_r4_c9" src="Pics/fab_r4_c9.gif" width="19" height="22" border="0" alt=""></td>
<td width="108" height="22" bgcolor="#666666"><div align="center"><span id="menulayer" style="position: relative; background-color:#666666; width:108; height:20; vertical-align:baseline; border:1px solid #FFFFFF"><a href="#" class="text" onmouseover="showMenu(); return true" onmouseout="initiateHideMenu(); return true">Select language</a></span>
</div>
<div id="submenulayer" style="position: absolute; visibility: hidden; background-color: #666666; width:108px;">
<div class="text" style="border:1px solid #FFFFFF; border-top-width:0; padding:5px">
<a href="indexDeu.html" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">German</a><br>
<a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">English</a><br>
<a href="http://javacooperation.dev.juga.ru/index.html" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">Russian</a>
</div>
</div>
</td>
<td><img name="fab_r4_c11" src="Pics/fab_r4_c11.gif" width="5" height="22" border="0" alt=""></td>
</tr>
<tr>
<td colspan="9"><img name="fab_r5_c3" src="Pics/fab_r5_c3.gif" width="474" height="7" border="0" alt=""></td>
</tr>
<tr>
<td colspan="11" style="padding:18; background-color:#333333; vertical-align:top;">
<div class="text">
<!-- InstanceBeginEditable name="EditRegion" -->
<h2>Landscapegenerator </h2>
<p align="justify">In this chapter I want to teach you the method to create 2D landscapes I used in my game <a href="Applets/Games/Castles/CastlesEng.html">Castles </a>. Again, I won't talk about the Main class, which controls the applet in general and I won't talk about the Stars class, that paints the stars in the background. But both classes are pretty simple, so I think it will be no problem for you to learn them by yourself if you want to. Before we start programing, we have to know what our "problem" looks like. </p>
<h3>The problem </h3>
<p align="justify">We want to generate a 2D landscape that looks like the "Rocky Mountains" and can be used in a game like "Castles". This landscape shall look different in every game, so it's not possible to use *.gif's or something like that. We want this landscape to be generated at random. Also we want to have the possibility to change it afterwards for example if "bombs" hit the ground. An other important thing is, that the datastructure of our landscape mustn't be too complicated, so that the game is still running fast and the amount of data is not too big. I'm sure, there are many different solutions to this problem one could think of. Let's talk about mine: </p>
<h3>Idea and outline of the algorithm </h3>
<p align="justify">To produce as less data as possible, I want to generate my landscape out of many lines and not out of single points / pixels. The basic idea is to draw a vertical line for every pixel of the length of the landscape. Now we choose the lower point of all lines constant. So we only have to store the upper point, the "surface" of the landscape that will have different values for every line, in a array. </p>
<table width="625" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="166"><img src="tutorial_pics/Landscape1.gif" width="166" height="80"></td>
<td width="10" class="text"> </td>
<td width="449" class="text">First of all one has to recognize, that it doesn't make sense to choose every upper point at random. If you want to generate a "landscape" this way, you wouldn't get a structured surface, instead your "surface" would look like the picture beside this text. </td>
</tr>
</table>
<p align="justify"> To generate a real surface is a little bit harder. First of all I will show you the basic concepts of the algorithm, then afterwards, you get the method I used in Castles as a Java program. Remember, that we leave the lower point of every line constant and change / store the upper point only! </p>
<ol>
<li>First of all we choose a start value at random and store it in a array
<li>Now we initialize the second upper point (the second line) with a value 1 pixel higher or smaller as the one before (the first one).
<li>We initialize all values of the array this way, adding or subtracting 1 to the value before the value we want to initialize.
<li>The decision of adding or subtracting is made by random. The propability to change the direction (from adding to subtacting and vice versa) is 10% the propability to do the same operation (adding or subtracting 1) as before is 90%. </li>
</ol>
<table width="625" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="166"><img src="tutorial_pics/Landscape2.gif" width="201" height="80"></td>
<td width="10" class="text"> </td>
<td width="449" class="text">Beside this text you can see the result of this pretty simple but pretty effective algorithm and it is realy not bad. There are just a view small problems. First of all it happens pretty often, that "mountains" are higher and "vallies" are lower than the appelt size. Another "problem" is, that this landscape looks a little bit boring, I think. So I will present you an algorithm that solves these problems and adds some additional features to the landscape like changing colors. Here we go: </td>
</tr>
</table>
<h3 align="justify">The "final" algorithm </h3>
<ul>
public void generateLandscape () <br>
{
<ul>
/* initialize plus, this variable tells you which value will be added or subtracted from the last value. */ <br>
plus = 1; <br>
<br>
// initialize variable factor which decides if + or - value of plus faktor = 1; // Initializing start value of the surface <br>
start = Math.abs(300 + (rnd.nextInt() % 50)); <br>
<br>
// Store start value on the first position in the array <br>
map [0] = start; <br>
<br>
// Initializing start values for the colors <br>
int greenvalue = 200; <br>
int redvalue = Math.abs(rnd.nextInt() % 200); <br>
int bluevalue = Math.abs(rnd.nextInt() % 201); <br>
<br>
// Storing first RGB value in the Color array <br>
colors [0] = new Color (redvalue, greenvalue, bluevalue); <br>
<br>
// Loop to initialize all array positions <br>
for (int i = 1; i < mapsize; i ++) <br>
{
<ul>
// get the value before the actual position and store it in last <br>
last = map [i - 1]; <br>
<br>
// Decision if changing direction or not <br>
change = Math.abs(rnd.nextInt() % 10); <br>
// changing direction and possibly plus <br>
if (change > 8) <br>
{
<ul>
// Andern der Richtung <br>
faktor = - (faktor); <br>
<br>
// new plus (value 1 or 2) <br>
plus = 1 + Math.abs(rnd.nextInt() % 2); <br>
</ul>
} <br>
<br>
/* Make sure that surface values stay in a certain range */ if (last > 350 || last < 120) <br>
{
<ul>
// Andern der Richtung <br>
faktor = - (faktor); <br>
</ul>
} <br>
<br>
// Make sure that color values stay in a certain range <br>
if (greenvalue > 240) <br>
{
<ul>
// if color value get's too high <br>
greenvalue -= 10; <br>
</ul>
} <br>
else if (greenvalue < 100) <br>
{
<ul>
// if color value get's too small <br>
greenvalue += 10; <br>
</ul>
} <br>
<br>
// Calculate and store surface value on position i <br>
map [i] = last + (faktor * plus); <br>
<br>
// Calculate and store color value on position i <br>
greenvalue = greenvalue + (-faktor * plus); <br>
colors [i] = new Color (redvalue, greenvalue, bluevalue); <br>
</ul>
}
</ul>
}
</ul>
<table width="625" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="166" height="198"><img src="tutorial_pics/Landscape3.gif" width="201" height="126"></td>
<td width="10" class="text"> </td>
<td width="449" class="text">If one has initialized all array values that way one can paint the landscape. The easiest way to do this is to get all values of the arrays with a for - loop. Then draw a line from the bottom of the applet (constant value) to the surface array value. The x - coordinate is the array position of the value. Draw the line in the corrosponding color out of the color array. You can see the result of this method besides this text. As I mentioned, there are many different possibilitys to generate a landscape (for example one could calculate and store single points instead of lines) but my algorithm is fast and doesn't generate a too large amount of data. And at least the result is not too bad. Ok, that's it, if you have another good method to generate a landscape (maybe even 3D) write me. Here comes the source code and the applet!</td>
</tr>
</table>
<p align="justify"><a href="SourceCodes/Landscape/Landscape.zip">Sourcecode download (*.zip - archive) </a><br>
<a href="Applets/Landscape/Landscape.html">Take a look at the applet </a> </p>
<h4>Next chapter </h4>
<a href="LeveleditorEng.html">Leveleditor for arraybased games</a>
<!-- InstanceEndEditable -->
</div>
</td>
</tr>
<tr>
<td colspan="11" style="background-color:#990000" align="center">
<table width="100%" style="padding:0"><tr>
<td width="88" bgcolor="#993300"><div align="center" style="font-size:10px; color: #FFFFFF;"> <a href="#top"> to top </a></div></td>
<td><div align="center" style="font-size:10px; color: #FFFFFF;">
<a href="mailto:javacooperation@gmx.de">Fabian Birzele</a>, 2001-2004.<br>
web-design: <a href="http://www.freehand.str.ru/">Vadim Murzagalin</a>, 2004.
</div></td>
<td width="88">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
<!-- InstanceEnd --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -