Screen shake

Hi wise guys,

i was wandering how would you create a screen shake effect to enhance some explosion effect with.
What items on screen should be affected ( screen borders only, UI, moving objects ) and how?

has anyone an existing sample I could start from?
thank you in advance

regards
A.

I would guess just have a flag (or a countdown timer) at the top of your draw function if you are shaking the screen and then before you do any drawing do a translate() call with a small random x and y offset.

@deactive Is this what you’re after. For this example, tap the screen to start, tap again to stop.


displayMode(FULLSCREEN)

function setup()
    w=WIDTH/2
    h=HEIGHT/2
    ws,hs=0,0
end

function draw()
    background(40, 40, 50)
    if shake then
        ws=math.random(-3,3)
        hs=math.random(-3,3)
    end
    sprite("Cargo Bot:Startup Screen",w+ws,h+hs)
end

function touched(t)
    if t.state==BEGAN then
        shake=not shake
    end
end

thanks @dave1707, that’s right the effect i expected to see.
thank you as well @TechDojo

@deactive Here’s another version where the shaking slows down and then stops after about 3 seconds. Tap the screen to start.


displayMode(FULLSCREEN)

function setup()
    w=WIDTH/2
    h=HEIGHT/2
    ws,hs=0,0
    shake=0
end

function draw()
    background(40, 40, 50)
    if shake>0 then
        sh=math.ceil(shake/10)
        ws=math.random(-sh,sh)
        hs=math.random(-sh,sh)
        shake=shake-1
    end
    sprite("Cargo Bot:Startup Screen",w+ws,h+hs)
end

function touched(t)
    if t.state==BEGAN then
        shake=180   -- causes about a 3 second shake
    end
end

Haven’t actually tried this but…

displayMode(FULLSCREEN)

function setup()
    w=WIDTH/2
    h=HEIGHT/2
    ws,hs=0,0
    shake=0
end

function draw()
    background(40, 40, 50)
    if shake>0 then
        sh=math.ceil(shake/10)
        ws=math.random(-sh,sh)
        hs=math.random(-sh,sh)
        shake=shake-1
        translate(ws,hs)        -- NOTE : All future drawings offset by this amount
    end

    sprite("Cargo Bot:Startup Screen",w,h)
    -- you can draw extra sprites here and everything will be shaken at the same rate

end

function touched(t)
    if t.state==BEGAN then
        shake=180   -- causes about a 3 second shake
    end
end

… this is what I meant by using translate()

@dave1707 - sorry about poaching your example :slight_smile:

Hi guys, thanks a lot. Couldn’t try these latest few samples, but I managed to get my whole things working with a timer and with some x and y random values decreasing constantly. @dave1707’s sample did the job for me. I only needed to let the effect to propagate to all of my items, and so I did.

If I’ll remember I’ll post a video later on in the evening. ( if you’re interested to )

Thanks again to @TechDojo too :slight_smile:

@TechDojo No problem reusing code. The translate option makes using multiple sprites or other objects easier to use with less code for them.

A bit off topic: Does anybody know if it is faster to do a single translate or to add some variable to both x and y?

Probably not much in it if you’re just doing it once per frame