Sonar Interface



Here we will learn how to use the different properties of the Panel function.
Also, discuss about some problems that might come up while making the interface.




Sonar Interface

1 Open the WED application.
1.1 Click File/Open, to open the pool level we made in the Level Design section, the name that i suggested was AY_Level_01.

1.2 We have to make a .wdl script, the one that will always contain most of our codes.
1.3 Click File/Map Properties.
1.4 If it´s not with the name AY_Level_01.wdl as the script name already, click the button Create New and choose _A6_template_project.

1.5 A script with the name AY_Level_01.wdl will appear, if that´s the name of your level.
1.6 Click to close, the X button closes the window.

1.7 Open SED application and click File/Open, and search for the AY_Level_01.wdl script file that we just created in the WED, it´s located on the same path as your level.


2.0 What you see in the AY_Level_01.wdl is where will be most of our codes. You can see that it is already built with some of the main codes. There is a function that loads our level, the starting window function where you can manipulate the size of the screen. They are just some of the functions that will help you to proceed the development. Right now we won´t be using them, so you can study that later when you fill more confident.

2.1 The part that interests us, and is where will be our code, is right between the WINDOW WINEND function and the INCLUDE <debug.wdl>; command, right in the bottom of the script.

/* no exit window at all..
WINDOW WINEND
{
TITLE "Finished";
SIZE 540,320;
MODE STANDARD;
BG_COLOR RGB(0,0,0);
TEXT_STDOUT "",RGB(255,40,40),10,20,520,270;

SET FONT "",RGB(0,255,255);
TEXT "Any key to exit",10,270;
}*/


2.2 Bring the cursor over this part in the script, and hit Enter key on the keyboard a few times to give enough space to work on, between this two codes.

/////////////////////////////////////////////////////////////////
//INCLUDE <debug.wdl>;

3.0 Our first panel will present an image for us in the game, so we need first to say to the engine that we are going to use an image file, it´s the same way as if we were going to work with numbers, or text variables. We will tell the name of the file to use, with .pcx been the type of the file, and with a name for that variable, so we can remember it later. So, write this code in the blank space of your script:

bmap sonar_out_a = <Sonar_Out_A.pcx>;

3.1 Where bmap is a predefined variable in the engine of type image, .pcx, .bmp, .tga are some image types that the variable bmap can handle.
sonar_out_a is our reference, it´s only a name for us to be using later.
<Sonar_Out_A.pcx> is our image file located in the AY_work_files/pool_demo folder. Which needs to be in the same folder where you have the AY_Level_01.wdl script.
The = sign means that: Assign this file Sonar_Out_A.pcx, to this variable sonar_out_a.
The ; is needed always after a instruction like the one we made, so the engine get to know where each of our instructions ends.




4.0 To build the first panel , write this code below the bmap variable, like this:

panel subsonar_outa
{
bmap=sonar_out_a;
pos_x = 4; pos_y = 400;
flags = REFRESH,VISIBLE;
}

4.1 We created a panel of name subsonar_outa assigning our image sonar_out_a to the bmap property of the panel, so it can show a image now as a background.
With positions in the x and y directions of the screen.
The flags REFRESH and VISIBLE, are telling to the panel: refresh your self every frame of the game while playing it, and be visible all the time.

4.2 Build with the update entities turned on, so it only updates the entities and our script, and then Run the game in WED, you can see now our first panel in action on the screen.
Hit ESC key on the keyboard when you need to close the game.




4.3 You can see that it have a black border in it, around the yellow part and inside of it.
4.4 The black color is made of #000000 value in the hexadecimal format.
4.5 All we need to do is to put another flag OVERLAY, this flag tells the panel to hide every part of the image that have the value 0 in it, that is the black part. Now your code it´s something like this in the flag instruction:

flags = REFRESH,VISIBLE,OVERLAY;

4.6 Save the script, Build and Run in WED. That´s it, now it hides the black part of the image showing only what interests us.




5.0 To make the second panel it´s easy, now that we know how it works, so write this line after the first panel, this will be our first image of the second panel:

bmap sonar_out = <Sonar_Out.pcx>;

5.1 Now that we have an image variable declared, let´s make the panel to use it, write this code:

panel subsonar_out
{
pos_x=4;pos_y=400;
bmap=sonar_out;
alpha=90;
flags = REFRESH,VISIBLE,OVERLAY,TRANSPARENT;
}

5.2 We added two properties to this panel, that is, the flag TRANSPARENT which makes the game behind more visible throught the image, and we set the alpha value of the image with 90, to make it just a little transparent. Play with this alpha value so you notice the changes in the game, it accepts the values between 0 and 100.

