## How to group 130 png files to make an explosion?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

### How to group 130 png files to make an explosion?

Hi,

i make an explosion effect with this site :
http://explosiongenerator.com/

Now i have a zip file with 130 PNG file

How insert this 130 PNG file in LOVE for make a beautiful explosion effect ?
http://www.noelshack.com/2016-48-148029 ... itre-1.jpg

I hope this is possible.
Last edited by paul54000 on Mon Nov 28, 2016 12:50 am, edited 5 times in total.

zorg
Party member
Posts: 2983
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: How to groupp 130 png files to make an explosion?

1. Either unzip and move images into your project folder (or a subfolder of it), or move the archive itself, and use love.filesystem.mount to mount the zip itself.
2. Load the images into a table
3. In love.update, increment a counter depending on how fast you want to move between frames
4. In love.draw, draw out the current frame

Note that this is not the most optimal thing to do; if the image files were combined into one sprite sheet (one file), then you'd only need to load in one file, and could use a SpriteBatch (or just the image with a quad).
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

### Re: How to group 130 png files to make an explosion?

It is possible to group these 130 files into 1 single PNG, without losing quality?

zorg
Party member
Posts: 2983
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: How to group 130 png files to make an explosion?

since png is lossless, quality won't be affected, though while there may be an easy solution to accomplish it, i don't know one.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

### Re: How to groupp 130 png files to make an explosion?

zorg wrote:1. Either unzip and move images into your project folder (or a subfolder of it), or move the archive itself, and use love.filesystem.mount to mount the zip itself.
2. Load the images into a table
3. In love.update, increment a counter depending on how fast you want to move between frames
4. In love.draw, draw out the current frame

Note that this is not the most optimal thing to do; if the image files were combined into one sprite sheet (one file), then you'd only need to load in one file, and could use a SpriteBatch (or just the image with a quad).
Can you make me an example with 5 PNG files please?
I am a novice and it is not easy to understand everything.
Animate a sprite and animate an explosion are the same ? and it will be necessary to use the same method?

raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

### Re: How to group 130 png files to make an explosion?

That really depends on how large the sprites are. You basically need to fit them all in the maximum hardware supported texture size, for modern desktop GPUs it should be 4k x 4k but can go upwards of 16k x 16k. If it's not possible to fit them all in one texture, you may fit them in multiple ones and select the texture that contains the frame needed. Having that said, sprite animations take shit ton of memory, especially if they're high resolution, and hardware abilities are not limitless, so you may need to optimize some things out, such as resolution and frame count. Note that the PNG size is not indicative because it's compressed, textures for rendering reside in VRAM uncompressed. So you gonna have to compute total number of pixels in the whole set of animation frames, times 4 bytes per pixel.

To answer the question, you need a tool that can generate sprite atlases, and a tool to load the atlas in the game. Any half-decent atlas generator should be able to take a list of files as input and produce appropriate output.

Sir_Silver
Party member
Posts: 286
Joined: Mon Aug 22, 2016 2:25 pm

### Re: How to group 130 png files to make an explosion?

This is probably not the simplest example, but I tried to comment it so that it would be easier to understand. My example uses a single main image and divides the image up into the parts that we want to animate.

You can download the love file attached at the bottom to see it in action too.

Code: Select all

local animation_table = {}
local current_frame = 1
local current_frame_duration = 0
local time_per_frame = 0.1

love.graphics.setBackgroundColor(255, 255, 255)

image = love.graphics.newImage("animation.png")  --We load the main image file that we want to animate.

local image_w, image_h = image:getDimensions()

--[[
The width of our quad will be equal to the width of the image divided by how many frames there are horizontally.
The height of our quad is equal to the height of the image divded by the number of frames vertically.
]]

for y = 0, 2 do
for x = 0, 4 do
end
end

--[[
This for loop allows us to offset subsections of our main image and store those subsections
into our animation table so that we can draw it.
]]

animation_table[#animation_table] = nil --The last image in the animation I've choosen is blank, so I remove it here.
end

function love.update(dt)
current_frame_duration = current_frame_duration + dt

if current_frame_duration >= time_per_frame then
current_frame = current_frame + 1

if current_frame > #animation_table then
current_frame = 1  --If we increment passed how many frames we have, we go back to the first frame.
end
end
end

function love.draw()
local x, y = love.mouse.getPosition()

love.graphics.draw(image, animation_table[current_frame], x, y)
--Here we draw the current frame, determined in love.update, at our mouse position
end


animation.love

paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

### Re: How to group 130 png files to make an explosion?

Thank you for your example Sir_Silver,

I will try to adapt it to make an explosion effect.

ivan
Party member
Posts: 1601
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

### Re: How to group 130 png files to make an explosion?

I have to interject here because I feel Paul is being steered in the wrong direction.
First of all 130 pngs is way too much.
Keyframe animations rarely go beyond 20-30 fps so if you plan on animating stuff in your game,
then you probably want to choose a reasonable and consistent frame rate.
Secondly, you're using a program to render an explosion procedurally,
then you plan to write another program just to display the animation.
Why not just use particle effects in the first place?

paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

### Re: How to group 130 png files to make an explosion?

I selected 32 png among my 130 png files, and I pasted them into a single file with photofiltre :

And with the sir_silver code, I was able to make an explosion effect, but it's not perfect yet.

Code: Select all

local animation_table = {}
local current_frame = 1
local current_frame_duration = 1
local time_per_frame = 1

love.graphics.setBackgroundColor(0, 32, 32)

image = love.graphics.newImage("explosion.png")  --We load the main image file that we want to animate.

local image_w, image_h = image:getDimensions()

--[[
The width of our quad will be equal to the width of the image divided by how many frames there are horizontally.
The height of our quad is equal to the height of the image divded by the number of frames vertically.
]]

for y = 0, 4 do
for x = 0, 10 do
end
end

--[[
This for loop allows us to offset subsections of our main image and store those subsections
into our animation table so that we can draw it.
]]

animation_table[#animation_table] = nil --The last image in the animation I've choosen is blank, so I remove it here.
end

function love.update(dt)
current_frame_duration = current_frame_duration + dt

if current_frame_duration >= time_per_frame then
current_frame = current_frame + 1

if current_frame > #animation_table then
current_frame = 1  --If we increment passed how many frames we have, we go back to the first frame.
end
end
end

function love.draw()
local x, y = love.mouse.getPosition()

love.graphics.draw(image, animation_table[current_frame], x, y)
--Here we draw the current frame, determined in love.update, at our mouse position
end
Attachments
explosion_effect.love