3 Image-Based Questions

[LemonInflux]

OK, I'm building a text-game as a something-to-do project, and I suddenly had this idea for a feature. Basically, it's a map, and on it you can see where people are (people are represented by an icon (that differs depending on their status)). So, here are my 3 questions:

 

Question 1;

 

How can you put images on top of images (like an imagettftext, but for graphics)?

 

Question 2;

 

How can you define co-ordinates and areas of the map these images cannot be placed in? For, say, fences, house walls, swamps etc, I don't want the players in there.

 

Question 3;

 

Is there a way to define a whole area of co-ordinates? Say you have a square that's 100px by 100px. you want a square with a top-left corner of 20x20y, and you want a bottom corner of 80x80y. How do you select all of the co-ordinates in there? I say this, because in the game, you don't walk around an pick a point, as such, you are just randomly placed in an area depending on where you are (for example, if you're in a town in the game, you're placed in a random place in the town on the map).

[LemonInflux]

Anyone?

 

EDIT: 400th post =D

[GingerRobot]

Question 1: Given the fact that you want to make different icons, it would possibly be best to simply 'draw' onto an existing image. Rather than using the imagecreate() function, use the imagecreatefromgif/jpg/png functions to load your 'map'. Then, draw your shapes onto your map using, perhaps, imagefilledpolygon()

 

If you don't want to draw the icons, then you can use the imagecopy() or imagecopymerge() functions to copy your existing icons onto your map

 

Question 2: It's a matter or knowing where everything is. If you know where your fences etc are, then simply don't allow any icon to be placed there - if you check the top left, top right, bottom left and bottom right potential co-ordinates of an icon against areas which someone cannot be placed, you can determine wether or not to place them there.

 

Question 3: I assume this is for the random placing of the person? Couldn't you juse use the rand() function to generate a place for them witin the given parameters?

[LemonInflux]

question 1: They will primarily be different coloured dots (members = green, staff = red, say). So is there an image-draw-a-dot-on-my-map() function?

 

question 2: Yeah, I thought that. But how do I go about doing it?

 

question 3: Yet again, that's what I thought. But how do I then turn it into a dot on a 'map'?

[GingerRobot]

Question 1: A single dot? imagesetpixel() - though i think you might find that might be too small.

 

www.php.net/gd - take a look. That's what you can do.

 

Question 2:Well, for each item, you could store its four extreme co-orindates (assuming square/rectangular shapes), cycle through each object, and check to make sure it doesn't overlap:

 

<?php
$objects = array();
//xstart,ystart,xfinish,yfinish
$objects[0] = array(10,10,30,30);//perhaps a house
$ojects[1] = array(40,10,45,50);//a fence?
$iconx = 20;//x co-ordinate
$icony = 20;//y co-ordinate
$errors = FALSE;
foreach($objects as $v){
if($iconx >= $v[0] & $icony >= $v[1] && $iconx <= $v[2] && $icony <= $v[3]){
	$errors = TRUE;
	break;//no need to continue looking through the array
}
}
if($errors){
echo 'That image cannot be placed there!';
}else{
echo 'Place that image there';
}
?>

 

If you are using non-square objects, it might be easier to store the individual pixels which you cannot allocate a position to. You could then just use the in_array() function to check to see if the pixel you are going to place your icon on is within this set of dissallowed pixels.

 

Question 3: Well, assuming the single pixel:

 

<?php
//create image
$iconx = rand(20,80);//define minimum and max for x and y positions
$icony = rand(20,80);
imagesetpixel($image,$iconx,$icony,imagecolorallocate($image,255,0,0));
?>

[LemonInflux]

1: A single dot, but about 10px wide.

 

2: Thanks, will take a look at that.

 

3: (see first point)

[GingerRobot]

1: A single dot, but about 10px wide.

 

2: Thanks, will take a look at that.

 

3: (see first point)

 

So its not a single dot. Its a square. imagecreaterectangle()

 

3: Fairly simply alteration then, you still use the rand() function to generate the top left co-ordinates, and work out the bottom right by adding 10 to them. Of course, you will now need to reduce the area that you generate the random co-ordinates for by 10. e.g. if you want to place something randomly between 20,20 and 80,80 then you need to get a random number between 20 and 70 for the x and y co-ordinates, since you add 10 to these for the bottom right corner.

