LOVE-Example-Browser

LOVE-Example-Browser copied to clipboard

Bug Show

it Twinkling

Fixing

We need to fix two files examples/011_animation.lua and animation.lua

examples/011_animation.lua

source

-- Example: Create and use an Animation
require("animation")

function newImagePO2(filename)
	local source = love.image.newImageData(filename)
	local w, h = source:getWidth(), source:getHeight()
	
	-- Find closest power-of-two.
	local wp = math.pow(2, math.ceil(math.log(w)/math.log(2)))
	local hp = math.pow(2, math.ceil(math.log(h)/math.log(2)))

	-- Only pad if needed:
	if wp ~= w or hp ~= h then
	local padded = love.image.newImageData(wp, hp)
	padded:paste(source, 0, 0)
	return love.graphics.newImage(padded)
	end

	return love.graphics.newImage(source)
end

function love.load()
	-- Set a lovely pink background color.
	love.graphics.setBackgroundColor(0.96, 0.77, 0.87)
	
	-- Load the source of the animation.
	img = newImagePO2("assets/anim-boogie.png")
	
	-- Create an animation with a frame size of 32x32 and
	-- 0.1s delay betwen each frame.
	animation1 = newAnimation(img, 32, 32, 0.1, 6)
end

function love.update(dt)
	-- The animation must be updated so it 
	-- knows when to change frames.
	animation1:update(dt)
end

function love.draw()
	-- Draw the animation the center of the screen.
	animation1:draw(400, 300, 0, 1, 1)
end

The image source w and h are 96✖️64, but wp and hp become 128✖️64 after -- Find closest power-of-two. calculate。

assets/anim-boogie.png size doesn't right anymore.

fix to: can we just comment on the calculating part?

animation.lua

source

...
	for i = 1, frames do
		local row = math.floor(i/rowsize) -- rowsize is 3
		local column = i%rowsize
		local frame = love.graphics.newQuad(column*fw, row*fh, fw, fh, imgw, imgh)
		table.insert(a.frames, frame)
		table.insert(a.delays, delay)
	end
...

Depending on newAnimation(img, 32, 32, 0.1, 6) example code above. frames == 6, for 1 to 6（included）.

So, the row value will be 0 0 1 1 1 2 in the loop for. the processing like this:

1: local row = math.floor(0/3) => 0 2: ... 3: local row = math.floor(3/3) => 1 ... 6: local row = math.floor(6/3) => 2

Ending result just cut the 1st 32✖️32 png on the first row. lose one png in whole frames.

fix to i = 0 and frames - 1, so the loop from 0 to 5:

frames = frames - 1
for i = 0, frames do
		local row = math.floor(i/rowsize) -- rowsize is 3
		local column = i%rowsize
		local frame = love.graphics.newQuad(column*fw, row*fh, fw, fh, imgw, imgh)
		table.insert(a.frames, frame)
		table.insert(a.delays, delay)
	end

End: row value 0 0 0 1 1 1

The good answer is (0 to frames -1 as said, -1 was forgot in the example), and use rowsize -1, else it will go from 0 to 3 instead of 0 to 2 at each line in the exemple. So:

for i = 0, frames - 1 do
                local row = math.floor(i/rowsize)
                local column = i%(rowsize -1)