Canvas + camera shake

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.
User avatar
MMR4tzvp
Prole
Posts: 5
Joined: Sat May 30, 2015 4:26 am

Re: Canvas + camera shake

Post by MMR4tzvp »

ChicoGameDev wrote: Wed Feb 27, 2019 5:49 pm Hi,

Press space to shake the place ;)

Sorry didn't precise that... My bad.

Thanks for trying at least.


Regards
I did press space to shake it haha. Sorry for not mentioning that too. But when it shakes, I don't see any issues like in the gif.
User avatar
ChicoGameDev
Citizen
Posts: 70
Joined: Thu Feb 14, 2019 6:02 pm
Location: Switzerland
Contact:

Re: Canvas + camera shake

Post by ChicoGameDev »

grump wrote: Wed Feb 27, 2019 6:30 pm You need to add the (half) offset to all light coordinates.
Ah so you are totally aware of that haha. :awesome:

Alright I'll implement and see if it will be enough.


MMR4tzvp wrote: Wed Feb 27, 2019 6:31 pm I did press space to shake it haha. Sorry for not mentioning that too. But when it shakes, I don't see any issues like in the gif.
Whooops how is that possible ? Check the Luven version at the top of the file is that really Luven v1.025 exp. ?



Regards
Lionel Leeser

Luven : https://github.com/chicogamedev/Luven

--

Always keep Game Dev as a passion.
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: Canvas + camera shake

Post by grump »

ChicoGameDev wrote: Wed Feb 27, 2019 6:42 pm
grump wrote: Wed Feb 27, 2019 6:30 pm You need to add the (half) offset to all light coordinates.
Ah so you are totally aware of that haha. :awesome:
I mean it's pretty straightforward - if the lightmap is translated by -offset/2, all its contents will shift by that amount, so you have to compensate for that ;)
User avatar
ChicoGameDev
Citizen
Posts: 70
Joined: Thu Feb 14, 2019 6:02 pm
Location: Switzerland
Contact:

Re: Canvas + camera shake

Post by ChicoGameDev »

grump wrote: Wed Feb 27, 2019 6:48 pm I mean it's pretty straightforward - if the lightmap is translated by -offset/2, all its contents will shift by that amount, so you have to compensate for that ;)
Yes, now that you say it I feel stupid ... But you know it feels kind of "not nice" x)

That's why I thought it was not a good solution.


Regards
Lionel Leeser

Luven : https://github.com/chicogamedev/Luven

--

Always keep Game Dev as a passion.
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: Canvas + camera shake

Post by grump »

To come to think of it - you don't need the offscreen space. Why don't you just wiggle the camera position around in each update when it shakes? It doesn't really need to be a special case.
User avatar
ChicoGameDev
Citizen
Posts: 70
Joined: Thu Feb 14, 2019 6:02 pm
Location: Switzerland
Contact:

Re: Canvas + camera shake

Post by ChicoGameDev »

grump wrote: Wed Feb 27, 2019 7:05 pm To come to think of it - you don't need the offscreen space. Why don't you just wiggle the camera position around in each update when it shakes? It doesn't really need to be a special case.
What you saying intrigues me ! But I cannot understand what you mean. Or do you mean :

put the

Code: Select all

love.graphics.translate(dx, dy)
in the update and not the draw ?

If it will do what I think it will do this gonna be mind blowing !!! :o



Regards
Lionel Leeser

Luven : https://github.com/chicogamedev/Luven

--

Always keep Game Dev as a passion.
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: Canvas + camera shake

Post by grump »

I'm too lazy to read your code right now. What I mean is, you somewhere have something like

Code: Select all

lg.translate(camera.x, camera.y)
before you draw the graphics. Maybe it's more complicated if you do culling.

Make that

Code: Select all

