"Zoom" Effect/Desaturated World

[Ryne]

Hi everyone. I was wondering if it would be possible to create a "zoom" effect in love. Specifically I would like the camera to start "zoomed" into the player sprite, as sort of a freeze time at the beginning of the level, after a few seconds it would zoom out into the actual FOV of the game.

I was also wondering if it were possible to desaturate the entire game using the love engine instead of separate desaturated sprites. The purpose of the game is to bring color back to the world, so once objectives are completed then the world would gain it's color again. Any ideas on how this could be accomplished?

[Thursdaybloom]

I've not tried a zoom effect before, so I have no example code for you, but definitely look through love.graphics.scale.

There's no way of manipulating pixels in love so I'd say you're stuck with using seperate sprites. One thing worth trying is a grey box the size of your game window drawn above everything else with a changable alpha value. This might look ok

[Ryne]

I've not tried a zoom effect before, so I have no example code for you, but definitely look through love.graphics.scale.

There's no way of manipulating pixels in love so I'd say you're stuck with using seperate sprites. One thing worth trying is a grey box the size of your game window drawn above everything else with a changable alpha value. This might look ok

Yea thats what I was thinking actually, thanks for the reply and suggestions!

[ninwa]

Code: Select all

function love.load()
	desaturate = function(interval)
		return coroutine.create(function()
					local lastRan = 0
					local d	 = love.image.newImageData(512,512)
					local complete = false
					
					for x=1, 512 do
						for y=1, 512 do
							d:setPixel(x,y,150,150,150,255)
						end
					end

					
					
					while true do
						if complete then
							love.graphics.draw(dimg,0,0)
							return
						end
						
						if  (love.timer.getTime() - lastRan) > interval then
							local w, h = d:getWidth(), d:getHeight()
							
							for x=1, w do 
								for y=1, h do 
									local r,g,b,a = d:getPixel(x,y)
									if a >= 15 then a = a - 10 else complete = true end
									d:setPixel(x,y,r,g,b,a)
								end
							end
													
							lastRan = love.timer.getTime()
						end						
						local r1,g1,b1,a1 = d:getPixel(1,1)
						
						local dimg = love.graphics.newImage(d)
						love.graphics.draw(dimg,0,0)
						coroutine.yield()	
					end
				end)			
		end
	
	d = desaturate(.01) -- Desaturate alpha by 10 every 100th of a second 
end

function love.update(dt)

end

function love.draw()
	coroutine.resume(d)
end

This code starts with the world desaturated and saturates it. You can tweak lines 10 (set the last parameter to 0) and 28 (change it to <= 245 and make it +10) to flip it to desaturating. This is just a demo however, as it's kind of choppy and probably leaks memory. In fact, the only thing it has going for it is that it works (somewhat acceptably well.)

[Ryne]

Thanks a lot ninwa! I haven't had a chance to check this out yet so I'll try in within the next few days

[ninwa]

Thanks a lot ninwa! I haven't had a chance to check this out yet so I'll try in within the next few days

No problem, if you have any questions about how it works feel free. Coroutines are one of the most powerful features in Lua. If you need to you can easily take all of the contents in love.load() and put it into a 'desaturate.lua' and require it for code cleanliness. If you need to use the (de)saturate fade again you can just reset d by calling d = desaturate(interval). Hopefully love's GC will pickup the old coroutine, but that's potentially where there's a memory leak. I don't know Lua well enough to be sure.

[zac352]

There's no way of manipulating pixels in love so I'd say you're stuck with using seperate sprites. One thing worth trying is a grey box the size of your game window drawn above everything else with a changable alpha value. This might look ok

Code: Select all

function greyscale(img)
local im2=love.image.newImageData(img:getWidth(),img:getHeight())
img:mapPixel(function(x,y,r,g,b,a)
local av=(r+g+b)/3
im2:setPixel(x,y,av,av,av,a)
return r,g,b,a
end)
return im2
end