Difference between revisions of "Scene Management"
|  (Created page with "Most applications and games have different scenes (e.g., menu, scoreboard, game levels, inventory, end-of-game, etc).   A transition from one scene to another is usually start...") | |||
| (5 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | The Ultimate Guide to Gideros Studio | |
| − | + | __TOC__  | |
| − | |||
| − | |||
| − | + | == Scene Management == | |
| − | == | + | == Creating game flow and logic == | 
| + | Most applications and games have different scenes (e.g., menu, scoreboard, game levels, inventory, end-of-game, etc). A transition from one scene to another is usually started by user input or some other event. These transitions typically consist of the following steps: | ||
| + |     • Construct the new scene (e.g., load bitmaps, sprites, sounds) | ||
| + |     • Hide the original scene and show the new scene, often with some kind of special effect (e.g., crossfading) | ||
| + |     • Destroy the old scene | ||
| + | |||
| + | '''Luckily, a "Scene Manager" library is provided directly in Gideros.''' :-) | ||
| + | |||
| + | == Scene Manager Usage Overview == | ||
| Create a class for each of your scenes (and preferably put them into separate .lua files): | Create a class for each of your scenes (and preferably put them into separate .lua files): | ||
| − | + | <syntaxhighlight lang="lua"> | |
| − | < | + | Menu = Core.class(Sprite) | 
| − | Menu =  | + | Game = Core.class(Sprite) | 
| − | Game =  | + | EndScene = Core.class(Sprite) | 
| − | EndScene =  | + | </syntaxhighlight> | 
| − | </ | ||
| Create a SceneManager instance passing a table with scene names as keys and your classes as values: | Create a SceneManager instance passing a table with scene names as keys and your classes as values: | ||
| − | + | <syntaxhighlight lang="lua"> | |
| − | < | ||
| local sceneManager = SceneManager.new{ | local sceneManager = SceneManager.new{ | ||
|     ["menu"] = Menu, |     ["menu"] = Menu, | ||
| Line 26: | Line 30: | ||
| } | } | ||
| stage:addChild(sceneManager) | stage:addChild(sceneManager) | ||
| − | </ | + | </syntaxhighlight> | 
| Change between scenes with function SceneManager:changeScene(sceneName, duration, transition, ease) like so: | Change between scenes with function SceneManager:changeScene(sceneName, duration, transition, ease) like so: | ||
| − | + | <syntaxhighlight lang="lua"> | |
| − | < | ||
| sceneManager:changeScene("game", 1, SceneManager.moveFromTop, easing.linear) | sceneManager:changeScene("game", 1, SceneManager.moveFromTop, easing.linear) | ||
| − | </ | + | </syntaxhighlight> | 
| SceneManager dispatches events as it makes the transition from one scene to another (enterBegin, enterEnd, exitBegin, exitEnd). You can register to listen for these events to begin/end your animations, clear your timers, save the scores, etc. | SceneManager dispatches events as it makes the transition from one scene to another (enterBegin, enterEnd, exitBegin, exitEnd). You can register to listen for these events to begin/end your animations, clear your timers, save the scores, etc. | ||
| === Built-in Transition Effects === | === Built-in Transition Effects === | ||
| − | |||
| The scene manager library defines the following transition effects: | The scene manager library defines the following transition effects: | ||
| + | Move functions | ||
| + |     • SceneManager.moveFromLeft | ||
| + |     • SceneManager.moveFromRight | ||
| + |     • SceneManager.moveFromBottom | ||
| + |     • SceneManager.moveFromTop | ||
| + |     • SceneManager.moveFromLeftWithFade | ||
| + |     • SceneManager.moveFromRightWithFade | ||
| + |     • SceneManager.moveFromBottomWithFade | ||
| + |     • SceneManager.moveFromTopWithFade | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Overlay functions | Overlay functions | ||
| − | + |     • SceneManager.overFromLeft | |
| − | + |     • SceneManager.overFromRight | |
| − | + |     • SceneManager.overFromBottom | |
| − | + |     • SceneManager.overFromTop | |
| − | + |     • SceneManager.overFromLeftWithFade | |
| − | + |     • SceneManager.overFromRightWithFade | |
| − | + |     • SceneManager.overFromBottomWithFade | |
| − | + |     • SceneManager.overFromTopWithFade | |
| − | + | ||
| Fade & flip functions | Fade & flip functions | ||
| − | + |     • SceneManager.fade | |
| − | + |     • SceneManager.crossFade | |
| − | + |     • SceneManager.flip | |
| − | + |     • SceneManager.flipWithFade | |
| − | + |     • SceneManager.flipWithShade | |
| − | |||
| − | |||
| + | == Transition Events == | ||
| The scene manager dispatches the following four events: | The scene manager dispatches the following four events: | ||
| − | + |     • enterBegin: Dispatched when your new scene is about to enter the stage. You can initialize your variables here. | |
| − | + |     • enterEnd: Dispatched after the transition of new scene has ended. Mostly, you add listeners and start your logic here. | |
| − | + |     • exitBegin: Dispatched when your current scene is about to leave the stage. You can remove listeners and stop timers here. | |
| − | + |     • exitEnd: Dispatched after your current scene has left the stage. | |
| − | |||
| The following code shows an example scene (“MyScene”) and how you might use the “enterEnd” and “exitBegin” events: | The following code shows an example scene (“MyScene”) and how you might use the “enterEnd” and “exitBegin” events: | ||
| − | + | <syntaxhighlight lang="lua"> | |
| − | < | + | MyScene = Core.class(Sprite) | 
| − | MyScene =  | ||
| − | |||
| function MyScene:init() | function MyScene:init() | ||
| − | + | 	self:addEventListener("enterEnd", self.onEnterEnd, self) | |
| − | + | 	self:addEventListener("exitBegin", self.onExitBegin, self) | |
| end | end | ||
| − | |||
| function MyScene:onEnterEnd() | function MyScene:onEnterEnd() | ||
| − | + | 	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self) | |
| − | + | 	-- create your timers | |
| − | + | 	-- also you can add your player sprite | |
| − | + | 	-- and so on... | |
| end | end | ||
| − | |||
| function MyScene:onExitBegin() | function MyScene:onExitBegin() | ||
| − | + | 	self:removeEventListener(Event.ENTER_FRAME, self.onEnterFrame, self) | |
| − | + | 	-- stop your timers | |
| − | + | 	-- save score | |
| − | + | 	-- and so on... | |
| end | end | ||
| − | </ | + | </syntaxhighlight> | 
| + | |||
| + | |||
| + | '''PREV.''': [[Classes in Gideros]]<br/> | ||
| + | '''NEXT''': [[Introduction to Graphics]] | ||
| + | |||
| + | |||
| + | {{GIDEROS IMPORTANT LINKS}} | ||
Latest revision as of 22:15, 18 November 2023
The Ultimate Guide to Gideros Studio
Scene Management
Creating game flow and logic
Most applications and games have different scenes (e.g., menu, scoreboard, game levels, inventory, end-of-game, etc). A transition from one scene to another is usually started by user input or some other event. These transitions typically consist of the following steps:
• Construct the new scene (e.g., load bitmaps, sprites, sounds) • Hide the original scene and show the new scene, often with some kind of special effect (e.g., crossfading) • Destroy the old scene
Luckily, a "Scene Manager" library is provided directly in Gideros. :-)
Scene Manager Usage Overview
Create a class for each of your scenes (and preferably put them into separate .lua files):
Menu = Core.class(Sprite)
Game = Core.class(Sprite)
EndScene = Core.class(Sprite)
Create a SceneManager instance passing a table with scene names as keys and your classes as values:
local sceneManager = SceneManager.new{
   ["menu"] = Menu,
   ["game"] = Game,
   ["endScene"] = EndScene,
}
stage:addChild(sceneManager)
Change between scenes with function SceneManager:changeScene(sceneName, duration, transition, ease) like so:
sceneManager:changeScene("game", 1, SceneManager.moveFromTop, easing.linear)
SceneManager dispatches events as it makes the transition from one scene to another (enterBegin, enterEnd, exitBegin, exitEnd). You can register to listen for these events to begin/end your animations, clear your timers, save the scores, etc.
Built-in Transition Effects
The scene manager library defines the following transition effects: Move functions
• SceneManager.moveFromLeft • SceneManager.moveFromRight • SceneManager.moveFromBottom • SceneManager.moveFromTop • SceneManager.moveFromLeftWithFade • SceneManager.moveFromRightWithFade • SceneManager.moveFromBottomWithFade • SceneManager.moveFromTopWithFade
Overlay functions
• SceneManager.overFromLeft • SceneManager.overFromRight • SceneManager.overFromBottom • SceneManager.overFromTop • SceneManager.overFromLeftWithFade • SceneManager.overFromRightWithFade • SceneManager.overFromBottomWithFade • SceneManager.overFromTopWithFade
Fade & flip functions
• SceneManager.fade • SceneManager.crossFade • SceneManager.flip • SceneManager.flipWithFade • SceneManager.flipWithShade
Transition Events
The scene manager dispatches the following four events:
• enterBegin: Dispatched when your new scene is about to enter the stage. You can initialize your variables here. • enterEnd: Dispatched after the transition of new scene has ended. Mostly, you add listeners and start your logic here. • exitBegin: Dispatched when your current scene is about to leave the stage. You can remove listeners and stop timers here. • exitEnd: Dispatched after your current scene has left the stage.
The following code shows an example scene (“MyScene”) and how you might use the “enterEnd” and “exitBegin” events:
MyScene = Core.class(Sprite)
function MyScene:init()
	self:addEventListener("enterEnd", self.onEnterEnd, self)
	self:addEventListener("exitBegin", self.onExitBegin, self)
end
function MyScene:onEnterEnd()
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
	-- create your timers
	-- also you can add your player sprite
	-- and so on...
end
function MyScene:onExitBegin()
	self:removeEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
	-- stop your timers
	-- save score
	-- and so on...
end
PREV.: Classes in Gideros
NEXT: Introduction to Graphics
