Buttons and GUI? - GameCreators Forum

Author

Message

Sphelx

21

Years of Service

User Offline

Joined: 29th Mar 2003

Location:

Posted: 29th Mar 2003 19:15

Link

I've looked in numerous places but can't find tutorials or coding relevent to the creation of buttons or menu systems.

I'm just trying to create a game menu at the minute, leaving the game aside till i can get an interface. I've created text in the places i want buttons but i can't find any commands relevent to buttons or interface commands.

Sphelx,

Back to top

Profile PM Email

Xoid

21

Years of Service

User Offline

Joined: 8th Mar 2003

Location:

Posted: 29th Mar 2003 19:26

Link

well... it depends how you want to code your interface, alot of people use the sprite based method.

you could use a function like this code get a certain region of the screen.

so when you move your mouse over a certain area your sprite appears etc...

function BoundingBox(sprite_num,left#,top#,right#,bottom#)
rem determines whether mousepointer is in a region
if ((mouseX()>=left# AND mouseX()<=right#) AND (mouseY()>=top# AND mouseY()<=bottom#))
show sprite sprite_num
else
hide sprite sprite_num
endif
endfunction

coding a menu system isn't difficult if you think about it

Do not anticipate the outcome of the engagement, let nature take it's course, and your tools will strike at the right moment - from "Tao of Jeet Kune Do" by Bruce Lee

Back to top

Profile PM Website

Dave J

Retired Moderator

21

Years of Service

User Offline

Joined: 11th Feb 2003

Location: Secret Military Pub, Down Under

Posted: 30th Mar 2003 04:01

Link

I just load a bitmap to screen and when you click the mouse it checks if you clicked where the button is, if you did, it does its thing.

"Computers are useless they can only give you answers."

Back to top

Profile PM Email

John H

Retired Moderator

22

Years of Service

User Offline

Joined: 14th Oct 2002

Location: Burlington, VT

Posted: 30th Mar 2003 04:59

Link

Yep but you need code similiar to Xoids.

RPGamer

Current - RPG: Eternal Destiny
http://www.halbrosproductions.netfirms.com
Dont ask those questions! Read the help files lazy! Oh ya, and Tat has a plugin for that!

Back to top

Profile PM

Brent_Seraphim

21

Years of Service

User Offline

Joined: 1st Dec 2002

Location: United States

Posted: 30th Mar 2003 05:31

Link

hehe,

If you read Xoid and Exeat's message you will find they are virutaly the same thing, one just gave examples of code, Exeat just explained it in english

Thats about how my code works. And yes it works! (Barely

)

Quote :

"coding a menu system isn't difficult if you think about it"

Blessed words of wisdom!

"Laugh to scorn the power of man..."

Back to top

Profile PM Email

Dave J

Retired Moderator

21

Years of Service

User Offline

Joined: 11th Feb 2003

Location: Secret Military Pub, Down Under

Posted: 30th Mar 2003 06:02

Link

Yeah, I was too lazy to read his code =P

"Computers are useless they can only give you answers."

Back to top

Profile PM Email

Xoid

21

Years of Service

User Offline

Joined: 8th Mar 2003

Location:

Posted: 30th Mar 2003 15:13

Link

Brent_Seraphim, If Sphelx wants a tutorial i'll be happy to supply him with one, but you know he shouldn't have too much of a problem after my and Exeat's explaination, LOL, hehe.

ok, ok, so I could have explained it abit BETTER

Do not anticipate the outcome of the engagement, let nature take it's course, and your tools will strike at the right moment - from "Tao of Jeet Kune Do" by Bruce Lee

Back to top

Profile PM Website

Xoid

21

Years of Service

User Offline

Joined: 8th Mar 2003

Location:

Posted: 30th Mar 2003 15:57

Link

ok, Sphelx, try this out, the code below will create a simple MenuBar for you,
all you and then save as a bitmap "MenuSystem.bmp", so you can just call it from within your code (Load Bitmap "MenuSystem.bmp",1) or whatever.

If you use/modify my BoundingBox code to suit your needs you should be able to write a GUI in no time.

+ Code Snippet

CreateMenuBar:
 ink rgb(200,200,200),rgb(192,192,192)
 rem Top toolbar
 box 0,0,screen width()-1,40
 rem Left border
 line 0,15,0,screen height()-1
 rem Right border
 line screen width()-1,15,screen width()-1,screen height()-1
 rem Bottom Toolbar
 box 0,screen height()-16,screen width()-1,screen height()-1

 ink rgb(128,128,128),rgb(200,200,200)
 line 0,20,screen width()-1,20

 ink rgb(255,255,255),rgb(200,200,200)	
 line 0,21,screen width()-1,21

 ink 0,rgb(200,200,200)
 set text opaque

 rem Create Menu Options
 text 20,0,"File"
 text 60,0,"Edit"
 text 100,0,"View"

 text screen width()-40,0,"Help"

 get image 1,0,0,screen width(),screen height()

 save image "MenuSystem.bmp",1
return

Do not anticipate the outcome of the engagement, let nature take it's course, and your tools will strike at the right moment - from "Tao of Jeet Kune Do" by Bruce Lee

Back to top

Profile PM Website

Megaman Zero

21

Years of Service

User Offline

Joined: 25th Jan 2003

Location: United States

Posted: 30th Mar 2003 23:39 Edited at: 30th Mar 2003 23:40

Link

Someone gave me a menu system that they made for people to learn it. Only the Exit button works, but the menu shows how to place the buttons & other stuff, & shows how to get the button to work if its clicked. Dont remember who gave it to me, but it really helped out. I thank whoever it was greatly.

If you want it, I can send it to you, email me at shadow_guyver_iii_2000@yahoo.comif you want it, its got multiple reminders to help you out.

The Shadow Guyver
http://heero_yuy1983.tripod.com/nrtp/
http://groups.msn.com/EmpireofMan

Back to top

Profile PM Website

Dave J

Retired Moderator

21

Years of Service

User Offline

Joined: 11th Feb 2003

Location: Secret Military Pub, Down Under

Posted: 31st Mar 2003 04:40

Link

Heh, funnily enough earlier today I had to make a menu system anyway, so using Xoid's function I came up with something like this:

`Default variables and what not
dispWidth = 640
dispHeight = 480

SplashOn = 1
MenuNum = 0

`This centers the image on our screen
`320x240 is half of our images size in case you
`were wondering what values they were
imgX = (dispWidth/2) - (320)
imgY = (dispHeight/2) - (240)

Load Image "Common\Splash.bmp", 1
Sprite 1, imgX, imgY, 1

Load Image "Common\MainMenu.bmp", 2
Sprite 2, 0, 0, 2
Hide Sprite 2

For n = 3 To 8
   Load Image "Common\M" + str$(n - 2) + ".bmp", n
   Sprite n, imgX + 40, imgY + 78, n
   Hide Sprite n
Next n

`Set Sync
Sync On
Sync Rate 0

`Start Loop
Do

`The next bunch of code does the following stuff:
`  Check if Mouse is clicked
`  Check if it was clicked on the x axis of a 'link'
`  Check if it was clicked on the y axis of a 'link'

`New Game
   ButtonCheck(3, 430, 73, 605, 90)

`High Scores
   ButtonCheck(4, 418, 96, 605, 103)

`Settings
   ButtonCheck(5, 465, 123, 605, 130)

`About
   ButtonCheck(6, 500, 148, 605, 155)

`Credits
   ButtonCheck(7, 485, 171, 605, 178)

`Exit
   ButtonCheck(8, 523, 195, 605, 202)

If MouseClick() = 1

If SplashOn = 1
         Hide Sprite 1
         Show Sprite 2
         SplashOn = 0
      EndIf

`MouseClick
   EndIf

`Update
   Sync

`End Loop
Loop

`MainMenu2D
Return

`This function checks if you clicked within said region, and shows a iamge based on it
`                            x1 ,  y1 ,  x2  ,  y2
Function ButtonCheck(imgNum, Left, Top, Right, Bottom)

Left = imgX + Left
   Top = imgY + Top
   Right = imgX + Right
   Bottom = imgY + Bottom

If (MouseX() >= Left And MouseX() <= Right) And (MouseY() >= Top And MouseY() <= Bottom)
      If MouseClick() = 0 Then Show Sprite imgNum
`      If MouseClick() = 1 Then Show Sprite imgNum + 10
   Else
      Hide Sprite imgNum
`      Hide Sprite imgNum + 10
   EndIf

EndFunction

+ Code Snippet

`Default variables and what not
dispWidth = 640
dispHeight = 480

SplashOn = 1
MenuNum = 0

`This centers the image on our screen
`320x240 is half of our images size in case you
`were wondering what values they were
imgX = (dispWidth/2) - (320)
imgY = (dispHeight/2) - (240)

Load Image "Common\Splash.bmp", 1
Sprite 1, imgX, imgY, 1

Load Image "Common\MainMenu.bmp", 2
Sprite 2, 0, 0, 2
Hide Sprite 2

For n = 3 To 8
   Load Image "Common\M" + str$(n - 2) + ".bmp", n
   Sprite n, imgX + 40, imgY + 78, n
   Hide Sprite n
Next n

`Set Sync
Sync On
Sync Rate 0

`Start Loop
Do

`The next bunch of code does the following stuff:
`  Check if Mouse is clicked
`  Check if it was clicked on the x axis of a 'link'
`  Check if it was clicked on the y axis of a 'link'

   `New Game
   ButtonCheck(3, 430, 73, 605, 90)

   `High Scores
   ButtonCheck(4, 418, 96, 605, 103)

   `Settings
   ButtonCheck(5, 465, 123, 605, 130)

   `About
   ButtonCheck(6, 500, 148, 605, 155)

   `Credits
   ButtonCheck(7, 485, 171, 605, 178)

   `Exit
   ButtonCheck(8, 523, 195, 605, 202)

   If MouseClick() = 1

      If SplashOn = 1
         Hide Sprite 1
         Show Sprite 2
         SplashOn = 0
      EndIf

   `MouseClick
   EndIf

   `Update
   Sync

`End Loop
Loop

`MainMenu2D
Return

`This function checks if you clicked within said region, and shows a iamge based on it
`                            x1 ,  y1 ,  x2  ,  y2
Function ButtonCheck(imgNum, Left, Top, Right, Bottom)

   Left = imgX + Left
   Top = imgY + Top
   Right = imgX + Right
   Bottom = imgY + Bottom

   If (MouseX() >= Left And MouseX() <= Right) And (MouseY() >= Top And MouseY() <= Bottom)
      If MouseClick() = 0 Then Show Sprite imgNum
`      If MouseClick() = 1 Then Show Sprite imgNum + 10
   Else
      Hide Sprite imgNum
`      Hide Sprite imgNum + 10
   EndIf

EndFunction

First thing that happens is a splash comes up (image 1), then when you click the menu shows (image 2) and you can hover your mouse over the buttons on the right and a respective image will appear on the left describing the 'link'. Works perfectly except for one thing. It runs slow as hell. The mouse's position updates once every 2 seconds. Any idea why?

"Computers are useless they can only give you answers."

Back to top

Profile PM Email

Xoid

21

Years of Service

User Offline

Joined: 8th Mar 2003

Location:

Posted: 31st Mar 2003 05:17

Link

it's probably because of the sprites hidden in memory, if the sprites are not needed you could always delete them, then when they are needed load into memory then display them. Hiding the sprites will use up more resources hence the slow-down.

also, if your GUI just uses lines, boxes etc... and doesn't use stylish graphics then you could just create a GUI using the line, box commands etc...

I would put the mouseclick() event before the ButtonCheck function which the system only has to check 1 line instead of 2;

i.e

do
--> [1] ButtonCheck()
--> [2] Check Co-ordinates
--> if mouseclick()=1 then do whatever
loop

instead try this,

do
--> [1] if mouseclick()=1 then
ButtonCheck()
loop

I've finished off the GUI which I'll upload to my website later on, so if you wanna download feel free.

sorry if I haven't explained it all that well I'm notoriously bad at explainations, lol especially in the earlier hours

Do not anticipate the outcome of the engagement, let nature take it's course, and your tools will strike at the right moment - from "Tao of Jeet Kune Do" by Bruce Lee

Back to top

Profile PM Website

Dave J

Retired Moderator

21

Years of Service

User Offline

Joined: 11th Feb 2003

Location: Secret Military Pub, Down Under

Posted: 31st Mar 2003 06:10 Edited at: 31st Mar 2003 06:19

Link

Thanks, I am using a fancy interface which is why I load so many images, I'll check if hiding them is slowing it down because you may be right there. Not sure I understand why you would put the MouseClick first though, it doesn't seem like it matters where it goes at all to me.

Edit: Yep, you were right, the new code:

`Default variables and what not
dispWidth = 640
dispHeight = 480

SplashOn = 1
MenuNum = 0

imgX = (dispWidth/2) - (320)
imgY = (dispHeight/2) - (240)

`This centers the image on our screen
`320x240 is half of our images size in case you
`were wondering what values they were
Load Image "Common\Splash.bmp", 1
Paste Image 1, imgX, imgY

Load Image "Common\M1.bmp", 2
`Load Image "Common\L1.bmp", 3

`Set Sync
Sync On
Sync Rate 0

`So the coordinates of where the user clicks can be correct
`we must use the values from above to find where the image starts

`Start Loop
Do

`The next bunch of code does the following stuff:
`  Check if Mouse is clicked
`  Check if it was clicked on the x axis of a 'link'
`  Check if it was clicked on the y axis of a 'link'

`New Game
   ButtonCheck(1, 430, 73, 605, 90)

`High Scores
   ButtonCheck(2, 418, 96, 605, 103)

`Settings
   ButtonCheck(3, 465, 123, 605, 130)

`About
   ButtonCheck(4, 500, 148, 605, 155)

`Credits
   ButtonCheck(5, 485, 171, 605, 178)

`Exit
   ButtonCheck(6, 523, 195, 605, 202)

If MouseClick() = 1

If SplashOn = 1
         Delete Image 1

Load Image "Common\MainMenu.bmp", 1
         Paste Image 1, imgX, imgY
         SplashOn = 0
      EndIf

`MouseClick
   EndIf

`Update
   Sync

`End Loop
Loop

`MainMenu2D
Return

`This function checks if you clicked within said region, and shows a iamge based on it
`                            x1 ,  y1 ,  x2  ,  y2
Function ButtonCheck(imgNum, Left, Top, Right, Bottom)

Left = imgX + Left
   Top = imgY + Top
   Right = imgX + Right
   Bottom = imgY + Bottom

If MouseX() >= Left And MouseX() <= Right And MouseY() >= Top And MouseY() <= Bottom
      If MouseClick() = 0
         Delete Image 2
         Load Image "Common\M" + str$(imgNum) + ".bmp", 2
         Paste Image 2, imgX + 40, imgY + 78
      Else
`         Delete Image 3
`         Load Image "Common\L" + str$(imgNum) + ".bmp", 3
`         Paste Image 3, imgX + 40, imgY + 78
      EndIf
   EndIf

EndFunction

+ Code Snippet

`Default variables and what not
dispWidth = 640
dispHeight = 480

SplashOn = 1
MenuNum = 0

imgX = (dispWidth/2) - (320)
imgY = (dispHeight/2) - (240)


`This centers the image on our screen
`320x240 is half of our images size in case you
`were wondering what values they were
Load Image "Common\Splash.bmp", 1
Paste Image 1, imgX, imgY

Load Image "Common\M1.bmp", 2
`Load Image "Common\L1.bmp", 3

`Set Sync
Sync On
Sync Rate 0

`So the coordinates of where the user clicks can be correct
`we must use the values from above to find where the image starts

`Start Loop
Do

`The next bunch of code does the following stuff:
`  Check if Mouse is clicked
`  Check if it was clicked on the x axis of a 'link'
`  Check if it was clicked on the y axis of a 'link'

   `New Game
   ButtonCheck(1, 430, 73, 605, 90)

   `High Scores
   ButtonCheck(2, 418, 96, 605, 103)

   `Settings
   ButtonCheck(3, 465, 123, 605, 130)

   `About
   ButtonCheck(4, 500, 148, 605, 155)

   `Credits
   ButtonCheck(5, 485, 171, 605, 178)

   `Exit
   ButtonCheck(6, 523, 195, 605, 202)

   If MouseClick() = 1

      If SplashOn = 1
         Delete Image 1

         Load Image "Common\MainMenu.bmp", 1
         Paste Image 1, imgX, imgY
         SplashOn = 0
      EndIf

   `MouseClick
   EndIf

   `Update
   Sync

`End Loop
Loop

`MainMenu2D
Return

`This function checks if you clicked within said region, and shows a iamge based on it
`                            x1 ,  y1 ,  x2  ,  y2
Function ButtonCheck(imgNum, Left, Top, Right, Bottom)

   Left = imgX + Left
   Top = imgY + Top
   Right = imgX + Right
   Bottom = imgY + Bottom

   If MouseX() >= Left And MouseX() <= Right And MouseY() >= Top And MouseY() <= Bottom
      If MouseClick() = 0
         Delete Image 2
         Load Image "Common\M" + str$(imgNum) + ".bmp", 2
         Paste Image 2, imgX + 40, imgY + 78
      Else
`         Delete Image 3
`         Load Image "Common\L" + str$(imgNum) + ".bmp", 3
`         Paste Image 3, imgX + 40, imgY + 78
      EndIf
   EndIf

EndFunction

Works as smooth as I could ever have hoped.

"Computers are useless they can only give you answers."

Back to top

Profile PM Email

Sorry your browser is not supported!

Newcomers DBPro Corner / Buttons and GUI?