Difference between revisions of "Animated Sprite Factory"

From GiderosMobile
(Created page with "__TOC__ <languages /> <translate>Here you will find various resources to help you create games and apps in Gideros Studio.</translate> <br/> <translate>'''note''': You may hav...")
 
(added example)
Line 26: Line 26:
 
self.lives = 1
 
self.lives = 1
 
self.accel = 500
 
self.accel = 500
self.maxspeed = 200 -- 150 -- 200
+
self.maxspeed = 200
self.jumpspeed = GRAVITY / 1.5
+
self.jumpspeed = 980
  
 
-- animations
 
-- animations
Line 50: Line 50:
 
-- create anims
 
-- create anims
 
self.anims = {}
 
self.anims = {}
if self.name == "player1" then
+
if self.name == "player1" then -- you can adapt your name here!
 
self:createAnim("idle", 1, 2, myanims_list)
 
self:createAnim("idle", 1, 2, myanims_list)
 
self:createAnim("jump_up", 38, 38, myanims_list)
 
self:createAnim("jump_up", 38, 38, myanims_list)
Line 56: Line 56:
 
self:createAnim("walk", 13, 16, myanims_list)
 
self:createAnim("walk", 13, 16, myanims_list)
 
self:createAnim("shoot", 67, 70, myanims_list)
 
self:createAnim("shoot", 67, 70, myanims_list)
elseif self.name == "enemy01" then
+
elseif self.name == "enemy01" then -- you can adapt your name here!
 
self:createAnim("walk", 1, 7, myanims_list)
 
self:createAnim("walk", 1, 7, myanims_list)
elseif self.name == "enemy02" then
+
elseif self.name == "enemy02" then -- you can adapt your name here!
 
self:createAnim("walk", 1, 5, myanims_list)
 
self:createAnim("walk", 1, 5, myanims_list)
elseif self.name == "coin01" then
+
elseif self.name == "coin01" then -- you can adapt your name here!
 
self:createAnim("walk", 1, 6, myanims_list)
 
self:createAnim("walk", 1, 6, myanims_list)
 
end
 
end
Line 67: Line 67:
 
self.bmp = Bitmap.new(myanims_list[1]) -- starting bmp texture
 
self.bmp = Bitmap.new(myanims_list[1]) -- starting bmp texture
 
self.bmp:setAnchorPoint(0.5, 0.5)
 
self.bmp:setAnchorPoint(0.5, 0.5)
if self.name == "player1" then
+
if self.name == "player1" then -- adapt name here
 
self.w = self.bmp:getWidth() / 2
 
self.w = self.bmp:getWidth() / 2
 
self.h = self.bmp:getHeight() - 0
 
self.h = self.bmp:getHeight() - 0
 
-- set position inside sprite
 
-- set position inside sprite
 
self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
 
self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
elseif self.name == "enemy01" then
+
elseif self.name == "enemy01" then -- adapt name here
 
self.w = self.bmp:getWidth() / 2
 
self.w = self.bmp:getWidth() / 2
 
self.h = self.bmp:getHeight() - 0
 
self.h = self.bmp:getHeight() - 0
 
-- set position inside sprite
 
-- set position inside sprite
 
self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
 
self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
elseif self.name == "enemy02" then
+
elseif self.name == "enemy02" then -- adapt name here
 
self.w = self.bmp:getWidth() / 8
 
self.w = self.bmp:getWidth() / 8
 
self.h = self.bmp:getHeight() - 0
 
self.h = self.bmp:getHeight() - 0
Line 95: Line 95:
 
local mysprite = Sprite.new()
 
local mysprite = Sprite.new()
 
mysprite:addChild(self.bmp)
 
mysprite:addChild(self.bmp)
-- mysprite:addChild(mypixel) -- debug
+
mysprite:addChild(mypixel) -- debug
 
self:addChild(mysprite)
 
self:addChild(mysprite)
  
Line 136: Line 136:
 
if e.keyCode == KeyCode.DOWN then self.iskeydown = false end
 
if e.keyCode == KeyCode.DOWN then self.iskeydown = false end
 
if e.keyCode == KeyCode.SPACE then self.iskeyspace = false end
 
if e.keyCode == KeyCode.SPACE then self.iskeyspace = false end
 +
end
 +
</source>
 +
 +
=== <translate>Example</translate> ===
 +
<source lang="lua">
 +
-- stage
 +
local player1 = Sprite_Maker.new("player1", "gfx/hero/HQ_Trooper_all.png", 6, 13, 64, 128)
 +
player1.lives = 3
 +
stage:addChild(player1)
 +
local coin = Sprite_Maker.new("coin01", "gfx/coins/coin_20_x01.png", 6, 1, 128, 128)
 +
coin:setScale(3)
 +
coin.animspeed = 1 / 3
 +
stage:addChild(coin)
 +
 +
-- GAME LOOP
 +
stage:addEventListener(Event.ENTER_FRAME, function(e)
 +
updatePlayer(player1, e.deltaTime)
 +
updateCollectibles(coin, e.deltaTime)
 +
end)
 +
 +
-- FUNCTIONS
 +
