Displaying radar

The calculations involved in displaying radar are very simple. It's simply a division then a multiplication. However there are some more details that this tutorial will walk you through.

Position and size
The first thing to decide is what size to make the radar and where to put it. If it's too large then it will be distracting, but if it is too small it will be useless. For this tutorial the radar will be 128×96. One fifth of the view size.

For the position the best choice is to put it in a corner so that is's out of the way. The top right corner will do.

So far the code looks like this: var radar_width=128; var radar_height=96; var radar_x=room_width-radar_width; //512 in this example var radar_y=0;

Drawing the radar
Now that the dimensions have been decided it's time to draw it.

Background color
In order to make the radar stand out it's a good idea to draw a background and maybe a border as well. draw_set_color(c_white); draw_rectangle(radar_x,radar_y,radar_x+radar_width,radar_y+radar_height,false); draw_set_color(c_black); draw_rectangle(radar_x,radar_y,radar_x+radar_width,radar_y+radar_height,true);

Drawing objects
To draw the objects, you must choose what shape should represent them. You also have to decide the size. A 12 pixel radius circle is a good choice.

draw_set_color(c_red); with(obj_enemy) draw_circle(radar_x+((x/room_width)*radar_width), radar_y+((y/room_height)*radar_height), 12,false);

Complete code
var radar_width=128; var radar_height=96; var radar_x=room_width-radar_width; //512 in this example var radar_y=0; draw_set_color(c_white); draw_rectangle(radar_x,radar_y,radar_x+radar_width,radar_y+radar_width,false); draw_set_color(c_black); draw_rectangle(radar_x,radar_y,radar_x+radar_width,radar_y+radar_height,true); draw_set_color(c_red); with(obj_enemy) draw_circle(radar_x+((x/room_width)*radar_width), radar_y+((y/room_height)*radar_height),12,false);

Using a view as radar
The problem with the previous method is that it only works correctly if you want the radar's range to cover the whole room. If an object goes out of it's range it will still be drawn, except it will be drawn outside of the radar box.

One way to overcome this limitation is to use a view as the radar. The main limitation with this method is that every object needs to use the draw event and check the current view. If that isn't a problem then this is the perfect method to use because it is more automated.

Setup
The first thing to do set up the views. In this example the range of the radar is the same size as the main view.

It is important to make sure the views are in the same place before drawing. This code is best put in the end step event but it will also work correctly in the step event. Do not put it in the begin step event because the main view could move after that. view_xview[1]=view_xview[0]; view_yview[1]=view_yview[0];

Draw event
In the draw event the objects have to draw differently depending on the view. The view_current variable is used for this. if(view_current==0) draw_sprite(sprite_index,image_index,x,y); elseif(view_current==1) {  draw_set_color(c_red); draw_circle(x,y,32,false); } Remember that every object with a sprite must have at least the first two lines.

Using a surface
There is a third method that combines the previous two, drawing the radar on a surface. This method combines the advantages of the others without the weaknesses of either. However this requires a registered version of Game Maker.

Creating the surface
Before you can use a surface you have to create one. Make sure that you use surface_free if you don't need it anymore. The same setup as before will be used, except that since radar_width and radar_height will be needed in multiple events, they'll be created in the create event.

radar_width=128; radar_height=96; radar=surface_create(radar_width,radar_height);

Drawing the radar surface
Since it's recommended not to draw on surfaces during the draw event, the radar must be drawn just before it, in the end step event. But before drawing it, you must check if it still exists and recreate it if it doesn't. if(!surface_exists(radar)) surface_create(radar_width,radar_height);

You also need to define the range the radar covers: var radar_xstart=view_xview[0]; var radar_ystart=view_yview[0]; var radar_xend=view_wview[0]; var radar_yend=view_hview[0];

Then drawing can begin. surface_set_target(radar); draw_set_color(c_white); draw_rectangle(0,0,radar_width,radar_height,false); draw_set_color(c_black); draw_rectangle(0,0,radar_width,radar_height,true); draw_set_color(c_red); with(obj_enemy) draw_circle((x-radar_xstart)/radar_xend*radar_width,    (y-radar_ystart)/radar_yend*radar_height,12,false); surface_reset_target;

Now the radar is ready to be drawn in the draw event: var radar_x=view_xview[0]+view_wview[0]-radar_width; var radar_y=view_yview[0]; draw_surface(radar,radar_x,radar_y);

Complete code
Create event: radar_width=128; radar_height=96; radar=surface_create(radar_width,radar_height);

End step event: var radar_xstart=view_xview[0]; var radar_ystart=view_yview[0]; var radar_xend=view_wview[0]; var radar_yend=view_hview[0]; if(!surface_exists(radar)) radar=surface_create(radar_width,radar_height); surface_set_target(radar); draw_set_color(c_white); draw_rectangle(0,0,radar_width,radar_height,false); draw_set_color(c_black); draw_rectangle(0,0,radar_width,radar_height,true); draw_set_color(c_red); with(obj_enemy) draw_circle((x-radar_xstart)/radar_xend*radar_width,    (y-radar_ystart)/radar_yend*radar_height,12,false); surface_reset_target;

Draw event: var radar_x=view_xview[0]+view_wview[0]-radar_width; var radar_y=view_yview[0]; draw_surface(radar,radar_x,radar_y);