How to group 130 png files to make an explosion?

[paul54000]

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.

[zorg]

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).

[paul54000]

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

[zorg]

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.

[paul54000]

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]

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]

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

function love.load()
	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()
	local quad_w, quad_h = image_w / 5, image_h / 3 
	
	--[[
		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
			animation_table[#animation_table + 1] = love.graphics.newQuad(x * quad_w, y * quad_h, quad_w, quad_h, image_w, image_h)
		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

(73.72 KiB) Downloaded 326 times

[paul54000]

Thank you for your example Sir_Silver,

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

[ivan]

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]

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

function love.load()
   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()
   local quad_w, quad_h = image_w / 14, image_h / 3
   
   --[[
      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
         animation_table[#animation_table + 1] = love.graphics.newQuad(x * quad_w, y * quad_h, quad_w, quad_h, image_w, image_h)
      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