php web game map

[choi]

Hi all.

I am busy with my some kind of RTS web game in php,

How to achieve such a Isometric Tiles for php?use the standard staggered-map.Can someone explain me how to make it graphical. ?(

[a_bertrand]

Depends what you want to use, you could use flash, java or silverlight to make your maps, or if you want to stick with JS / HTML then all is different.

So unless you tell us which technology you are willing to use, I'm not sure how we can help you.

[choi]

Depends what you want to use, you could use flash, java or silverlight to make your maps, or if you want to stick with JS / HTML then all is different.

So unless you tell us which technology you are willing to use, I'm not sure how we can help you.

Thanks.I want to use PHP to achieve Isometric Tiles.Can you make an example?

[a_bertrand]

Well to get something like that you will need a lot of CSS positioning as no table will allow you to overlap images.

Now of course you could render the full image on the server side (via GD) and then show the rendered image directly.

For the client side rendering you have the choice of render it via PHP & HTML and if you need to modify the map you need to reload the page or do it via JS.

[snailian]

Choi: I would recommend that you take a peek at devana's source code for map.php. This has a similar tiling scheme as what you are looking for. However, you may find that having a map with as many tiles simultaneously displayed as your example to be a resource hog. Good luck!

[choi]

<?php

$map = array();
$terrain = array ('test');
for ($row = 0; $row < 5; $row++) {
$map[] = array();
for ($column = 0; $column < 5; $column++) {
   $pool = $terrain;
   if (isset($map[$row-1])) {
       if (isset($map[$row-1][$column-1])) {
           $pool[] = $map[$row-1][$column-1];
           $pool[] = $map[$row-1][$column-1];
       }
       $pool[] = $map[$row-1][$column];
       $pool[] = $map[$row-1][$column];
       if (isset($map[$row-1][$column+1])) {
           $pool[] = $map[$row-1][$column+1];
           $pool[] = $map[$row-1][$column+1];
       }
   }
   if (isset($map[$row][$column-1])) {
           $pool[] = $map[$row][$column-1];
           $pool[] = $map[$row][$column-1];
   }
   shuffle($pool);
   $map[$row][$column] = $pool[0];
}
}

?>
<table cellspacing='0' cellpadding='0' border='0'>
<?php foreach ($map as $row) { ?>
<tr>
<?php foreach ($row as $tile) { ?>
<td>[img=tile_<?php echo $tile ?>.png]</td>
<?php } ?>
</tr>
<?php } ?>
</table>

Thank all. Reference to some information.Not been able to achieve 2.5d map production?Coordinates and layer do? I would add a layer. :pinch:

[a_bertrand]

As said, you cannot overlap tiles with a grid (like a table). You need to use CSS to place your images on a pixel precise location.

[choi]

3Q man?devana Open Source?Reference to the map production method ,PHP+MYSQL?no css and JS)

Effect Picture?7*7 grid

If you want to move target in this map,Giving target coordinates can be done?Do provide an idea? ;)

index.php

<?php include "antet.php"; include "func.php";

if (isset($_POST["x"], $_POST["y"])) {$x=clean($_POST["x"]); $y=clean($_POST["y"]);}
else {$x=rand(0, $m); $y=rand(0, $n);}
$data=map($x, $y);
$i=0;
?>

<div style="position:relative; top:0; left:0;"> 

<?php
for ($k = 6; $k >= -6; $k--)
{
  for ($j = -6; $j <= 6; $j++)
  {
 $st_x = ($k + 6) * 40 + ($j + 6) * 40;
 $st_y = (6 - $k) * 20 + ($j + 6) * 20;
?>

<img style='position:absolute;left:<?php echo $st_x; ?>px;top:<?php echo $st_y; ?>px;width:80px;height:80px;' <?php map_img($data, $x+$j, $y+$k, $i, $imgs); ?>>

<?php
}
}
?>

[img=<?php echo $imgs ?>map/map_back.gif]

<?php
$i = 0;
for ($k = 6; $k >= -6; $k--)
{
  for ($j = -6; $j <= 6; $j++)
  {
 $st_x = ($k + 6) * 40 + ($j + 6) * 40;
 $st_y = (6 - $k) * 20 + ($j + 6) * 20;
 $coords = ($st_x + 40) . ',' . $st_y . ',' . ($st_x + 80) . ',' . ($st_y + 20) . ',' . ($st_x + 40) . ',' . ($st_y + 40) . ',' . $st_x . ',' . ($st_y + 20);
?>

<?php
}
}
?>

</div>

 

func.php

<?php

$db_id = mysql_connect($db_host, $db_user, $db_pass)

or die("Could not connect to DB.");
mysql_select_db($db_name, $db_id)
or die("Database not found.");

$result=mysql_query($query, $db_id);

$imgs="default/";

function map($x, $y)
{
global $db_id;
$query="select * from map where (y between ".($y-3)." and ".($y+3).")  and (x between ".($x-3)." and ".($x+3).") order by y desc, x asc";
$result=mysql_query($query, $db_id);
$data=array();
for ($i=0; $row=mysql_fetch_row($result); $i++) $data[$i]=$row;
return $data;
}

function map_img($data, $x, $y, &$i, $imgs)
{
echo "src='".$imgs."map/env_";
if (isset($data[$i][0]))
{
if (($data[$i][0]==$x)&&($data[$i][1]==$y))
{
 if (!$data[$i][2]) echo "0".rand(1,2);
 else echo $data[$i][2].$data[$i][3];
 if ($i<count($data)-1) $i++;
}
else echo "x";
echo ".gif'";

}
}
?>

 

antet.php

 

<?php include "./language/en.php";

session_start();

$title=$lang['title']; $announcement=$lang['announc']; $m=49; $n=49;
$db_host="localhost"; 
$db_user="myusertest"; 
$db_pass="mypasstest"; 
$db_name="devana";

?>

[Zeggy]

I would recommend generating the basic maps (static terrain, terrain details, etc) as a single image on the server side, then caching them.

Then use CSS positioning to add anything that changes (eg. actors, objects, items).

This way you only need to load a single image for the tiled world without having to generate anything on the fly or loading a bunch of terrain images at once.