[LemonInflux]

No, it's a dot. It's a dot (that happens to be a circle) that's 10px wide.

[GingerRobot]

A circle makes things a little more complicated. However, i suggest that whilst you use a circle for display, for the purposes of positioning, you treat it as a square. It'll be much easier to work out where it can/cannot go if its a square.

[LemonInflux]

Yeah, my idea was that the fields it could be placed in were squares, but the actual mark is a circle.

[LemonInflux]

Quick question; I'm trying to write a function that checks if points are on an object, and if so, it will create another random co-ordinate and check that. So, here's as far as I've got:

 

<?php
function defineSpot($xlower, $xhigher, $ylower, $yhigher){
$x = rand($xlower, $xhigher);
$y = rand($ylower, $yhigher);

$objects[0] = array(112,12,0,0);
$objects[1] = array(15,17,54,12);
$objects[2] = array(80,12,69,53);
$objects[3] = array(16,100,172,12);
$errors = FALSE;

foreach($objects as $v){ 

if($iconx >= $v[0] & $icony >= $v[1] && $iconx <= $v[2] && $icony <= $v[3]){

// Re-generate the x and y co-ordinate, and try again...How is this done?

}
}

 

Took out all the comments and stuff, except the one that describes what I want to do.

[GingerRobot]

Something like:

 

<?php
function defineSpot($xlower, $xhigher, $ylower, $yhigher){
$x = rand($xlower, $xhigher);
$y = rand($ylower, $yhigher);

$objects[0] = array(112,12,0,0);
$objects[1] = array(15,17,54,12);
$objects[2] = array(80,12,69,53);
$objects[3] = array(16,100,172,12);
$errors = FALSE;
$found = FALSE;
while($found === FALSE){//while we havnt found somewhere to place ot
	foreach($objects as $v){ //cycle through each object to see if there is a problem
		if($iconx >= $v[0] & $icony >= $v[1] && $iconx <= $v[2] && $icony <= $v[3]){	
			$errors = TRUE;
			break; 
		}
	}
	if($errors === FALSE){//if after going through everything, errors is still false, then we've found the position
		$found = TRUE;
	}else{
		$x = rand($xlower, $xhigher);
		$y = rand($ylower, $yhigher);
	}
}
$spot = array($x,$y);
return $spot;
}
$spot = defineSpot(0,200,0,200);
echo 'X co-ordinate:'.$spot[0].'<br />Y Co-ordinate:'.$spot[1];

?>

 

That should do it, but you'll need to run it a few times to check its working. Also, you might want to add a counter inside the loop, and exit after a large number of iterations - in case it's not possible to place given the restrictions and objects (will stop a continuous loop)

[LemonInflux]

ok, thanks. BTW, how do I place these on an image?

[GingerRobot]

Well, for a simple dot, you can load your map with one of the imagecreatefrom functions (www.php.net/imagecreatefromgif, www.php.net/imagecreatefrompng etc). You can then set the pixel to a particular colour with imagesetpixel()

 

However, if you're wanting to draw a circle, things get more complicated. Even if you act as if the circle is a square, you'll need to consider the extreme points of the square when working out where it can be placed.

[LemonInflux]

So, when placing an ellipse, am I talking about the center point, or the top left or something?

[GingerRobot]

The manual explains it - you define the centre points (x,y) and the height and width of the ellipse. For a circle, these are the same.

[Barand]

An approach to no-go areas

 

Create a "mask" image same size as you map but with a white background and filled polygons (red, say) where people cannot be placed. Triangles in my example (non-rectangular and will work for any shape, however complex.

[pre]

+------------------------------------------------------------+

|    20,15    40,15                                          |

|    --------                                              |

|      \    /                                                |

|      \  /                                                |

|        \/                                                  |

|      30,50                                                |

|                                  200,90                    |

|                                  /\                      |

|                                  /  \                      |

|                                /    \                    |

|                                /      \                    |

|                              /        \                  |

|                              /          \                  |

|                      180,140-------------- 230,140        |

+------------------------------------------------------------+

[/pre]

 

All you need do is check in the "mask" image if the color at your coordinates is red. If so, you need to choose different coordinates