Old topic:
http://www.gamedev.net/community/forums/topic.asp?topic_id=572233
So I have made some progress on my browser game and now I want to store maps in a mysql database(still no idea how to do that either).
This link can paint tiles on a map :
Map Editor
The tiles that are available are stored in a database in a table. They can be modified here :
Tile Editor
Now what I'm thinking is adding a save map button to the map editor and it will take all the tiles in the map (40x20 right now but will probably be bigger later on) and somehow create a new table in the database or add all the tile info to a table. I have no idea how to add the maps to the database. Should I create a table per map or store each map as a row of a table? What about variable length stuff for example there might be buildings on the map which will be added by the editor.
Open for suggestions :)
[web] Php+javascript+canvas+map loading
I think I'd have one table called MAPS, and give it the following columns:
MapID | X | Y | TileID
Then, you could query the database by saying:
Select * from Maps where MapID = '$MapID'
Then you could do a simple loop through X, Y, outputting the TileType (found via TileID) as you go.
MapID | X | Y | TileID
Then, you could query the database by saying:
Select * from Maps where MapID = '$MapID'
Then you could do a simple loop through X, Y, outputting the TileType (found via TileID) as you go.
Author
But isnt MapID | X | Y | TileID storing only 1 tile? One map will have around 3600 tiles.
Edit: Or are you telling something like this ,
MAPS TABLE :
MapID | X | Y | TileID
1 , 0,0,1
1, 1,0,2
1, 2,0,1
1, 3,0,5
1, 4,0,7
1, 5,0,2
1, 6,0,3
1, 7,0,2
...
So there will be 1 row for each tile totaling 3600 rows for a map all having 1 for MapID and different x,y, and tile ids values.
Edit: Or are you telling something like this ,
MAPS TABLE :
MapID | X | Y | TileID
1 , 0,0,1
1, 1,0,2
1, 2,0,1
1, 3,0,5
1, 4,0,7
1, 5,0,2
1, 6,0,3
1, 7,0,2
...
So there will be 1 row for each tile totaling 3600 rows for a map all having 1 for MapID and different x,y, and tile ids values.
Yes, 3600 Rows. The X, Y just gives the coordinates of the tile. The TileID gives you the tile type (ie, water, land, forest).
You'd have something like:
1 1 1 1 (ie, Map 1, x = 1, y = 1, tileid = 1 (plains))
1 1 2 1 (ie, Map 1, x = 1, y = 2, tileid = 1 (plains))
1 2 1 2 (ie, Map 1, x = 2, y = 1, tileid = 2 (forest))
1 2 2 3 (ie, Map 1, x = 2, y = 2, tileid = 3 (water))
The above would be for a 2x2 grid space.
It shouldn't take much time to loop through even a 3600 row tile set and place the tiles on a grid.
You'd have something like:
1 1 1 1 (ie, Map 1, x = 1, y = 1, tileid = 1 (plains))
1 1 2 1 (ie, Map 1, x = 1, y = 2, tileid = 1 (plains))
1 2 1 2 (ie, Map 1, x = 2, y = 1, tileid = 2 (forest))
1 2 2 3 (ie, Map 1, x = 2, y = 2, tileid = 3 (water))
The above would be for a 2x2 grid space.
It shouldn't take much time to loop through even a 3600 row tile set and place the tiles on a grid.
You could shorten the database by selecting a "default" background and/or coming up with a simple system for large sections of the same background (it would depend on your regular patterns).
I didn't follow the old link, but if your maps aren't going to change often, you can simply generate the map and save the image (instead of generating it each time). Then your database will only be a long version for editing and its makeup won't matter (much) because you rarely load the map that way. Saving will simultaneously update the database and replace the old map image.
As to your main question: depending on your database, different structures will be faster -- I'll leave recommendations to someone who does more with different DBs, since I don't have any first-hand knowledge of best practices with lots of DB software. Don't be afraid to create multiple systems and benchmark them to see what works best for you.
I didn't follow the old link, but if your maps aren't going to change often, you can simply generate the map and save the image (instead of generating it each time). Then your database will only be a long version for editing and its makeup won't matter (much) because you rarely load the map that way. Saving will simultaneously update the database and replace the old map image.
As to your main question: depending on your database, different structures will be faster -- I'll leave recommendations to someone who does more with different DBs, since I don't have any first-hand knowledge of best practices with lots of DB software. Don't be afraid to create multiple systems and benchmark them to see what works best for you.
Author
So I have all my tiles in a javascript array and I have added a button to my map editor which is basically this :
When it is clicked it runs the saveMap.php script which looks like this right now :
Problem is I don't know how to pass the array that has 3600 tiles from javascript to php. If I can do that I can make a for loop inside the php script and run 3600 insert queries :)<br>
<button id="command_savemap" onClick="parent.location='saveMap.php'"><img width=32 height=32 src="images/save.png"/></button>When it is clicked it runs the saveMap.php script which looks like this right now :
<?phpinclude "db_connect";$connection = dbConnect();//save the data from javascript array to map_tile_info table in mysqlmysql_close($connection);// return back to mapEditorHeader('Location: mapEditor.php');exit();?>Problem is I don't know how to pass the array that has 3600 tiles from javascript to php. If I can do that I can make a for loop inside the php script and run 3600 insert queries :)<br>
If you use jQuery, I believe you can do it in one line.
$.post("saveMap.php", { 'postvarname[]': myarrayvar });
If you want to alert the user that the page has been saved, use:
$.post("saveMap.php", { 'postvarname[]': myarrayvar },
function(data){
alert("data);
});
In the second example, you just need to echo "Save was successful" or "Save Failed", and it will get sent to function(data) and outputted.
You might also require a click event to set this in motion...
$.post("saveMap.php", { 'postvarname[]': myarrayvar });
If you want to alert the user that the page has been saved, use:
$.post("saveMap.php", { 'postvarname[]': myarrayvar },
function(data){
alert("data);
});
In the second example, you just need to echo "Save was successful" or "Save Failed", and it will get sent to function(data) and outputted.
You might also require a click event to set this in motion...
Author
I have never used jQuery so I am trying to do it with plain html/javascript/php right now.
I am trying to post the data by a form to php but I don't know how to put the javascript array into the form.<br><br>Here is what I tried : <br><br><!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><br><form name=<span class="cpp-literal">"input"</span> action=<span class="cpp-literal">"saveMap.php"</span> method =<span class="cpp-literal">"post"</span>><br> <button type=<span class="cpp-literal">"submit"</span> title=<span class="cpp-literal">"Save Map"</span> name=<span class="cpp-literal">"tiles[]"</span> value=g_TileData ><br> <img width=<span class="cpp-number">32</span> height=<span class="cpp-number">32</span> src=<span class="cpp-literal">"images/save.png"</span>/><br> </button><br> </form><br><br></pre></div><!--ENDSCRIPT--><br><br>This runs the saveMap.php file but I only get a 1 element array with g_TileData in it I guess its sending it as a string, I don't know how to refer to the JS variable g_TileData.
I am trying to post the data by a form to php but I don't know how to put the javascript array into the form.<br><br>Here is what I tried : <br><br><!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><br><form name=<span class="cpp-literal">"input"</span> action=<span class="cpp-literal">"saveMap.php"</span> method =<span class="cpp-literal">"post"</span>><br> <button type=<span class="cpp-literal">"submit"</span> title=<span class="cpp-literal">"Save Map"</span> name=<span class="cpp-literal">"tiles[]"</span> value=g_TileData ><br> <img width=<span class="cpp-number">32</span> height=<span class="cpp-number">32</span> src=<span class="cpp-literal">"images/save.png"</span>/><br> </button><br> </form><br><br></pre></div><!--ENDSCRIPT--><br><br>This runs the saveMap.php file but I only get a 1 element array with g_TileData in it I guess its sending it as a string, I don't know how to refer to the JS variable g_TileData.
Your code won't work. I see what you're trying to do, but you have no data in "value=g_TileData" Its literally just passing the string 'g_TileData' to your script.
This is a rather nasty work around....
So, I'm going to recommend again jQuery. Just go to jQuery.com, download their file, and insert it into the folder that contains your javascript code. Then make a reference to it in your html:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script><br><br>You can then use:<br><br>$(document).ready(function(){<br> //If user submits the form<br> $(".buttonid").live('click', function(){<br>$.post("saveMap.php", { 'postvarname[]': myarrayvar });<br> <br>});<br><br>Its so clean and beautiful.<br><br>Or..... if you really don't want the awesomeness that is jQuery because you enjoy both pain and suffereing:<br><br>You're going to have to set up a hidden input tag (<input type="hidden" id="data" name="data">)<br><br>Then make an onclick even that sets the value of the hidden input via something like:<br><br>htmlentities.getelementbyid('data').value = yourarrayvalue<br><br>then you can submit your form as planned.<br><br><br>I'm not sure how to hard code the javascript as I don't work in it all that often... and when I do, I use jQuery.<br><br>
This is a rather nasty work around....
So, I'm going to recommend again jQuery. Just go to jQuery.com, download their file, and insert it into the folder that contains your javascript code. Then make a reference to it in your html:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script><br><br>You can then use:<br><br>$(document).ready(function(){<br> //If user submits the form<br> $(".buttonid").live('click', function(){<br>$.post("saveMap.php", { 'postvarname[]': myarrayvar });<br> <br>});<br><br>Its so clean and beautiful.<br><br>Or..... if you really don't want the awesomeness that is jQuery because you enjoy both pain and suffereing:<br><br>You're going to have to set up a hidden input tag (<input type="hidden" id="data" name="data">)<br><br>Then make an onclick even that sets the value of the hidden input via something like:<br><br>htmlentities.getelementbyid('data').value = yourarrayvalue<br><br>then you can submit your form as planned.<br><br><br>I'm not sure how to hard code the javascript as I don't work in it all that often... and when I do, I use jQuery.<br><br>
Author
Haha yea I went the painfull way and found a page on the web :
http://www.hscripts.com/tutorials/php/jsArrayToPHP.php
I managed to get my array from JS to php by converting it to a string and putting it in a hidden input of a form.
The form looks like this :
So when you hit the submit button it calls setValue function,set value converts the javascript array which contains tile objects into arrays:
Now the value of the hidden field contains 3200 ids in the form "3,2,1,5,6,6,...,23".
This gets to the php script as $_POST['tileData'] and the php script turns it into a php array with explode :
I wonder how inefficient this is though, all this string converting is probably slow as hell.
http://www.hscripts.com/tutorials/php/jsArrayToPHP.php
I managed to get my array from JS to php by converting it to a string and putting it in a hidden input of a form.
The form looks like this :
<form name="input" action="saveMap.php" method ="post" onSubmit=setValue()> <input id="hiddenArray" name="tileData" type=hidden> <input type=submit> </form>So when you hit the submit button it calls setValue function,set value converts the javascript array which contains tile objects into arrays:
function setValue() { var arrIds = [] var tiles = g_GameObjectManager.gameObjects; for(var i=0; i<tiles.length; i++) { arrIds.push(tiles.id); } var array = arrIds.toString(); document.getElementById('hiddenArray').value = array; }Now the value of the hidden field contains 3200 ids in the form "3,2,1,5,6,6,...,23".
This gets to the php script as $_POST['tileData'] and the php script turns it into a php array with explode :
$tiles = $_POST['tileData'];//echo $tiles;$tok = explode(',',$tiles);print_r($tok);I wonder how inefficient this is though, all this string converting is probably slow as hell.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
