Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Discussion / Tutorial - The Definitive Guide To Making In-Game Menus

Author
Message
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 10th May 2007 09:00 Edited at: 29th Oct 2009 16:42
Link
TDK_Man's Tutorial On
Dark Basic Clickable On-Screen Mouse Areas


(Or How To Make Menu Screens With Buttons On Them!)


02 Feb 08: Added Section On Implementing Single And Multiple Menus In Your Programs.

One question you see on the forums time after time, is the good old 'how do you make a menu screen'? So, in an attempt to save us all the hard work of repeating how to do it over and over again, I decided to do a tutorial on the subject.

First of all, the old saying 'there's more than one way to skin a cat' holds true. There are in fact a number of ways to create a screen of clickable areas - or buttons - some better than others. There are no 'wrong' ways to do it - if the method you use works then fine.

I'll attempt to go through all of them and you can choose which one is best for you.

Note: In order to save you time, I've created some images for this tutorial - OK, my middle name isn't Picasso, so they aren't very good. But, for this tutorial they don't have to be.

The required images will be placed at the start of the section for each of the three methods I will be covering, so all you need to do is right-click on each one and select Save Image to save it to your DB project folder.

This tutorial is for both Dark Basic Classic and Dark Basic Professional. The only difference I am aware of is that in DBPro, when you load an image to be used as a sprite or texture, you have an extra ',1' flag parameter at the end of the Load command. If your button/sprite images are a little 'fuzzy' add the ,1 on the end.

So let's get started...


Method 1 - Using The Mouse X,Y Position


This is the probably the simplest method, but can involve a lot of typing if you have lots of buttons.

Essentially, you check the X and Y position of the mouse in the main loop and use If..Endif to check if the mouse is in pre-defined areas when the mouse button is clicked.

The screen with the buttons on it can be created in a paint program, so you can make it as fancy as you wish, Here's one I made earlier...



As you can see it's just a plain screen, but there's nothing stopping you from adding nice graphics around the edges or pasting the text and buttons over a full screen image or photograph. Make it as fancy as you like.

The above image took me about 5 minutes to make in Paintshop Pro, so given time, I'm sure you could come up with something far better.

So, we have five buttons. What we need to know is the X and Y positions of the top left (TL) and bottom right (BR) corner of every button. In PSP, you can just keep the mouse still over the required pixel of the image and it tells you this information.

In the example image I did, the five X/Y pairs of 2D co-ordinates are:

TL: 245,186 BR: 566,242
TL: 245,262 BR: 566,318
TL: 245,338 BR: 566,394
TL: 245,414 BR: 566, 470
TL: 245,490 BR: 566, 546

In our program, we load the image and paste it onto the screen. Five If..Endif blocks check to see if the mouse is within the regions defined by the above co-ordinates.

So, if you have 20 buttons, then you need 20 If..Then conditions.

Let's see the code...



So, what happens is that we load in the main screen into image 1 and then paste it at 0,0 on the screen.

In the main loop, we store the mouse X and Y position in Mx and My, along with the status of the mouse button in Mc.

To prevent wasteful testing of the mouse regions, the If Mc=1 Then Gosub CheckRegion line only tests the area of the screen the mouse is over only when the mouse button is clicked.

The CheckRegion procedure just contains the five If..Then blocks which test to see if the mouse X and Y position is inside the defined button areas.

Obviously, you need to put the required labels onto the buttons in the paint program and the relevant code inside the If..Then blocks to match what your buttons do.


Embellishment:

There are lots of things to do to make your menu screens look a little more flashy - including animating the background image. But for now we'll concentrate on the buttons....


Simple Mouse Over Highlighting:

This simple technique simply highlights the button the mouse is currently hovering over. No practical use, but it looks nice.

We already know the X and Y co-ordinates of the top left and bottom right corners of our buttons, so we can use them to make a simple rectangle which moves from one button to another when we move the mouse.

As the 2D Box command draws a filled box, we'll make a small box function of our own and modify the above code to use it.

Version 2 - With Button Highlighter:



As you can see if you run code example 2, as you move the mouse over the buttons, the red highlighting line moves with it. A very simple addition, but quite effective.

The first change from example 1 is that we now use Gosub CheckRegion and lose the If Mc=1. This is because we need the routine to be called even when the mouse button is not being pressed - so we can detect which button the mouse is over.

The other change is the addition of If..Else..Endif blocks inside the region checking If..Endifs. This essentially does the following:

The region check If..Endif decides if the mouse is within a given button's region - regardless of the state of the mouse button.

The If Mc=1 checks to see if the mouse button has been pressed. If it has then the Center Text block of code is executed.

If not, then the block after the Else is executed and the UnfilledBox() function is called - which clears the screen with the background image and then draws a red box using the provided co-ordinates.

You could just as easily have created a second set of button images from your original background and coloured them slightly different. You would simply load them in and as you moved the mouse over the buttons, pasted the button from the other set - instead of adding a coloured rectangle.

Let's see how that's done next. First, right-click and save the following five buttons into the same folder as the first image:








Version 3 - With Alternate Image Highlighter