function updatePlayer(xsprite, dt)
 +
-- anim state
 +
if xsprite.vx == 0 then
 +
xsprite.currentanim = "idle"
 +
elseif xsprite.vx ~= 0 then
 +
xsprite.currentanim = "walk"
 +
end
 +
-- keyboard handling
 +
if xsprite.iskeyright then
 +
xsprite.vx += xsprite.accel * dt
 +
if xsprite.vx > xsprite.maxspeed then xsprite.vx = xsprite.maxspeed end
 +
xsprite.flip = 1
 +
elseif xsprite.iskeyleft then
 +
xsprite.vx -= xsprite.accel * dt
 +
if xsprite.vx < -xsprite.maxspeed then xsprite.vx = -xsprite.maxspeed end
 +
xsprite.flip = -1
 +
else
 +
xsprite.vx = 0
 +
end
 +
-- anim loop
 +
if xsprite.currentanim ~= "" then
 +
xsprite.animtimer = xsprite.animtimer - dt
 +
if xsprite.animtimer <= 0 then
 +
xsprite.frame += 1
 +
xsprite.animtimer = xsprite.animspeed
 +
if xsprite.frame > #xsprite.anims[xsprite.currentanim] then
 +
xsprite.frame = 1
 +
end
 +
xsprite.bmp:setTextureRegion(xsprite.anims[xsprite.currentanim][xsprite.frame])
 +
end
 +
end
 +
-- move & flip
 +
xsprite.x += xsprite.vx * dt
 +
xsprite.y += xsprite.vy * dt
 +
xsprite:setPosition(xsprite.x, xsprite.y)
 +
xsprite.bmp:setScale(xsprite.flip, 1)
 +
end
 +
 +
function updateCollectibles(xsprite, dt)
 +
-- anim state
 +
xsprite.currentanim = "walk"
 +
-- anim loop
 +
if xsprite.currentanim ~= "" then
 +
xsprite.animtimer = xsprite.animtimer - dt
 +
if xsprite.animtimer <= 0 then
 +
xsprite.frame += 1
 +
xsprite.animtimer = xsprite.animspeed
 +
if xsprite.frame > #xsprite.anims[xsprite.currentanim] then
 +
xsprite.frame = 1
 +
end
 +
xsprite.bmp:setTextureRegion(xsprite.anims[xsprite.currentanim][xsprite.frame])
 +
end
 +
end
 +
-- show
 +
xsprite:setPosition(xsprite.x, xsprite.y)
 +
xsprite.bmp:setScale(xsprite.flip, 1)
 
end
 
end
 
</source>
 
</source>

Revision as of 18:28, 8 December 2019

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, …).

Description

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

Animation Sprite Factory (player, enemies, collectibles, npcs, ...)

This animation sprite factory class allows you to control all your characters parameters like speed, animations, ...

Sprite_Maker = Core.class(Sprite)

