Combat Grid?

[YourNameHere]

I am writing an RPG.... I know... they always fail, blah blah.

That said, I need help designing the combat grid. If you've ever played a pencil-and-paper RPG, you'd understand.

 

My question comes from how do I make each "tile" accessable to scripts. I played around in Excel with a few ideas to no avail.

 

My Idea:

Like a chessboard... A1, A2 ... E7 and so forth. the problem is the board will be very large (more than 26 tiles wide). How would tile AA34 relate to tile UV99?

 

The things I would need to do with this info is, calculate distance between tiles.

 

These will be "virtual grids" with no visual aspect.

 

Sorry but I hope that made sense to someone as I know no better way to explain it.

[Daniel0]

That is easy. If you set it up like a regular Cartesian coordinate system with points (x,y) it'll be easier. So if you have two points P(x₁,y₁) and Q(x₂,y₂), the distance between them will be the length of the vector between them. So we have [tex]\overrightarrow{PQ} = \left( \begin{array}{c} x_2 - x_1 \\ y_2 - y_1 \end{array} \right)[/tex]. By the Pythagorean theorem, the length of a two dimensional vector is given by [tex]\sqrt{x^2+y^2}[/tex] where x and y are coordinates of the vector. Thus the length of our vector is [tex]|\overrightarrow{PQ}| = \sqrt{(x_2-x_1)^2 + (y_2-y_1)^2}[/tex], which is also the distance between the points P and Q. This will work for all points (x,y) in [tex]\mathbb{R}^2[/tex].

 

So if you have two points P(5,7) and Q(9, the distance between P and Q will be [tex]\sqrt{(9-5)^2 + (8-7)^2}=\sqrt{17}\approx4.12311[/tex].

[YourNameHere]

Wow, that was one of the most useful bits of advice I have ever gotten. (Not sarcasm) Thankfully my girlfriend is a math wiz and could explain your equations. (although I learned this in high school, who really remembers those days anyway?) LOL.

 

You're a god, thank you.

[corbin]

Triangles are evil.

[Daniel0]

To build onto this, something you could additionally do is give each player/monster/item a "realm", a kind of area they can act within. So imagine a circle around them with the player position in the center C(x₁,y₁). The radius r₁ of that circle could depend on various factors. So that circle is given by (x-x₁)²+(y-y₁)²=r₁². So, someone can interact with people within their realm, i.e. they can interact with with people whose center is within their circle (because everything else has an imaginary circle around them). This will be true if the distance between their centers is less than either of the radii.

 

So if we have two players in P(x₁,y₁) and Q(x₂,y₂), and the player in P has realm radius r₁, then the player in P can interact with the player in Q iff |PQ| < r₁.

 

Doing this you'll of course have to envision the "world" as a Cartesian coordinate system instead of tiles with integer coordinates.

[YourNameHere]

Hmmm! very nice! I was actually wondering about that.

[YourNameHere]

Would this be a giant table with each cell being a new coord? or is there a better way? I understand the concept but am at a loss as to how to implement it.

[Daniel0]

No, drop the idea about tiles. Just store two real numbers: x and y. These represent a point (their position) in the plane (the map). You would obviously like to set an upper and lower bound on the x-axis and y-axis. When moving people around on the map you could allow them to use arrows and move them according to a predefined step value. You could also allow them to click on the map to move.

[YourNameHere]

No, drop the idea about tiles. Just store two real numbers: x and y. These represent a point (their position) in the plane (the map). You would obviously like to set an upper and lower bound on the x-axis and y-axis. When moving people around on the map you could allow them to use arrows and move them according to a predefined step value. You could also allow them to click on the map to move.

 

Yes, ok, idea dropped. my question is this: What would I use as the "map"? How would I define the plane? I understand the storing of the numbers but how would I take that data and display it on a webpage?

I would have a DB table that is updated with every new "move". Then update it. How would -1,1 be translated into pxls?

[Daniel0]

Well, imagine something simple like this:

 

<?php
session_start();

function checkBoundary($value, $add, $max, $min = 0)
{
$value += $add;
if ($value < $min) {
	$value = $min;
}
else if ($value > $max) {
	$value = $max;
}

return $value;
}

$map = 'http://www.phpfreaks.com/media/images/forums/bg_header.png';
$width = 950;
$height = 133;

$stepValue = 10;

// reset on invalid position or non-existant position
if (empty($_SESSION['pos_x']) || empty($_SESSION['pos_y']) ||
    $_SESSION['pos_x'] > $width || $_SESSION['pos_x'] < 0 ||
$_SESSION['pos_y'] > $height || $_SESSION['pos_y'] < 0) {
$_SESSION['pos_x'] = round($width / 2);
$_SESSION['pos_y'] = round($height / 2);
}

if (isset($_GET['op'])) {
switch ($_GET['op']) {
	case 'up':
		$_SESSION['pos_y'] = checkBoundary($_SESSION['pos_y'], -$stepValue, $height);
		break;
	case 'down':
		$_SESSION['pos_y'] = checkBoundary($_SESSION['pos_y'], $stepValue, $height);
		break;
	case 'left':
		$_SESSION['pos_x'] = checkBoundary($_SESSION['pos_x'], -$stepValue, $width);
		break;
	case 'right':
		$_SESSION['pos_x'] = checkBoundary($_SESSION['pos_x'], $stepValue, $width);
		break;
}
}
?>
<style type="text/css">
#mapCanvas {
width: <?php echo $width ?>;
height: <?php echo $height ?>;
background: url(<?php echo $map ?>);
position: relative;
}
#player {
width: 5px; height: 5px; background: #F00;
position: absolute;
top: <?php echo $_SESSION['pos_y'] ?>;
left: <?php echo $_SESSION['pos_x'] ?>;
}
</style>

