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.

Newcomers DBPro Corner / [Tutorial] Zotoaster's Tutorial on making Buttons

Author
Message
Zotoaster
19
Years of Service
User Offline
Joined: 20th Dec 2004
Location: Scotland
Posted: 3rd Nov 2005 00:46 Edited at: 3rd Nov 2005 00:47
I'm about to show you) much better is:

-They're fast and don't have to be drawn every loop
-They return proper data
-They're numbered so you can change certain ones



I have uploaded a simple butotn sheet, which uses 4 button pictures in one bitmap.. going from top to bottom, and it doesn't

matter what size they are , they are split automatically in the program..

We will start with a simple setup..


(please note to set the directory to where you saved the button image)

Now, to load, and split up the buttons.. We will load it as a bitmap, and grab each image, and there is no need to change the

size of the image you grab, because it always only grabs a quarter of the bitmap..



This will load up the button images..

Now we need to create an array for the buttons, this array will take up to 20 buttons, but you can change it to as much as

you want (up to 65535 I believe), but we're only make 5 buttons..



(if you do not understand arrays then I made a tutorial about AI and arrays somewhere in this board)
Notice the "button_state", this will control the state of the button, depending of the actions of the mouse and whether the

button is active or not.. here is what each state means:
1~ Normal (not covered or clicked, just normal)
2~ covered (if the state is 2, then change the image to the 2nd one)
3~ Clicked (if the state is 3, change image to 3rd image)
4~ Inactive (you can't click it or anything)

so, if you wanted to say.. if you click button 1, then change button 5 to inactive:
if button_state(1)=3 then button_state(5)=4

I set them all to one to start them off...

You get it?


Now we will setup the text to look right, and the sprites, so the text shows above the sprites..


Next - simple, make the main loop..



Then, in the loop, we will call a function (which we will create soon, note that once youve put this bit in, and you don't

have the function, then the program won't work)

Let's call the function 5 times, to make 5 buttons


Notice, the first parameter increases as I go down, this is the butotn number, which is actually the sprite number, but you

control the button too from that number..

These are the parameters:
PushButton(number, posX, posY, sizeX, sizeY, Caption$)

Also notice, that on button number 4, I've changed it's state to 4, so it's inactive, this can be done inside OR before the

main loop .

Now, to make the function..

We will start with:



Notice, that there is no return value to return the data from the button, as I have already said, this will be done with

arrays, which are better

now, add this inside the Function:


What this does is: makes sure that the state isn't 4 (because 4 is the locked one), and if it isn't, check where the mouse

is, and if it's clicking, and change the data for that current button from there.. the drawinfor the button isn't done

depending on the positions and state of the mouse, but depending on the state of that current buttom.. ie. if

button_state(1)=1 then sprite 1,etc etc... you get my drift.

now add this:


This code checks the state of the button, and makes sure that the sprite for that button doesn't already exist, and if it

doesn't, it draws it as the number for that button... If the sprite for that button DOES exist, it just changes the imahge it

uses, so it is very efficient

Now, all we need to do is make the text..

This text will look like it's been etched into the button, but when you click, it will look like it sticks out, hence giving

it a 3D clickable look.



Don't forget to add this inside the function..

And that's about it.. now some tips..

1- You can make your own functions such as "hide_button" etc.. that is what is so good, you can't do that when you draw boxes

to the screen.. and, you can even rotate the buttons etc.

2- Instead of checking the coordinates of the mouse, it would be wise to make a tiny little sprite and position it at the

mouse, and check if the sprites collide.. because then, you can have any shape of button you like, round, triangle, you name

it..

3- These buttons redraw what was last behind them because they are sprites, the other kinds where you draw boxes to the screen wouldn't unless you always refreshed the screen, which would slow it down.

4- Have fun

[edit]

Here is all my code that I use, just incase you need it.




Attachments

Login to view attachments
Darkbasic MADPSP
18
Years of Service
User Offline
Joined: 15th Jun 2005
Location: Uk
Posted: 3rd Nov 2005 19:58
Thanks zotoaster this is going to help a lot of people

Zotoaster
19
Years of Service
User Offline
Joined: 20th Dec 2004
Location: Scotland
Posted: 3rd Nov 2005 19:59
Thank you


Darkbasic MADPSP
18
Years of Service
User Offline
Joined: 15th Jun 2005
Location: Uk
Posted: 3rd Nov 2005 21:19
these are nice to work with the newcomers will find this a good thing

Fox Dark Master
19
Years of Service
User Offline
Joined: 20th Jul 2004
Location: Portugal
Posted: 3rd Nov 2005 22:16 Edited at: 3rd Nov 2005 23:54
here's a litle contribution ( I need to put the interface but....)


and now you just need to define dome things:


To call it, just need to put the number of options you want on the funcion:



Have fun
WARNING: it wasn't tested yet, this is just pure paper code!!! logically, it works....


True Phantasy

Login to post a reply

Server time is: 2024-03-29 02:15:47
Your offset time is: 2024-03-29 02:15:47