Difference between revisions of "Animated Sprite Factory"
From GiderosMobile
(added example) |
|||
(13 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
− | + | 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, …).</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. | |
− | |||
− | |||
− | + | === Spritesheet Animations (player, enemies, collectibles, npcs, ...) === | |
− | + | This is an example of how to animate using a spritesheet. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | -- animations | + | ==== If you are using a class ==== |
+ | <syntaxhighlight lang="lua"> | ||
+ | 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.currentanim = "" | ||
self.frame = 0 | self.frame = 0 | ||
− | self.animspeed = 1 / | + | self.animspeed = 1 / 7 |
self.animtimer = self.animspeed | self.animtimer = self.animspeed | ||
− | + | -- 1 retrieve all anims in spritesheet | |
− | -- retrieve all anims in | + | local w, h = spritesheettex:getWidth() / cols, spritesheettex:getHeight() / rows |
− | local | + | local spritesheettexregion = nil |
− | + | for r = 1, rows do | |
− | + | for c = 1, cols do | |
− | local | + | spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h) |
− | for r = 1, | + | self.spritesheetimgs[#self.spritesheetimgs + 1] = spritesheettexregion |
− | for c = 1, | ||
− | |||
− | |||
− | |||
end | end | ||
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 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | self. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
end | end | ||
+ | self.bitmap:setPosition(128, 64) | ||
end | end | ||
-- FUNCTIONS | -- FUNCTIONS | ||
− | function | + | function Player:createAnim(xanimname, xstart, xfinish) |
self.anims[xanimname] = {} | self.anims[xanimname] = {} | ||
for i = xstart, xfinish do | for i = xstart, xfinish do | ||
− | self.anims[xanimname][#self.anims[xanimname] + 1] = | + | self.anims[xanimname][#self.anims[xanimname] + 1] = self.spritesheetimgs[i] |
end | end | ||
end | end | ||
+ | </syntaxhighlight> | ||
− | -- | + | ==== If you are not using a class ==== |
− | + | <syntaxhighlight lang="lua"> | |
− | + | -- 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 | end | ||
− | function | + | -- 2 create animations |
− | + | function createAnim(xanimname, xstart, xfinish) | |
− | + | anims[xanimname] = {} | |
− | + | for i = xstart, xfinish do | |
− | + | anims[xanimname][#anims[xanimname] + 1] = spritesheetimgs[i] | |
− | + | end | |
− | |||
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) |
− | local | + | bitmap:setPosition(128, 64) |
− | + | stage:addChild(bitmap) | |
− | + | currentanim = "idle" | |
− | + | --currentanim = "run" | |
− | |||
− | |||
− | stage:addChild( | ||
-- GAME LOOP | -- 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 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | if | ||
− | |||
− | |||
− | if | ||
− | |||
end | end | ||
− | + | bitmap:setTextureRegion(anims[currentanim][frame]) | |
end | end | ||
end | end | ||
− | |||
− | |||
− | |||
− | |||
− | |||
end | end | ||
+ | stage:addEventListener(Event.ENTER_FRAME, onEnterFrame) | ||
+ | </syntaxhighlight> | ||
− | + | ==== In your game ==== | |
− | + | Then all you need to do is create an instance of the player in your game class. | |
− | + | <syntaxhighlight lang="lua"> | |
− | + | local myhero = Player.new() | |
− | + | </syntaxhighlight> | |
− | + | ||
− | + | === Assets === | |
− | + | You can pick the files from opengameart.org: | |
− | + | * https://opengameart.org/content/space-soldier-resize-64x64 | |
− | + | * https://opengameart.org/content/pixel-coins-asset | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | {{GIDEROS IMPORTANT LINKS}} | |
− |
Latest revision as of 22:51, 18 November 2023
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:
- https://opengameart.org/content/space-soldier-resize-64x64
- https://opengameart.org/content/pixel-coins-asset