Menus

Blitz3D Forums/Blitz3D Beginners Area/Menus

Happy Llama

(Posted 2012) [#1]

I am trying to create a menu with a start button, a controls button, and an exit button. I have gotten the start and exit buttons working fine but the controls isn't working. I want it so that when you press controls it displays an image with a image of a button that you can click to return to the main menu. How can you do this?


startmenu=LoadImage("start.png")
startbutton=LoadImage("startbutton.png")
MaskImage startbutton,0,0,0
exitbutton=LoadImage("exitbutton.png")
MaskImage exitbutton,0,0,0
controlsbutton=LoadImage("controlsbutton.png")
MaskImage controlsbutton,0,0,0
returnbutton=LoadImage("returnbutton.png")
MaskImage returnbutton,0,0,0
controls=LoadImage("controls.png") 
pause=LoadImage("pause.png")


While start=0

DrawImage startmenu,0,0
DrawImage startbutton,300,150
DrawImage exitbutton,300,400
DrawImage controlsbutton,300,275

If MouseHit(1) Then


	If RectsOverlap( MouseX(),MouseY(),1,1,300,150,ImageWidth(startbutton),ImageHeight(startbutton)) Then
	DebugLog"start"
	start=1
	End If
	
	If RectsOverlap( MouseX(),MouseY(),1,1,300,275,ImageWidth(controlsbutton),ImageHeight(controlsbutton)) Then
	DebugLog"controlls"
	Cls
	
	DrawImage controls,0,0
	DrawImage returnbutton,600,500
	Flip
	WaitKey
	
		If RectsOverlap( MouseX(),MouseY(),1,1,600,500,ImageWidth(returnbutton),ImageHeight(returnbutton)) Then
		DebugLog "return"	
		End If
	Cls		
	End If
	
	If RectsOverlap( MouseX(),MouseY(),1,1,300,300,ImageWidth(exitbutton),ImageHeight(exitbutton)) Then
	DebugLog"exit"
	End
	End If
	
End If


Flip

Wend

Midimaster

(Posted 2012) [#2]

You should work with flags to control, which screen you display. You already "touched" this, by working with a start% flag. So now expand this idea.

Try to work with only one FLIP command in your program. Use the REAPEAT/UNTIL as a main loop and jump from here into various display modes.

only symbolic code, i did not test it:

Graphics 800,600

Global DisplayMode% ; flag for the current Display
Global Paused% ;flag for pause mode

Const MENU=0, START=2, CONTROL=3, QUIT=4 
Const PAUSE_KEY=25 ; key P for pause

Global startmenu=LoadImage("start.png")
Global startbutton=LoadImage("startbutton.png")
MaskImage startbutton,0,0,0
Global exitbutton=LoadImage("exitbutton.png")
MaskImage exitbutton,0,0,0
Global controlsbutton=LoadImage("controlsbutton.png")
MaskImage controlsbutton,0,0,0
Global returnbutton=LoadImage("returnbutton.png")
MaskImage returnbutton,0,0,0
Global controls=LoadImage("controls.png") 
Global pause=LoadImage("pause.png")



Repeat
	Cls
	Select DisplayMode
		Case MENU
			ShowMenu		
		Case START 
			ShowMain
		Case CONTROL
			ShowControl
		Case QUIT
	End Select	
	Flip 1
Until DisplayMode=QUIT
End




Function ShowMenu()
	; Show Menu-background picture
		DrawImage startmenu,0,0
	
	; Show various foreground elements
		DrawImage startbutton,300,150
		DrawImage exitbutton,300,400
		DrawImage controlsbutton,300,275
	
	; check Mouse and Keys
		If RectsOverlap( MouseX(),MouseY(),1,1,300,150,ImageWidth(startbutton),ImageHeight(startbutton)) Then
			DebugLog"start"
			DisplayMode=START

		ElseIf RectsOverlap( MouseX(),MouseY(),1,1,300,275,ImageWidth(controlsbutton),ImageHeight(controlsbutton)) Then
			DebugLog"controlls"
			DisplayMode=CONTROL

		ElseIf RectsOverlap( MouseX(),MouseY(),1,1,300,300,ImageWidth(exitbutton),ImageHeight(exitbutton)) Then
			DebugLog"exit"
			DisplayMode=QUIT

		EndIf
		
End Function





Function ShowControl()
	; Show Control background picture
		DrawImage controls,0,0
	
	; Show various Foreground elements
		DrawImage startbutton,300,150
		DrawImage returnbutton,600,500
	
	; check Mouse and Keys
		If RectsOverlap( MouseX(),MouseY(),1,1,300,150,ImageWidth(startbutton),ImageHeight(startbutton)) Then
			DebugLog"start"
			DisplayMode=START

		ElseIf RectsOverlap( MouseX(),MouseY(),1,1,600,500,ImageWidth(returnbutton),ImageHeight(returnbutton)) Then
			DebugLog "return"	
			DisplayMode=MENU
		EndIf
		
		; do all the control stuff here
			; adjust sound volume, etc...
End Function





Function ShowMain()
	; Show Main background picture
		;DrawImage game,0,0
	
	; Show various Foreground elements
		DrawImage controlsbutton,300,275
		DrawImage returnbutton,600,500
	
	; check Mouse and Keys
		If RectsOverlap( MouseX(),MouseY(),1,1,300,275,ImageWidth(controlsbutton),ImageHeight(controlsbutton)) Then
			DebugLog"controlls"
			DisplayMode=CONTROL

		ElseIf RectsOverlap( MouseX(),MouseY(),1,1,600,500,ImageWidth(returnbutton),ImageHeight(returnbutton)) Then
			DebugLog "return"	
			DisplayMode=MENU
		EndIf


		If Paused=0	
				; do all the game stuff here
				; move playere etc...	
		
		Else
			DrawImage pause,300,300
		
		EndIf
		If KeyHit(PAUSE_KEY)
				Paused=1-Paused
		EndIf
End Function

Happy Llama

(Posted 2012) [#3]

I'm a little confused with the ShowMain()function. This is for pausing right? and also what's that image that your drawing at the beginning called "game". If you could explain this that would be awesome!

Last edited 2012

Midimaster

(Posted 2012) [#4]

oh, this was only an example. Don't be confused about the image names they are only placeholder for your real images (which i do not know). I added the function ShowMain() as a placeholder for the main game loop. Yes I added it to show you, how a PAUSE feature could be integrated.

Target of my code:
You should recognize the system of functions, that is behind this sample. In your code you tried to build one long REPEAT/UNTIL loop, which should contain all situations of the pre-game. This is not very helful.

The better way is to build one short REPEAT/UNTIL loop, which spreads into the different game situations. They game situations moved into functions. Not only MENU and CONTROL, but also the game intself. So the code for a MENU is not "before" the game. It is in the same loop!

Let us have a look like this: MENU or CONTROLS are different "displays" of the same game, the pictures are different, the possibilities are different, but what happens?: users enter mouse and/or keys to tell something to the code (like in the game itself...). So why not build the MENU like a "first display" of the game?

This way has two important advantages:

1.You can (but need not) jump from every display to each other only by changing the Value DisplayMode%

2.The code of the displays is clearly separated in different functions. At the beginning of each function you will define the buttons, that allow to jump into other displays.

One thing you should know about this code model: all pictures and all files you need in this code model have to be GLOBAL, because the game itself has moved into a function, where it only can reach the pictures, if they have been defined GLOBAL. So add a GLOBAL in front of all resources.

Paused

Paused should not be a standalone display. Paused should be a flag, that stopps the game level. The only thing the code has to do, when Paused is activ: show the game level, but without any movements and without the possibilities for the user to enter anything except the CONTINUE feature.

Ross C

(Posted 2012) [#5]

You should think about using a type collection for your buttons also. It reduced the amount of global variables you need to use, and lets you use loops to draw them, and give the buttons more properties without having to create long variable names. Additionally, you can tag these buttons with a page number, so certain buttons are only displayed, checked for, depending on what page you are on.

Graphics 800,600
SetBuffer BackBuffer()


Type button
	Field x,y
	Field page_parent
	Field image
	Field width,height
	Field name$
End Type

b.button = New button

	b\x = 300
	b\y = 100
	
	b\image = CreateImage(200,100)
	SetBuffer ImageBuffer(b\image)
	Color 90,90,90
	Rect 0,0,200,100
	Color 255,255,255
	Text 100,50,"START",True,True
	SetBuffer BackBuffer()
	
	b\width = ImageWidth(b\image)
	b\height = ImageHeight(b\image)
	
	b\name = "start button"
	
	b\page_parent = 1


b.button = New button

	b\x = 300
	b\y = 250
	
	b\image = CreateImage(200,100)
	SetBuffer ImageBuffer(b\image)
	Color 90,90,90
	Rect 0,0,200,100
	Color 255,255,255
	Text 100,50,"CONTROLS",True,True
	SetBuffer BackBuffer()

	b\width = ImageWidth(b\image)
	b\height = ImageHeight(b\image)
	
	b\name = "controls button"

	b\page_parent = 1
	
	
b.button = New button

	b\x = 300
	b\y = 400
	
	b\image = CreateImage(200,100)
	SetBuffer ImageBuffer(b\image)
	Color 90,90,90
	Rect 0,0,200,100
	Color 255,255,255
	Text 100,50,"EXIT",True,True
	SetBuffer BackBuffer()
	
	b\width = ImageWidth(b\image)
	b\height = ImageHeight(b\image)
	
	b\name = "exit button"
	
	b\page_parent = 1	


b.button = New button

	b\x = 300
	b\y = 250
	
	b\image = CreateImage(200,100)
	SetBuffer ImageBuffer(b\image)
	Color 90,90,90
	Rect 0,0,200,100
	Color 255,255,255
	Text 100,50,"BACK TO MENU",True,True
	SetBuffer BackBuffer()
	
	b\width = ImageWidth(b\image)
	b\height = ImageHeight(b\image)
	
	b\name = "back to main menu button"
	
	b\page_parent = 2

Global page_number = 1

While Not KeyHit(1)

	Cls

	draw_buttons()
	update_buttons()
	Flip
Wend
End

Function draw_buttons()

	For b.button = Each button
	
		If b\page_parent = page_number Then
			DrawImage b\image,b\x,b\y
		End If
		
	Next
	
End Function

Function update_buttons()

	If MouseHit(1) Then
		For b.button = Each button
		
			; Check the mouse co-ords rectangle area, against the buttons co-ords and rectangle area.
			If RectsOverlap(MouseX(),MouseY(),1,1,b\x,b\y,b\width,b\height)
			
				; If they overlap, check the buttons page parent against the current page number
				If b\page_parent = page_number Then
				
					; In here you will decided what each button will do, by querying the button name
					If b\name = "exit button" Then
						End
						Exit ; exit is used in case you click on a button that takes you to a sub menu. You don't want the code checking for more button hits.
					End If
					
					If b\name = "controls button" Then
						page_number = 2
						Exit
					End If
					
					If b\name = "start button" Then
						RuntimeError("The game should have code to start here")
						Exit
					End If
					
					If b\name = "back to main menu button" Then
						page_number = 1
						Exit
					End If
					
				End If
				
			End If
			
		Next
	End If
	
End Function

Happy Llama

(Posted 2012) [#6]

So would I put my main loop code here?

If Paused=0
; do all the game stuff here
; move playere etc...

Else

Midimaster

(Posted 2012) [#7]

yes, but without any loop commands like REPEAT/UNTIL or WHILE/WEND...

because this will already be done by the first main loop.

I have here a running sample, which demonstrate the switching between the screens.

nice effects:

1. QUIT does not quit, but asks again.

2. In CONTROL the ESC key jumps back to MENU or to GAME, depending where you did come from.

3. You can jump from GAME to CONTROL and back to GAME. Values can be changed during running game (ball color, wall distance)

4. with wall distance you can see a feature, which can only be adjusted, when calling CONTROL from GAME . Calling CONTROL from MENU will always reset this value to default, when start the GAME

5. common elements like the "current Display" text can be put into the main loop instead in each display function

Graphics 800,600
SetBuffer BackBuffer()

Global DisplayMode% ,LastDisplay , NowDisplay; flag for the current Display and the display before
Global Paused% ;flag for pause mode

Const MENU=0, START=2, CONTROL=3, QUIT=4, REAL_QUIT=5 
Const PAUSE_KEY=25 ; key P for pause


Global BallColor=3
Global BallY#=100
Global BallX#=100
Global SpeedY#=0
Global SpeedX#=5
Global Gravi#=0.1
Global BodenY#=400
Global WandX#=700

FPS=CreateTimer(60)
Repeat
	Cls
	Select DisplayMode
		Case MENU
			ShowMenu		
		Case START 
			ShowMain
		Case CONTROL
			ShowControl
		Case QUIT
			ShowQuit
	End Select	
		Text 100,550,"current Display=" + Displaymode  + "     Display before=" +LastDisplay

	WaitTimer fps
	Flip 0
	
	If DisplayMode<>NowDisplay
		LastDisplay=NowDisplay
		NowDisplay=DisplayMode
	EndIf
Until DisplayMode=REAL_QUIT
End




Function ShowMenu()
	; Show Menu-background picture
		Color 222,222,111
		Rect 0,0,800,600
		Color 2,2,2
		Text 100,100,"M E N U "
	
	; Show various foreground elements
		Text 100,240,"Q = Quit"
		Text 100,180,"C = Control"
		Text 100,210,"S = Start game"
		key=GetKey()
		Select Chr(key) 
			Case "s"	
				BallY#=100
				BallX#=100
				SpeedY#=0
				SpeedX#=5
				Gravi#=0.1
				BodenY#=400
				WandX#=700
				DisplayMode=START
			Case "c"
				DisplayMode=CONTROL
			Case "q"
				DisplayMode=QUIT
		End Select
				
		
End Function





Function ShowControl()
	; Show Menu-background picture
		Color 22,122,211
		Rect 0,0,800,600
		Color 2,2,2
		Text 100,100,"C O N T R O L"
	
	; Show various foreground elements
		Text 100,150,"ESC = back"
		Text 100,240,"  C = change ball color =" + Ballcolor
		Text 100,270,"  W = change wall position=" + WandX
		key=GetKey()
		Select Chr(key) 		
			Case "m"
				DisplayMode=MENU
			Case Chr(27)
				DisplayMode=LastDisplay
			Case "c"
				BallColor= (BallColor+1)Mod 3
			Case "w"
				WandX=WandX-100
				If BallX>WandX Then BallX=10
		End Select

	SetColor Ballcolor
	Oval BallX-11, BallY-11,11,11
	SetColor 3
	Line 0,BodenY,800,BodenY
	Line WandX,0,WandX,BodenY

End Function





Function ShowMain()
	; Show Menu-background picture
		Color 22,122,21
		Rect 0,0,800,600
		Color 2,2,2
		Text 100,100,"G A M E "
	
	; Show various foreground elements
		Text 100,150,"ESC = back"
		Text 100,180,"  C = Control"
		key=GetKey()
		Select Chr(key) 		
			Case Chr(27)
				DisplayMode=MENU
			Case "c"
				DisplayMode=CONTROL
		End Select

	SpeedY=SpeedY+Gravi
	BallY = BallY+SpeedY

	BallX=BallX+SpeedX
	
	If BallY>BodenY Or BallY<0 Then
		SpeedY=-SpeedY * 0.99
		BallY=BodenY
	EndIf
	
	If BallX>WandX  Then
		SpeedX=-SpeedX * 0.79
		BallX=WandX
	EndIf
	If  BallX<0 Then
		SpeedX=-SpeedX * 0.79
		BallX=0
	EndIf
	SetColor Ballcolor
	Oval BallX-11, BallY-11,11,11
	SetColor 3
	Line 0,BodenY,800,BodenY
	Line WandX,0,WandX,BodenY

End Function



Function Setcolor(Nr%)
	Select nr
		Case 3
			Color 255,255,255
		Case 0
			Color 0,255,255
		Case 1
			Color 255,255,0
		Case 2
			Color 255,0,255
	End Select
End Function



Function ShowQuit()
	; Show Menu-background picture
		Color 255,0,0
		Rect 0,0,800,600
		Color 11,11,11
		Text 100,100,"Q U I T "
	
	; Show various foreground elements
		Text 100,200,"Are you shure?"
		Text 100,250,"  N = continue"
		Text 100,280,"  Y = Yes, quit"
		key=GetKey()
		Select Chr(key) 		
			Case "n"
				DisplayMode=MENU
			Case "y"
				DisplayMode=REAL_QUIT
		End Select
End Function

so you see, everything is possible in a model like this...

Last edited 2012

Last edited 2012