small "shaky-cam" effect

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
Ryne
Party member
Posts: 444
Joined: Fri Jan 29, 2010 11:10 am

small "shaky-cam" effect

Post by Ryne » Wed Dec 21, 2011 6:00 pm

So, I'm trying to create a basic camera (this doesn't interact with the character at all yet).

Assume I have these variables:

Code: Select all

camera = {}

camera.x = 0
camera.y = 0
camera.speed = 10 -- this will probably be multiplied by dt
I'd like the camera to move about just a little bit on it's focal point, Basically whatever camera.x is, the camera can move about 5-10 pixels in any direction, at a low speed (10 * dt). I guess the movement could be random, but playing around in photoshop I found a "figure-8" shape would look pretty nice.

I've tried a few things myself but this seems like a math-based issue, of which I'm not really that great.

Any help is appreciated!, thanks guys.

* on a side note, I've made several updates to the game - which I won't tell because I wan a surprise you guys. YOU KNOW TOO MUCH ALREADY.
@rynesaur

User avatar
Ellohir
Party member
Posts: 235
Joined: Sat Oct 22, 2011 11:12 pm

Re: small "shaky-cam" effect

Post by Ellohir » Wed Dec 21, 2011 6:24 pm

I think you could have a table with differential positions and cycle through it. Something like:

Code: Select all

shpos = 1
shakey = {}
shakey[1] = {dx = 0, dy = 0}
shakey[2] = {dx = 3, dy = 0}
shakey[3] = {dx = 5, dy = 2}
shakey[4] = {dx = 3, dy = 2}
shakey[5] = {dx = 1, dy = 1}
shakey[6] = {dx = -2, dy = -3}
shakey[7] = {dx = -1, dy = -5}
shakey[8] = {dx = 1, dy = -1}

-- play around with this depending on the pixel "roughness" and speed of the moves
You can update sh_pos every few time on love.update and draw by "camera.x + shakey[sh_pos].dx" position. The vector should give a consistent "cycle" the eye can get used to, but it's probably easier to just make a "camera.x + math.random(10)" and shouldn't be too difficult, try that too and see what it's like. I don't know how your camera is done but I guess you can adapt it. Hope it helped :awesome:

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: small "shaky-cam" effect

Post by Robin » Wed Dec 21, 2011 7:02 pm

When I do shaky cam, I use a random offset, but if you want to use figure-eights, that can be easily accomplished.

Remember the sword-slinging in Simon? You'd use something similar to that:

Code: Select all

xoffset = xmagnitude * math.sin(time * speed * 2)
yoffset = ymagnitude * math.sin(time * speed)
for a standing 8
or

Code: Select all

xoffset = xmagnitude * math.sin(time * speed)
yoffset = ymagnitude * math.sin(time * speed * 2)
for a horizontal one.
Help us help you: attach a .love.

User avatar
Taehl
Dreaming in associative arrays
Posts: 1024
Joined: Mon Jan 11, 2010 5:07 am
Location: CA, USA
Contact:

Re: small "shaky-cam" effect

Post by Taehl » Wed Dec 21, 2011 7:45 pm

What kind of camera-shake are you looking for? Running "bouncing all over the place" shaking, getting hit "shove in one direction and re-center" shaking, earthquake shaking?
Earliest Love2D supporter who can't Love anymore. Let me disable pixel shaders if I don't use them, dammit!
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.

coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: small "shaky-cam" effect

Post by coffee » Wed Dec 21, 2011 7:51 pm

I'm looking this with attention, I would like add (perhaps nothing too fancy and math calcullated, just some pixels offset random shaking) a small "camera/map" shake when hero get hit.

User avatar
Ryne
Party member
Posts: 444
Joined: Fri Jan 29, 2010 11:10 am

Re: small "shaky-cam" effect

Post by Ryne » Wed Dec 21, 2011 7:55 pm

Robin wrote:When I do shaky cam, I use a random offset, but if you want to use figure-eights, that can be easily accomplished.

Remember the sword-slinging in Simon? You'd use something similar to that:

Code: Select all

xoffset = xmagnitude * math.sin(time * speed * 2)
yoffset = ymagnitude * math.sin(time * speed)
for a standing 8
or

