Difference between revisions of "Tuto Gideros Game Template1 Part 5 Menu"
(Created page with "__TOC__ == Menu scene == Our '''Menu''' scene will mainly consist of: * some buttons ('''ButtonMonster class''') to navigate to other scenes * setup of a keyboard navigati...") |
m |
||
(One intermediate revision by the same user not shown) | |||
Line 117: | Line 117: | ||
end collectgarbage() | end collectgarbage() | ||
g_currlevel = math.random(g_totallevel) -- for demo purposes | g_currlevel = math.random(g_totallevel) -- for demo purposes | ||
+ | print("current level: "..g_currlevel) | ||
stage:addChild(Transitions.new(LevelX.new())) -- next scene | stage:addChild(Transitions.new(LevelX.new())) -- next scene | ||
elseif k == 2 then -- go to Options | elseif k == 2 then -- go to Options | ||
Line 133: | Line 134: | ||
== Code comments == | == Code comments == | ||
− | In the init function we add some assets like a sound to play for the buttons when hovered. | + | In the ''init'' function we add some assets like a sound to play for the buttons when hovered. |
We add our buttons: | We add our buttons: |
Latest revision as of 15:04, 27 October 2024
Menu scene
Our Menu scene will mainly consist of:
- some buttons (ButtonMonster class) to navigate to other scenes
- setup of a keyboard navigation system ;-)
It makes sense to create the file in the scenes folder. You can call the file "menu.lua". Here is the code:
Menu = Core.class(Sprite)
function Menu:init()
-- buttons
local sndbtn = {sound=Sound.new("audio/ui/sfx_sounds_button1.wav"), time=0, delay=0.2}
local sfxvolume = g_sfxvolume * 0.01
local tooltiplayer = Sprite.new()
local difficulty = g_difficulty
if difficulty >= 2 then difficulty = "hard"
elseif difficulty >= 1 then difficulty = "normal"
else difficulty = "easy"
end
local mybtn = ButtonMonster.new({
autoscale=false, pixelwidth=20*8, pixelheight=8*8,
pixelscalexup=0.8, pixelscalexdown=0.9,
pixelcolorup=g_ui_theme.pixelcolorup, pixelcolordown=g_ui_theme.pixelcolordown,
text="START", ttf=myttf, textcolorup=g_ui_theme.textcolorup, textcolordown=g_ui_theme.textcolordown,
sound=sndbtn, volume=sfxvolume,
tooltiptext=difficulty, tooltipttf=myttf, tooltiptextcolor=g_ui_theme.tooltiptextcolor,
tooltipoffsetx=g_ui_theme.tooltipoffsetx-1.7*8, tooltipoffsety=g_ui_theme.tooltipoffsety+0.5*8,
}, 1, tooltiplayer)
local mybtn02 = ButtonMonster.new({
autoscale=false, pixelwidth=20*8, pixelheight=8*8,
pixelscalexup=0.8, pixelscalexdown=0.9,
pixelcolorup=g_ui_theme.pixelcolorup, pixelcolordown=g_ui_theme.pixelcolordown,
text="OPTIONS", ttf=myttf, textcolorup=g_ui_theme.textcolorup, textcolordown=g_ui_theme.textcolordown,
sound=sndbtn, volume=sfxvolume,
}, 2)
local mybtn03 = ButtonMonster.new({
autoscale=false, pixelwidth=20*8, pixelheight=8*8,
pixelscalexup=0.8, pixelscalexdown=0.9,
pixelcolorup=g_ui_theme.pixelcolorup, pixelcolordown=g_ui_theme.exit,
text="EXIT", ttf=myttf, textcolorup=g_ui_theme.textcolorup, textcolordown=g_ui_theme.textcolordown,
sound=sndbtn, volume=sfxvolume,
}, 3)
-- buttons table for keyboard navigation
self.btns = {}
self.btns[#self.btns + 1] = mybtn
self.btns[#self.btns + 1] = mybtn02
self.btns[#self.btns + 1] = mybtn03
self.selector = 1 -- starting button
-- position
mybtn:setPosition(12*myappwidth/16+myappleft, 4*myappheight/16)
mybtn02:setPosition(12*myappwidth/16+myappleft, 8*myappheight/16)
mybtn03:setPosition(12*myappwidth/16+myappleft, 13*myappheight/16)
-- order
for k, v in ipairs(self.btns) do self:addChild(v) end
self:addChild(tooltiplayer)
-- buttons listeners
for k, v in ipairs(self.btns) do
v:addEventListener("clicked", function() self.selector = k self:gotoScene() end)
v:addEventListener("hovered", function(e) self.selector = e.currselector end)
v.btns = self.btns -- FOR KEYBOARD NAVIGATION
end
-- let's go
self:myKeysPressed()
self:updateButton()
end
-- update button state
function Menu:updateButton()
for k, v in ipairs(self.btns) do
v.currselector = self.selector
v:updateVisualState()
if k == self.selector then v:selectionSfx() end -- play sound on keyboard navigation
end
end
-- keyboard navigation
function Menu:myKeysPressed()
self:addEventListener(Event.KEY_DOWN, function(e)
-- keyboard navigation
if e.keyCode == KeyCode.UP or e.keyCode == g_keyup or
e.keyCode == KeyCode.LEFT or e.keyCode == g_keyleft then
self.selector -= 1 if self.selector < 1 then self.selector = #self.btns end
self:updateButton()
elseif e.keyCode == KeyCode.DOWN or e.keyCode == g_keydown or
e.keyCode == KeyCode.RIGHT or e.keyCode == g_keyright then
self.selector += 1 if self.selector > #self.btns then self.selector = 1 end
self:updateButton()
elseif e.keyCode == KeyCode.SPACE or e.keyCode == g_keyaction1 then
self:gotoScene()
elseif e.keyCode == KeyCode.ESC or e.keyCode == KeyCode.BACK then
if not application:isPlayerMode() then application:exit() else print("EXIT") end
end
-- modifier
local modifier = application:getKeyboardModifiers()
local alt = (modifier & KeyCode.MODIFIER_ALT) > 0
if not alt and e.keyCode == KeyCode.ENTER then self:gotoScene() -- validate
elseif alt and e.keyCode == KeyCode.ENTER then -- switch full screen
if not application:isPlayerMode() then
ismyappfullscreen = not ismyappfullscreen
application:setFullScreen(ismyappfullscreen)
end
end
end)
end
-- scenes navigation
function Menu:gotoScene()
for k, v in ipairs(self.btns) do
if k == self.selector then
if v.isdisabled then -- nothing here
print("btn disabled!", k)
elseif k == 1 then -- go to LevelX
self:removeAllListeners()
for i = stage:getNumChildren(), 1, -1 do
stage:removeChildAt(i)
end collectgarbage()
g_currlevel = math.random(g_totallevel) -- for demo purposes
print("current level: "..g_currlevel)
stage:addChild(Transitions.new(LevelX.new())) -- next scene
elseif k == 2 then -- go to Options
self:removeAllListeners()
for i = stage:getNumChildren(), 1, -1 do
stage:removeChildAt(i)
end collectgarbage()
stage:addChild(Transitions.new(Options.new())) -- next scene
elseif k == 3 then -- exit
if not application:isPlayerMode() then application:exit() else print("Exit button ", k) end
end
end
end
end
Code comments
In the init function we add some assets like a sound to play for the buttons when hovered.
We add our buttons:
- START goes to the game scene
- OPTIONS goes to the options scene
- EXIT exits the game
We use the g_difficulty value and transform it to text. The value transformed to text will serve as a tooltip. This is of course optional but I add it here for demonstration.
The buttons have many options to configure but they should be easy to implement/understand.
The numbers at the end of each buttons are selectors. They are the buttons id and are used for navigation. Please make sure to assign them accordingly.
All the buttons are put in a table which will serve navigating with the keyboard.
The buttons are then positioned and listeners are added.
updateButton
This function updates the button visual state and plays sound when navigating with the keyboard.
This function listens for KEY_DOWN events to navigate through the buttons with the keyboard.
The ESC key or the BACK button key on mobile will exit the app.
Pressing ALT+ENTER will make the game fullscreen.
Pressing SPACE, ENTER or g_keyaction1 will validate an action.
gotoScene
This function will either:
- do nothing if button is disabled
- navigate to the next scene corresponding to the button id
- exit the game
Next?
We are getting there. I will leave the Game scene for last. Next let's implement the Options scene.
Prev.: Tuto Gideros Game Template1 Part 4 Transitions
Next: Tuto Gideros Game Template1 Part 6 Options
Tutorial - Gideros Game Template1