<div id="mapCanvas">
<div id="player"></div>
</div>

<ul id="controls">
<li><a href="?op=up">Move up</a></li>
<li><a href="?op=down">Move down</a></li>
<li><a href="?op=left">Move left</a></li>
<li><a href="?op=right">Move right</a></li>
</ul>

<p>Current position: <?php printf('%d,%d', $_SESSION['pos_x'], $_SESSION['pos_y']) ?></p>

[YourNameHere]

OK I got it working and it is exactly what I needed! Thank you so much Daniel!

More questions.

Should I port this over to javascript to keep down on bandwidth? and only update the coords in the DB "if var moved !clicked for 5 seconds", via ajax. The rest of the application is highly dependant on ajax so if JS is disabled then they wouldnt be able to get this far into the app anyway. (I know, bad practice)

 

Or is that a bad idea all together?

[Daniel0]

You could use AJAX and progressive enhancement. In that way it could always fall back on creating a new full request if Javascript was unavailable.

[YourNameHere]

ok thanks! 

[seventheyejosh]

Those are some badass functions, Daniel0. What is it exactly you do? College for math? Or math professionally? Or do you just love it?

 

Just curious,

 

Josh.

[Daniel0]

I'm studying computer science on the University of Copenhagen, Denmark and I have a general interest in mathematics.

[YourNameHere]

To build onto this, something you could additionally do is give each player/monster/item a "realm", a kind of area they can act within. So imagine a circle around them with the player position in the center C(x₁,y₁). The radius r₁ of that circle could depend on various factors. So that circle is given by (x-x₁)²+(y-y₁)²=r₁². So, someone can interact with people within their realm, i.e. they can interact with with people whose center is within their circle (because everything else has an imaginary circle around them). This will be true if the distance between their centers is less than either of the radii.

 

So if we have two players in P(x₁,y₁) and Q(x₂,y₂), and the player in P has realm radius r₁, then the player in P can interact with the player in Q iff |PQ| < r₁.

 