This example is basically the same as example number 2, but we've lost the function as it's no longer required.

This time, instead of calling the function, we paste image 10 onto the screen to clear what was there before, then simply paste the required button from the second set.

Note: I changed the main screen image from number 1 to 10 so I could use images 1 to 5 for the buttons - it just makes things easier to understand if you are using image number 1 for the first button and so on...

OK that's it. If you aren't artistically challenged - like me - you could give the second set of buttons some tasteful graphical effect like a glowing outer edge or something - it's up to you.


Method 2 - Hidden Button Zones


This method is quite clever - and is better than method one because it allows for none rectangular buttons and it eliminates the need for all that If X>20 And Y>100 And X<300 and Y<200 business.

The theory is that you have two images - one normal that you see (like Screen1 above) and the other contains only the parts (zones) of the screen that you can click on. The second screen is never seen.

Each of these zones is a different colour and when you click on the screen with the mouse, the pixel at the exact X and Y position on the hidden screen is tested. If that pixel is black, you haven't clicked in a zone.

If it's any colour other than black, then it's a zone. The colour of the pixel defines the zone you clicked in.

As mentioned previously, this means that the zones (or buttons) can be any shape you like - ovals, circles, stars, you name it! If you click anywhere inside the shape it returns a colour.

So, we need a couple of new screens for the next example, so usual job next - save these two images:







As you can see, the top image is what you see on the screen. The bottom image contains coloured zones identical in shape and position to the buttons - the rest of the screen is black. This image is created in your paint program from the main screen you design, only the buttons are filled in with solid colour and the rest just left black. It's then saved with a different name (see below).

When we click the mouse on the buttons on the visible screen, we test the hidden screen at the same position and the colour returned tells us what button has been clicked on.

And now the down side - you cannot use JPG files for the hidden zone image. You must use a BMP file because JPG's are compressed files. If you save it as a JPG, then load it back in and zoom in on one of the coloured zone edges you will see that they are pixellated.

As we are testing the colour of pixels, these different shades will be detected as non-zone colours - we won't have a solid zone boundary from one colour to black. With BMP's, there's no compression so this problem doesn't occur.

As uncompressed .BMP files can be quite large, a tip is to create the colour zone file as a 256 or 16 colour image. The resulting file is much smaller and even a 16 colour image allows for up to 15 differently coloured zones (buttons).

This whole idea relies on the fact that DB uses something called 'Bitmaps'. No, not Windows BMP bitmaps - screens which can be created when we need them.

Up to 32 other screens are available - not including bitmap 0 (zero) which is the one we can always see. If we create bitmaps 1, 2, 3 or 4, they are in memory and we can't see them. The Set Current Bitmap command selects which one we want to draw to - not which one is actually seen - that is always bitmap 0!

So, we load Screen2 into an image and paste it onto bitmap 0 (the screen) then load Screen3 into bitmap 1 where it's hidden from view.

Want to see some code? OK...

Version 4 - Hidden Button Zones



OK, as there's a bit more going on before the main program loop I've moved it all into a procedure called Setup and called it with a Gosub Setup right at the beginning. Much tidier now!

In the main loop, as usual, we get the mouse X, Y and button status into Mx, My and Mc.

We then call the CheckRegion() function, passing the mouse X and Y position. As we use:

ColNum = CheckRegion(Mx,My)

this means that the function's return value is placed into the variable ColNum. This will be a 0 if the mouse isn't on a coloured zone and a non-zero value if it is.

The function itself simply flips to the hidden screen and tests the colour of the pixel at X,Y using Point(X,Y). It then flips back to screen 0 and returns the pixel colour value it found there.

Back in the main loop, if ColNum isn't 0 (black) and Mc=1 (the mouse button has been pressed) then we Gosub HandleButton.

In the HandleButton procedure, we have a series of Select..Case items which are basically the same as If..Endifs but are a bit tidier to look at.

Select ColNum.. Case 65535 is basically the same as saying If ColNum = 65535. If it is, then everything between the Case and EndCase is executed in the same ways as the code between If and Endif - had we used it.

But, those strange numbers? Where are they from?

Well, those are called 'Colour Values' and are what the Ink and Color commands use. As they can be between 0 and around 60 or so million, no-one is expected to know them all, so we use the RGB function.

RGB(0,255,255) simply converts to the colour number 65535 without you having to do the maths yourself.

Obviously if you do know the colour value number you want already, you can speed up your programs by entering the colour value directly - therefore doing away with a calculation which takes time - admittedly only a fraction of a second, but they all add up...

If you want to know how I found out what numbers to use, remove the Rem from the start of the Text line at the end of the main program loop. Run the program and move the mouse over the buttons. You didn't think I knew all the colour values did you?

Notice also, how accurate the button detection is around the star shaped buttons - you could never do this using method 1 in a million years!


Embellishment:

There's no way to do a nice outline highlighting version with simple 2D commands like with method 1 - because of the button shapes. Rectangles around unusual shapes doesn't look too good either.

However, you can use the image mouse-over method exactly the same way as shown previously. You just need to make sure that you paste the mouse-over button images in exactly the right place.

