Difference between revisions of "Tuto tiny-ecs beatemup Part 12 You Win"
From GiderosMobile
(wip) |
(wip) |
||
Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
− | == | + | == You Win == |
− | A | + | A game wouldn't be finished with a win scene. Let's add it! |
− | + | Please create a file "'''win.lua'''" in the '''"scenes"''' folder and the code: | |
− | Please create a file "''' | ||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
+ | Win = Core.class(Sprite) | ||
+ | |||
+ | function Win:init() | ||
+ | -- bg | ||
+ | application:setBackgroundColor(g_ui_theme.backgroundcolor) | ||
+ | -- we create a movie clip to spice up the win scene | ||
+ | local frames = {} | ||
+ | local imagefilenametrunc = "gfx/player1/win/party-m-0001m_" | ||
+ | local imgnumstartat, imgnumendat = 1, 44 -- image name sequence (eg.: image004.jpg, image005.jpg, ...) | ||
+ | for i = 1, imgnumendat-imgnumstartat+1 do | ||
+ | local iter = imgnumstartat+i-1 | ||
+ | if iter < 10 then | ||
+ | frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."000"..(imgnumstartat+i-1)..".png", true)) | ||
+ | elseif iter < 100 then | ||
+ | frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."00"..(imgnumstartat+i-1)..".png", true)) | ||
+ | elseif iter < 1000 then | ||
+ | frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."0"..(imgnumstartat+i-1)..".png", true)) | ||
+ | else | ||
+ | frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc..(imgnumstartat+i-1)..".png", true)) | ||
+ | end | ||
+ | frames[i]:setAnchorPoint(0.5, 0.5) | ||
+ | end | ||
+ | -- mc timelines | ||
+ | local anims = {} | ||
+ | local timing = 8 | ||
+ | for i = 1, #frames do anims[i] = {(i-1)*timing+1, i*timing, frames[i]} end | ||
+ | -- add anim frames | ||
+ | local mc_win = MovieClip.new(anims, true) | ||
+ | mc_win:setGotoAction(imgnumendat*timing, imgnumstartat*timing) | ||
+ | mc_win:gotoAndPlay(imgnumstartat*timing) | ||
+ | -- typewriter effect | ||
+ | local text = [[ | ||
+ | You defeated the bad boyz and made the city a better place. | ||
+ | |||
+ | Game made using Gideros framework (what else?). | ||
+ | |||
+ | Programmer: mokalux 2024 ;-) | ||
+ | ]] | ||
+ | local tw = TypeWriter.new(myttf, text, 32*8, 3) -- TypeWriter:init(font, text, delay, char) | ||
+ | tw:setTextColor(0x55ff00) | ||
+ | tw:setLayout( { w=myappwidth/1.8, flags=FontBase.TLF_CENTER } ) | ||
+ | tw:addEventListener("finished", function(e) | ||
+ | end) | ||
+ | -- buttons setup | ||
+ | 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() | ||
+ | -- buttons (only one button) | ||
+ | local mybtnmenu = 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="MENU", ttf=myttf, textcolorup=g_ui_theme.textcolorup, textcolordown=g_ui_theme.textcolordown, | ||
+ | sound=sndbtn, volume=sfxvolume, | ||
+ | }, 1, tooltiplayer) | ||
+ | -- buttons table for keyboard navigation | ||
+ | self.btns = {} | ||
+ | self.btns[#self.btns + 1] = mybtnmenu | ||
+ | self.selector = 1 -- starting button | ||
+ | -- position | ||
+ | mc_win:setPosition(3.5*myappwidth/16, 9*myappheight/16) | ||
+ | tw:setPosition(5*myappwidth/16, 1*myappheight/16) | ||
+ | mybtnmenu:setPosition(8*myappwidth/16, 14*myappheight/16) | ||
+ | -- order | ||
+ | self:addChild(mc_win) | ||
+ | self:addChild(tw) | ||
+ | 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(e) self.selector = k switchToScene(Menu.new()) end) -- Menu | ||
+ | v:addEventListener("hovered", function(e) self.selector = e.currselector end) | ||
+ | v.btns = self.btns -- for keyboard navigation | ||
+ | end | ||
+ | -- let's go | ||
+ | local function fun() | ||
+ | -- called async otherwise may crash the app | ||
+ | self:updateButtons() | ||
+ | Core.yield(1) | ||
+ | end | ||
+ | Core.asyncCall(fun) | ||
+ | self:myKeysPressed() | ||
+ | end | ||
+ | |||
+ | -- update buttons state | ||
+ | function Win:updateButtons() | ||
+ | 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 Win: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:updateButtons() | ||
+ | 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:updateButtons() | ||
+ | -- Menu | ||
+ | elseif e.keyCode == KeyCode.SPACE or e.keyCode == g_keyaction1 then switchToScene(Menu.new()) | ||
+ | elseif e.keyCode == KeyCode.ESC then switchToScene(Menu.new()) | ||
+ | end | ||
+ | -- modifiers | ||
+ | local modifier = application:getKeyboardModifiers() | ||
+ | local alt = (modifier & KeyCode.MODIFIER_ALT) > 0 | ||
+ | -- Menu | ||
+ | if not alt and e.keyCode == KeyCode.ENTER then switchToScene(Menu.new()) | ||
+ | -- switch fullscreen | ||
+ | elseif alt and e.keyCode == KeyCode.ENTER then | ||
+ | if not application:isPlayerMode() then | ||
+ | ismyappfullscreen = not ismyappfullscreen | ||
+ | application:setFullScreen(ismyappfullscreen) | ||
+ | end | ||
+ | end | ||
+ | end) | ||
+ | end | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | == Code comments == | |
− | * | + | === init === |
− | * | + | There we create a MovieClip that will play in an infinite loop until the user leaves the scene: |
− | + | * we fetch all the sequenced images in the given path | |
− | + | * using a loop we add a number at the end of the truncated path | |
− | * ''' | + | * the sequenced images are stored in the ''frames'' table |
+ | * using the ''frames'' table we create our timeline in the ''anims'' table | ||
+ | * finally we can use the timeline to create the MovieClip | ||
− | |||
"'''sCollectible.lua'''" in the '''"_S"''' folder. The code: | "'''sCollectible.lua'''" in the '''"_S"''' folder. The code: | ||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> |
Revision as of 22:22, 24 November 2024
You Win
A game wouldn't be finished with a win scene. Let's add it!
Please create a file "win.lua" in the "scenes" folder and the code:
Win = Core.class(Sprite)
function Win:init()
-- bg
application:setBackgroundColor(g_ui_theme.backgroundcolor)
-- we create a movie clip to spice up the win scene
local frames = {}
local imagefilenametrunc = "gfx/player1/win/party-m-0001m_"
local imgnumstartat, imgnumendat = 1, 44 -- image name sequence (eg.: image004.jpg, image005.jpg, ...)
for i = 1, imgnumendat-imgnumstartat+1 do
local iter = imgnumstartat+i-1
if iter < 10 then
frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."000"..(imgnumstartat+i-1)..".png", true))
elseif iter < 100 then
frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."00"..(imgnumstartat+i-1)..".png", true))
elseif iter < 1000 then
frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc.."0"..(imgnumstartat+i-1)..".png", true))
else
frames[#frames+1] = Bitmap.new(Texture.new(imagefilenametrunc..(imgnumstartat+i-1)..".png", true))
end
frames[i]:setAnchorPoint(0.5, 0.5)
end
-- mc timelines
local anims = {}
local timing = 8
for i = 1, #frames do anims[i] = {(i-1)*timing+1, i*timing, frames[i]} end
-- add anim frames
local mc_win = MovieClip.new(anims, true)
mc_win:setGotoAction(imgnumendat*timing, imgnumstartat*timing)
mc_win:gotoAndPlay(imgnumstartat*timing)
-- typewriter effect
local text = [[
You defeated the bad boyz and made the city a better place.
Game made using Gideros framework (what else?).
Programmer: mokalux 2024 ;-)
]]
local tw = TypeWriter.new(myttf, text, 32*8, 3) -- TypeWriter:init(font, text, delay, char)
tw:setTextColor(0x55ff00)
tw:setLayout( { w=myappwidth/1.8, flags=FontBase.TLF_CENTER } )
tw:addEventListener("finished", function(e)
end)
-- buttons setup
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()
-- buttons (only one button)
local mybtnmenu = 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="MENU", ttf=myttf, textcolorup=g_ui_theme.textcolorup, textcolordown=g_ui_theme.textcolordown,
sound=sndbtn, volume=sfxvolume,
}, 1, tooltiplayer)
-- buttons table for keyboard navigation
self.btns = {}
self.btns[#self.btns + 1] = mybtnmenu
self.selector = 1 -- starting button
-- position
mc_win:setPosition(3.5*myappwidth/16, 9*myappheight/16)
tw:setPosition(5*myappwidth/16, 1*myappheight/16)
mybtnmenu:setPosition(8*myappwidth/16, 14*myappheight/16)
-- order
self:addChild(mc_win)
self:addChild(tw)
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(e) self.selector = k switchToScene(Menu.new()) end) -- Menu
v:addEventListener("hovered", function(e) self.selector = e.currselector end)
v.btns = self.btns -- for keyboard navigation
end
-- let's go
local function fun()
-- called async otherwise may crash the app
self:updateButtons()
Core.yield(1)
end
Core.asyncCall(fun)
self:myKeysPressed()
end
-- update buttons state
function Win:updateButtons()
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 Win: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:updateButtons()
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:updateButtons()
-- Menu
elseif e.keyCode == KeyCode.SPACE or e.keyCode == g_keyaction1 then switchToScene(Menu.new())
elseif e.keyCode == KeyCode.ESC then switchToScene(Menu.new())
end
-- modifiers
local modifier = application:getKeyboardModifiers()
local alt = (modifier & KeyCode.MODIFIER_ALT) > 0
-- Menu
if not alt and e.keyCode == KeyCode.ENTER then switchToScene(Menu.new())
-- switch fullscreen
elseif alt and e.keyCode == KeyCode.ENTER then
if not application:isPlayerMode() then
ismyappfullscreen = not ismyappfullscreen
application:setFullScreen(ismyappfullscreen)
end
end
end)
end
Code comments
init
There we create a MovieClip that will play in an infinite loop until the user leaves the scene:
- we fetch all the sequenced images in the given path
- using a loop we add a number at the end of the truncated path
- the sequenced images are stored in the frames table
- using the frames table we create our timeline in the anims table
- finally we can use the timeline to create the MovieClip
"sCollectible.lua" in the "_S" folder. The code:
This System spawns a collectible:
- runs once on init and every game loop (process)
- there are two kind of collectibles: health and jump attacks (updated in the HUD)
There are quite a bit of commented code you can delete as this Entity is immediately removed
sSpritesSorting.lua.lua
"sSpritesSorting.lua.lua" in the "_S" folder. The code:
Finally this System sorts the actors on the y axis:
- runs once on init and every game loop (process)
- there is a distinction between the actor being on floor and jumping
Next?
Congratulations! We have finished our game.
Let's add the final scene: YOU WIN!
Prev.: Tuto tiny-ecs beatemup Part 11 Systems 3
Next: Tuto tiny-ecs beatemup Part 13 XXX