How are animatoins as for example in Stardew Valley done (when a player walks through grass or hits a tree they "wiggle"). I have three ideas:
- A sequence of frames is played where they drew each frame by hand s.t. it looks like wiggling (But does this scale in terms of how many sprites you have to draw and how many animations the computer has to draw if more then one player walk through grass etc?)
- They somehow produced gifs that play the full animation and just play that gif (same question as above)
- Something different, where they modify the sprite in runtime (forexample rotating it a bit to each side) s.t. it looks like wiggeling (does this have to do something with shaders?)
Many thanks and have a nice weekend
How are wiggle animations done?
Forum rules
Before you make a thread asking for help, read this.
Before you make a thread asking for help, read this.
Re: How are wiggle animations done?
This effect can be achieved by shearing the sprite.
love.graphics.draw last 2 optional arguments are 'kx' and 'ky'.
For this particular effect, only kx should be increased / decreased.
To see it in action you can try map it to a sine function.
Do note that for it to look good you will have to put the origin in the center bottom.
That is, ox is width/2, oy is height.
love.graphics.draw last 2 optional arguments are 'kx' and 'ky'.
For this particular effect, only kx should be increased / decreased.
To see it in action you can try map it to a sine function.
Do note that for it to look good you will have to put the origin in the center bottom.
That is, ox is width/2, oy is height.
Code: Select all
local grass = love.graphics.newImage("grass.png")
grass:setFilter("nearest", "nearest")
love.graphics.setBackgroundColor(255, 255, 255)
function love.draw()
local x, y = love.graphics.getWidth() / 2, love.graphics.getHeight() / 2 - grass:getWidth() / 2
local scale = 4
local ox, oy = grass:getWidth() / 2, grass:getHeight()
local sx = math.sin(love.timer.getTime()) * 0.35
love.graphics.draw(grass, x, y, nil, scale, scale, ox, oy, sx)
end
- Attachments
-
- Grass Demo.love
- (838 Bytes) Downloaded 159 times
- jojomickymack
- Prole
- Posts: 45
- Joined: Tue Dec 26, 2017 4:52 pm
Re: How are wiggle animations done?
I was intrigued with the idea of doing this with a shader and this is my attempt using moonshine.
It's way more complicated than sheering because the grass is a texture on a mesh. I just used the sketch filter and adjusted it slightly. I'm sure it can be tuned up a lot.
It's way more complicated than sheering because the grass is a texture on a mesh. I just used the sketch filter and adjusted it slightly. I'm sure it can be tuned up a lot.
- Attachments
-
- sketch003.love
- (599.69 KiB) Downloaded 114 times
-
- Prole
- Posts: 14
- Joined: Mon Jan 22, 2018 10:11 pm
Re: How are wiggle animations done?
thanks so much for both of your answers! I am using shearing for now and I will look at the shader solution as soon as I've read a bit about shaders
Who is online
Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 4 guests