Here's an example. I've just done the three star buttons at the bottom to show you the method. Don't forget to save the three button images below first!













Version 5 - Alternative Images And Zones




As the examples are all roughly variations on a theme, by now you should have a good idea of what they are doing.

So briefly, example 5 loads the visible screen with the buttons into image 10 and puts it on the screen. It then loads the image with the colour zones on it into hidden bitmap 1 and sets the current bitmap to 0. (Whenever you load or create a bitmap, that bitmap becomes the current one, so you have to switch back to bitmap 0 afterwards or all future commands will be sent to bitmap 1 and you won't see anything happen).

We then load the three alternative button images into images 4, 5 and 6 respectively.

In the main loop, we call the CheckRegion() function as before and if the number returned isn't 0 (black) we gosub the HandleButton procedure. If it is 0 then the mouse isn't over a button, so we paste the background image.

In the HandleButton procedure, we use Select..Case to determine the zone colour the mouse is over and in each case we check to see if the mouse button has been pressed and act accordingly.

However, in the case of the last three buttons, (4, 5, and 6), the Else sections mean that if Mc doesn't equal 1 (the mouse button isn't being pressed), then we paste the respective alternative button image.

As you can see, this method really does give a precise mouse-over effect on non-rectangular buttons.


Method 3 - Buttons With Sprites


This method is also better than method one because you don't need to know where the buttons are on the screen. Instead, you use DB's sprite collision commands.

The theory this time is that you make all your buttons sprites and place them on the screen where you want them.

You have another very small hidden sprite (say sprite number 100) which you place at the mouse X,Y position and you simply test this sprite for collision. If you use:

OverButton = Sprite Collision(100,0)

...then the 0 parameter tells DB to return the number of any sprite that sprite 100 collides with. So, any number other than 0 returned is the actual number of the button the mouse is over.

OK, save the new background screen and the button images below, then run example 6:
























Version 6 - Buttons Made Of Sprites



So, a quick run-through on what's going on in this example...

As usual, in Setup, the screen background is loaded, followed by the six button images. We then create the six button sprites and place them on the screen. They don't have to be placed in any particular position - put them in an oval pattern if you like!

Next, we set the screen to a non-black colour and get a tiny 2 pixel square image for our hidden sprite (number 100) which we are going to place at the mouse position as we move it around.

Note: You have to change the screen colour because grabbing a bit of the default black screen will result in a black (transparent) sprite which obviously won't work as there are no non-black pixels in it to test for collision!

Finally, we create sprite 100 and paste the background screen in place. As sprites always appear over 2D, this doesn't wipe off the sprites we've just positioned.

In the main loop, we get the mouse details and then immediately position our hidden sprite 100 where the mouse is.

The line OverButton = Sprite Collision(100,0) will always return a 0 unless sprite 100 is colliding with another sprite. This will only happen when the mouse pointer is over one of the buttons.

And, as the value returned and stored in OverButton is the number of the sprite being collided with, we instantly know what button the mouse is over!

The next line gosubs the HandleButton procedure only if OverButton doesn't equal 0 (the mouse is actually over a button).

The HandleButton procedure is essentially the same as the previous examples - you just need to put your own handling routines for whatever your buttons are for.


Embellishment:

With this method there are a number of things you can do. As the buttons are sprites, you can jiggle them about, change the image they use or for a nice effect, scale or stretch them.

Changing the image is pretty much the same as in previous examples - load an alternative set in and just use the Sprite command with the alternative image value - setting it back to the default when the mouse moves off the button. I'll let you experiment with that yourself if that's the method you want to use.

I'll finish off with a version which scales the sprite buttons in a nice way...

Version 7 - Scaled Sprite Buttons



You should be able to figure out what this snippet is doing. The only exception possibly is the use of the array ButtonPos() created in the Setup procedure.

Quite simply, it's used to store the X and Y screen positions of each button. Why, I'll cover in a moment. It's dimensioned with:

ButtonPos(6,1)

