How to create an animation from a .png image (without quads)?

[free.gen]

Hello to all! I just started to learn the LUA, and I need help with the animation. I googled my question for a very long time, but nothing worked out for me. I hope you'll give me a hand.

It's simple - I want my PNG picture to do this:

-appeared smoothly at a given point,
-moved down by 10px
-faded away
-after disappearing, nothing happens for 2 seconds
-the cycle starts anew (again from a given point)

I tried to do this with quads, but that doesn't suit me.
I made a gif animation to show what kind of animation I need.

[MrFariator]

By quads, I presume you tried making a sprite sheet with each of the individual frames? For an animation like this, you could very well just code the animation with love.graphics.setColor to change the transparency, and then just adjusting the draw coordinates you pass to love.graphics.draw. You could load the image of the arrow as a quad or as its own image, doesn't really make much of a difference.

[YoungNeer]

First of all - welcome to the forums. Generally we don't "make your games" as zorg pointed out in this post but since you are completely newbie - I'll not bother you with the rules.

So there are couple of ways you could do that

1. Use pgimeno's gifloading library available at here (has some issues though)
2. Don't work with quads - use Iffy
3. The solution that you wanted - Anima

I am uploading a possible solution here - but please note that Anima is still under active development and a lot of things will change so please use the library that goes with this love file (and don't git clone for now)

[monolifed]

move image y coord to y + 10
setColor from {1,1,1,1} to {1,1,1,0} before drawing the image

you can probably use https://github.com/kikito/tween.lua
(note: image may not appear smooth with non integer y-coord)

[raidho36]

I tried to do this with quads, but that doesn't suit me.

At the bottom level it will be done with quads anyhow, that's right about the only reasonable way to render sprites (the other being sprite mesh which is like quads except much more complicated to do and yields substantially less GPU overdraw). You can write a code that generates and renders all the relevant quads automatically. There are libraries that have this functionality already written by someone else.

This kind of animation can be done programmatically using a single static sprite. If you want to use individual separate frames to animate things, then go ahead and do just that. It's not like modern GPUs are in any shortage of VRAM to store your graphics.

[pgimeno]

1. Use pgimeno's gifloading library available at here (has some issues though)

I don't recommend this approach. That extends the load time and used memory unnecessarily. Also, GIFs can't do anti-aliasing via alpha, as they don't support partially transparent pixels.

[YoungNeer]

Also, GIFs can't do anti-aliasing via alpha, as they don't support partially transparent pixels.

Nice catch! I forgot that gifs can't be partially transparent