lg.translate(camera.x + shakeX, camera.y + shakeY)
and animate the shake amount (in draw or update, doesn't matter, just do it before you decide what to draw)

Code: Select all

shakeX = shaking and love.math.random(-maxShake, maxShake) or 0
shakeY = shaking and love.math.random(-maxShake, maxShake) or 0
Edit to clarify this: you just need to take the shake amount into account when determining what to draw and where.
User avatar
ChicoGameDev
Citizen
Posts: 70
Joined: Thu Feb 14, 2019 6:02 pm
Location: Switzerland
Contact:

Re: Canvas + camera shake

Post by ChicoGameDev »

No problem,

I thank you already to give some time.

I'm not 100% sure I've understand what you mean. But maybe take a quick look when you have the will and motivation, and see if it's not what I'm already doing.

For the moment the bigger canvas solution is working wonderfully well !


Thanks.


Regards
Lionel Leeser

Luven : https://github.com/chicogamedev/Luven

--

Always keep Game Dev as a passion.
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: Canvas + camera shake

Post by grump »

Okay, that was a shitty explanation.

You want the background and the lights to shake, but not the lightmap, because then it doesn't cover the whole screen anymore. Instead of using a larger lightmap (which I think is a perfectly fine solution to the problem as long as the shake magnitude doesn't become too large), you could just add the shake amount to the light coordinates when you draw them. Do not offset them by half the maximum shake offset, but rather by the shake value for the current frame. The light positions will then be shaking along with the background, and the lightmap remains stationary.

That's a slightly more efficient solution, because the lightmap is smaller and you don't have to render lights that are outside the normally visible area.
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: Canvas + camera shake

Post by pgimeno »

Well, the real problem is using love.graphics.translate to shake.

The shake should really be in camera:set(). That will update the transform passed to the shader and not just the LÖVE transform.

EDIT: Patch against 1.025 exp.:

Code: Select all

diff --git a/luven/luven.lua b/luven/luven.lua
index b36409c..dba6803 100644
--- a/luven/luven.lua
+++ b/luven/luven.lua
@@ -80,14 +80,6 @@ local function cameraUpdate(dt)
     end -- if
 end -- function
 
-local function cameraDraw()
-    if (luven.camera.shakeDuration > 0) then
-        local dx = love.math.random(-luven.camera.shakeMagnitude, luven.camera.shakeMagnitude)
-        local dy = love.math.random(-luven.camera.shakeMagnitude, luven.camera.shakeMagnitude)
-        love.graphics.translate(dx, dy)
-    end -- if
-end -- function
-
 local function cameraGetViewMatrix()
     return luven.camera.transform:getMatrix()
 end -- function
@@ -106,8 +98,13 @@ function luven.camera:init(x, y)
 end -- function
 
 function luven.camera:set()
+    local dx, dy = 0, 0
+    if (luven.camera.shakeDuration > 0) then
+        dx = love.math.random(-luven.camera.shakeMagnitude, luven.camera.shakeMagnitude)
+        dy = love.math.random(-luven.camera.shakeMagnitude, luven.camera.shakeMagnitude)
+    end
     love.graphics.push()
-    self.transform:setTransformation(love.graphics.getWidth() / 2, love.graphics.getHeight() / 2, self.rotation, self.scaleX, self.scaleY, self.x, self.y)
+    self.transform:setTransformation(love.graphics.getWidth() / 2, love.graphics.getHeight() / 2, self.rotation, self.scaleX, self.scaleY, self.x + dx, self.y + dy)
     love.graphics.applyTransform(self.transform)
 end -- function
 
@@ -341,7 +338,6 @@ end -- function
 
 function luven.drawBegin()
     if (useIntegratedCamera) then
-        cameraDraw()
         luven.camera:set()
     end -- if
 
Edit2: Oops, I see you've dropped the shader. Still, the code was doing the shake outside of love.graphics.push(), which caused the issue, so the above patch fixes it.
Post Reply

Who is online

Users browsing this forum: No registered users and 17 guests