The 6 means the array has 6 main elements - one for each button (ignoring element 0 for simplicity as there's no button 0). The second sub-element is dimensioned with a 1 - making two indexes - 0 and 1.

We'll use sub-element 0 to hold the X position and 1 to hold the Y position. So:

ButtonPos(3,0) - contains the screen X position of button 3 and

ButtonPos(3,1) - contains the screen Y position of button 3.

These values are stored at the point the six button sprites are created and positioned on the screen.

In the HandleButton procedure, if the mouse is over a button, but the mouse button isn't pressed, we now gosub a new procedure - ScaleSprite.

In ScaleSprite, we have a couple of small If...Then loops - one to scale the current sprite up and the other to scale it back down to it's original size. And this is where the array comes in...

When you scale a sprite, it is scaled with the top left corner locked into position - making it stretch down and to the right. To make it look right for our menu screen, it would look much nicer if it scaled with the centre of the button locked in place. To give this impression, you simply need to move the sprite up and to the left as it is scaled.

This is why each button's X and Y position is required and storing them in an array allows us to access the correct X and Y values by using the OverButton variable - which always contains the number of the button the mouse is over.


Adding Menus To Your Programs

Actually writing the code to add menu screens to your programs is quite straight forward - provided your program has a well-structured layout.

The menu is best placed in it's own procedure and should be contained within a Repeat..Until loop. So, if you need a main menu, create a procedure called Main_Menu and use something like the following pseudo-code:



Important: MMExitFlag MUST be set to 0 before dropping into the Repeat..Until loop. If you don't, on the very next visit to the main menu, the flag will still equal 1 and the Repeat..Until loop will immediately be exited.

In your program, you would call the Main_Menu procedure at the start of your program before dropping into your main program loop:



When the player clicks on the Play Game button, the exit flag is set to 1 and the loop is exited - dropping back into the main program loop and the game starts.


Multiple Menu Screens

New users often get confused when implementing multiple menu screens. But, if you use the program layout defined above, then adding more menu screens is a doddle!

OK, say your main menu screen has an Options button.

All you need to do is create a new procedure called Options_Menu with exactly the same layout as Main_Menu. (You can copy/paste the Main_Menu procedure and edit it if you like).

Once you have copied it, the first thing you need to do is change all occurences of the exit flag variable name in the new procedure. With the main menu it was called MMExitFlag so for the options menu it can be OMExitFlag.

Note: If you don't do this, and use the same variable name for all menu screens, when you return to the main menu from a sub-menu, the exit from the first menu will trigger the exit from the second.

Next, change the menu screen image number you paste and alter the blocks of code which check which buttons are clicked - so they suit the Options menu screen.

This time, there will be a 'Back' or 'Previous Menu' button and it is this button which sets the exit flag to 1 - at which point, the program drops back to the previous menu - Main Menu. All you have to do is paste the main menu image on the screen before dropping out of the Options Menu procedure.

Adding yet more sub-menus is easily done by following the same procedure as many times as you require, so your Main Menu screen can have as many sub-menus running off it as you want. Your main program code would therefore look something like:




OK, that's the end of yet another epic tutorial and I hope it's made the subject of making in-game menus a little clearer.

The only problem now is deciding which of the three methods to use...

There are many more tutorials and example code snippets on TDKMan.com - my DBC game programming site. Click on the link below - it's free to join and everyone's welcome!

TDK_Man

* TDK's Web Site *

Back to top
Profile PM Email Website
Lucifer
18
Years of Service
User Offline
Joined: 26th Dec 2005
Location:
Posted: 13th May 2007 15:39
Link
NICE tutorial tdk, thanks alot!


i like pancakes..
Back to top
Profile PM
Anto
18
Years of Service
User Offline
Joined: 30th Oct 2005
Location: Brisbane, AUS
Posted: 14th May 2007 09:40
Link
Very useful tutorial. Looking forward for more.

Thanks TDK for your time and effort

Anto
Back to top
Profile PM
MatriX
20
Years of Service
User Offline
Joined: 19th Oct 2003
Location: Deer Park, New York
Posted: 20th May 2007 17:46
Link
A most excellent tutorial TDK_Man! You simplified a process I dreadgingly was going to do a very mudane, boring way and made it simple, easy and intuitive.

People like you are what make this community so amazing.

Thank you for your efforts!

Thank you TGC for creating such amazing products!

Success does not come with meeting the minimum requirements.
Back to top
Profile PM Email Website
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 20th May 2007 18:14
Link
You're welcome - glad it was helpful...

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
Sinani201
16
Years of Service
User Offline
Joined: 16th Apr 2007
Location: Aperture Science Enrichment Center
Posted: 25th May 2007 05:41 Edited at: 8th Jun 2007 02:26
Link
Great tutorial. This will definitely save up space of people asking "How do you make a menu?"
I am starting to use this technique in nearly all of my games!! Great job.

Did someone say 3D scanning on my desk, or was that just an AdBot?
What happens when when you mix coke, pop rocks, vinegar, and baking soda?
Back to top
Profile PM
ozmoz
16
Years of Service
User Offline
Joined: 25th Apr 2007
Location:
Posted: 29th May 2007 19:01
Link
This tutorials is very good
Back to top
Profile PM Website
Sinani201
16
Years of Service
User Offline
Joined: 16th Apr 2007
Location: Aperture Science Enrichment Center
Posted: 26th Jun 2007 21:48
Link
Strange... when I use my own custom color zones the program freezes up when I click the button.

Did someone say 3D scanning on my desk, or was that just an AdBot?
What happens when when you mix coke, pop rocks, vinegar, and baking soda?
Back to top
Profile PM
Jmahmood
17
Years of Service
User Offline
Joined: 3rd Apr 2007
Location: not sure
Posted: 28th Jun 2007 13:29
Link
Cant we use a simple zoneclick command
like the one below:-

if zoneclicked(750,243,765,260)=1
endif

REM ZONE CLICKED FUNCTION
function zoneclicked(x1,y1,x2,y2)
clicked=0
if mousex()>x1 and mousex()<x2
if mousey()>y1 and mousey()<y2
if mouseclick()=1
clicked=1
endif
endif
endif
endfunction clicked

We can find the zones by a simple software..
Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 28th Jun 2007 15:12
Link
Quote: "Cant we use a simple zoneclick command"


Can't we use the Code button?

But seriously, of course you can! The tutorial (if you read it) explains how that method works - when you understand that, it's entirely up to you how you implement it...

But it's just not the best of the three methods.

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
Pixelator
16
Years of Service
User Offline
Joined: 8th Jul 2007
Location: here
Posted: 11th Jul 2007 05:02
Link
Very good tutorial, thanks. this will make my game much more professional, while keeping to my game's strictly enforced screen resolution : 640 by 480. my game is called Mr. Pixel. It is fun, so far but is going to probably end up being very long.

The problem with the gaming community is people think that the resolution of a game defines how good it is. I am not afraid to make a game where the main character is 50x50.
Back to top
Profile PM Email
Angry kreyon
18
Years of Service
User Offline
Joined: 19th Aug 2005
Location:
Posted: 23rd Aug 2007 15:53
Link
@TDK - Thanks for the Kick A$$ Tutorials! they are very helpfull and made tons of sense. because you were so gracious to share them with the community, I have decided to make some menu items for use with the tutorials. I know not everyone is an artist (me either) or a coder (me either!) but thanks to people like you(TDK) we can begin to get better! so this first installment is a simple red version of the Menu Items (I say items because I am not supplying a menu only the artwork for one, and the artwork is based on TDK's tutorials on Menu's.(sizes etc...))

anyway Enjoy! and use however you wish, no credit needed, but would be nice. Just make sure to credit TDK.(a very nice and helpful person!)

Attachments

Login to view attachments
Back to top
Profile PM Email
Angry kreyon
18
Years of Service
User Offline
Joined: 19th Aug 2005
Location:
Posted: 23rd Aug 2007 15:53
Link
oh yea, here is a screenie of a basic menu with my items. (there are lots of buttons to choose from.)

Attachments

Login to view attachments
Back to top
Profile PM Email
vampyre
21
Years of Service
User Offline
Joined: 14th Nov 2002
Location:
Posted: 24th Aug 2007 12:48 Edited at: 9th Oct 2007 19:25
Link
Thanks for the Tutorial TDK Man, I have been racking my brains out on how to do a menu screen especailly assigning functions to joystick and mouse axis and buttons to controlling vehicles. Basically getting the mouse to click on a sprite or bitmap and that cantorls the vehicle to go forward or click on the same sprite and undo that button and click on the sprite again and put a different button or axis again.


If I get any problems I will get in touch with you , bye and thanks for your tutorials.
Back to top
Profile PM
Dark Dragon
16
Years of Service
User Offline
Joined: 22nd Jun 2007
Location: In the ring, Kickin\' *donkeybutt*.
Posted: 27th Aug 2007 21:45
Link
nice. very useful. Thanks!
Back to top
Profile PM
black stone
16
Years of Service
User Offline
Joined: 17th Sep 2007
Location:
Posted: 1st Oct 2007 00:45
Link
good stuff!
Back to top
Profile PM
Pixelator
16
Years of Service
User Offline
Joined: 8th Jul 2007
Location: here
Posted: 7th Oct 2007 04:46
Link
Finally Got around too implementing this and it is making me realize how important it is to organize your code well. For example, i hade aboute 5 trigger variables that i knew were vital to the game but i had no idea what they did. Ended up wasting about 5 min. of valuable coding time. Not going to make that mistake again.

5 years later...

WTF!!!! My code is sooooooooo messyyy WHY DIDN'T I LOOK AT TDK'S TUT ON CODE TIDYING!!!!!?????!!??!?!!?!??


Maryville Game Developers
Visit our website at http://www.freewebs.com/maryville-game-developers/index.htm
Back to top
Profile PM Email
Binary Coder
17
Years of Service
User Offline
Joined: 26th Feb 2007
Location: Queensland, Australia
Posted: 13th Oct 2007 07:14
Link
Thanks again TDK!

Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 15th Oct 2007 20:56
Link
Thanks TDK!! You saved me a bunch of time trying to learn how to make menus by doing google searches. Thank you so much for taking the time to write these wonderful tutorials.
Back to top
Profile
jason p sage
16
Years of Service
User Offline
Joined: 10th Jun 2007
Location: Ellington, CT USA
Posted: 17th Oct 2007 20:01
Link
Yes - TDK - I've been stomping in GDK land but seeing this was a reminder of how cool you are


http://www.jasonpetersage.com/?PAGE=ironinfantry&SECTION=ironinfantry
Back to top
Profile PM Email Website
Libervurto
17
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 20th Oct 2007 17:43
Link
@Yodaman
Quote: "Thanks TDK!! You saved me a bunch of time trying to learn how to make menus by doing google searches. Thank you so much for taking the time to write these wonderful tutorials."

Don't bother with google, the only useful place it'll point you for DB is back here
use the forum search at the bottom of the page (they should put that at the top).

@BOOH
Quote: "Cant we use a simple zoneclick command"

As TDK shows, you can only check a square zone using that method (unless you use some tricky maths).

Back to top
Profile PM Email
demons breath
20
Years of Service
User Offline
Joined: 4th Oct 2003
Location: Surrey, UK
Posted: 20th Oct 2007 17:48
Link
A circle zone would be pretty easy to do as well.



I really should learn some applications of maths which aren't either pythagoras or trig graphs

http://jamesmason01.googlepages.com/index.htm
Back to top
Profile PM Website
Libervurto
17
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 21st Oct 2007 03:00
Link
I don't understand that and it didn't work in my test


Back to top
Profile PM Email
demons breath
20
Years of Service
User Offline
Joined: 4th Oct 2003
Location: Surrey, UK
Posted: 21st Oct 2007 12:21 Edited at: 21st Oct 2007 12:36
Link
hmmm maybe I should have tested that before I typed it here. I had also just got back from a 9 hour shift at work which started at about 5 in the morning so I might have a been a bit tired.

It was Pythagoras' theorem basically. It says that if there is less than or equal to 5 pixels distance between the center of the circle and the outside then it would place a dot. That might be why it didn't appear to work, there was practically no area in which you could click to have an effect

It would work better with the SQRT command like so:




PYTHAGORAS


a^2 + b^2 = c^2


oh this shows quite well how it works

This is useful in gaming as you can find the distance along a line which isn't straight along one axis. To find this distance (c), you find the distance between A and B, which is a lot easier as here they are the x and y axis

http://jamesmason01.googlepages.com/index.htm
Back to top
Profile PM Website
Libervurto
17
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 25th Oct 2007 18:51
Link
That diagram is cool
I still don't see how that applies to circles

Back to top
Profile PM Email
demons breath
20
Years of Service
User Offline
Joined: 4th Oct 2003
Location: Surrey, UK
Posted: 25th Oct 2007 19:27 Edited at: 25th Oct 2007 21:19
Link
right you're at the angle between b and c. You want to find the distance to the angle between a and c. Now, you want a circle. You make it up with loads of triangles:



(sorry I know it's not as sexy as the other one)

Obviously there are loads of triangles but the point is that every one finds the distance between the center and the circumference.

Therefore, everything less than that distance away from the center in any direction is inside the circle. If the mouse clicks anywhere within (the radius) distance of (the center of the mouse button) then it counts as a button click.


EDIT:

Try this:



(haven't tested it yet but that should work)

http://jamesmason01.googlepages.com/index.htm
Back to top
Profile PM Website
Beast E Gargoyle
17
Years of Service
User Offline
Joined: 15th Feb 2007
Location: Sunny San Diego, CA
Posted: 10th Jan 2008 20:24 Edited at: 10th Jan 2008 20:25
Link
@ Tdk I want to use theory 2( the menu with the star and oval buttons) menu for my upcoming game and I have a few questions I can't figure out. 1) I'm using a dragon picture as my background but it's not showing the whole dragon what should I do, shrink it in code or re save it smaller? 2) the star and oval buttons look bad and pixelated, so do I save the image as .bmp to fix this??
Here is my code, please help. All the best, Beastegargoyle


Streets of Rage the best 3d beat em up ever check out the wip on apollo forums!
Back to top
Profile PM Email Website
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 10th Jan 2008 20:36
Link
The image you use as the screen the user clicks on can be a jpg file, but the corresponding hidden screen needs to be a bmp because when jpg files are saved, solid areas of colour become pixellated and you get areas of colour slightly different to the colour used in the button zone.

Create an image the same size as your screen with the buttons on it. Save it as a jpg file.

Then change the buttons in this image to solid areas of colour and save it as a bmp file. (Reduce it to 16 colours first to make the bmp as small as possible).

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
Beast E Gargoyle
17
Years of Service
User Offline
Joined: 15th Feb 2007
Location: Sunny San Diego, CA
Posted: 10th Jan 2008 20:40 Edited at: 10th Jan 2008 20:48
Link
I saved the dragon picture as a .bmp It neither shrank nor got rid of the pixelation. I'm sorry i can't figure this out, i'm new to coding a menu, and don't quite understand your last post. All the best, Beastegargoyle

Streets of Rage the best 3d beat em up ever check out the wip on apollo forums!
Back to top
Profile PM Email Website
demons breath
20
Years of Service
User Offline
Joined: 4th Oct 2003
Location: Surrey, UK
Posted: 21st Jan 2008 19:49
Link
if it's already pixellated, then saving as bitmap won't remove this. You need to start from scratch and then save as bitmap to get rid of the pixellation which was created when you saved it as a .jpg.

"A West Texas girl, just like me"
-Bush
Back to top
Profile PM Website
Ed222
16
Years of Service
User Offline
Joined: 3rd Nov 2007
Location: Calgary
Posted: 28th Jan 2008 02:34
Link
@TDK
for the sprite metiod I think this would be more easy make the mouse in to a sprite like the windows xp mouse sprite and then if the button sprites and mouse sprite is colliding and the mouse if click then e.t.c. happens.

P.S. you may ask where the heck do I get a mouse sprite well I attached it to the post but it's a gif so you have to use paint and convert it your self also make the background of the mouse black.

Windows Is better than everything

Attachments

Login to view attachments
Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 2nd Feb 2008 16:03
Link
Tutorial updated to include actually coding the menu screens in your programs.

Includes adding both single and multiple menu screens, (such as an Options Menu accessed via a button from the Main Menu screen).

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
DB newbie
18
Years of Service
User Offline
Joined: 13th Nov 2005
Location: um..... i dont remember.
Posted: 1st Mar 2008 03:16 Edited at: 1st Mar 2008 03:23
Link
hey tdk right now i am using the menu that you provided and i want to make my own i was just wondering how the heck you got those coordinates for the first example...can you help?


thanks, awsome tutorial

edit: ok things are acting strange, when i use your stuff as a placeholder the answer is never displayed like it says wich number to add and stuff but never displays teh answer


Come see the WIP!

Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 1st Mar 2008 03:45
Link
Quote: "how the heck you got those coordinates for the first example"


Write a small program which loads and displays the image containing the buttons the drops into the main DO..Loop. Inside that, just print the mouse co-ords in the top corner.

Place the mouse pointer at the top left and bottom right corners of each button and write the values down.



Quote: "the answer is never displayed"


If you are using DBPro, then it probably just needs an extra Sync compared with DB Classic. Not sure where without seeing what you've already got, but try adding another one after the text line that's not appearing.

To be honest, I recommend that you use the second method (sprites). It's far better. The first method is only there to be comprehensive and is far from the best way to do it.

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
DB newbie
18
Years of Service
User Offline
Joined: 13th Nov 2005
Location: um..... i dont remember.
Posted: 1st Mar 2008 03:59
Link
thanks TDK thats all it needed was a sync...i shall work on making my own menu and use sprite menus with my next program,

i still have the problem of going back to the original screen...

here is my add function and the last part is were im trying to get it to go back.



were would use newbies be without you tdk

oh and im using DBpro


Come see the WIP!

Back to top
Profile PM Email
gearce
17
Years of Service
User Offline
Joined: 18th Dec 2006
Location: ex SCOTLAND, now MELBOURNE, Australia
Posted: 1st Mar 2008 04:12 Edited at: 1st Mar 2008 04:16
Link
This is from TDK_Man's post

Posted: 10th May 2007 01:00 Edited: 2nd Feb 2008 08:58

above

Quote: "There are many more tutorials and example code snippets on TGPF - my game programming forums. Click on the link below - it's free to join and everyone's welcome!

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *"


and

this is from TDK_Man's

« Reply #17 on: February 11, 2008, 03:27:42 PM »

at

http://www.computechtenerife.com/forum/index.php/topic,78.15.html

Quote: "To be honest, this forum is so under-used I'm seriously thinking of closing it down due to lack of traffic."


Come on folks, don't allow this to happen. You can learn a lot from here even though you may think you don't have to.

gearce
(GRC)

LANG MEY YER LUM REEK

The future depends on what we do in the present.
Back to top
Profile PM
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 1st Mar 2008 17:06
Link
Quote: "i still have the problem of going back to the original screen..."


Actually, I wouldn't personally have a call to a procedure from within a function - mainly because of the possibility of variable scope problems.

A Gosub'ed procedure expects to see variables in the rest of your program and there's a chance you may call a procedure from a function expecting it to see the variables in that function - and as they are local it won't. This can cause difficult to spot errors.

Your Add() function would work no differently as a procedure but would eliminate the possibility of this happening.

I know some people say they never use Gosub - only functions, but I have yet to see a convincing reason for doing so. Functions have their place, but I firmly believe that they can unnecessarily complicate your code if you put everything in them.

When playing the game you should be going around the main loop and your menu screen would be another loop - Repeat..Until maybe - in a procedure. You Gosub this at the start of the program so when exiting it, it returns and drops into the main loop.

At the end of the game, you simply Gosub this procedure again and once again, when it's exited it drops back to the main loop and carries on playing.

I covered this in detail in another thread somewhere. I'll see if I can find it and post a link.

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
DB newbie
18
Years of Service
User Offline
Joined: 13th Nov 2005
Location: um..... i dont remember.
Posted: 2nd Mar 2008 05:40
Link
whould this be a simple way to go back...i havent tried this




Come see the WIP!

Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 2nd Mar 2008 14:05
Link
Quote: "whould this be a simple way to go back"


Impossible to say without knowing what your program does.

The code snippets at the end of the above tutorial show the easiest method to set up single or multiple menus in your programs.

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
DB newbie
18
Years of Service
User Offline
Joined: 13th Nov 2005
Location: um..... i dont remember.
Posted: 3rd Mar 2008 01:00
Link
hmmmmi looked at those last couple of snippets of code withteh procedures and im lost with that....oh and by hte way here is all my code so you know what im generally working with,






Come see the WIP!

Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 3rd Mar 2008 19:09
Link
You should really run that code snippet through DBA Tidy then edit your post to paste a properly indented version over the one you have posted.

The font the forum uses for code snippets is awful and makes unindented code extremely difficult to read - at least for me, (I don't know about anyone else).

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
Enigma
16
Years of Service
User Offline
Joined: 11th Dec 2007
Location: In your closet
Posted: 4th Mar 2008 02:03
Link
Awesome job man! I really like the tutorial, when I finally begin to make my game come this summer I am so going to use this

All hope is lost when one subjects to the malevolence of apathy. ~by me~
Trust in someone is a greater compliment than love. ~By me~
Back to top
Profile PM Email
DB newbie
18
Years of Service
User Offline
Joined: 13th Nov 2005
Location: um..... i dont remember.
Posted: 8th Mar 2008 17:15
Link
tdk i should have my code rdy by a week...im grounded from computer because i have a C in spanish (i hate that class), nothing against you tdk


Come see the WIP!

Back to top
Profile PM Email
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 8th Mar 2008 18:56
Link
Ningún problema.

No hablo español muy bien y vivo en España!

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
jason p sage
16
Years of Service
User Offline
Joined: 10th Jun 2007
Location: Ellington, CT USA
Posted: 8th Mar 2008 19:00
Link
I DISAGREE!!!! ..... What'd you say?


http://www.jasonpetersage.com/?PAGE=ironinfantry&SECTION=ironinfantry
Back to top
Profile PM Email Website
Insert Name Here
17
Years of Service
User Offline
Joined: 20th Mar 2007
Location: Worcester, England
Posted: 8th Mar 2008 23:45 Edited at: 8th Mar 2008 23:46
Link
I think he said:

Quote: "No problem.

I do not speak Spanish very well, and I live in Spain!"


Now tsk tsk tsk, TDK, the AUP says no talking in other languages.

Lee Bamber - Blame Beer
Back to top
Profile PM
jason p sage
16
Years of Service
User Offline
Joined: 10th Jun 2007
Location: Ellington, CT USA
Posted: 8th Mar 2008 23:51
Link
LOL - So.. TDK - Concerning this Tutorial.. You wouldn't mind giving us a thought or two on GFX based GUI would ya? Like the kinda ya draw by hand...from scratch? At least a penny for your thoughts on Sprites, versus plains, lock to screen or not...etc. Any high level chitter chatter that could get the mind thinking on a good approach?


http://www.jasonpetersage.com/?PAGE=ironinfantry&SECTION=ironinfantry
Back to top
Profile PM Email Website
TDK
Retired Moderator
21
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 9th Mar 2008 08:35
Link
Quote: "You wouldn't mind giving us a thought or two on GFX based GUI would ya?"


Have you seen this thread of mine?...

http://forum.thegamecreators.com/?m=forum_view&t=122181&b=6

There are currently 7 components in that collection and they are for DBC - so I've not tried them in DBP. They are all media-less and all drawn by the program - no images are loaded off disk.

As a thorough test for them I decided to use them in the program in this thread:

http://forum.thegamecreators.com/?m=forum_view&t=125358&b=10

..and in the process ran into a number of problems in the way that the functions worked - especially in a 3D environment.

So I've started re-writing them using sprites - which I wasn't using before. Sprites are handy because unlike pasted images, the Sync command doesn't wipe them off the screen.

Over the next few days I'll finish converting the other functions to use sprites too.

TDK_Man

* TDK's Game Programming Forums - Open To All - DB & Team Request Boards *

Back to top
Profile PM Email Website
jason p sage
16
Years of Service
User Offline
Joined: 10th Jun 2007
Location: Ellington, CT USA
Posted: 9th Mar 2008 14:30
Link
WOW TDK... NICE WORK!

You have "Standard What ya Expect" window dialogs but they have thier own look - I LIKE EM.

I also read about a little gui designer? PERFECT!

the model program level editor thingy.... Looks HOT.

Wow - Great Stuff. I See what you mean about the sprites. Mistrel always wrote a really neat Java-LOOKING Pull out menu like in a webpage often... though its using a DirectX Text Addon plugin so doesn't help my in GDK - I could just rip the Text stuff myself...

Personally I like your approach. If Anything I would use DirectX to bring system fonts into IMAGES while rendering... so I could dynamically render faster enough on an image... though frankly I have no quams about using a font bitmap file and doing something along the lines of pure homegrown bitmap fonts.

Anyways - AWESOME IDEAS IN THERE! thanx!


http://www.jasonpetersage.com/?PAGE=ironinfantry&SECTION=ironinfantry
Back to top
Profile PM Email Website
Beast E Gargoyle
17
Years of Service
User Offline
Joined: 15th Feb 2007
Location: Sunny San Diego, CA
Posted: 10th Mar 2008 16:47 Edited at: 10th Mar 2008 16:48
Link
@TDK or anyone- Could you please point me to a good health bar tutorial or a good health bar example in Dbp, because I'm making a healthbar with a person's icon beside it and want the icon to go beside the health bar of the character your playing with. Sorry about stealing the thread. Thanks.

Streets of Rage the best 3d beat em up ever check out the wip on apollo forums!
The Last Great Swordsmen Wip here http://forum.thegamecreators.com/?m=forum_view&t=124414&b=19
Back to top
Profile PM Email Website
Back to top

Login to post a reply

Server time is: 2024-04-16 19:12:59
Your offset time is: 2024-04-16 19:12:59