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. |
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.. SET FONT "",RGB(0,255,255); |
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 ![]() ![]() 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: |
All Rights Reserved
- 2004 |