Difference between revisions of "Scene Management"

From GiderosMobile
(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:
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:
+
The Ultimate Guide to Gideros Studio
  
* Construct the new scene (e.g., load bitmaps, sprites, sounds)
+
__TOC__
* Hide the original scene and show the new scene, often with some kind of special effect (e.g., crossfading)
 
* Destroy the old scene
 
  
High level scene management functions aren’t provided directly in Gideros but the Gideros team has released a “Scene Manager” library (see: https://github.com/gideros/Scene-Manager) that can be used as is or that can be modified and extended to by the user (it’s licensed under the liberal MIT license).  The library includes a demonstration Gideros project that shows many of the available built-in transitions (a demonstration video can be found on YouTube: http://www.youtube.com/watch?feature=player_embedded&v=KQMSHOMInQU)
+
== Scene Management ==
  
=== Scene Manager Usage Overview ===
+
== 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">
<source lang="lua">
+
Menu = Core.class(Sprite)
Menu = gideros.class(Sprite)
+
Game = Core.class(Sprite)
Game = gideros.class(Sprite)
+
EndScene = Core.class(Sprite)
EndScene = gideros.class(Sprite)
+
</syntaxhighlight>
</source>
 
  
 
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">
<source lang="lua">
 
 
local sceneManager = SceneManager.new{
 
local sceneManager = SceneManager.new{
 
   ["menu"] = Menu,
 
   ["menu"] = Menu,
Line 26: Line 30:
 
}
 
}
 
stage:addChild(sceneManager)
 
stage:addChild(sceneManager)
</source>
+
</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">
<source lang="lua">
 
 
sceneManager:changeScene("game", 1, SceneManager.moveFromTop, easing.linear)
 
sceneManager:changeScene("game", 1, SceneManager.moveFromTop, easing.linear)
</source>
+
</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
  
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.overFromLeft
* SceneManager.overFromRight
+
    • SceneManager.overFromRight
* SceneManager.overFromBottom
+
    • SceneManager.overFromBottom
* SceneManager.overFromTop
+
    • SceneManager.overFromTop
* SceneManager.overFromLeftWithFade
+
    • SceneManager.overFromLeftWithFade
* SceneManager.overFromRightWithFade
+
    • SceneManager.overFromRightWithFade
* SceneManager.overFromBottomWithFade
+
    • SceneManager.overFromBottomWithFade
* SceneManager.overFromTopWithFade
+
    • SceneManager.overFromTopWithFade
+
 
 
Fade & flip functions
 
Fade & flip functions
* SceneManager.fade
+
    • SceneManager.fade
* SceneManager.crossFade
+
    • SceneManager.crossFade
* SceneManager.flip
+
    • SceneManager.flip
* SceneManager.flipWithFade
+
    • SceneManager.flipWithFade
* SceneManager.flipWithShade
+
    • SceneManager.flipWithShade
 
 
=== Transition Events ===
 
  
 +
== 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.
* 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.
* 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.
* 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.
* exitEnd: Dispatched after your current scene has leaved 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">
<source lang="lua">
+
MyScene = Core.class(Sprite)
MyScene = gideros.class(Sprite)
 
 
 
 
function MyScene:init()
 
function MyScene:init()
  self:addEventListener("enterEnd", self.onEnterEnd, self)
+
self:addEventListener("enterEnd", self.onEnterEnd, self)
  self:addEventListener("exitBegin", self.onExitBegin, self)
+
self:addEventListener("exitBegin", self.onExitBegin, self)
 
end
 
end
 
 
function MyScene:onEnterEnd()
 
function MyScene:onEnterEnd()
  self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
+
self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
  -- create your timers
+
-- create your timers
  -- also you can add your player sprite
+
-- also you can add your player sprite
  -- and so on...
+
-- and so on...
 
end
 
end
 
 
function MyScene:onExitBegin()
 
function MyScene:onExitBegin()
  self:removeEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
+
self:removeEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
  -- stop your timers
+
-- stop your timers
  -- save score
+
-- save score
  -- and so on...
+
-- and so on...
 
end
 
end
</source>
+
</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