dim3 Forum

Radar and Compass Tutorial v1

[Image: radar-tutorial-prev.jpg]

Introduced in dim3 v 2.2 was core support for radars, and rotating bitmaps.

The following is a complete guide how to set up a radar and compass for your game.

A copy of this tutorial and the accompanying images are available for Download Here (link fixed {again!}).

Radars are defined in data/settings/interface.xml as follows:

Code:

    <Radar>

            <Position x="500" y="300" radius="64" />

            <View radius="20000" />

            <Background file="radar_backdrop" />

            <Icons>

                <Icon name="player" file="radar_icon_filename" size="5" />

            </Icons>    

    </Radar>

[Explanation:]

Code:

    <Position x="500" y="300" radius="64" />

This is the position and size of the radar. Note that radars are positioned AND drawn using the center as a reference point, unlike other interface elements which use the top left corner.

Code:

    <View radius="20000" />

This is the range of your radar, the larger the value - the further away object will register.

Code:

    <Background file="radar_backdrop" />

This is the picture that you wish to display as the background of your radar. Images Are stored in the Data/Bitmaps/Radar folder. They must be in PNG format and sized in powers of 2 eg (2,4,8,16,32 px square). When referencing the image you don't include the file extension.

Code:

    <Icons>

        <Icon name="icon_name" file="radar_icon_filename" size="5" />

    </Icons>

This is where you specify the icons available to draw on top of the radar to show where tracked objects are. Each must be given a unique name. The same image file can be used to make different icons of different sizes.

[Example:]

So, using the example images provided, we can easily extend the standard dim3 demo to include a radar, and later I will show you how to add a compass as well.

Paste the following inside the main <Interface> tag in /Data/Settings/Interface.xml

Code:

<Radar>

        <Position x="47" y="37" radius="32" />

        <View radius="40000" />

        <Background file="radar-background-green" />

        <Icons>

            <Icon name="Green Blob" file="green_blob" size="3" />

             <Icon name="Large Green Blob" file="green_blob" size="8" />

            <Icon name="Yellow Blob" file="yellow_blob" size="3" />

            <Icon name="Blue Blob" file="blue_blob" size="3" />

            <Icon name="Red Blob" file="red_blob" size="3" />

            <Icon name="Red Cross" file="red_x" size="4" />

         </Icons>    

    </Radar>

Place all the images in their relevant directories inside your Data folder.

You need to tell the engine to remember which objects are visible on the radar, and what icon they are represented as. Paste the following into the Joe Foe scripts - in the construct function,

Code:

    // radar code

    obj.radar.on = true;

    obj.radar.icon = "Green Blob";

if you want the object to be shown on the radar only if its moving, like in marathon, then add this as well:

Code:

    obj.radar.motionOnly = true;

When the bot dies, we don't want them to still be visible on the radar, so in the joeFoeDie(obj) function, add:

Code:

    // radar code

    obj.radar.on = false;

Do this for every script that you want tracked on the radar, for example - I added the following to the switch script

Code:

    obj.radar.on = true;

    obj.radar.icon = "Red Cross";

There you have it, if you followed everything you now have a working radar.

- Compass -

This is a little more complicated, but not much so. The method here is to make a timer that updates the drawing angle of an interface bitmap to reflect the player's current angle.

First add the compass bitmap to your Interface.xml as follows:

Code:

        <Bitmap name="HUD Compass">

            <Image file="compass-hud-green" />

            <Position x="566" y="5" />

            <Size width="64" height="64" />

            <Settings alpha="1" flip_horizontal="false" flip_vertical="false" />

        </Bitmap>

Next open Data/Scripts/Objects/Player.js

Make a new timer ID constant at the top of the file, and give it a numerical value not used by another timer ID:

Code:

    const UPDATE_COMPASS_HUD_ID = 2;

in the spawn function under redrawWeaponDisplay(obj) add:

Code:

    iface.bitmap.show('HUD Compass'); // Show Compass

    obj.event.startTimer(1,2); // Start Compass Timer

Next we need to use the timer to call a function that rotates the bitmap.

Look for the playerTimer function, and extend the switch(){} to test for UPDATE_COMPASS_HUD_ID, and call the rotate function.

Code:

    //

    // player timers

    //

    function playerTimer(obj,id)

    {

        switch (id) {

            case PLAYER_DIE_FALL_OVER_ID:

                playerFallOver(obj);

                return;

            case UPDATE_COMPASS_HUD_ID:

                updateCompass(obj);

                return;

        }

    }

Next we need to add the rotate function. Put it under the timer function.

Code:

    function updateCompass(obj)

    {

            iface.bitmap.setRotate("HUD Compass",- obj.angle.y);

    }

If you want to hide the compass when the player dies then add iface.bitmap.hide('HUD Compass'); to the relevant function.

And that’s it!

Feel free to use the images provided freely in your projects as there are or modified.

© Mathew White 2007/08

mafoo