Difference between revisions of "Tuto Gideros Game Template1 Part 7 Game"

From GiderosMobile
(wip)
 
Line 1: Line 1:
 
__TOC__
 
__TOC__
 
== The Game Scene ==
 
== The Game Scene ==
This is going to be the last scene for our Gideros Game Template1 tutorial.
+
This is going to be the last scene for our Gideros Game Template1 tutorial. A quick and simple one because you may decide to organize your game differently.
  
This is going to be a quick and simple one because you may decide to organize your game differently.
+
'''Note: you may have to provide your own game assets here'''
  
Usually, when I make games, prototypes, I put all my levels in one scene. When I change level I reload the game scene with a variable indicating the current level, eg.: currlevel = 1, 2, ...
+
Usually, when I make games and prototypes, I put all my levels in one scene. When I change levels I reload the '''Game''' scene with a variable indicating the current level, eg.: currlevel = 1, 2, ... and load the appropriate graphics, sounds, ...
  
For the reason cited above and for how long I have been using this kind of architecture, I decided to call the game Class: '''LevelX''' (please feel free to change it).
+
I have been using this kind of architecture for quite some time now, instead of calling my game scenes Level1, Level2, ..., I decided to call it: '''LevelX'''.
  
Our '''Game''' scene (LevelX) will mainly consist of:
+
The '''Game''' scene ('''LevelX''') will mainly consist of:
 
* moving the mouse cursor out of the way :-)
 
* moving the mouse cursor out of the way :-)
* dividing our scene into layers (Sprite): background layer, fx layer, actors layer, foreground layer, ...
+
* arranging our graphics into Sprite layers: ''background'' layer, ''fx'' layer, ''actors'' layer, ''foreground'' layer, ...
* the game loop
+
* a game loop
  
== The Options scene code ==
+
It makes sense to create the file in the '''scenes''' folder. You can call the file ''levelX.lua'', and the code:
It makes sense to create the file in the '''scenes''' folder. You can call the file "''options.lua''". Here is the code:
 
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 +
LevelX = Core.class(Sprite)
 +
 +
local ispaused = false
 +
 +
function LevelX:init()
 +
if not application:isPlayerMode() then -- move the cursor out of the way
 +
local sw, sh = application:get("screenSize") -- the user's screen size!
 +
application:set("cursorPosition", sw, sh) -- 0, 0
 +
end
 +
-- game sprites
 +
local levelgfxlayer = Sprite.new() -- one Sprite to hold them all
 +
local splatlayer = Sprite.new() -- fx layer
 +
local actionlayer = Sprite.new() -- actors layer
 +
-- the level bg & fg
 +
local drawbglevel, drawfglevel -- background and foreground layers
 +
if g_currlevel == 1 then
 +
drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/untitled_0001.png"))
 +
drawfglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/fg_lvl1_0001.png"))
 +
elseif g_currlevel == 2 then
 +
drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl2/untitled_0001.png"))
 +
elseif g_currlevel == 3 then
 +
drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl3/untitled_0001.png"))
 +
drawfglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/fg_lvl1_0001.png"))
 +
end
 +
drawbglevel:setAnchorPoint(0.5, 0.5)
 +
drawfglevel:setAnchorPoint(0.5, 0.5)
 +
-- position
 +
drawbglevel:setPosition(myappwidth/2-myappleft, myappheight/2)
 +
drawfglevel:setPosition(myappwidth/2-myappleft, 8*myappheight/10)
 +
-- order
 +
levelgfxlayer:addChild(drawbglevel) -- first the background layer
 +
levelgfxlayer:addChild(splatlayer) -- the fx layer
 +
levelgfxlayer:addChild(actionlayer) -- the actors layer
 +
if drawfglevel then levelgfxlayer:addChild(drawfglevel) end -- the foreground layer if any
 +
self:addChild(levelgfxlayer) -- the layer that holds them all
 +
-- the game loop
 +
self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
 +
-- let's go
 +
self:myKeysPressed()
 +
end
 +
 +
-- game loop
 +
function LevelX:onEnterFrame(e)
 +
if not ispaused then
 +
-- your game loop here
 +
end
 +
end
 +
 +
-- keys handler
 +
function LevelX:myKeysPressed()
 +
