Animated images

General
1

Hello all,

I want to make a simple animation using a number of images. For example: 001.png to 100.png

There are two ways to make this animation:

  • 1. I need to create a class to display the image 001 to 100 as an animation. I suspect that I need to using the loop function. But I do not know how many CPU resources should eat this way.
  • 2. To convert images from 001 to 100 in GIF format. But that's not possible, right now, because Codea does not support to import GIF images.
If the idea with GIF cannot be applied now. Please give me a class to animate the images from 001 to 100.
Have a nice day!
2

In setup:

picno = 0

In draw():

if picno<10 then
sprite("Dropbox:00"..picno)
elseif picno<100 then
sprite("Dropbox:0"..picno)
else
sprite("Dropbox:"..picno)
End


if picno==100 then
picno =0
else
picno = picno + 1
end

Not actual code, just an idea from scratch out of my head… Supports up to 999 pngs… Hope it helps, the CPU is ok with it, but I don’t know about the ram and 100 pngs…

Assuming the pictures are in the Dropbox

3

My code:

--by connorbot999
function setup()
    smooth()
    iparameter("frameDelay", 1, 25, 10)
    animation = Animation({("Small World:Heart"),
                         ("Small World:Heart Gold"),
                          },
                            10)
end

function draw()
    background(0, 0, 0, 255)
    animation:setFrameDelay(frameDelay)
    animation:draw(WIDTH / 2, HEIGHT / 2) 
end

Animation = class()
function Animation:init(frames, delay)
    self.frames = frames 
    self.currentFrame = 1 
    self.frameDelay = delay 
    self.count = 1 
end
function Animation:draw(x, y)
    self.count = self.count + 1
    if self.count > self.frameDelay then
        self.count = 1
        self.currentFrame = self.currentFrame + 1
        if self.currentFrame > table.maxn(self.frames) then
            self.currentFrame = 1
        end
    end
    sprite(self.frames[self.currentFrame], x, y,200) 
end

function Animation:setFrameDelay(newDelay)
    self.frameDelay = newDelay
end
4

Many thanks to Inviso and Connorbot999!

Inviso, Your code is very easy to use / understand.

Connorbot999, Your code looks pretty good and even more.

But I do not understand this part:
function setup() smooth() iparameter("frameDelay", 1, 25, 10) animation = Animation({("Small World:Heart"),("Small World:Heart Gold"),},10) end
I want to automatically put my spritepack which containing 100 images, not every image, separately.
animation = Animation({("Small World:001"),("Small World:002"),},10)

5

(not made by me)

sprite("Tyrian Remastered:Gem Shine "..math.ceil(self.akey/2)

Seen on Whoosh(Game)

6

My code uses DeltaTime to animate time based:




-- Use this function to perform your initial setup
function setup()
    sprites = {}
    for i=0,5 do
        sprites[i+1] = "Dropbox:mysprite_"..i
    end
    time = 0
    sprNr = 1
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    time = time + DeltaTime
    
    -- draw ten sprites  per second
    if time >= 0.1 then
        name = sprites[sprNr%4+1]
        time = 0
        sprNr = sprNr + 1
    end
    
    spriteMode(CENTER)
    sprite(name, WIDTH/2, HEIGHT/2)
end
7

Nice @Doffer

As an alternative, if you have all the images in a single sprite sheet. In this example the sprite sheet would contain rows of 5, 32 by 32 sprites and 12 rows in total. The fourth row from the bottom would be displayed (yanim=3, starting from 0)

function setup()
    m = mesh()
    m.texture = "Dropbox:spritesheet" --sprite sheet
    recti = m:addRect(WIDTH/2,HEIGHT/2,32,32)   
    parameter("animspeed", 1, 10, 6) --user defined animation speed
    xanim=0
    yanim=3 --row of sprites to display starting from the bottom
    animdelay=0
    numacross=5 --number of columns of sprites
    numdown=12 --number of rows of sprites
end

function draw()
    background(40, 40, 50)  
    noSmooth()
    m:setRectTex(recti,xanim*(1/numacross), yanim*(1/numdown),(1/numacross),(1/numdown))
    if animdelay>animspeed then
    xanim = xanim + 1
    animdelay=0
    end
    if xanim>numacross-1 then
        xanim=0
        end
    animdelay = animdelay + 1       
    m:draw()
end
8

Another way is to import each image into a key value of a table, so you simply do

Sprite(tablename[frame])