943,699 Members | Top Members by Rank

Web Development > PHP > World Editor
Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 579
  • PHP RSS
Permalink
Apr 11th, 2009
0

World Editor

Expand Post »
Hi everyone,
because I've recently decided to try making a webgame, I've begun scripting an editor for it. However, I'm quite stuck on the little project and would like some help.

The script works as follows, a directory of tiles is being read via PHP (however not alphabetically). These tiles are being put in a div element and are clickable. If you click a tile, that tile is being used to paint the map. This way you can create a world very easily, but...

It requires me to click on every x,y coord to paste the tile there, I can't figure out how to drag tiles over multiple x,y coordinates.
Also I don't know how to start on the SQL query that would upload the created map into the database, I could use an ajax based approach here, but I believe this would be too slow for instance when clicking too fast you would have to wait.
The structure of the table with the map is as follows:
sql Syntax (Toggle Plain Text)
  1. CREATE TABLE IF NOT EXISTS `map` (
  2.   `id` INT(200) NOT NULL AUTO_INCREMENT,
  3.   `y` INT(20) NOT NULL,
  4.   `x` INT(20) NOT NULL,
  5.   `background` VARCHAR(50) NOT NULL,
  6.   `layer1` VARCHAR(50) NOT NULL,
  7.   `layer2` VARCHAR(50) NOT NULL,
  8.   `layer3` VARCHAR(50) NOT NULL,
  9.   `foreground` VARCHAR(50) NOT NULL,
  10.   `event` VARCHAR(60) NOT NULL,
  11.   PRIMARY KEY (`id`)
  12. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
[table explanation]
an x and y to identify each coordinate
a background and foreground layer, together with three more layers for content
an event layer for e.g. a quest, ...

I'm worried I'm doing much more work than necessary, it feels like it could be done easier but I'm not getting there. So, I'm interested in what you guys think about it. Thanks for helping out.
This is the script:
php Syntax (Toggle Plain Text)
  1. <?php
  2. 	include_once("connect.php");
  3.  
  4. 	if(isset($_POST['update'])) {
  5. 		$query = $_POST['SQL'];
  6. 		mysql_query($query);
  7. 	}
  8. 	if(isset($_POST['insert'])) {
  9. 		$query = "INSERT INTO map(x, y) VALUES(".$_POST['SQL'].")";
  10. 		mysql_query($query);
  11. 	}
  12.  
  13. 	if(($_GET['min_y'] != "") && ($_GET['max_y'] != "") && ($_GET['min_x'] != "") && ($_GET['max_x'] != "") && ($_GET['maxlayers'] != "")) {
  14. 		$min_y = htmlentities($_GET['min_y'], ENT_QUOTES);
  15. 		$max_y = htmlentities($_GET['max_y'], ENT_QUOTES);
  16. 		$min_x = htmlentities($_GET['min_x'], ENT_QUOTES);
  17. 		$max_x = htmlentities($_GET['max_x'], ENT_QUOTES);
  18. 		$maxLayers = htmlentities($_GET['maxlayers'], ENT_QUOTES);
  19. 	}
  20. 	else {
  21. 		$min_y = 0;
  22. 		$max_y = 9;
  23. 		$min_x = 0;
  24. 		$max_x = 9;
  25. 		$maxLayers = 3;
  26. 	}
  27.  
  28. 	function ReadFolderDirectory($dir = "tilesets/") 
  29.     { 
  30.         $listDir = array(); 
  31.         if($handler = opendir($dir)) { 
  32.             while (($sub = readdir($handler)) !== FALSE) { 
  33.                 if ($sub != "." && $sub != ".." && $sub != "Thumb.db") { 
  34.                     if(is_file($dir."/".$sub)) { 
  35.                         $listDir[] = $sub; 
  36.                     }elseif(is_dir($dir."/".$sub)){ 
  37.                         $listDir[$sub] = ReadFolderDirectory($dir."/".$sub); 
  38.                     } 
  39.                 } 
  40.             }    
  41.             closedir($handler); 
  42.         }
  43.         return $listDir;    
  44.     }
  45.  
  46.     if(isset($_POST['set'])) {
  47.     	$min_y = htmlentities($_POST['min_y'], ENT_QUOTES);
  48.     	$max_y = htmlentities($_POST['max_y'], ENT_QUOTES);
  49.     	$min_x = htmlentities($_POST['min_x'], ENT_QUOTES);
  50.     	$max_x = htmlentities($_POST['max_x'], ENT_QUOTES);
  51.     	$maxlayers = htmlentities($_POST['maxlayers'], ENT_QUOTES);
  52.     	$tileset = htmlentities($_POST['currTileSet'], ENT_QUOTES);
  53.  
  54.     	echo "
  55.     		<script type=\"text/javascript\">
  56.     			document.location = '?min_y=".$min_y."&max_y=".$max_y."&min_x=".$min_x."&max_x=".$max_x."&maxlayers=".$maxlayers."&tileset=".$tileset."';
  57.     		</script>";
  58.     }
  59. ?>
  60. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  61. <html>
  62. 	<head>
  63. 		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  64. 		<title>Dreathii /:: worldEditor</title>
  65. 		<style type="text/css">
  66. 			html, body {
  67. 				margin: 0px;
  68. 				height: 100%;
  69. 				width: 100%;
  70. 				font-family: Arial, Verdana;
  71. 				font-size: 8px;
  72. 			}
  73. 			body {
  74. 				background-color: #eee;
  75. 			}			
  76. 			div.settings {
  77. 				padding: 3px;
  78. 				border-bottom: 1px solid #000;
  79. 			}
  80. 			div.tileSet {
  81. 				position: absolute;
  82. 				width: 256px;
  83. 				height: 100%;
  84. 				border-right: 1px solid #000;
  85. 				overflow: auto;
  86. 				visibility: hidden;
  87. 			}
  88. 			div.worldMap {
  89. 				position: absolute;
  90. 				margin: 0px 0px 0px 257px;
  91. 				width: <?php echo ($max_x-$min_x)*32; ?>px;
  92. 				height: <?php echo ($max_y-$min_y)*32; ?>px;
  93. 				background-color: #fff;
  94. 			}
  95. 			div.mapLayer {
  96. 				position: absolute;
  97. 				margin: 0px;
  98. 				width: <?php echo ($max_x-$min_x)*32; ?>px;
  99. 				height: <?php echo ($max_y-$min_y)*32; ?>px;
  100. 			}
  101. 			div.layerSet {
  102. 				position: absolute;
  103. 				margin: <?php echo ($max_y-$min_y)*32; ?>px 0px 0px 266px;
  104. 			}
  105. 			div.tile {
  106. 				width: 32px;
  107. 				height: 32px;
  108. 				float: left;
  109. 			}
  110. 		</style>
  111. 		<script type="text/javascript">
  112. 			isFirst = true;
  113. 			var usedTile = "";
  114.  
  115. 			function setUsedTile(tile) {
  116. 				usedTile = tile;
  117. 			}
  118.  
  119. 			function useTile(id) {
  120. 				if(usedTile != "") {
  121. 					element = document.getElementById(id);
  122. 					element.innerHTML = "<img src=\"tilesets/forest/"+usedTile+"\" alt=\""+usedTile+"\">";
  123.  
  124. 					if(isFirst == false) {
  125. 						document.getElementById("SQL").value += ", ";
  126. 					}
  127. 					else {
  128. 						isFirst = false;
  129. 					}
  130. 					document.getElementById("SQL").value += id+"='"+usedTile+"'";
  131. 				}
  132. 			}
  133.  
  134. 			function changeTileSet() {
  135. 				var element = document.getElementById('currTileSet');
  136. 				var i = element.selectedIndex;
  137. 				var l = element.options.length;
  138.  
  139. 				for(x = 1; x < l; x++) {
  140. 					var tileSet = element.options[x].value;
  141. 					document.getElementById(tileSet).style.visibility = "hidden";
  142. 				}
  143. 				if(i > 0) {
  144. 					var tileSet = element.options[i].value;
  145. 					document.getElementById(tileSet).style.visibility = "visible";
  146. 				}
  147. 			}
  148.  
  149. 			function getTileSet(gtileset) {
  150. 				var element = document.getElementById('currTileSet');
  151. 				var l = element.options.length;
  152.  
  153. 				for(x = 1; x < l; x++) {
  154. 					if(element.options[x].value == gtileset) {
  155. 						element.selectedIndex = x;
  156. 					}
  157. 					var tileSet = element.options[x].value;
  158. 					document.getElementById(tileSet).style.visibility = "hidden";
  159. 				}
  160. 				if(document.getElementById(gtileset) != null) {
  161. 					document.getElementById(gtileset).style.visibility = "visible";
  162. 				}
  163. 			}
  164.  
  165. 			function gLayer(theLayer) {
  166. 				if(theLayer != "ALL") {
  167. 					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
  168. 						document.getElementById('layer'+i).style.visibility = "hidden";
  169. 					}
  170. 					for(i = 1; i < theLayer+1; i++) {
  171. 						document.getElementById('layer'+i).style.visibility = "visible";
  172. 					}
  173. 				}
  174. 				else {
  175. 					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
  176. 						document.getElementById('layer'+i).style.visibility = "visible";
  177. 					}
  178. 				}
  179. 				document.getElementById('currLayer').innerHTML = "[Current Layer: "+theLayer+"]";
  180. 			}
  181. 		</script>
  182. 	</head>
  183.  
  184. 	<body>
  185. 		<div class="settings">
  186. 			<form method="post" action="">
  187. 				TileSet: <select id="currTileSet" name="currTileSet" onChange="changeTileSet()">
  188. 					<option value="browse">...</option>
  189. 					<?php
  190. 						if ($handle = opendir("tilesets/")) {
  191. 							while (false !== ($file = readdir($handle))) {
  192. 								if($file != "." && $file != ".."){
  193. 									echo "<option value=\"".$file."\">".$file."</option>";
  194. 								}
  195. 							}
  196.  
  197. 							closedir($handle);
  198. 						}
  199. 					?>
  200. 				</select>
  201. 				min_y: <input type="text" name="min_y" size="5" value="<?php echo $min_y; ?>">
  202. 				max_y: <input type="text" name="max_y" size="5" value="<?php echo $max_y; ?>">
  203. 				min_x: <input type="text" name="min_x" size="5" value="<?php echo $min_x; ?>">
  204. 				max_x: <input type="text" name="max_x" size="5" value="<?php echo $max_x; ?>">
  205. 				max Layers <input type="text" name="maxlayers" size="5" value="<?php echo $maxLayers; ?>">
  206. 				<input type="submit" name="set" value="Set">
  207. 				<input type="button" name="reset" value="Reset" onClick="document.location = 'worldEditor.php';">
  208. 				<span style="padding: 0px 20px 0px 20px;">
  209. 					<?php
  210. 						for($i = 1; $i < $maxLayers+1; $i++) {
  211. 							//echo "<div onClick=\"javascript:gLayer(".$i.");\">Layer ".$i."</div>";
  212. 							echo "<input type=\"button\" name=\"gAllLayers".$i."\" value=\"Layer ".$i."\" onClick=\"javascript:gLayer(".$i.")\">";
  213. 						}
  214. 					?>
  215. 					<input type="button" name="gAllLayers" value="All layers" onClick="javascript:gLayer('ALL')">
  216. 					<span id="currLayer">Current Layer: <?php echo $maxLayers; ?></span>
  217. 				</span>
  218. 			</form>
  219. 			<form method="post">
  220. 				<input type="hidden" id="SQL" name="SQL" value="UPDATE map SET ">
  221. 				<input type="button" name="update" value="Update">
  222. 			</form>
  223. 		</div>
  224. 		<?php
  225. 			$dirTileSets = ReadFolderDirectory();
  226. 			foreach ($dirTileSets as $tileSetTitle=>$tiles) {
  227. 				echo "<div id=\"".$tileSetTitle."\" class=\"tileSet\">";
  228. 				foreach ($tiles as $tile) {
  229. 					echo "\n<div class=\"tile\" onClick=\"javascript:setUsedTile('".$tile."')\"><img src=\"tilesets/".$tileSetTitle."/".$tile."\" alt=\"".$tile."\"></div>";
  230. 				}
  231. 				echo "</div>";
  232. 			}
  233. 		?>
  234. 		<div class="worldMap">
  235. 			<?php
  236. 				for($layer = 1; $layer < $maxLayers+1; $layer++) {
  237. 					echo "\n";
  238. 					echo "<div id=\"layer".$layer."\" class=\"mapLayer\">";
  239. 					for($y = $min_y; $y < $max_y; $y++) {
  240. 						for($x = $min_x; $x < $max_x; $x++) {
  241. 							echo "\n<div id=\"".$layer."_".$y."_".$x."\" class=\"tile\" onClick=\"javascript:useTile('".$layer."_".$y."_".$x."');\"></div>";
  242. 						}
  243. 					}
  244. 					echo "</div>";
  245. 				}
  246. 			?>
  247. 		</div>
  248. 	</body>
  249. </html>
  250. <?php
  251. 	if($_GET['tileset'] != "") {
  252. 		$tileset = htmlentities($_GET['tileset'], ENT_QUOTES);
  253. 		echo "
  254.     		<script type=\"text/javascript\">
  255.     			getTileSet('".$tileset."');
  256.     		</script>";
  257. 	}
  258. ?>

