DaniWeb Forum Index > Web Development > PHP

World Editor

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 91

Reputation: brechtjah is an unknown quantity at this point

Solved Threads: 9

brechtjah

Offline

Junior Poster in Training

World Editor

Apr 11th, 2009

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:

 Help with Code Tags 
 sql Syntax (Toggle Plain Text) 
CREATE TABLE IF NOT EXISTS `map` (
  `id` INT(200) NOT NULL AUTO_INCREMENT,
  `y` INT(20) NOT NULL,
  `x` INT(20) NOT NULL,
  `background` VARCHAR(50) NOT NULL,
  `layer1` VARCHAR(50) NOT NULL,
  `layer2` VARCHAR(50) NOT NULL,
  `layer3` VARCHAR(50) NOT NULL,
  `foreground` VARCHAR(50) NOT NULL,
  `event` VARCHAR(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `map` (
  `id` int(200) NOT NULL AUTO_INCREMENT,
  `y` int(20) NOT NULL,
  `x` int(20) NOT NULL,
  `background` varchar(50) NOT NULL,
  `layer1` varchar(50) NOT NULL,
  `layer2` varchar(50) NOT NULL,
  `layer3` varchar(50) NOT NULL,
  `foreground` varchar(50) NOT NULL,
  `event` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) 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:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php
	include_once("connect.php");
 
	if(isset($_POST['update'])) {
		$query = $_POST['SQL'];
		mysql_query($query);
	}
	if(isset($_POST['insert'])) {
		$query = "INSERT INTO map(x, y) VALUES(".$_POST['SQL'].")";
		mysql_query($query);
	}
 
	if(($_GET['min_y'] != "") && ($_GET['max_y'] != "") && ($_GET['min_x'] != "") && ($_GET['max_x'] != "") && ($_GET['maxlayers'] != "")) {
		$min_y = htmlentities($_GET['min_y'], ENT_QUOTES);
		$max_y = htmlentities($_GET['max_y'], ENT_QUOTES);
		$min_x = htmlentities($_GET['min_x'], ENT_QUOTES);
		$max_x = htmlentities($_GET['max_x'], ENT_QUOTES);
		$maxLayers = htmlentities($_GET['maxlayers'], ENT_QUOTES);
	}
	else {
		$min_y = 0;
		$max_y = 9;
		$min_x = 0;
		$max_x = 9;
		$maxLayers = 3;
	}
 
	function ReadFolderDirectory($dir = "tilesets/") 
    { 
        $listDir = array(); 
        if($handler = opendir($dir)) { 
            while (($sub = readdir($handler)) !== FALSE) { 
                if ($sub != "." && $sub != ".." && $sub != "Thumb.db") { 
                    if(is_file($dir."/".$sub)) { 
                        $listDir[] = $sub; 
                    }elseif(is_dir($dir."/".$sub)){ 
                        $listDir[$sub] = ReadFolderDirectory($dir."/".$sub); 
                    } 
                } 
            }    
            closedir($handler); 
        }
        return $listDir;    
    }
 
    if(isset($_POST['set'])) {
    	$min_y = htmlentities($_POST['min_y'], ENT_QUOTES);
    	$max_y = htmlentities($_POST['max_y'], ENT_QUOTES);
    	$min_x = htmlentities($_POST['min_x'], ENT_QUOTES);
    	$max_x = htmlentities($_POST['max_x'], ENT_QUOTES);
    	$maxlayers = htmlentities($_POST['maxlayers'], ENT_QUOTES);
    	$tileset = htmlentities($_POST['currTileSet'], ENT_QUOTES);
 
    	echo "
    		<script type=\"text/javascript\">
    			document.location = '?min_y=".$min_y."&max_y=".$max_y."&min_x=".$min_x."&max_x=".$max_x."&maxlayers=".$maxlayers."&tileset=".$tileset."';
    		</script>";
    }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<title>Dreathii /:: worldEditor</title>
		<style type="text/css">
			html, body {
				margin: 0px;
				height: 100%;
				width: 100%;
				font-family: Arial, Verdana;
				font-size: 8px;
			}
			body {
				background-color: #eee;
			}			
			div.settings {
				padding: 3px;
				border-bottom: 1px solid #000;
			}
			div.tileSet {
				position: absolute;
				width: 256px;
				height: 100%;
				border-right: 1px solid #000;
				overflow: auto;
				visibility: hidden;
			}
			div.worldMap {
				position: absolute;
				margin: 0px 0px 0px 257px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
				background-color: #fff;
			}
			div.mapLayer {
				position: absolute;
				margin: 0px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
			}
			div.layerSet {
				position: absolute;
				margin: <?php echo ($max_y-$min_y)*32; ?>px 0px 0px 266px;
			}
			div.tile {
				width: 32px;
				height: 32px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			isFirst = true;
			var usedTile = "";
 
			function setUsedTile(tile) {
				usedTile = tile;
			}
 
			function useTile(id) {
				if(usedTile != "") {
					element = document.getElementById(id);
					element.innerHTML = "<img src=\"tilesets/forest/"+usedTile+"\" alt=\""+usedTile+"\">";
 
					if(isFirst == false) {
						document.getElementById("SQL").value += ", ";
					}
					else {
						isFirst = false;
					}
					document.getElementById("SQL").value += id+"='"+usedTile+"'";
				}
			}
 
			function changeTileSet() {
				var element = document.getElementById('currTileSet');
				var i = element.selectedIndex;
				var l = element.options.length;
 
				for(x = 1; x < l; x++) {
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(i > 0) {
					var tileSet = element.options[i].value;
					document.getElementById(tileSet).style.visibility = "visible";
				}
			}
 
			function getTileSet(gtileset) {
				var element = document.getElementById('currTileSet');
				var l = element.options.length;
 
				for(x = 1; x < l; x++) {
					if(element.options[x].value == gtileset) {
						element.selectedIndex = x;
					}
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(document.getElementById(gtileset) != null) {
					document.getElementById(gtileset).style.visibility = "visible";
				}
			}
 
			function gLayer(theLayer) {
				if(theLayer != "ALL") {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "hidden";
					}
					for(i = 1; i < theLayer+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				else {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				document.getElementById('currLayer').innerHTML = "[Current Layer: "+theLayer+"]";
			}
		</script>
	</head>
 
	<body>
		<div class="settings">
			<form method="post" action="">
				TileSet: <select id="currTileSet" name="currTileSet" onChange="changeTileSet()">
					<option value="browse">...</option>
					<?php
						if ($handle = opendir("tilesets/")) {
							while (false !== ($file = readdir($handle))) {
								if($file != "." && $file != ".."){
									echo "<option value=\"".$file."\">".$file."</option>";
								}
							}
 
							closedir($handle);
						}
					?>
				</select>
				min_y: <input type="text" name="min_y" size="5" value="<?php echo $min_y; ?>">
				max_y: <input type="text" name="max_y" size="5" value="<?php echo $max_y; ?>">
				min_x: <input type="text" name="min_x" size="5" value="<?php echo $min_x; ?>">
				max_x: <input type="text" name="max_x" size="5" value="<?php echo $max_x; ?>">
				max Layers <input type="text" name="maxlayers" size="5" value="<?php echo $maxLayers; ?>">
				<input type="submit" name="set" value="Set">
				<input type="button" name="reset" value="Reset" onClick="document.location = 'worldEditor.php';">
				<span style="padding: 0px 20px 0px 20px;">
					<?php
						for($i = 1; $i < $maxLayers+1; $i++) {
							//echo "<div onClick=\"javascript:gLayer(".$i.");\">Layer ".$i."</div>";
							echo "<input type=\"button\" name=\"gAllLayers".$i."\" value=\"Layer ".$i."\" onClick=\"javascript:gLayer(".$i.")\">";
						}
					?>
					<input type="button" name="gAllLayers" value="All layers" onClick="javascript:gLayer('ALL')">
					<span id="currLayer">Current Layer: <?php echo $maxLayers; ?></span>
				</span>
			</form>
			<form method="post">
				<input type="hidden" id="SQL" name="SQL" value="UPDATE map SET ">
				<input type="button" name="update" value="Update">
			</form>
		</div>
		<?php
			$dirTileSets = ReadFolderDirectory();
			foreach ($dirTileSets as $tileSetTitle=>$tiles) {
				echo "<div id=\"".$tileSetTitle."\" class=\"tileSet\">";
				foreach ($tiles as $tile) {
					echo "\n<div class=\"tile\" onClick=\"javascript:setUsedTile('".$tile."')\"><img src=\"tilesets/".$tileSetTitle."/".$tile."\" alt=\"".$tile."\"></div>";
				}
				echo "</div>";
			}
		?>
		<div class="worldMap">
			<?php
				for($layer = 1; $layer < $maxLayers+1; $layer++) {
					echo "\n";
					echo "<div id=\"layer".$layer."\" class=\"mapLayer\">";
					for($y = $min_y; $y < $max_y; $y++) {
						for($x = $min_x; $x < $max_x; $x++) {
							echo "\n<div id=\"".$layer."_".$y."_".$x."\" class=\"tile\" onClick=\"javascript:useTile('".$layer."_".$y."_".$x."');\"></div>";
						}
					}
					echo "</div>";
				}
			?>
		</div>
	</body>
</html>
<?php
	if($_GET['tileset'] != "") {
		$tileset = htmlentities($_GET['tileset'], ENT_QUOTES);
		echo "
    		<script type=\"text/javascript\">
    			getTileSet('".$tileset."');
    		</script>";
	}
?>
<?php
	include_once("connect.php");
	
	if(isset($_POST['update'])) {
		$query = $_POST['SQL'];
		mysql_query($query);
	}
	if(isset($_POST['insert'])) {
		$query = "INSERT INTO map(x, y) VALUES(".$_POST['SQL'].")";
		mysql_query($query);
	}
	
	if(($_GET['min_y'] != "") && ($_GET['max_y'] != "") && ($_GET['min_x'] != "") && ($_GET['max_x'] != "") && ($_GET['maxlayers'] != "")) {
		$min_y = htmlentities($_GET['min_y'], ENT_QUOTES);
		$max_y = htmlentities($_GET['max_y'], ENT_QUOTES);
		$min_x = htmlentities($_GET['min_x'], ENT_QUOTES);
		$max_x = htmlentities($_GET['max_x'], ENT_QUOTES);
		$maxLayers = htmlentities($_GET['maxlayers'], ENT_QUOTES);
	}
	else {
		$min_y = 0;
		$max_y = 9;
		$min_x = 0;
		$max_x = 9;
		$maxLayers = 3;
	}
	
	function ReadFolderDirectory($dir = "tilesets/") 
    { 
        $listDir = array(); 
        if($handler = opendir($dir)) { 
            while (($sub = readdir($handler)) !== FALSE) { 
                if ($sub != "." && $sub != ".." && $sub != "Thumb.db") { 
                    if(is_file($dir."/".$sub)) { 
                        $listDir[] = $sub; 
                    }elseif(is_dir($dir."/".$sub)){ 
                        $listDir[$sub] = ReadFolderDirectory($dir."/".$sub); 
                    } 
                } 
            }    
            closedir($handler); 
        }
        return $listDir;    
    }
    
    if(isset($_POST['set'])) {
    	$min_y = htmlentities($_POST['min_y'], ENT_QUOTES);
    	$max_y = htmlentities($_POST['max_y'], ENT_QUOTES);
    	$min_x = htmlentities($_POST['min_x'], ENT_QUOTES);
    	$max_x = htmlentities($_POST['max_x'], ENT_QUOTES);
    	$maxlayers = htmlentities($_POST['maxlayers'], ENT_QUOTES);
    	$tileset = htmlentities($_POST['currTileSet'], ENT_QUOTES);
    	
    	echo "
    		<script type=\"text/javascript\">
    			document.location = '?min_y=".$min_y."&max_y=".$max_y."&min_x=".$min_x."&max_x=".$max_x."&maxlayers=".$maxlayers."&tileset=".$tileset."';
    		</script>";
    }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<title>Dreathii /:: worldEditor</title>
		<style type="text/css">
			html, body {
				margin: 0px;
				height: 100%;
				width: 100%;
				font-family: Arial, Verdana;
				font-size: 8px;
			}
			body {
				background-color: #eee;
			}			
			div.settings {
				padding: 3px;
				border-bottom: 1px solid #000;
			}
			div.tileSet {
				position: absolute;
				width: 256px;
				height: 100%;
				border-right: 1px solid #000;
				overflow: auto;
				visibility: hidden;
			}
			div.worldMap {
				position: absolute;
				margin: 0px 0px 0px 257px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
				background-color: #fff;
			}
			div.mapLayer {
				position: absolute;
				margin: 0px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
			}
			div.layerSet {
				position: absolute;
				margin: <?php echo ($max_y-$min_y)*32; ?>px 0px 0px 266px;
			}
			div.tile {
				width: 32px;
				height: 32px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			isFirst = true;
			var usedTile = "";
			
			function setUsedTile(tile) {
				usedTile = tile;
			}
			
			function useTile(id) {
				if(usedTile != "") {
					element = document.getElementById(id);
					element.innerHTML = "<img src=\"tilesets/forest/"+usedTile+"\" alt=\""+usedTile+"\">";
					
					if(isFirst == false) {
						document.getElementById("SQL").value += ", ";
					}
					else {
						isFirst = false;
					}
					document.getElementById("SQL").value += id+"='"+usedTile+"'";
				}
			}
			
			function changeTileSet() {
				var element = document.getElementById('currTileSet');
				var i = element.selectedIndex;
				var l = element.options.length;
				
				for(x = 1; x < l; x++) {
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(i > 0) {
					var tileSet = element.options[i].value;
					document.getElementById(tileSet).style.visibility = "visible";
				}
			}
			
			function getTileSet(gtileset) {
				var element = document.getElementById('currTileSet');
				var l = element.options.length;
				
				for(x = 1; x < l; x++) {
					if(element.options[x].value == gtileset) {
						element.selectedIndex = x;
					}
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(document.getElementById(gtileset) != null) {
					document.getElementById(gtileset).style.visibility = "visible";
				}
			}
			
			function gLayer(theLayer) {
				if(theLayer != "ALL") {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "hidden";
					}
					for(i = 1; i < theLayer+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				else {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				document.getElementById('currLayer').innerHTML = "[Current Layer: "+theLayer+"]";
			}
		</script>
	</head>
	
	<body>
		<div class="settings">
			<form method="post" action="">
				TileSet: <select id="currTileSet" name="currTileSet" onChange="changeTileSet()">
					<option value="browse">...</option>
					<?php
						if ($handle = opendir("tilesets/")) {
							while (false !== ($file = readdir($handle))) {
								if($file != "." && $file != ".."){
									echo "<option value=\"".$file."\">".$file."</option>";
								}
							}
							
							closedir($handle);
						}
					?>
				</select>
				min_y: <input type="text" name="min_y" size="5" value="<?php echo $min_y; ?>">
				max_y: <input type="text" name="max_y" size="5" value="<?php echo $max_y; ?>">
				min_x: <input type="text" name="min_x" size="5" value="<?php echo $min_x; ?>">
				max_x: <input type="text" name="max_x" size="5" value="<?php echo $max_x; ?>">
				max Layers <input type="text" name="maxlayers" size="5" value="<?php echo $maxLayers; ?>">
				<input type="submit" name="set" value="Set">
				<input type="button" name="reset" value="Reset" onClick="document.location = 'worldEditor.php';">
				<span style="padding: 0px 20px 0px 20px;">
					<?php
						for($i = 1; $i < $maxLayers+1; $i++) {
							//echo "<div onClick=\"javascript<b></b>:gLayer(".$i.");\">Layer ".$i."</div>";
							echo "<input type=\"button\" name=\"gAllLayers".$i."\" value=\"Layer ".$i."\" onClick=\"javascript<b></b>:gLayer(".$i.")\">";
						}
					?>
					<input type="button" name="gAllLayers" value="All layers" onClick="javascript<b></b>:gLayer('ALL')">
					<span id="currLayer">Current Layer: <?php echo $maxLayers; ?></span>
				</span>
			</form>
			<form method="post">
				<input type="hidden" id="SQL" name="SQL" value="UPDATE map SET ">
				<input type="button" name="update" value="Update">
			</form>
		</div>
		<?php
			$dirTileSets = ReadFolderDirectory();
			foreach ($dirTileSets as $tileSetTitle=>$tiles) {
				echo "<div id=\"".$tileSetTitle."\" class=\"tileSet\">";
				foreach ($tiles as $tile) {
					echo "\n<div class=\"tile\" onClick=\"javascript<b></b>:setUsedTile('".$tile."')\"><img src=\"tilesets/".$tileSetTitle."/".$tile."\" alt=\"".$tile."\"></div>";
				}
				echo "</div>";
			}
		?>
		<div class="worldMap">
			<?php
				for($layer = 1; $layer < $maxLayers+1; $layer++) {
					echo "\n";
					echo "<div id=\"layer".$layer."\" class=\"mapLayer\">";
					for($y = $min_y; $y < $max_y; $y++) {
						for($x = $min_x; $x < $max_x; $x++) {
							echo "\n<div id=\"".$layer."_".$y."_".$x."\" class=\"tile\" onClick=\"javascript<b></b>:useTile('".$layer."_".$y."_".$x."');\"></div>";
						}
					}
					echo "</div>";
				}
			?>
		</div>
	</body>
</html>
<?php
	if($_GET['tileset'] != "") {
		$tileset = htmlentities($_GET['tileset'], ENT_QUOTES);
		echo "
    		<script type=\"text/javascript\">
    			getTileSet('".$tileset."');
    		</script>";
	}
?>

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

•

Join Date: Jun 2007

Posts: 1,227

Reputation: kkeith29 has a spectacular aura about

Solved Threads: 167

kkeith29

Offline

Nearly a Posting Virtuoso

Re: World Editor

Apr 11th, 2009

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.

•

Join Date: Nov 2008

Posts: 91

Reputation: brechtjah is an unknown quantity at this point

Solved Threads: 9

brechtjah

Offline

Junior Poster in Training

Re: World Editor

Apr 11th, 2009

•

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

•

Join Date: Jun 2007

Posts: 1,227

Reputation: kkeith29 has a spectacular aura about

Solved Threads: 167

kkeith29

Offline

Nearly a Posting Virtuoso

Re: World Editor

Apr 11th, 2009

•

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.