Creating my first map

[Shadowing]

Hey guys im new to the forum. Im pretty decent with php and using mysql.

I will be making my first map. The map i want to make is simple. Its a Star map of 1 galaxy. I have a few questions on termnology. When people say 16x16 size map thats saying 16 blocks by 16 blocks right?

Im going to be using a background image which will stay the same on every block. Then im wanting to echo in the few stars that exist in each block that are clickable. So your basic 2d map.

I also want to allow the user to move left,right,down,up on the map. To do this I will make a link for each side of the block. My problem is how do I select from mysql for that? select the row next to the current block? if so that would only let me to go up or down or left or right. since rows in the table are just in line order.

Im assuming i need two tables. One for the blocks and then one for the stars that match each block by sharing a id number.

Another problem I dont understand is how to tell where each star goes on the block. I was reading the forum and someone mention using div-s which i havnt looked into yet.

If anyone has any good tutor links i would mostly appreciate it.

[Chris]

Why do you need to store "blocks" in the database for? It's just space so it's always empty. Render blank clickable blocks always and only querry stars from the database.

Do not echo everything separatelly, buffer everything into a variable and then do "echo $mymap;". Echo used needlessly has slight performance problem (and with things like map it has even more serious problems).

You don't exactly have rows stored in line order in the database (excepy MyISAAM storage I guess). Anyway, database is a powerful storage mechanic, just add search criterias. Like X and Y. And then querry rows based on X,Y.
Also, you don't necessarily need "id" for a table (but usually it is convenient), you can use any combination of keys you can think of.

[Shadowing]

Thanks for the reply Chris
alright im getting closer to grasping the concept on this.

yah ive always used MyISAAM lol. So thats why i had the line order thing in my head. What should I use instead?

ok so im going to create a x column and then a y column

is the x,y just cords for only the screen being shown? or the entire map as a whole. where the x and y wouldnt be the same for another block.

it makes sense i would need a x,y for the screen being shown. but if i ever wanted to zoom out i guess im confused on how to do that.

I want to start off with just a 8x8 map to test it all out before i go big

[Nox]

I think it's much better to store coordinates related to the whole map ... what is displayed is only a matter of presentation - as you said yourself - so then you'll just do some offsetting etc. if needed. With that you can do any fancy stuff for your front-end and the data will stay teh same

[Shadowing]

Thanks for joinin the conversation Nox

I guess im confused on how to tell the stars where to go on each block. so if im storing a x,y for a huge map but displaying them on one block. how is that telling the stars where to go?

[BlackScorp]

so shadowing, make a table (InnoDB engine) planets with fields, x,y,type each planet type means another image of them http://opengameart.org/content/11-planet-sci-fi-set

http://pastebin.com/tQ8RGDmQ this way i made an Isometric map, so you told youre good with PHP and it must be not a problem for you to make a normal 2D map with this code, i used there random values for images, you have to read the values from the database here is the result

http://cccpmik.wmw.cc/isomap/

it is a bit buggy, just for demonstration;)

Greetz BlackScorp

[Nox]

Shadowing: 'm not entirely sure I get what you need, but - if the block has some coordinates and an entity in the block has some coordinates, there should be a coordinate system that would map any entity on the global level

Say you have say 6x6 blocks, each block has 10x10 pixels (simplification), and you can view 2x2 blocks.

So the global coordinates of a planet on position 7x4 in a block on position 3x2 would be x: (3 - 1) * 10 + 7 = 27, y: (2 - 1) * 10 + 4 = 14 (-1 because we start from 0)
When viewing the 2x2 you subtract Xs * 10, Ys * 10 from each position where Xs, Ys are coordinates of the first viewed block (left top one if you start coordinates in left top corner)

[Shadowing]

So the global coordinates of a planet on position 7x4 in a block on position 3x2

yah so i would have to store a x,y for the block and a x,y for the whole map for each star in the database right?. I should mention there is only going to be 1 planet per star. so you are more less taking over solar systems. When you click on a star it takes you to a text base screen. I had to solve another issue yesterday so it pospone the map for a day. But i got it taken care of and im back on the map now lol.

[Shadowing]

lol oh i see what your saying now about how you subtract 1 when you move over a block subtracting 1 from y or x or adding 1 according to which way you are moving on the map