Looks like you read trough or just scrolled out of boringness (if that's a word). Either way, thanks for viewing, here is a screen of the script currently in action:
http://img530.imageshack.us/my.php?image=editor.png
Last edited by peter_budo; Apr 12th, 2009 at 8:50 am. Reason: Missing code tags on SQL query
Similar Threads
Reputation Points: 26
Solved Threads: 9
Junior Poster in Training
brechtjah is offline Offline
92 posts
since Nov 2008
Permalink
Apr 11th, 2009
0

Re: World Editor

So pretty much you are wanting a tree like the one you have in pieces, to be expandable so it won't have to be in pieces?

If so, I have a basic idea on how I would do it. I would like to know if I understood your question right before I type all of it.
Reputation Points: 235
Solved Threads: 193
Nearly a Posting Virtuoso
kkeith29 is offline Offline
1,315 posts
since Jun 2007
Permalink
Apr 11th, 2009
0

Re: World Editor

Click to Expand / Collapse  Quote originally posted by kkeith29 ...
So pretty much you are wanting a tree like the one you have in pieces, to be expandable so it won't have to be in pieces?

If so, I have a basic idea on how I would do it. I would like to know if I understood your question right before I type all of it.
Well no not really, sorry. Eventually it's meant as a map for players to walk around on it, it has layers just to customize it.
I'm just wondering if I'm handling this correctly or if there's a more efficient approach to it. Is this explanation clear? Don't hesitate to ask a question, thanks for reading
Reputation Points: 26
Solved Threads: 9
Junior Poster in Training
brechtjah is offline Offline
92 posts
since Nov 2008
Permalink
Apr 11th, 2009
0

Re: World Editor

Click to Expand / Collapse  Quote originally posted by brechtjah ...
Well no not really, sorry. Eventually it's meant as a map for players to walk around on it, it has layers just to customize it.
I'm just wondering if I'm handling this correctly or if there's a more efficient approach to it. Is this explanation clear? Don't hesitate to ask a question, thanks for reading
Ok, I must of misread then. But that solution I was thinking of would help as well.

Are you just wanting to be able to drag a piece to cover multiple pieces of the map? If so, this will require some fancy javascript. I could help write it, but it won't be the best because frankly I hate javascript. I do know the basics however.

Can you pm me the code so I can try to help you out?
Last edited by kkeith29; Apr 11th, 2009 at 9:33 pm.
Reputation Points: 235
Solved Threads: 193
Nearly a Posting Virtuoso
kkeith29 is offline Offline
1,315 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in PHP Forum Timeline: timeout if page is inactive
Next Thread in PHP Forum Timeline: What is the problem with this code?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC