Page 1 of 1
collision mechanics.
Posted: Thu Sep 30, 2010 8:43 pm
by Torniquet
I know a while ago, someone (think it was halls) was working on a JS map where the user can move a sprite around with the keyboard.
they also had collision detection in there for objects on the map.
could someone/who ever was working on this please tell me how this was done... roughly. lol. i have the movement and edge of board collision sorted, but i cant for the life of me work out how to do the objects on map collision
bare in mind, i am using jquery. so a decent description on how to work it should be enough :p i wont be able to understand fulll JS code :p:p lol
ta muchly xxx
Re: collision mechanics.
Posted: Thu Sep 30, 2010 8:57 pm
by hallsofvallhalla
have you watch these yet?
http://indie-resource.com/forums/viewto ... =26&t=2283
how are you building your map? With pixels?
If with pixels then it is tougher. How I did it using pixels originally was by placing the collision in the DB and they built with the map. They were simple pixel ranges that if new location equaled in the range then the function to move would not run.
I can give you the old code.
Re: collision mechanics.
Posted: Thu Sep 30, 2010 9:00 pm
by hallsofvallhalla
here you go!
Code: Select all
<?php
include_once 'connect.php';
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Quests Of Crocania</title>
</head>
<?php if (isset($_SESSION['player']))
{
$player=$_SESSION['player'];
$playerinfo="SELECT * from players where name='$player'";
$playerinfo2=mysql_query($playerinfo) or die("Could not get user stats");
$playerinfo3=mysql_fetch_array($playerinfo2);
}
else
{
print "Sorry, not logged in please <A href='login.php'>Login</a><br>";
exit;}
?>
<body>
<div id="wrapper" align="center">
<table border="1">
<tr><td><img src="images/logo.png" /></td></tr>
</table>
<table border="1" background="images/panelback.jpg">
<tr>
<td>
<div id="panelarea">
<?php include_once 'statpanel.php';?>
</div>
</td>
<td>
<div id="maparea">
<?php
$mapinfo="SELECT * from locations where area='$playerinfo3[area]' ";
$mapinfo2=mysql_query($mapinfo) or die("could not map");
$mapinfo3=mysql_fetch_array($mapinfo2);
$prow = $playerinfo3[row] - 2;
if($prow < 1)
{
echo "<div id='tag1'style='background-color:#000000'></div><div id='tag2'style='background-color:#000000'></div><div id='tag3'style='background-color:#000000'></div><div id='tag4'style='background-color:#000000'></div><div id='tag5'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=1;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}
$prow = $playerinfo3[row] - 1;
if($prow < 1)
{
echo "<div id='tag6'style='background-color:#000000'></div><div id='tag7'style='background-color:#000000'></div><div id='tag8'style='background-color:#000000'></div><div id='tag9'style='background-color:#000000'></div><div id='tag10'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$prow = $playerinfo3[row];
$j = $playerinfo3[colmn] - 2;
$div=6;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}
/////////////////////////////////////////center
$prow = $playerinfo3[row] - 0;
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=11;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
$checkplayerrow = $playerinfo3['colmn'] + 1;
if ($j == $checkplayerrow){$playersquare = $maptype;}
maplabel($maptype,$div);
$div = $div+1;
}
//////////////////////////////////////////////
$prow = $playerinfo3[row] + 1;
if($prow > 10)
{
echo "<div id='tag16'style='background-color:#000000'></div><div id='tag17'style='background-color:#000000'></div><div id='tag18'style='background-color:#000000'></div><div id='tag19'style='background-color:#000000'></div><div id='tag20'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=16;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}
$prow = $playerinfo3[row] + 2;
if($prow > 10)
{
echo "<div id='tag21'style='background-color:#000000'></div><div id='tag22'style='background-color:#000000'></div><div id='tag23'style='background-color:#000000'></div><div id='tag24'style='background-color:#000000'></div><div id='tag25'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=21;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}
function maplabel($a,$div)
{
if ($a == "a")
{
echo "<div id='tag" . $div . "'style='background-color:#000000'> </div>";
}
if ($a == "b")
{
echo "<div id='tag" . $div . "'> </div>";
}
if ($a == "c")
{
echo "<div id='tag" . $div . "'style='background-color:#FFFF00'> </div>";
}
}
///////////////////////travel links
$northrow = "row" . ($playerinfo3[row] - 1);
$temprow = $mapinfo3[$northrow];
$northcolumn = $playerinfo3[colmn];
$northsquare = substr($temprow,$northcolumn,1);
$eastrow = "row" . ($playerinfo3[row]);
$temprow = $mapinfo3[$eastrow];
$eastcolumn = $playerinfo3[colmn] + 1;
$eastsquare = substr($temprow,$eastcolumn,1);
$southrow = "row" . ($playerinfo3[row] + 1);
$temprow = $mapinfo3[$southrow];
$southcolumn = $playerinfo3[colmn];
$southsquare = substr($temprow,$southcolumn,1);
$westrow = "row" . ($playerinfo3[row]);
$temprow = $mapinfo3[$westrow];
$westcolumn = $playerinfo3[colmn] - 1;
$westsquare = substr($temprow,$westcolumn,1);
echo " <big><b><u>" . $mapinfo3['area'] . "</u></big></b>";
echo " <img src='images/key.png' />";
echo "<br><br><br><center><big>";
if ($northsquare != 'a'){echo "<A href='javascript:traveled(1)'>Travel North</a><br>";}
if ($eastsquare != 'a'){echo "<A href='javascript:traveled(2)'>Travel East</a><br>";}
if ($southsquare != 'a'){echo "<A href='javascript:traveled(3)'>Travel South</a><br>";}
if ($westsquare != 'a'){echo "<A href='javascript:traveled(4)'>Travel West</a><br>";}
//////////////////////////////////encounter//////////////
if ($playersquare == 'c')
{
$bossinfo="SELECT * from mapcreatures where row='$playerinfo3[row]' AND colmn='$playerinfo3[colmn]' AND area='$playerinfo3[area]'";
$bossinfo2=mysql_query($bossinfo) or die("Could not get user stats");
$bossinfo3=mysql_fetch_array($bossinfo2);
echo "<br><br><center>You have encountered a " . $bossinfo3[name] . ". <br>" . $bossinfo3[description] . "<br><br>";
echo "<form method='POST' action='battle.php'>
<input type='submit' value='Attack' name='submit' />
<input type='hidden' name='creature' value='$bossinfo3[name]'>
</form>";
}
?>
</td>
<td>
<div id="rpanelarea">
<?php
include_once 'rstatpanel.php';
?>
</div>
</td>
</tr>
</table>
</div>
<script language="javascript">
function traveled(direction)
{
var pid = "<?php echo $playerinfo3[name];?>";
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
//var test = ajaxRequest.responseText;
//document.getElementById('title').innerHTML=ajaxRequest.responseText;
//window.location.href = "test.php";
}}
var queryString = "?pid=" + pid + "&direction=" + direction + "&code=2112545";
ajaxRequest.open("GET", "travelmap.php" + queryString, true);
ajaxRequest.send(null);
window.setTimeout("finalizetravel();",700);
}
function finalizetravel()
{
window.location.href = "adventure.php";
}
</script>
</body>
</html>
yes i can write complicated code
Re: collision mechanics.
Posted: Thu Sep 30, 2010 10:32 pm
by Torniquet
hmm yeah that seems ALOT easier the way you done it in the vids
i will look into building something like that i think.
not sure whether i want to hav the map system just in battle instances or throughout the whole game yet.
i might have that map for the outside, and maybe a FF tactics style system for battles
ta halls your a superstar xxx
Re: collision mechanics.
Posted: Fri Oct 01, 2010 2:04 pm
by hallsofvallhalla
Yeah the way i did in the vids has a vast area to be built on. There is soooo much that can be done with it. The possibilities are endless.
Re: collision mechanics.
Posted: Fri Oct 01, 2010 10:52 pm
by Berserk011
I know........... O.o *epic gaze*
Re: collision mechanics.
Posted: Fri Oct 01, 2010 11:27 pm
by Torniquet
ok been working on it a lil... got it down to coords based on the div top & left position (Y)
so rather than storing everything in a grid of divs, its run with coords ^^
i jus need to get it all working with other players now ¬¬ lol
i know how to do it... its just having the energy to do it XD
http://torni.netii.net/test.php
^-- that is running off no grid and no DB (yet)
bound by the width and height of the surrounding div
oh btw, arrow heys to move the black box :p
Re: collision mechanics.
Posted: Sat Oct 02, 2010 4:09 am
by hallsofvallhalla
looks great, only thing is what happens when you add items from DB? Will it move the cords?
Re: collision mechanics.
Posted: Sat Oct 02, 2010 10:39 am
by Torniquet
If i understand what your saying correctly. then no.
they are just absolute positioned divs referencing from the relative 'map' div.
i did start working on using objects and placing more boxes in there last night. currently in its basic form i have a table like this.
etc.
then when it draws the map out.
it grabs the coords of the objects / players, does a little math on them to turn them into the top & left position before drawing them in.
so eventually. you have somehting a little like this,
Code: Select all
<div style="position:relative; width:200; height:200> // this is the map
<div style="position:absolute; left:40px; top: 120px; width:10px; height:10px" id="user_1"><div>// user 1
<div style="position:absolute; left:90px; top: 160px; width:10px; height:10px" id="user_2"><div>// user 2
</div>
when i get around to it and start manipulating the databse when you move, it will check to see if that the coords you move into, is already occupied by an item (maybe another player, im not sure yet... could cause problems if there is a high amount of players) before moving the player and setting the database.
i will update the current map with the one working from the database later today once i have messed about with it more, and hopfully give you a better idea on how it runs
Re: collision mechanics.
Posted: Sat Oct 02, 2010 10:21 pm
by hallsofvallhalla
so how are you handling different monitor sizes with absolute positioning?
Are you going to just leave the map on the left hand side? A good fix, you will just never be able to center the web page. Not always a bad thing though.