Difference between revisions of "Tuto tiny-ecs demo Part 3 tiny-ecs World"

From GiderosMobile
Line 57: Line 57:
 
All the rest is a classic ''scenemanager'' scene ([[SceneManager]]).
 
All the rest is a classic ''scenemanager'' scene ([[SceneManager]]).
  
'''At least you can now run the project and navigate to the Level 1 scene, using your finger, mouse or keyboard :-)'''
+
'''You can now run the project and navigate to the Level 1 scene, using your finger, mouse or keyboard :-)'''
  
 
== Entity ==
 
== Entity ==
where we will add our actors (Entities) to.
+
It is time to create our first Entity.
  
Create the '''main.lua''' file which contains the ''scenemanager'' and a list of scene transitions and easings:
+
In your project create three folders which you can call "_E", "_C", "_S".
 +
 
 +
In the entities folder "_E", create a file called "''ePlayer1.lua''" for example. This will be the player1 entity:
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 +
EPlayer1 = Core.class()
 +
 +
function EPlayer1:init(xspritelayer, x, y)
 +
-- ids
 +
self.isplayer1 = true -- id
 +
self.isactor = true -- id
 +
-- sprite
 +
self.spritelayer = xspritelayer
 +
self.sprite = Pixel.new(0x0000ff, 1, 32, 64)
 +
-- params
 +
self.x = x
 +
self.y = y
 +
end
 
</syntaxhighlight>
 
</syntaxhighlight>
  
== Menu scene ==
+
'''The key here is the entity ''id'''''.
 +
 
 +
An ''''''id'''''' will serve as a filter for a tiny-ecs '''System'''. That is a System will only apply to an entity with a specific '''id'''.
 +
 
 +
'''An entity can have multiple ids to make it available to more than one System'''.
 +
 
 +
After the id, we define a Sprite layer to draw our entity to. In this case our entity is a blue Pixel, with a width of 32 pixels and a height of 64 pixels.
 +
 
 +
All the entity variables (spritelayer, sprite, x and y position, ...) will be available to the Systems.
 +
 
 +
<big>In fact, all the entity variables can serve as an id, as we will see later</big>.
 +
 
 +
'''That's it, we created our first Entity, easy'''!
 +
 
 +
== Component ==
 
The Menu is a scene, so to better organise our code, please create a folder called "'''scenes'''" for example and create the ''menu.lua'' file inside it.
 
The Menu is a scene, so to better organise our code, please create a folder called "'''scenes'''" for example and create the ''menu.lua'' file inside it.
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">

Revision as of 23:16, 17 December 2023

tiny-ecs World

We will create our tiny-ecs world in the LevelX scene (cf: scenemanager).

Please create the levelX.lua file in the "scenes" folder:

LevelX = Core.class(Sprite)

function LevelX:init()
	-- bg
	application:setBackgroundColor(0x5a002d)
	-- the camera
	self.camera = Sprite.new()
	-- tiny-ecs
	self.tiny = require "classes/tiny-ecs"
	self.tiny.world = self.tiny.world()
	-- order
	self:addChild(self.camera)
	-- listeners
	self:addEventListener("enterBegin", self.onTransitionInBegin, self)
	self:addEventListener("enterEnd", self.onTransitionInEnd, self)
	self:addEventListener("exitBegin", self.onTransitionOutBegin, self)
	self:addEventListener("exitEnd", self.onTransitionOutEnd, self)
end

-- game loop
local dt
function LevelX:onEnterFrame(e)
	dt = e.deltaTime
	self.tiny.world:update(dt) -- tiny world
end

-- event listeners
function LevelX:onTransitionInBegin() self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self) end
function LevelX:onTransitionInEnd() self:myKeysPressed() end
function LevelX:onTransitionOutBegin() self:removeAllListeners() end
function LevelX:onTransitionOutEnd() end

-- app keys handler
function LevelX:myKeysPressed()
	self:addEventListener(Event.KEY_DOWN, function(e)
		-- menu (mobiles and desktops)
		if e.keyCode == KeyCode.BACK or e.keyCode == KeyCode.ESC then
			scenemanager:changeScene("menu", 1, transitions[2], easings[2])
		end
	end)
end

The camera is a Sprite which will hold our actors (entities).

Then we initialize tiny-ecs and make a reference to its world.

In the game loop, we update our tiny-ecs world, but there is nothing to update yet!

All the rest is a classic scenemanager scene (SceneManager).

You can now run the project and navigate to the Level 1 scene, using your finger, mouse or keyboard :-)

Entity

It is time to create our first Entity.

In your project create three folders which you can call "_E", "_C", "_S".

In the entities folder "_E", create a file called "ePlayer1.lua" for example. This will be the player1 entity:

EPlayer1 = Core.class()

function EPlayer1:init(xspritelayer, x, y)
	-- ids
	self.isplayer1 = true -- id
	self.isactor = true -- id
	-- sprite
	self.spritelayer = xspritelayer
	self.sprite = Pixel.new(0x0000ff, 1, 32, 64)
	-- params
	self.x = x
	self.y = y
end

The key here is the entity id.

An 'id' will serve as a filter for a tiny-ecs System. That is a System will only apply to an entity with a specific id.

An entity can have multiple ids to make it available to more than one System.

After the id, we define a Sprite layer to draw our entity to. In this case our entity is a blue Pixel, with a width of 32 pixels and a height of 64 pixels.

All the entity variables (spritelayer, sprite, x and y position, ...) will be available to the Systems.

In fact, all the entity variables can serve as an id, as we will see later.

That's it, we created our first Entity, easy!

Component

The Menu is a scene, so to better organise our code, please create a folder called "scenes" for example and create the menu.lua file inside it.

Next?

Next we will build our Entities, their Components and the Systems.


Prev.: Tuto tiny-ecs demo Part 2 Menu
Next: xxx


Tutorial - tiny-ecs demo