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
Before you make a thread asking for help, read this.
paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

How to group 130 png files to make an explosion?

Post by paul54000 » Mon Nov 28, 2016 12:36 am

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.

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

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

Post by zorg » Mon Nov 28, 2016 12:48 am

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 :3True 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?

Post by paul54000 » Mon Nov 28, 2016 1:18 am

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

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

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

Post by zorg » Mon Nov 28, 2016 1:20 am

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 :3True 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?

Post by paul54000 » Mon Nov 28, 2016 1:26 am

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?

User avatar
raidho36
Party member
Posts: 1994
Joined: Mon Jun 17, 2013 12:00 pm

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

Post by raidho36 » Mon Nov 28, 2016 3:44 am

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.

User avatar
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?

Post by Sir_Silver » Mon Nov 28, 2016 4:19 am

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
Image
animation.love
(73.72 KiB) Downloaded 96 times

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

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

Post by paul54000 » Mon Nov 28, 2016 5:10 am

Thank you for your example Sir_Silver,

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

User avatar
ivan
Party member
Posts: 1546
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

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

Post by ivan » Mon Nov 28, 2016 5:37 am

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?

Post by paul54000 » Mon Nov 28, 2016 6:06 am

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

Image

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
Attachments
explosion_effect.love
(337.35 KiB) Downloaded 85 times

Post Reply

Who is online

Users browsing this forum: No registered users and 11 guests