self:addEventListener(Event.KEY_DOWN, function(e) -- KEY_UP
 +
if e.keyCode == KeyCode.ESC or e.keyCode == KeyCode.BACK then self:gotoScene() end -- MENU
 +
if e.keyCode == KeyCode.P then ispaused = not ispaused end -- PAUSE
 +
-- modifier
 +
local modifier = application:getKeyboardModifiers()
 +
local alt = (modifier & KeyCode.MODIFIER_ALT) > 0
 +
if (not alt and e.keyCode == KeyCode.ENTER) then -- nothing here!
 +
elseif alt and e.keyCode == KeyCode.ENTER then -- SWITCH FULLSCREEN
 +
ismyappfullscreen = not ismyappfullscreen
 +
application:setFullScreen(ismyappfullscreen)
 +
end
 +
end)
 +
end
 +
 +
-- scenes navigation
 +
function LevelX:gotoScene()
 +
self:removeAllListeners()
 +
for i = stage:getNumChildren(), 1, -1 do
 +
stage:removeChildAt(i)
 +
end collectgarbage()
 +
stage:addChild(Transitions.new(Menu.new())) -- next scene
 +
end
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== Code comments ==
 
== Code comments ==
Sometimes a key doesn't have a KeyCode visual, eg.: the arrow keys. The local ''keyNames'' variable will translate the KeyCode of a key to a more user friendly name.
+
In the ''init'' function we:
 +
* move the mouse cursor out of the way
 +
* create the Sprite layers and "y" sort them from back to front
 +
* add the game loop Event.ENTER_FRAME
 +
* listen to some key to pause the game, go back to the Menu scene, ...
  
=== init ===
+
=== Sprite layers ===
In the ''init'' function we add:
+
I create a '''main''' Sprite layer ''levelgfxlayer'' which will hold all the other layers (Sprites and Bitmaps).
* a title for the scene
 
* the sliders to set the game sound volume and difficulty
 
* the '''keys to control the player''' which can be remapped
 
  
We listen for any key that can be remapped and activate the remap key system when "clicked".
+
The '''background''' layer is a Bitmap but you can change it to be a Sprite and add bitmaps to it.
  
The keys are added to the ''btns'' table which serves the keyboard navigation system.
+
The '''splat''' layer is a Sprite to add all sort of fx (splats in this case). Please feel free to rename any of the layers.
  
We add the sliders listeners and will save any modified value to the user preference file.
+
The '''action''' layer is a Sprite which we add all graphics that can be considered an actor (the player, the enemies, collectibles, ...)
  
The mouse listener will cancel any key remapping when clicked outside of a remappable key.
+
Finally the '''foreground''' layer is a Bitmap which you can change to be a Sprite.
  
Finally we update our buttons visuals and we are ready to process any change to a slider value or a key remapping event.
+
=== the game loop ===
 +
If the game is not in Pause mode it will execute what's inside it.
  
=== key remapping ===
+
=== keys handler ===
When we click on a remappable key (most of the buttons in this scene), the new value (KeyCode) will be assigned to that key. A friendly name will be displayed to show the change.
+
We also listen to any key press to switch the state of the game or go back to the Menu scene, ...
  
When the remapping is validated we save it to the user preference file.
+
== Next? ==
 +
Well that's it for this Gideros Game Template1 tutorial.
 +
 
 +
We should be good to go and dive straight into coding the core of the game, all the Template stuff being taken care of.
 +
 
 +
This is now yours to use/modify (add scenes, ...).
  
=== buttons actions ===
 
The buttons will trigger different actions according to the button id. If it is a remappable key we activate the remap system, if it is the MENU button we go back to the Menu scene.
 
  
== Next? ==
+
'''I hope this tutorial was useful and will help you on your journey of making great games using Gideros Studio ;-)'''
We hopefully have a good base for an '''Options''' scene. The final scene for this tutorial will be the '''Game''' scene.
 
  
  

Revision as of 20:48, 26 October 2024

The Game Scene

This is going to be the last scene for our Gideros Game Template1 tutorial. A quick and simple one because you may decide to organize your game differently.

Note: you may have to provide your own game assets here

Usually, when I make games and prototypes, I put all my levels in one scene. When I change levels I reload the Game scene with a variable indicating the current level, eg.: currlevel = 1, 2, ... and load the appropriate graphics, sounds, ...

I have been using this kind of architecture for quite some time now, instead of calling my game scenes Level1, Level2, ..., I decided to call it: LevelX.

The Game scene (LevelX) will mainly consist of:

  • moving the mouse cursor out of the way :-)
  • arranging our graphics into Sprite layers: background layer, fx layer, actors layer, foreground layer, ...
  • a game loop