now im looking into how to do the clickable spots in a grid
im making this out to be way harder then it actually is haha.

[Shadowing]

im having a problem with figuring out a way to make a grid of clickable squares with css
im using a container where i can see the border. my border for the over all map is   width 650px & height 400px
should i be using a table for this? I posted a picture above

Code: [Select]

#container a {
    height:10px;
    width:10px
    display:block;
    border:2px solid #E0E0E0;
 }


<div id="container">
<a href="planets.php"><span>S</span></a>
</div>



[AltarofScience]

I don't know if this is what you were thinking about, but this is a universe map I generated for my game. If you click on a star it takes you to a galaxy and then a solar system and then to a planet.
Data is stored in a mysql table.
My code doesn't use classes or functions, and I use mysql_result, which most people here don't like, but it shouldn't be too hard to write your own code more appropriately from this example.

http://www.lordofthedawn.com/LotD/UniMap.php

Code: [Select]

<?php include('menu.php'); ?>
<div class="umap">
<?php
$dbhost = 'localhost';
$dbuser = '?';
$dbpass = '?';
$dbname = '?';
$conn = mysql_connect($dbhost,$dbuser,$dbpass)
or die ('Error connecting to mysql');
mysql_select_db($dbname);
$xcor=0;
$ycor=0;
$xbase=270;
$ybase=285;
$xcomin=$xcor-12000;
$xcomax=$xcor+12000;
$ycomin=$ycor-12000;
$ycomax=$ycor+12000;
$querysysco="SELECT idgal, idsys, x, y FROM universe WHERE x BETWEEN $xcomin AND $xcomax AND y BETWEEN $ycomin AND $ycomax";
$resultsysco=mysql_query($querysysco);
$numsys=mysql_num_rows($resultsysco);
$syslo=0;
while($syslo<$numsys){
$cog=mysql_result($resultsysco, $syslo, 'idgal');
$cos=mysql_result($resultsysco, $syslo, 'idsys');
$cox=mysql_result($resultsysco, $syslo, 'x');
$coy=mysql_result($resultsysco, $syslo, 'y');
$basex=$xbase+$cox/40;
$basey=$ybase+$coy/40;
echo '<a href="GalMap.php?idgal=' . $cog . '"><img src="CSS/LotDum.jpeg" id="' . $cos . '" style="position:absolute; left:' . $basex . 'px; top:' . $basey . 'px;"></a>';
$syslo++;
}
?>
</div>

Alternatively you could generate this type of map where its a grid of squares:
http://www.lordofthedawn.com/worldmap.php

Code: [Select]

<?php include('TTSCSS/cssholder.php'); ?>
<div class="wmap">
<?php
$dbhost = 'localhost';
$dbuser = '?';
$dbpass = '?';
$dbname = '?';
$conn = mysql_connect($dbhost,$dbuser,$dbpass)
or die ('Error connecting to mysql');
mysql_select_db($dbname);
$xcor=0;
$ycor=0;
$xbase=300-$xcor/10;
$ybase=300-$ycor/10;
$xcomin=$xcor-100;
$xcomax=$xcor+100;
$ycomin=$ycor-100;
$ycomax=$ycor+100;
$queryarea="SELECT idwm, x, y FROM worldmap WHERE x BETWEEN $xcomin AND $xcomax AND y BETWEEN $ycomin AND $ycomax";
$resultarea=mysql_query($queryarea);
$numarea=mysql_num_rows($resultarea);
$ma=0;
while($ma<$numarea){
$cog=mysql_result($resultarea, $ma, 'idwm');
$cox=mysql_result($resultarea, $ma, 'x');
$coy=mysql_result($resultarea, $ma, 'y');
$basex=$xbase+$cox*25;
$basey=$ybase+$coy*25;
echo '<a href="areamap.php?idwm=' . $cog . '"><img src="TTSCSS/TTSwm.jpg" id="' . $cos . '" style="position:absolute; left:' . $basex . 'px; top:' . $basey . 'px;"></a>';
$ma++;
}
?>
</div>
</div>
</body>
</html>


[Shadowing]

Alright this is where im at so far. I understand how to move around to each block
my problem now is how do I assign a star to a location with in this table. I would assume i would need to give each <td> link/image a id or something that equals the x and y for that square. So i can say echo this star where the x,y matches the star in the data base x and y. So my question is how do I give each square a id.

