Jump to content

Combat Grid?


YourNameHere

Recommended Posts

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.

Link to comment
Share on other sites

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(x1,y1) and Q(x2,y2), 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,8) the distance between P and Q will be [tex]\sqrt{(9-5)^2 + (8-7)^2}=\sqrt{17}\approx4.12311[/tex].

Link to comment
Share on other sites

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(x1,y1). The radius r1 of that circle could depend on various factors. So that circle is given by (x-x1)2+(y-y1)2=r12. 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(x1,y1) and Q(x2,y2), and the player in P has realm radius r1, then the player in P can interact with the player in Q iff |PQ| < r1.

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

:D

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?

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

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(x1,y1). The radius r1 of that circle could depend on various factors. So that circle is given by (x-x1)2+(y-y1)2=r12. 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(x1,y1) and Q(x2,y2), and the player in P has realm radius r1, then the player in P can interact with the player in Q iff |PQ| < r1.

 

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-x1)2+(y-y1)2=r12

 

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?

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.