function Sprite_Maker:init(xname, xspritesheet, xcols, xrows, xposx, xposy)
	-- settings
	self.name = xname
	self.x = xposx
	self.y = xposy
	self.vx = 0
	self.vy = 0
	self.flip = 1
	self.isonfloor = false
	self.isattacking = false
	self.lives = 1
	self.accel = 500
	self.maxspeed = 200
	self.jumpspeed = 980

	-- animations
	self.currentanim = ""
	self.frame = 0
	self.animspeed = 1 / 8
	self.animtimer = self.animspeed

	-- retrieve all anims in texture
	local myanimstex = Texture.new(xspritesheet)
	local cellw = myanimstex:getWidth() / xcols
	local cellh = myanimstex:getHeight() / xrows
	local myanims_list = {}
	for r = 1, xrows do
		for c = 1, xcols do
			local myanimstexregion = TextureRegion.new(
					myanimstex, (c - 1) * cellw, (r - 1) * cellh, cellw, cellh)
			myanims_list[#myanims_list + 1] = myanimstexregion
		end
	end

	-- create anims
	self.anims = {}
	if self.name == "player1" then -- you can adapt your name here!
		self:createAnim("idle", 1, 2, myanims_list)
		self:createAnim("jump_up", 38, 38, myanims_list)
		self:createAnim("jump_down", 39, 39, myanims_list)
		self:createAnim("walk", 13, 16, myanims_list)
		self:createAnim("shoot", 67, 70, myanims_list)
	elseif self.name == "enemy01" then -- you can adapt your name here!
		self:createAnim("walk", 1, 7, myanims_list)
	elseif self.name == "enemy02" then -- you can adapt your name here!
		self:createAnim("walk", 1, 5, myanims_list)
	elseif self.name == "coin01" then -- you can adapt your name here!
		self:createAnim("walk", 1, 6, myanims_list)
	end

	-- the bitmap
	self.bmp = Bitmap.new(myanims_list[1]) -- starting bmp texture
	self.bmp:setAnchorPoint(0.5, 0.5)
	if self.name == "player1" then -- adapt name here
		self.w = self.bmp:getWidth() / 2
		self.h = self.bmp:getHeight() - 0
		-- set position inside sprite
		self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
	elseif self.name == "enemy01" then -- adapt name here
		self.w = self.bmp:getWidth() / 2
		self.h = self.bmp:getHeight() - 0
		-- set position inside sprite
		self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
	elseif self.name == "enemy02" then -- adapt name here
		self.w = self.bmp:getWidth() / 8
		self.h = self.bmp:getHeight() - 0
		-- set position inside sprite
		self.bmp:setPosition(self.w / 2, self.h / 2 - 0 / 2)
	else
		self.w = self.bmp:getWidth()
		self.h = self.bmp:getHeight()
		-- set position inside sprite
		self.bmp:setPosition(self.w / 2, self.h / 2)
	end

	-- collisions debugging
	local mypixel = Pixel.new(0xff0000, 0.5, self.w, self.h)

	-- our sprite is ready
	local mysprite = Sprite.new()
	mysprite:addChild(self.bmp)
	mysprite:addChild(mypixel) -- debug
	self:addChild(mysprite)

	-- hero controls
	if self.name == "player1" then
		self.iskeyleft = false
		self.iskeyright = false
		self.iskeyup = false
		self.iskeydown = false
		self.iskeyspace = false

		self:addEventListener(Event.KEY_DOWN, self.onKeyDown, self)
		self:addEventListener(Event.KEY_UP, self.onKeyUp, self)
	end
end

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

-- KEYS HANDLER
function Sprite_Maker:onKeyDown(e)
	-- keys pressed
	if e.keyCode == KeyCode.LEFT then self.iskeyleft = true end
	if e.keyCode == KeyCode.RIGHT then self.iskeyright = true end
	if e.keyCode == KeyCode.UP then self.iskeyup = true end
	if e.keyCode == KeyCode.DOWN then self.iskeydown = true end
	if e.keyCode == KeyCode.SPACE then self.iskeyspace = true end
end

function Sprite_Maker:onKeyUp(e)
	-- keys released
	if e.keyCode == KeyCode.LEFT then self.iskeyleft = false end
	if e.keyCode == KeyCode.RIGHT then self.iskeyright = false end
	if e.keyCode == KeyCode.UP then self.iskeyup = false end
	if e.keyCode == KeyCode.DOWN then self.iskeydown = false end
	if e.keyCode == KeyCode.SPACE then self.iskeyspace = false end
end

Example

-- stage
local player1 = Sprite_Maker.new("player1", "gfx/hero/HQ_Trooper_all.png", 6, 13, 64, 128)
player1.lives = 3
stage:addChild(player1)
local coin = Sprite_Maker.new("coin01", "gfx/coins/coin_20_x01.png", 6, 1, 128, 128)
coin:setScale(3)
coin.animspeed = 1 / 3
stage:addChild(coin)

-- GAME LOOP
stage:addEventListener(Event.ENTER_FRAME, function(e)
	updatePlayer(player1, e.deltaTime)
	updateCollectibles(coin, e.deltaTime)
end)

-- FUNCTIONS
function updatePlayer(xsprite, dt)
	-- anim state
	if xsprite.vx == 0 then
		xsprite.currentanim = "idle"
	elseif xsprite.vx ~= 0 then
		xsprite.currentanim = "walk"
	end
	-- keyboard handling
	if xsprite.iskeyright then
		xsprite.vx += xsprite.accel * dt
		if xsprite.vx > xsprite.maxspeed then xsprite.vx = xsprite.maxspeed end
		xsprite.flip = 1
	elseif xsprite.iskeyleft then
		xsprite.vx -= xsprite.accel * dt
		if xsprite.vx < -xsprite.maxspeed then xsprite.vx = -xsprite.maxspeed end
		xsprite.flip = -1
	else
		xsprite.vx = 0
	end
	-- anim loop
	if xsprite.currentanim ~= "" then
		xsprite.animtimer = xsprite.animtimer - dt
		if xsprite.animtimer <= 0 then
			xsprite.frame += 1
			xsprite.animtimer = xsprite.animspeed
			if xsprite.frame > #xsprite.anims[xsprite.currentanim] then
				xsprite.frame = 1
			end
			xsprite.bmp:setTextureRegion(xsprite.anims[xsprite.currentanim][xsprite.frame])
		end
	end
	-- move & flip
	xsprite.x += xsprite.vx * dt
	xsprite.y += xsprite.vy * dt
	xsprite:setPosition(xsprite.x, xsprite.y)
	xsprite.bmp:setScale(xsprite.flip, 1)
end

function updateCollectibles(xsprite, dt)
	-- anim state
	xsprite.currentanim = "walk"
	-- anim loop
	if xsprite.currentanim ~= "" then
		xsprite.animtimer = xsprite.animtimer - dt
		if xsprite.animtimer <= 0 then
			xsprite.frame += 1
			xsprite.animtimer = xsprite.animspeed
			if xsprite.frame > #xsprite.anims[xsprite.currentanim] then
				xsprite.frame = 1
			end
			xsprite.bmp:setTextureRegion(xsprite.anims[xsprite.currentanim][xsprite.frame])
		end
	end
	-- show
	xsprite:setPosition(xsprite.x, xsprite.y)
	xsprite.bmp:setScale(xsprite.flip, 1)
end