It makes sense to create the file in the scenes folder. You can call the file levelX.lua, and the code:

LevelX = Core.class(Sprite)

local ispaused = false

function LevelX:init()
	if not application:isPlayerMode() then -- move the cursor out of the way
		local sw, sh = application:get("screenSize") -- the user's screen size!
		application:set("cursorPosition", sw, sh) -- 0, 0
	end
	-- game sprites
	local levelgfxlayer = Sprite.new() -- one Sprite to hold them all
	local splatlayer = Sprite.new() -- fx layer
	local actionlayer = Sprite.new() -- actors layer
	-- the level bg & fg
	local drawbglevel, drawfglevel -- background and foreground layers
	if g_currlevel == 1 then
		drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/untitled_0001.png"))
		drawfglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/fg_lvl1_0001.png"))
	elseif g_currlevel == 2 then
		drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl2/untitled_0001.png"))
	elseif g_currlevel == 3 then
		drawbglevel = Bitmap.new(Texture.new("gfx/levels/lvl3/untitled_0001.png"))
		drawfglevel = Bitmap.new(Texture.new("gfx/levels/lvl1/fg_lvl1_0001.png"))
	end
	drawbglevel:setAnchorPoint(0.5, 0.5)
	drawfglevel:setAnchorPoint(0.5, 0.5)
	-- position
	drawbglevel:setPosition(myappwidth/2-myappleft, myappheight/2)
	drawfglevel:setPosition(myappwidth/2-myappleft, 8*myappheight/10)
	-- order
	levelgfxlayer:addChild(drawbglevel) -- first the background layer
	levelgfxlayer:addChild(splatlayer) -- the fx layer
	levelgfxlayer:addChild(actionlayer) -- the actors layer
	if drawfglevel then levelgfxlayer:addChild(drawfglevel) end -- the foreground layer if any
	self:addChild(levelgfxlayer) -- the layer that holds them all
	-- the game loop
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
	-- let's go
	self:myKeysPressed()
end

-- game loop
function LevelX:onEnterFrame(e)
	if not ispaused then
		-- your game loop here
	end
end

-- keys handler
function LevelX:myKeysPressed()
	self:addEventListener(Event.KEY_DOWN, function(e) -- KEY_UP
		if e.keyCode == KeyCode.ESC or e.keyCode == KeyCode.BACK then self:gotoScene() end -- MENU
		if e.keyCode == KeyCode.P then ispaused = not ispaused end -- PAUSE
		-- modifier
		local modifier = application:getKeyboardModifiers()
		local alt = (modifier & KeyCode.MODIFIER_ALT) > 0
		if (not alt and e.keyCode == KeyCode.ENTER) then -- nothing here!
		elseif alt and e.keyCode == KeyCode.ENTER then -- SWITCH FULLSCREEN
			ismyappfullscreen = not ismyappfullscreen
			application:setFullScreen(ismyappfullscreen)
		end
	end)
end

-- scenes navigation
function LevelX:gotoScene()
	self:removeAllListeners()
	for i = stage:getNumChildren(), 1, -1 do
		stage:removeChildAt(i)
	end collectgarbage()
	stage:addChild(Transitions.new(Menu.new())) -- next scene
end

Code comments

In the init function we:

  • move the mouse cursor out of the way
  • create the Sprite layers and "y" sort them from back to front
  • add the game loop Event.ENTER_FRAME
  • listen to some key to pause the game, go back to the Menu scene, ...

Sprite layers

I create a main Sprite layer levelgfxlayer which will hold all the other layers (Sprites and Bitmaps).

The background layer is a Bitmap but you can change it to be a Sprite and add bitmaps to it.

The splat layer is a Sprite to add all sort of fx (splats in this case). Please feel free to rename any of the layers.

The action layer is a Sprite which we add all graphics that can be considered an actor (the player, the enemies, collectibles, ...)

Finally the foreground layer is a Bitmap which you can change to be a Sprite.

the game loop

If the game is not in Pause mode it will execute what's inside it.

keys handler

We also listen to any key press to switch the state of the game or go back to the Menu scene, ...

Next?

Well that's it for this Gideros Game Template1 tutorial.

We should be good to go and dive straight into coding the core of the game, all the Template stuff being taken care of.

This is now yours to use/modify (add scenes, ...).


I hope this tutorial was useful and will help you on your journey of making great games using Gideros Studio ;-)


Prev.: Tuto Gideros Game Template1 Part 6 Options

END


Tutorial - Gideros Game Template1