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:
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:
<?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>";
}
?>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
