Difference between revisions of "Animated Sprite Factory"
From GiderosMobile
(modified the code) |
|||
Line 7: | Line 7: | ||
=== <translate>Description</translate> === | === <translate>Description</translate> === | ||
− | This section deals with animating any of your sprites (player, enemies, collectibles, ...). It can be used either in conjunction with cbump, liquidfun or as | + | 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> | + | === <translate>Sprite Sheet Animations (player, enemies, collectibles, npcs, ...)</translate> === |
− | This | + | This is an example of how to animate using a sprite sheet. |
<source lang="lua"> | <source lang="lua"> | ||
− | -- | + | -- sprite sheet animations |
− | + | local spritesheettex = Texture.new("gfx/hero/HQ_Trooper_all.png") -- change accordingly | |
+ | local xcols, xrows = 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() / xcols, spritesheettex:getHeight() / xrows | |
− | + | local spritesheettexregion = nil | |
− | + | for r = 1, xrows do | |
− | + | for c = 1, xcols do | |
− | + | spritesheettexregion = TextureRegion.new(spritesheettex, (c - 1) * w, (r - 1) * h, w, h) | |
− | + | spritesheetimgs[#spritesheetimgs + 1] = spritesheettexregion | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
end | end | ||
end | end | ||
− | -- | + | -- 2 create animations |
− | function | + | function createAnim(xanimname, xstart, xfinish) |
− | + | anims[xanimname] = {} | |
for i = xstart, xfinish do | for i = xstart, xfinish do | ||
− | + | anims[xanimname][#anims[xanimname] + 1] = spritesheetimgs[i] | |
end | 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) | |
− | + | 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) | ||
</source> | </source> | ||
Revision as of 16:43, 23 November 2020
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(box2d) or as standalone.
Sprite Sheet Animations (player, enemies, collectibles, npcs, ...)
This is an example of how to animate using a sprite sheet.
-- sprite sheet animations
local spritesheettex = Texture.new("gfx/hero/HQ_Trooper_all.png") -- change accordingly
local xcols, xrows = 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() / xcols, spritesheettex:getHeight() / xrows
local spritesheettexregion = nil
for r = 1, xrows do
for c = 1, xcols 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)
Assets
You can pick the files from opengameart.org: