small "shaky-cam" effect

[Ryne]

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.

[Ellohir]

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

[Robin]

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.

[Taehl]

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?

[coffee]

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.

[Ryne]

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?

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.

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

[Robin]

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?

[coffee]

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

[Ryne]

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.

[osgeld]

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))

?