Doing this you'll of course have to envision the "world" as a Cartesian coordinate system instead of tiles with integer coordinates.

 

I would love it if you could break down that equation for me, I plan on implementing this feature with a bit of collision detection math.  (x-x₁)²+(y-y₁)²=r₁²

 

What is x and y?

I know r is radius.

 

I have a point and I would like to make that point the center of my circle. Then I need to write a collision detection function. This function will be for casting spells that have a radius and each npc and pc will have a diameter of 5 (radii of 2.5). can you help?

[Daniel0]

In analytical geometry you see geometrical objects and elements as a set of points. In this case we are working in the euclidian plane which is the 2-space [imath]\mathbb{R}^2[/imath].

 

Thus all the points on the periphery of a circle is given this set:

 

[math]\left\{ (x,y) \in \mathbb{R}^2 | \left(x-x_1\right)^2 + \left(y-y_1\right)^2 = r_1^2 \right\}[/math]

 

for some constants [imath]x_1,y_1 \in \mathbb{R}[/imath] and [imath]r_1 \in \mathbb{R}_+[/imath]. So one [imath](x,y)[/imath] is in this case just one point on the periphery. The point [imath](x_1,y_1)[/imath] is a fixed point, the center of the circle. A point has no width, height or area, but seeing as there are infinitely many points in this set that are infinitely close to each other, you get a perfect line forming a circle.

 

Consider for instance the circle given by [imath]x^2+y^2=1[/imath]. That's the unit circle, the circle with center in the origin and radius 1. If we have two more circles given by [imath](x-1)^2 + (y-1)^2=0.5^2[/imath] and [imath](x-1.25)^2 + (y-0.25)^2=0.25^2[/imath]. If we plot these (see attachment) and give them the colors red, green and blue then green and red intersect, but blue intersects with neither.

 

If you want me to explain exactly why the equation for a circle looks like that, I can try to do so as well, but otherwise I'll just leave it; it's not so important for your particular problem.

 

Essentially, you have two circles represented by: [imath]C_1(x_1,y_1)[/imath], [imath]r_1[/imath] and [imath]C_1(x_2,y_2)[/imath], [imath]r_2[/imath]. A [imath]C_n[/imath] represents the center of circle [imath]n[/imath] and similarly [imath]r_n[/imath] represents the radius of circle [imath]n[/imath].

 

Calculating the distance between two points in [imath]\mathbb{R}^2[/imath] is easy (it's easy even in [imath]\mathbb{R}^n[/imath] actually, but that's irrelevant in this case).

 

The distance between [imath]C_1(x_1,y_1)[/imath] and [imath]C_1(x_2,y_2)[/imath], also denoted by [imath]|C_1C_2|[/imath], is given by:

 

[math]|C_1C_2| = \sqrt{\left(x_2 - x_1\right)^2 + \left(y_2 - y_1\right)^2}[/math]

 

Specifically for [imath]\mathbb{R}^2[/imath], you can verify that this is true using the Pythagorean theorem. If this distance is less than the sum of the radii then the circles must obviously intersect.

 

If we take our red and green circles from before then the distance between their centers are:

[math]d = \sqrt{\left(1-0\right)^2 + \left(1-0\right)^2} = \sqrt{2} \approx 1.414[/math]

The sum of their radii is [imath]1+0.5=1.5[/imath] and seeing as [imath]1.414 < 1.5[/imath], the two circles intersect. This is of course easily seen by looking at the plot, but using this you can calculate whether or not two arbitrary circles intersect. This means that if you represent a person's area of influence as a circle (where the person is in the middle), you can calculate if another circle/person is influenced by a certain action.

 

[attachment deleted by admin]

[YourNameHere]

Thanks again! This got me interested in game algorithms and I picked up a few books on the subject and I never realized how important math (algebra/trig/geometry) actually were and how cool the applications for them could be!

 

Now I am gonna try and figure out how to do a path-finding algorithm, and another for decision making in synthetic players.