Difference between revisions of "Animated Sprite Factory"

From GiderosMobile
(modified the code)
(added some more explanations)
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
<languages />
+
Here you will find various resources to help you create games and apps in Gideros Studio.
<translate>Here you will find various resources to help you create games and apps in Gideros Studio.</translate>
 
<br/>
 
<translate>'''note''': You may have to provide your own assets (fonts, gfx, …).</translate>
 
<br/>
 
  
=== <translate>Description</translate> ===
+
'''note''': You may have to provide your own assets (fonts, gfx, …).</br>
 +
'''note 2''': You can copy/paste the code :-)
 +
 
 +
=== Description ===
 
This section deals with animating any of your sprites (player, enemies, collectibles, ...). It can be used either in conjunction with cbump, liquidfun(box2d) or as standalone.
 
This section deals with animating any of your sprites (player, enemies, collectibles, ...). It can be used either in conjunction with cbump, liquidfun(box2d) or as standalone.
  
=== <translate>Sprite Sheet Animations (player, enemies, collectibles, npcs, ...)</translate> ===
+
=== Spritesheet Animations (player, enemies, collectibles, npcs, ...) ===
This is an example of how to animate using a sprite sheet.
+
This is an example of how to animate using a spritesheet.
 +
 
 +
==== If you are using a class ====
 
<source lang="lua">
 
<source lang="lua">
-- sprite sheet animations
+
Player = Core.class(Sprite)
 +
 
 +
function Player:init()
 +
-- spritesheet animations
 +
local spritesheettex = Texture.new("gfx/playable/mr_man.png")
 +
local cols, rows = 8, 6
 +
self.spritesheetimgs = {} -- table that will hold all the images in the sprite sheet
 +
self.anims = {} -- table that will hold all our animations ("idle", "run", ...)
 +
self.currentanim = ""
 +
self.frame = 0
 +
self.animspeed = 1 / 7
 +
self.animtimer = self.animspeed
 +
-- 1 retrieve all anims in spritesheet
 +
local w, h = spritesheettex:getWidth() / cols, spritesheettex:getHeight() / rows
 +
local spritesheettexregion = nil
 +
for r = 1, rows do
 +
for c = 1, cols do
 +
spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h)
 +
self.spritesheetimgs[#self.spritesheetimgs + 1] = spritesheettexregion
 +
end
 +
end
 +
-- 2 create animations
 +
self:createAnim("idle", 1, 4)
 +
self:createAnim("run", 9, 14)
 +
self.currentanim = "run"
 +
-- 3 we can now create the player
 +
self.bitmap = Bitmap.new(self.spritesheetimgs[1])
 +
self.bitmap:setAnchorPoint(0.5, 0.5)
 +
self.bitmap:setScale(2)
 +
self:addChild(self.bitmap)
 +
-- LISTENERS
 +
self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
 +
end
 +
 
 +
-- PLAYER LOOP
 +
function Player:onEnterFrame(e)
 +
-- animations
 +
if self.currentanim ~= "" then
 +
self.animtimer = self.animtimer - e.deltaTime
 +
if self.animtimer <= 0 then
 +
self.frame += 1
 +
self.animtimer = self.animspeed
 +
if self.frame > #self.anims[self.currentanim] then
 +
self.frame = 1
 +
end
 +
self.bitmap:setTextureRegion(self.anims[self.currentanim][self.frame])
 +
end
 +
end
 +
self.bitmap:setPosition(128, 64)
 +
end
 +
 
 +
-- FUNCTIONS
 +
function Player:createAnim(xanimname, xstart, xfinish)
 +
self.anims[xanimname] = {}
 +
for i = xstart, xfinish do
 +
self.anims[xanimname][#self.anims[xanimname] + 1] = self.spritesheetimgs[i]
 +
end
 +
end
 +
</source>
 +
 
 +
==== If you are not using a class ====
 +
<source lang="lua">
 +
-- spritesheet animations
 
local spritesheettex = Texture.new("gfx/hero/HQ_Trooper_all.png") -- change accordingly
 
local spritesheettex = Texture.new("gfx/hero/HQ_Trooper_all.png") -- change accordingly
local xcols, xrows = 6, 13 -- change accordingly
+
local cols, rows = 6, 13 -- change accordingly
 
local spritesheetimgs = {} -- table that will hold all the images in the sprite sheet
 
local spritesheetimgs = {} -- table that will hold all the images in the sprite sheet
 
local anims = {} -- table that will hold all our animations ("idle", "run", ...)
 
local anims = {} -- table that will hold all our animations ("idle", "run", ...)
Line 23: Line 86:
  
 
-- 1 retrieve all anims in spritesheet
 
-- 1 retrieve all anims in spritesheet
local w, h = spritesheettex:getWidth() / xcols, spritesheettex:getHeight() / xrows
+
local w, h = spritesheettex:getWidth() / cols, spritesheettex:getHeight() / rows
 
local spritesheettexregion = nil
 
local spritesheettexregion = nil
for r = 1, xrows do
+
for r = 1, rows do
for c = 1, xcols do
+
for c = 1, cols do
 
spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h)
 
spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h)
 