Code: Select all

xoffset = xmagnitude * math.sin(time * speed)
yoffset = ymagnitude * math.sin(time * speed * 2)
for a horizontal one.
I'm not quite sure how to implement this, could you explain it a bit more?

Taehl wrote:What kind of camera-shake are you looking for? Running "bouncing all over the place" shaking, getting hit "shove in one direction and re-center" shaking, earthquake shaking?
The camera shake is simply to animate the screen when idle. the camera will just sway around a little bit, at a very slow rate.

coffee wrote:I'm looking this with attention, I would like add (perhaps nothing too fancy and math calcullated, just some pixels offset random shaking) a small "camera/map" shake when hero get hit.
haha, yeah. I've already planned for that, at least for what I have in mind for combat - the camera would zoom and focus on the player, where I would try and make the combat seem dynamic by playing with the camera. :)


EDIT: Here is a really UGLY version of what I have in mind. This is "kind of" what I want, except this looks really ridged. Please no comments on how bad the code is, I'm no programmer. :(

http://d.pr/23Cy
@rynesaur

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: small "shaky-cam" effect

Post by Robin » Wed Dec 21, 2011 8:00 pm

In love.update:

Code: Select all

camera.time = camera.time + dt
camera.x = camera.xmag * math.sin(camera.time * camera.speed * 2)
camera.y = camera.ymag * math.sin(camera.time * camera.speed)
in love.draw:

Code: Select all

love.graphics.push()
love.graphics.translate(math.floor(camera.x), math.floor(camera.y))
-- drawing code
love.graphics.pop()
camera.xmag and camera.ymag are how much the camera shakes horizontally and vertically respectively.

Is that a clear explanation?
Help us help you: attach a .love.

coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: small "shaky-cam" effect

Post by coffee » Wed Dec 21, 2011 8:55 pm

Ryne wrote:
haha, yeah. I've already planned for that, at least for what I have in mind for combat - the camera would zoom and focus on the player, where I would try and make the combat seem dynamic by playing with the camera. :)
Well, I thought in more fancy effects like yours but then I remembered that would be an abuse/boring/repetitive do it all the times the player get's hit, so probably will stick for half-second/1 sec shake and nothing more.

About your demo (not critizing the code) I think would work great if faster and with more updates. Apply first Robin shaking pattern. It will work great for sure :)

User avatar
Ryne
Party member
Posts: 444
Joined: Fri Jan 29, 2010 11:10 am

Re: small "shaky-cam" effect

Post by Ryne » Thu Dec 22, 2011 4:27 am

Robin wrote:In love.update:

Code: Select all

camera.time = camera.time + dt
camera.x = camera.xmag * math.sin(camera.time * camera.speed * 2)
camera.y = camera.ymag * math.sin(camera.time * camera.speed)
in love.draw:

Code: Select all

love.graphics.push()
love.graphics.translate(math.floor(camera.x), math.floor(camera.y))
-- drawing code
love.graphics.pop()
camera.xmag and camera.ymag are how much the camera shakes horizontally and vertically respectively.

Is that a clear explanation?
worked great!, though now the camera doesn't start at my initial starting point.

Code: Select all

	camera = {} -- camera code
		
	camera.x = -290
	camera.y = -370
	camera.prex = camera.x
	camera.prey = camera.y
	camera.xmag = 4
	camera.ymag = 4
	camera.time = 2
	camera.speed = 1
I define the starting coordinates here, but it doesn't set the camera in place before your function jumps in.
@rynesaur

User avatar
osgeld
Party member
Posts: 303
Joined: Sun Nov 23, 2008 10:13 pm

Re: small "shaky-cam" effect

Post by osgeld » Thu Dec 22, 2011 5:14 am

ahh new lovers ...

your overwriting the original values with the ones provided in the formula, = overwrites

so maybe (without looking at a single bit of code...)

camera.x = camera.x + (camera.xmag * math.sin(camera.time * camera.speed * 2))
camera.y = camera.y + (camera.ymag * math.sin(camera.time * camera.speed))

?

Post Reply

Who is online

Users browsing this forum: No registered users and 41 guests