Code: [Select]


<tr align=center>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><a href="map.php"><img src="images/star.jpg" alt="star name"  ></a></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
<td><img src="blank.gif" ></td>
</tr>



[Shadowing]

I see what AltarofScience is doing he is using inline CSS and echoing in according to the px

is this the only way to do this?

I dont understand what a px really is i guess. as to how it relates to <td> is every <td> a px lol

like what would the px top and left be on square x3 y3 starting at top left with first square being x1 y1

[Shadowing]

ahh i just realized inside my retangle border. starts off as 1,1
i was thinking the px was going to be the px of the entire screen.

so x10, y,10 puts me dead center in the top left center box. unless i havnt grasp the concept of zoming out.

cause if i zoom out i would want to show all the boxes around the box im showing right? so if my blocks are to large then my zoom outs are going to be large steps


im thinking maybe i should use smaller blocks and display many blocks at once. so then i can have more control over zoom out.

[arai]

Anything wrong with absolutely positioning your systems in your galaxy map via CSS?

Code: [Select]

<!DOCTYPE html>
<html>
  <body>
    <div id="map">
      <nav>
        <a id="nav_u" href="u"><span>Up</span></a>
        <a id="nav_d" href="d"><span>Down</span></a>
        <a id="nav_l" href="l"><span>Left</span></a>
        <a id="nav_r" href="r"><span>Right</span></a>
      </nav>
      <div id="galaxy">
        <a href="0" style="top: 465px; left: 81px;"><span>System 0</span></a>
        <a href="1" style="top: 212px; left: 27px;"><span>System 1</span></a>
        <a href="2" style="top: 620px; left: 347px;"><span>System 2</span></a>
        <a href="3" style="top: 122px; left: 315px;"><span>System 3</span></a>
        <a href="4" style="top: 116px; left: 860px;"><span>System 4</span></a>
        <a href="5" style="top: 289px; left: 829px;"><span>System 5</span></a>
        <a href="6" style="top: 262px; left: 28px;"><span>System 6</span></a>
        <a href="7" style="top: 718px; left: 647px;"><span>System 7</span></a>
        <a href="8" style="top: 485px; left: 55px;"><span>System 8</span></a>
        <a href="9" style="top: 152px; left: 822px;"><span>System 9</span></a>
      </div>
    </div>
  </body>
</html>

With the following stylesheet:

Code: [Select]

      div#map {
        position: relative;
        width: 1024px;
        height: 768px;
        background: #000;
      }

      a#nav_u {
        position: absolute;
        top: 4px;
        left: 500px;
      }

      a#nav_d {
        position: absolute;
        bottom: 4px;
        left: 500px;
      }

      a#nav_l {
        position: absolute;
        left: 4px;
        top: 360px;
      }

      a#nav_r {
        position: absolute;
        right: 4px;
        top: 360px;
      }

      div#galaxy {
        position: absolute;
        border: 1px solid green;
        top:    48px;
        left:   48px;
        right:  48px;
        bottom: 48px;
      }

      div#galaxy > a {
        position: absolute;
        display: block;
        border: 1px solid white;
        width: 20px;
        height: 20px;
      }

      div#galaxy > a > span {
        display: none;
      }

Except for one of my systems rendering well outside the bounds of the map, it worked out pretty well.

[AltarofScience]

Why are you displaying the map in a table? That just adds complications.
I just display images by pixels and coordinates. I haven't set up my map to move yet, because I haven't generated enough systems to need to, but I could just use a form to change the base values I am displaying in relation to the galaxy or universe center coordinates and that would move the map. I could also make buttons to make predefined shifts.
Tables just seem like a pain and you have all those annoying broken images for where there aren't systems.

[Nox]

It's an interesting idea, as far as clicks go, you can calculate the block (if you need that) from the click coordinates. If you want some graphics (hover, grid...), well ... I guess some DOM elements might be the easier solution.
There's canvas but ... might be overkill, but you can look into that, maybe you'll find out that it suits better for the things you want and things you plan (worst case scenario - you'll learn something new ).

BTW you might look up Chris' posts, I think he briefly mentioned maps (unless it was IRC), something that tables are not as suitable, but I don't remember it clearly.