5.3 But how it´s possible that this image is showing the black part in it, since i putted the OVERLAY flag, and it shouldn´t been showing anything in black, well that´s because i wanted some part of the image in black to be shown, so all i did was to change the inner black part to a value of #010101, it´s still black color, but now the overlay flag doesn´t see it that way, since it have some 1´s between the 0´s.




6.0 For the third panel, i wanted to make a rotation effect, so the radar rotates inside the first and second panel. Since the panel function only accepts manipulation of the x and y positions, i decided to make the image to have the effect we want. Think it as an animation process, with one image showing a frame after the other, here are the images:

Image 1
Image 2
Image 3
Image 4

6.1 Add this variable declarations after the rest of the panels code:
One image variable for each image we want to use.

bmap scan_01=<Sonar_Scan_01.pcx>;
bmap scan_02=<Sonar_Scan_02.pcx>;
bmap scan_03=<Sonar_Scan_03.pcx>;
bmap scan_04=<Sonar_Scan_04.pcx>;

6.2 Now create this panel as it is:
But don´t assign a image for it yet, we will assign in another way.

panel sub_scan
{
alpha=60;
layer=2;
pos_x=4; pos_y=400;
flags = REFRESH,VISIBLE,OVERLAY;
}

6.3 As you can see, it doesn´t matter which properties you write first, as long they are in the same panel function. But makes sure to have this panel with a layer property of 2, that is, will be shown over all the other panels since they are automatically declared by the engine to have a layer property default to 0. Otherwise it would be hided behind the other panels.


7.0 Now we need to make a function that will handle the four image variables, for showing each one in separated time. Write this code now:

function rotate_scan
{
while(1)
{
sub_scan.bmap=scan_01;
wait(32);
sub_scan.bmap=scan_02;
wait(32);
sub_scan.bmap=scan_03;
wait(32);
sub_scan.bmap=scan_04;
wait(32);
}
}

7.1 What we are doing here is just declaring a function named rotate_scan, and every thing we put inside the { } signs of the function will belong to it, that is, every time we call this function, it will execute every single line of code one time, and when it ends, will get out of it and continue with the other codes in the script.
Since it´s going to execute only one time after we call it, and we don´t want to be calling it every time to make the "animation" sequence of the images, we need to make a while condition, that is while a condition is acceptable it continues reading each line of code inside the respective { } .The condition we used is the value 1, because the value 1 will always be true for the computer, it will stay executing each code forever or until we stop the game. In each line of code we are assigning a different image for the panel bmap property.The same way as if we write it in the panel it self, but since we are declaring after the panel function was made, we have to reference the respective panel sub_scan and the property of it .bmap. Every time the engine reachs the wait( ) instruction, it stops and start counting the value we specified, then when reachs the value we specified the engine comes back to the next line and execute it. The wait( ) instruction can have any value and its value is designated by the frames per seconds, so it really depends on your computer, if it´s faster will have like 70 fps, for instance.

7.2 Let´s make the caller of that function to see how it works, write this in the next empty line after the function:

on_anykey=rotate_scan;

7.3 We are assigning our function to the predefined variable on_anykey. This means that, when any key on the keyboard is hit, this variable will become active and will execute our function.
7.4 Try it now, Save your script, Build and Run. Then, just hit any key to see the animation of the images been activated for the panel.

8.0 We still have a little problem, the image is animating, but we can notice that it is not hidding the whole black part as we want, that is because we assigned this panel to be over all the other images, with the layer property of 2, so it´s the most higher layer in the screen.

8.1 All we need to do to fix this, is to assign a higher value to one of the other panels to hide this part we don´t want.
8.2 Write this code in blue color, inside of the first panel:

panel subsonar_outa
{
bmap=sonar_out_a;
layer=3;
pos_X = 4; pos_y = 400;
flags = REFRESH,VISIBLE,OVERLAY;
}

8.2 That´s it, now the layer order becomes: panel 2 with no layer property assigned, which becomes the 0 value layer as default, panel 3 with a layer value of 2, and the panel 1 with the highest layer value of 3.



9.0 Another problem is that the function is beeing called every time we hit any key on the keyboard, making a confusion with the images. But that, we will fix in the submarine simulation tutorial, so for now, just leave it that way.



That´s it for the interface. We discussed about the porperties of the panel, and how to resolve some limitations with using animated images. But, be carefull when using this feature since everything you put in as a panel can make the game very slow playing it, since it needs to refresh those images and also refresh the game that is running on the back.




Go To:
  1. Introduction
  2. Level Design
  3. Low Poly Modeling
  4. UV Mapping
  5. Submarine Interface
  6. Submarine Simulation




All Rights Reserved - 2004