Page 1 of 1
Creating a map from an array?
Posted: Fri Jan 19, 2007 9:51 pm
by Serengeti.music
I am trying to create a map based on array info. This is a companion application to an online game.
The ingame map is 2d with x = 0 to 25 and y = 0 to 17.
Each map tile will have one of 5 or 6 background colors on it.
Some of the tiles will have buildings on them.
Each building will have a building ID.
My array skills are rusty and I am needing help with how to pull the data from MySQL and output the map in HTML.
The non-interactive map is located here:
http://www.thebluesuncorporation.com/pa ... akrab.html
I want to recreate this on my own server but with interactivity. The map on the above link is hardcoded using a huge table.
After some scribblings, I came up with this...
Code: Select all
$ZEmap = array (
array ("$PosX","$PosY","$BGID","$ImID","$BID"))
$PosX = X position on the grid.
$PosY = Y position on the grid.
$BGID = Type of tile (X=impassable, E=energy, N=nebula, F=fuel, A=asteroid). This is the background color.
$ImID = ID number associated to images in the database. This is the building image.
$BID = Building ID. Associated in a buildings table.
So basically, my question...
Where do I go from here to actually build the map based on the info in the 'buildings' table?
Posted: Fri Jan 19, 2007 9:58 pm
by Kieran Huggins
Ironically, you don't use array_map();
Posted: Sat Jan 20, 2007 5:57 am
by Serengeti.music
So what would I use?
Posted: Sat Jan 20, 2007 8:13 am
by Kieran Huggins
You need to figure out how to translate the co-ordinates in your table to pixel co-ordinates on your image. It's just math.
Posted: Sat Jan 20, 2007 4:52 pm
by Serengeti.music
But it isn't an image. Each tile would be built via the data. Or at least that's how I see it happening. I would have a table showing the basic data of immovable objects such as the tile type and wormholes. Then I would have a table with building data that would change.
I need to go through the map data table and build the map. [0,0],[0,1],[0,2]....[0,25]...and then move down to the next row...[1,0] etc.
And then go through the building table and do the same, overlaying the images.
Or would it be easier to create an image of the map tiles and overlay the building images onto that?
Posted: Sat Jan 20, 2007 6:03 pm
by Kieran Huggins
even when you're using tiles, they still combine to form a larger map. The pixel dimensions of the large map is what you need to calculate, then you can cut the tiles as subsets of that large map.
Think "Cartesian Map" - you need to define your '0,0' point.
Posted: Sat Jan 20, 2007 6:14 pm
by Ollie Saunders
[0,0],[0,1],[0,2]....[0,25]
That's just one loop nested within another echoing the table markup.
Show us the code you've got and contents of the appropriate table and we'll be able to help more.
Posted: Sat Jan 20, 2007 7:12 pm
by Serengeti.music
Well as I am lost when it comes to this level of arrays, I have no code except for the small piece I posted above.
The images in each cell will be 32x32 pixels.
26 cells wide. 832 pixels wide plus another 27 for the table borders, so 859 wide.
18 cells tall. 576 pixels plus 19 is 595 tall.
The problem with doing this is I would like to eventually expand this application to include other maps which are all different in size.
Here is one of the rows. The class would be the background color which won't change. The image is of the specific building which is subject to change. Is there a way to avoid the table layout in favor of a div layout?
Code: Select all
<tr>
<th class='numLeft'>12</th>
<td class='e'> </td>
<td class='g'> </td>
<td class='g'> </td>
<td class='f'><img src='images/map/Plastics_Facility.png' width="32" height="32" border="0" title="Plastics Facility"/></td>
<td class='f'><img src='images/map/Brewery.png' width="32" height="32" title="Brewery"/></td>
<td class='f'><img src='images/map/Smelting_Facility.png' width="32" height="32" border="0" title="Smelting Facility"/></td>
<td class='f'><img src='images/map/Smelting_Facility.png' width="32" height="32" border="0" title="Smelting Facility"/></td>
<td class='f'><img src='images/map/Smelting_Facility.png' width="32" height="32" border="0" title="Smelting Facility"/></td>
<td class='e'> </td>
<td class='b'> </td>
<td class='e'> </td>
<td class='e'> </td>
<td class='f'> </td>
<td class='f'> </td>
<td class='f'> </td>
<td class='g'> </td>
<td class='g'> </td>
<td class='g'> </td>
<td class='g'> </td>
<td class='g'> </td>
<td class='f'> </td>
<td class='f'> </td>
<td class='f'> </td>
<td class='e'> </td>
<td class='e'> </td>
</tr>
Posted: Sat Jan 20, 2007 7:46 pm
by Ollie Saunders
Well as I am lost when it comes to this level of arrays
Put one array inside the other and you're lost? I think you are underestimating yourself. This is really rudimentary.
The problem with doing this is I would like to eventually expand this application to include other maps which are all different in size.
Not difficult.
Is there a way to avoid the table layout in favor of a div layout?
There are ways but you wouldn't want to use them because this is tabular data, or close to it.
Here's a hint
Code: Select all
<?php
$fiveByFiveMap = array(
array('a', 'b', 'c', 'd', 'e'),
array('b', 'c', 'd', 'e', 'a'),
array('c', 'd', 'e', 'a', 'b'),
array('d', 'e', 'a', 'b', 'c'),
array('e', 'a', 'b', 'c', 'd'),
);
echo '<table border="1">';
foreach ($fiveByFiveMap as $y) {
echo '<tr>';
foreach ($y as $x) {
echo "<td>$x</td>";
}
echo '</tr>';
}
echo '</table>';
tested
Posted: Sat Jan 20, 2007 9:01 pm
by Serengeti.music
Ok, now we're getting somewhere. When I said I was rusty, I meant that my last experience with arrays was in '98 using Lingo.
The output of the code below is at this link:
http://creative-clay.com/pardus/zuben-array.php
I have connected the array to the database. Now I need to put each row of data into a single cell. I'm assuming a 3rd level on the array is needed. I also need to figure out how to place each datachunk into the specific cell.
Code: Select all
<div id="list">
<table border="1" cellpadding="0" cellspacing="0">
<?php do { ?>
<?
$BIDtemp = $row_BuildingList['BID'];
$query_xrefType = sprintf("
SELECT building_ref.NAME
FROM building_ref LEFT JOIN buildings
ON buildings.BRID = building_ref.BRID
WHERE buildings.BID = $BIDtemp
", $colname_xrefType);
$xrefType = mysql_query($query_xrefType, $DB) or die(mysql_error());
$row_xrefType = mysql_fetch_assoc($xrefType);
$totalRows_xrefType = mysql_num_rows($xrefType);
$Nametemp = $row_BuildingList['Name'];
$Sectortemp = $row_BuildingList['Sector'];
$BRIDtemp = $row_BuildingList['BRID'];
$PosXtemp = $row_BuildingList['PosX'];
$PosYtemp = $row_BuildingList['PosY'];
$fiveByFive = array(
array($Nametemp, $Sectortemp, $BRIDtemp, $PosXtemp, $PosYtemp)
);
//echo '<table border="1">';
foreach ($fiveByFive as $y) {
echo '<tr>
';
foreach ($y as $x) {
echo "<td width=32 height=32 class='$tileType'>$x</td>
";
}
echo '</tr>
';
}
//echo '</table>';
?>
<?php } while ($row_BuildingList = mysql_fetch_assoc($BuildingList)); ?>
</table>
</div>