Map maken

[slabbetje]

Beste helpers,

Ik ben bezig met een spel en nu wil ik een update doen dat je ook echt een map hebt met objecten allen hoe kan ik dit het beste maken?
Dit moet een beetje vergelijkbaar worden als de map van bijv tribalwars.
Hiervan heb ik een source maar helaas is de map geencrypt met een php encrypter.
Dus hoe zou ik dit het beste kunnen maken?

 

[Frats]

Persoonlijk zou ik gaan voor een tabel based map (vierkant, niet iso)

Afhankelijk van wat je allemaal op je kaart wil hebben, zul je iig het een en ander met coordinaten in je database moeten gooien.

Vervolgens moet je, als je kijkt naar een bepaald stuk van de map, het middelpunt bepalen en in een gebied daar omheen alle info ophalen. Vervolgens maak je een grote tabel zonder borders en zet je alle info op de juiste coordinaten.

Hier is een klein opzetje:

// aanname: je url bevat de x en y coordinaten van het middenpunt dat je toont
$x = (int) $_GET['x'];
$y = (int) $_GET['y'];

// aanname: je kaart toont 11x11 vakjes
$sql = "SELECT * FROM objecten WHERE x > " . ( $x - 5 ) . " AND x < " . ( $x + 5 ) . " AND y < " . ( $y - 5 ) . " AND y > " . ( $y + 5 );
$result = mysql_query( $sql );

// resultaten ophalen, in de voorwerpen array stoppen.
$voorwerpen = array();
while ( $rij = mysql_fetch_assoc ( $result ) ) {
  $voorwerpen[ $rij['y'] ][ $rij['x'] ] = $rij;
}

// tabel tekenen
echo '<table>';
// voor elke verticale rij
for ( $i = $y - 5 ; $i < $y +5 ; $i++ ) {
  echo '<tr>';
  // teken een horizontale rij
  for ( $j = $x - 5; $j < $x + 5 ; $j ++ ) {
    echo '<td>';
    // als er een voorwerp is
    if ( isset ( $voorwerpen[ $i ][ $j ] ) ) {
      // zet de naam ervan in de cel
      echo $voorwerpen[ $i ][ $j ][ 'naam' ];
    }
    else {
      // maak een lege cel
      echo 'leeg';
    }
    echo '</td>'; 
  }
  echo '</tr>'; 
}
echo '</table>';

Code is niet getest en alleen bedoeld als opzetje Succes ermee

 

[slabbetje]

ja dat is idd een goeie oplossing dus op het moment dat je een ander object hebt centreer je die eigenlijk automatisch het object op de kaart...
en verder doe je de lijnen gewoon met een rest waarde neem ik aan??

<?php if ($i%5) {
//om de vakken 1 dikke lijn neerzetten
}?>

 

[Frats]

Er wordt nu al een tabel getekend, als je gewoon de borders daarvan aanzet dan worden de vakjes netjes opgedeeld

 

[slabbetje]

dat snap ik maar die dat met die restwaardes is gewoon een optie dat je de classe naam veranderd van de TD waardoor hij bijv een dikkere rand krijgt ofzo..

 

[Frats]

Ow, ja dat zou je eventueel kunnen doen natuurlijk Maar als het gaat om de buitenrand kan het vast ook anders; als je idd de map wil verdelen in blokken van 3x3 ofzo dan zul je met restwaarde moeten werken.

 

[slabbetje]

Oke en is het heel moeilijk om met isometry te werken?
Want feitelijk is dat gewoon het object 45 graden rotoren en de hoogte halveren...

 

[Frats]

Hehe.

Dat is echt een gruwelijke bitch (geloof me, ik heb het gedaan)

Het principe is idd 'rotate 45 graden'

Maar je browser ondersteunt alleen maar rechthoeken, geen ruiten. Dus dat wordt je eerste probleem. Je moet zelf een imagemap uitsnijden met rechthoeken en dan alle plaatjes over elkaar heen leggen.

Het tweede is dat een ruit aan informatie uit de database halen ook heel lastig is, dat maakt een behoorlijk complexe query.

Werp maar eens een blik op de broncode van een game met een iso-map, dan kun je ongeveer zien wat ik bedoel.

 

[slabbetje]

Oke naja ik kijk wel het zal niet lastiger moetne zijn lijkt mij want isometrisch tekenen kan ik wel en dan kan je gewoon de coordinaten toch het zelfde houden?? en met een z-index goedzetten je moet dan alleen de base van het plaatje weten dus de plek die hij moet verplaatsen op de vloer

 

[Frats]

Feel free to try. Het is echt 10x lastiger dan een gewone map maken.

 

[slabbetje]

oke gaat wel lukken hoor ik kan beter programmeren dan je denkt ik lees gewoon de data van het plaatje uit en bereken vanuit de hoogte van het plaatje uit waar hij moet positioneren
is wel een omwegetje maar werkt zeer effectief

Edit:
Het is al gelukt in isometric
Voor mensen met interessen

<?php
	$spacing = 64;			//width of 1 tile
	$tiles = 10;			//tiles .. x ..
?>
<style>
	.tile {
		position:	absolute;
		width:   64px;
		height:	 32px;
		border:	0px black solid;
		background:	url('tiles/1.png') no-repeat;
	}
</style>
<?php
	for ($x=0; $x<$tiles; $x++)
	{
		for ($y=0; $y<$tiles; $y++)
		{	
			$new_x = $spacing/2 * ($x + $y);
			$new_y = 200 + $spacing/4 * ($x - $y);
			echo'<div class="tile" style="margin-left: '.$new_x.'; margin-top: '.$new_y.';">'.$x.'_'.$y.'</div>';
			//var_dump("[".$x."_".$y."] X: ".$new_x." Y:" . $new_y);
		}
	}
?>

het plaatje is een 64x33 (33 hoog is makkelijker designen er word dan wel 1px van de onderste rand gehaald) moet png of gif zijn