spritesheetimgs[#spritesheetimgs + 1] = spritesheettexregion
 
spritesheetimgs[#spritesheetimgs + 1] = spritesheettexregion
Line 67: Line 130:
 
</source>
 
</source>
  
=== <translate>Assets</translate> ===
+
==== In your game ====
 +
Then all you need to do is create an instance of the player in your game class.
 +
<source lang="lua">
 +
local myhero = Player.new()
 +
</source>
 +
 
 +
=== Assets ===
 
You can pick the files from opengameart.org:
 
You can pick the files from opengameart.org:
 
* https://opengameart.org/content/space-soldier-resize-64x64
 
* https://opengameart.org/content/space-soldier-resize-64x64
 
* https://opengameart.org/content/pixel-coins-asset
 
* https://opengameart.org/content/pixel-coins-asset

Revision as of 23:22, 24 February 2021

Here you will find various resources to help you create games and apps in Gideros Studio.

note: You may have to provide your own assets (fonts, gfx, …).
note 2: You can copy/paste the code :-)

Description

This section deals with animating any of your sprites (player, enemies, collectibles, ...). It can be used either in conjunction with cbump, liquidfun(box2d) or as standalone.

Spritesheet Animations (player, enemies, collectibles, npcs, ...)

This is an example of how to animate using a spritesheet.

If you are using a class

Player = Core.class(Sprite)

function Player:init()
	-- spritesheet animations
	local spritesheettex = Texture.new("gfx/playable/mr_man.png")
	local cols, rows = 8, 6
	self.spritesheetimgs = {} -- table that will hold all the images in the sprite sheet
	self.anims = {} -- table that will hold all our animations ("idle", "run", ...)
	self.currentanim = ""
	self.frame = 0
	self.animspeed = 1 / 7
	self.animtimer = self.animspeed
	-- 1 retrieve all anims in spritesheet
	local w, h = spritesheettex:getWidth() / cols, spritesheettex:getHeight() / rows
	local spritesheettexregion = nil
	for r = 1, rows do
		for c = 1, cols do
			spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h)
			self.spritesheetimgs[#self.spritesheetimgs + 1] = spritesheettexregion
		end
	end
	-- 2 create animations
	self:createAnim("idle", 1, 4)
	self:createAnim("run", 9, 14)
	self.currentanim = "run"
	-- 3 we can now create the player
	self.bitmap = Bitmap.new(self.spritesheetimgs[1])
	self.bitmap:setAnchorPoint(0.5, 0.5)
	self.bitmap:setScale(2)
	self:addChild(self.bitmap)
	-- LISTENERS
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
end

-- PLAYER LOOP
function Player:onEnterFrame(e)
	-- animations
	if self.currentanim ~= "" then
		self.animtimer = self.animtimer - e.deltaTime
		if self.animtimer <= 0 then
			self.frame += 1
			self.animtimer = self.animspeed
			if self.frame > #self.anims[self.currentanim] then
				self.frame = 1
			end
			self.bitmap:setTextureRegion(self.anims[self.currentanim][self.frame])
		end
	end
	self.bitmap:setPosition(128, 64)
end

-- FUNCTIONS
function Player:createAnim(xanimname, xstart, xfinish)
	self.anims[xanimname] = {}
	for i = xstart, xfinish do
		self.anims[xanimname][#self.anims[xanimname] + 1] = self.spritesheetimgs[i]
	end
end

If you are not using a class

-- spritesheet animations
local spritesheettex = Texture.new("gfx/hero/HQ_Trooper_all.png") -- change accordingly
local cols, rows = 6, 13 -- change accordingly
local spritesheetimgs = {} -- table that will hold all the images in the sprite sheet
local anims = {} -- table that will hold all our animations ("idle", "run", ...)
local currentanim = ""
local frame = 0
local animspeed = 1 / 7 -- change accordingly
local animtimer = animspeed

-- 1 retrieve all anims in spritesheet
local w, h = spritesheettex:getWidth() / cols, spritesheettex:getHeight() / rows
local spritesheettexregion = nil
for r = 1, rows do
	for c = 1, cols do
		spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h)
		spritesheetimgs[#spritesheetimgs + 1] = spritesheettexregion
	end
end

-- 2 create animations
function createAnim(xanimname, xstart, xfinish)
	anims[xanimname] = {}
	for i = xstart, xfinish do
		anims[xanimname][#anims[xanimname] + 1] = spritesheetimgs[i]
	end
end
createAnim("idle", 1, 2)
createAnim("run", 25, 30)

-- 3 we can now create the player
local bitmap = Bitmap.new(spritesheetimgs[1])
bitmap:setAnchorPoint(0.5, 0.5)
bitmap:setPosition(128, 64)
stage:addChild(bitmap)
currentanim = "idle"
--currentanim = "run"

-- GAME LOOP
function onEnterFrame(e)
	if currentanim ~= "" then
		animtimer = animtimer - e.deltaTime
		if animtimer <= 0 then
			frame += 1
			animtimer = animspeed
			if frame > #anims[currentanim] then
				frame = 1
			end
			bitmap:setTextureRegion(anims[currentanim][frame])
		end
	end
end
stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

In your game

Then all you need to do is create an instance of the player in your game class.

local myhero = Player.new()

Assets

You can pick the files from opengameart.org: