Simple Start Menu
Blitz3D Forums/Blitz3D Beginners Area/Simple Start Menu
| ||
| Hello, I am recreating the game "Pong" for one of my first game attempts. I have it working but now I want to add a menu in the beginning that says "Start","Options","Credits","Exit" or something of the sort, but I don't know how to get going on that. |
| ||
| A super simple point n' click menu based on html image maps. |
| ||
| Thanks for the help exactly what I was looking for. |
| ||
| I don't have Blitz in front of me (I'm at work), so I'm writing this blind, but it should give you an idea where to go. Learning to program this kind of stuff is considerably easier in the long-run than relying on 3rd-party apps to code relatively simple mouse-click detection - something you're going to need to know how to do. :) The basics of this code is the RectsOverlap x,y,width,height,mousex(),mousey(),1,1 command which you'll be using any time you want to detect if the mouse click occured while the cursor was over something on the screen. Get to grips with this command and you'll be fine. :)
Graphics3D 800,600,0,2
SetBuffer BackBuffer()
font=LoadFont("Arial",15)
SetFont font
While result=0
result=MainMenu()
;put these options inside the menu loop, as these
;return 0 - continuing the mainmenu loop.
If result=2 Then result=Options()
If result=3 Then result=Credits()
Wend
If result=1 Then StartGame()
;if the result isn't 1, then it must be 4 - hence QUIT
End
Function MainMenu()
Cls
Text 400,50,"My Menu",1,1
Rect 300,100,200,50,0
Text 400,125,"Start Game",1,1
Rect 300,200,200,50,0
Text 400,225,"Options",1,1
Rect 300,300,200,50,0
Text 400,325,"Credits",1,1
Rect 300,400,200,50,0
Text 400,425,"Quit",1,1
Flip
result=0
While result=0
mx=MouseX():my=MouseY()
If MouseHit(1) Then
If RectsOverlap(300,100,200,50,mx,my,1,1) Then result = 1
If RectsOverlap(300,200,200,50,mx,my,1,1) Then result = 2
If RectsOverlap(300,300,200,50,mx,my,1,1) Then result = 3
If RectsOverlap(300,400,200,40,mx,my,1,1) Then result = 4
End If
Wend
Return result
End Function
Function Options()
Cls
Text 400,300,"Options Screen! Any key to return to main menu",1,1
Flip
WaitKey()
Return 0
End Function
Function Credits()
Cls
Text 400,300,"Credits!!",1,1
Text 400,330,"Made by BlackD",1,1
Text 400,400,"Any key to return",1,1
Flip
WaitKey()
Return 0
End Function
Function StartGame()
Cls
Text 400,300,"AND you're away...",1,1
Text 400,400,"ESC to exit",1,1
Flip
While Not KeyHit(1):Wend
End
End Function
I'll debug it when I get home if it doesn't work.. it's annoying not being able to hit F5 to test it.. hehe :) EDIT: oops.. made a mistake with the text.. fixed! :D +BlackD |
| ||
| Nothing is wrong with the code, it compiles perfectly, thank you. |
| ||
| Ok I'm back with another menu question, now I don't want someone to write the code for me it's much more entertaining when I got to figure it out so just tell me the functions I will need to use. Ok I got my menu working, I added images insted of plane text, looks much better now. But the thing is I cannot figure out how to create a mouseover effect with one of the buttons. I want the mouse to go over the button and then have it change into a different image and then play a sound. What is the function that I will need for the mouseover? I already know playsound. Also, why does the mouse not show up in full screen? Thanks a ton for all your help guys. |
| ||
| To answer both of these questions, you may need to re-arrange your program. The way I did it above, everything is static (meaning, it only has to be drawn once) so it draws it once, then FLIPs, then waits for the menu clicks. To change something on the screen (like a mouseover image, or a mouse cursor to be drawn on) the program has to update the screen every frame to reflect the changes. Think of the Blitz background as a canvas. You paint the entire scene once, but if you want to change something, you can't erase it - you have to draw the whole scene again. In programming terms, this means that the drawing of the scene and FLIPing it to the current view, has to take place within the same loop as the menu checking for clicks and stuff. So you'd have your WHILE RESULT = 0, then have all the drawing commands (drawing all the images, etc - don't worry - Blitz does it all very quickly), then checking for mouse clicks, then the WEND. So, for mouseover, use the RECTSOVERLAP command. After drawing the normal buttons each loop, then check RECTSOVERLAP for the mouse cursor and each image. If they overlap, then draw on the MOUSEOVER image there. Then FLIP it all. As for the cursor, as it's in full-screen, the windows cursor isn't visible. So you'll need to draw your own cursor like this one:  With that example image, after LOADing it, eg: cursor=LoadImage("cursor.png") Then you'll have to mask it, as purple is the transparent color. MaskImage cursor,255,0,255 Then, each loop - after drawing the buttons and images and text and everything - in fact, the LAST thing before you FLIP the scene, draw the cursor. DrawImage cursor,Mousex(),MouseY() I've tried not to give too much away, so you can figure it out - but if you need more help or some code example, just let me know. :) +BlackD |
| ||
| Ok, I guess I do need a bit of help, it's harder than I thought. I am just flat out confused how to use RECTSOVERLAP, here is what I have at the moment. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; Function MainMenu() Cls DrawImage Title,0,0 DrawImage Start,250,125 DrawImage Credits,250,250 DrawImage Quit,250,375 Flip result=0 While result=0 mx=MouseX():my=MouseY() If RectsOverlap(250,125,mx,my,0,0,0,0) Then Cls DrawImage Title,0,0 DrawImage Quit,250,125 DrawImage Credits,250,250 DrawImage Quit,250,375 EndIf If MouseDown(1) Then If ImageRectOverlap(Start,250,125,mx,my,1,1) Then result = 1 ;Start was clicked If ImageRectOverlap(Credits,250,250,mx,my,1,1) Then result = 2 ;Credits was clicked If ImageRectOverlap(Quit,250,375,mx,my,1,1) Then result = 3 ; Quit was clicked End If Wend Return result End Function ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; But I have no idea how to use RECTSOVERLAP it needs 8 peramiters and I can't use 1 right... It tried many different things but I just am stumpped. Also how do u make that black and green box for code. Thanks. |
| ||
| You might want to check this thread too: http://www.blitzbasic.com/Community/posts.php?topic=24972 ...Download and check out the Chroma game menu .zip - it has mouse over gfx etc. I have based my own manu largely on Chroma's work and it's good and simple to use. |
| ||
Using RECTSOVERLAP for the image, you're checking not just where the mouse is, but comparing that to the entire button. So - say your button images are 200x100, then, example:Function MainMenu() Setbuffer backbuffer() result=0 While result=0 mx=MouseX():my=MouseY() Cls DrawImage Title,0,0 DrawImage Start,250,125 DrawImage Credits,250,250 DrawImage Quit,250,375 If RectsOverlap(250,125,200,100,mx,my,0,0) then drawimage StartOver,250,125 if RectsOverlap(250,250,200,100,mx,my,0,0) then drawimage CreditsOver,250,250 if RectsOverlap(250,375,200,100,mx,my,0,0) then drawimage QuitOver,250,375 Flip If MouseDown(1) Then If ImageRectOverlap(Start,250,125,mx,my,1,1) Then result = 1 ;Start was clicked If ImageRectOverlap(Credits,250,250,mx,my,1,1) Then result = 2 ;Credits was clicked If ImageRectOverlap(Quit,250,375,mx,my,1,1) Then result = 3 ; Quit was clicked End If Wend Return result Basically, with RectsOverlap, you first of all determine the size of the first box you're checking (or rectangle), which for the start button - would start from 250,125 and be 200 wide and 100 high. The second CHECK you're doing is where the cursor is, so from MX, MY, and 1 wide and 1 high. Therefore, the command to check if these overlap is: RectsOverlap 250,125,200,100,mx,my,0,0 +BlackD |
| ||
| ohhh I get it now, It just didn't make since how they explaned it on the BLitz3D command reference, thanks a ton. |
   |