(REQUESTING HELP) Water animations.

[Midnoclose]

I'm working on a top-down sandbox game, and I'm trying to get animated water working!

[Sir_Silver]

Without writing any code for you, you need to:

keep track of which frame should currently draw,
draw said current frame,
figure out how long each frame should draw for,
determine when to change to the next frame.

[xNick1]

As Sir_Silver said.
This snippet may help you, I'll comment it.

Code: Select all

local wWidth, wHeight = lg.getDimensions()

--I'm creating an object called Sun, and I initialize all its properties. 
-- I used a lib called classic, that's the entity, you then have to inizialize, update and draw it in your love.load(), love.update(dt) and love.draw() functions

SunSummer = Object:extend()

function SunSummer:new(x)
    self.x = x
    self.y = 30
    -- horizontal speed
    self.speed = 20
    -- how often I want to change frame
    self.timeStill = 0.9
    self.timePassedStill = 0
    self.timeChangeSpeed = 1
    self.selectedStill = 1
    -- the array of images I want to use for my sun animations (you wanna do the same with water)
    self.imgPath = "assets/images/summer/"
    self.still = {
        lg.newImage(self.imgPath.."sun/sprite_0.png"),
        lg.newImage(self.imgPath.."sun/sprite_1.png"),
        lg.newImage(self.imgPath.."sun/sprite_2.png"),
        lg.newImage(self.imgPath.."sun/sprite_3.png"),
        lg.newImage(self.imgPath.."sun/sprite_4.png")
    }
    -- something you should never do, I handle resolution by hand, it'd be a mess to refactor everything, so I give every object a dynamic size 
    -- based on the dimentions of my screen
    self.width = wWidth / 6
    self.height = wHeight / 4
    self.sx = self.width / self.still[1]:getWidth()
    self.sy = self.height / self.still[1]:getHeight()
   -- I apply a filter so my pixel art stuff won't look blurry
    for k, i in ipairs(self.still) do
        i:setFilter('nearest', 'nearest')
    end
end


function SunSummer:update(dt)
   -- I update my timer until it reaches a certain value and it resets itself.
   -- Every ~1 second I change the sprite of the sun, so that it animates
   self.timePassedStill = self.timePassedStill + self.timeChangeSpeed * dt

    if self.timePassedStill >= self.timeStill then
        self.timePassedStill = 0
        
        if self.selectedStill == #self.still then
            self.selectedStill = 1
        else
            self.selectedStill = self.selectedStill + 1
        end
    end

    -- at the same time I make the sun go left or right (it changes direction if it hits the screen borders)
    self.x = self.x + self.speed * dt

    if self.x < 0 then
        self.x = 0
        self.speed = -self.speed
    elseif self.x + self.width > wWidth then
        self.x = wWidth - self.width
        self.speed = -self.speed
    end
end

function SunSummer:draw()
    lg.setColor(208, 208, 15, 255)
    -- here I draw the right sprite I selected in the update method
    lg.draw(self.still[self.selectedStill], self.x, self.y, 0, self.sx, self.sy)
    lg.setColor(255, 255, 255, 255)
end

[Midnoclose]

As Sir_Silver said.
This snippet may help you, I'll comment it.

Code: Select all

local wWidth, wHeight = lg.getDimensions()

--I'm creating an object called Sun, and I initialize all its properties. 
-- I used a lib called classic, that's the entity, you then have to inizialize, update and draw it in your love.load(), love.update(dt) and love.draw() functions

SunSummer = Object:extend()

function SunSummer:new(x)
    self.x = x
    self.y = 30
    -- horizontal speed
    self.speed = 20
    -- how often I want to change frame
    self.timeStill = 0.9
    self.timePassedStill = 0
    self.timeChangeSpeed = 1
    self.selectedStill = 1
    -- the array of images I want to use for my sun animations (you wanna do the same with water)
    self.imgPath = "assets/images/summer/"
    self.still = {
        lg.newImage(self.imgPath.."sun/sprite_0.png"),
        lg.newImage(self.imgPath.."sun/sprite_1.png"),
        lg.newImage(self.imgPath.."sun/sprite_2.png"),
        lg.newImage(self.imgPath.."sun/sprite_3.png"),
        lg.newImage(self.imgPath.."sun/sprite_4.png")
    }
    -- something you should never do, I handle resolution by hand, it'd be a mess to refactor everything, so I give every object a dynamic size 
    -- based on the dimentions of my screen
    self.width = wWidth / 6
    self.height = wHeight / 4
    self.sx = self.width / self.still[1]:getWidth()
    self.sy = self.height / self.still[1]:getHeight()
   -- I apply a filter so my pixel art stuff won't look blurry
    for k, i in ipairs(self.still) do
        i:setFilter('nearest', 'nearest')
    end
end


function SunSummer:update(dt)
   -- I update my timer until it reaches a certain value and it resets itself.
   -- Every ~1 second I change the sprite of the sun, so that it animates
   self.timePassedStill = self.timePassedStill + self.timeChangeSpeed * dt

    if self.timePassedStill >= self.timeStill then
        self.timePassedStill = 0
        
        if self.selectedStill == #self.still then
            self.selectedStill = 1
        else
            self.selectedStill = self.selectedStill + 1
        end
    end

    -- at the same time I make the sun go left or right (it changes direction if it hits the screen borders)
    self.x = self.x + self.speed * dt

    if self.x < 0 then
        self.x = 0
        self.speed = -self.speed
    elseif self.x + self.width > wWidth then
        self.x = wWidth - self.width
        self.speed = -self.speed
    end
end

function SunSummer:draw()
    lg.setColor(208, 208, 15, 255)
    -- here I draw the right sprite I selected in the update method
    lg.draw(self.still[self.selectedStill], self.x, self.y, 0, self.sx, self.sy)
    lg.setColor(255, 255, 255, 255)
end

Thank you very much! EDIT: Also, it has a github repo now, so I'll add it soon. https://github.com/Midnoclose/tiny-foret/tree/master