MXPain Posted January 28, 2014 Share Posted January 28, 2014 I try to shake the camera on a timer but it does not move, what could be wrong? cameraShake: function() { var min = -20; var max = 20; this.game.camera.x+= Math.floor(Math.random() * (max - min + 1)) + min; this.game.camera.y+= Math.floor(Math.random() * (max - min + 1)) + min; }, Link to comment Share on other sites More sharing options...
Exventri Posted January 29, 2014 Share Posted January 29, 2014 You have to set the world bounds like so: game.world.setBounds(-20, -20, game.width+20, game.height+2); that worked for me. Link to comment Share on other sites More sharing options...
MXPain Posted January 30, 2014 Author Share Posted January 30, 2014 many thanks, I'll try it. Link to comment Share on other sites More sharing options...
Boxtufty Posted April 20, 2014 Share Posted April 20, 2014 Sorry if it's inappropriate to bump this thread. Can someone give me a little example of how this could be applied? This is what I tried: (yeah, yeah laugh at the idiot ;_; )Function shakerino() {for(var i=0;i<6;i++){ var rand1 = game.rnd.integerInRange(-20,20); var rand2 = game.rnd.integerInRange(-20,20); var rand3 = game.rnd.integerInRange(-20,20); var rand4 = game.rnd.integerInRange(-20,20); game.world.setBounds(rand1, rand2, game.width + rand3, game.height + rand4); } game.world.setBounds(0, 0, game.width,game.height); // normalize after shake?} // Nothing at all seems to happen when I call this funct Link to comment Share on other sites More sharing options...
jpdev Posted April 20, 2014 Share Posted April 20, 2014 I guess you placed this code in your update function. The problem is you have to think of what a phaser game does for every frame that is displayed on screen:- calls your updated functions- does physic-engine stuff- paints the sprites on screen This happens over and over again. If you change the world-bounds in the update function, and then put them right back where they were, then by the time we reach the painting code, nothing has moved at all. So the solution is to get rid of the loop, and only reset the world bounds after you have shaken the world enough.(To check if we have shaken enough we should check a counter or the time.) Quick example: put a variable somewhere (for example global):var shakeWorld = 0;in the update function put:if (shakeWorld > 0) { var rand1 = game.rnd.integerInRange(-20,20); var rand2 = game.rnd.integerInRange(-20,20); game.world.setBounds(rand1, rand2, game.width + rand1, game.height + rand2); shakeWorld--; if (shakeWorld == 0) { game.world.setBounds(0, 0, game.width,game.height); // normalize after shake? }}when ever you want to shake the world you do this:shakeWorld = 80; Now the world will shake for the next 80 frames. If you want the shake effekt to have a duration that is not framerate dependend you have to switch from a simple counter to a timestamp and a little calculation. mtburdon 1 Link to comment Share on other sites More sharing options...
Boxtufty Posted April 20, 2014 Share Posted April 20, 2014 Perfect, I really appreciate you taking the time to explain that, thanks! Link to comment Share on other sites More sharing options...
jackrugile Posted April 20, 2014 Share Posted April 20, 2014 In addition to jpdev's post you can also control the magnitude of the shake based on how long it has been shaking. For example, if you wanted an immediate blast to shake the camera at a rand of -20/+20, and then have that amount trickle down over 40 frames of the game, you could do something like the following. This would separate the duration from the magnitude. // global vars, or attach them to the current statevar shakeWorld = 0;var shakeWorldMax = 20;var shakeWorldTime = 0;var shakeWorldTimeMax = 40;// on updateif (shakeWorldTime > 0) { var magnitude = ( shakeWorldTime / shakeWorldTimeMax ) * shakeWorldMax; var rand1 = game.rnd.integerInRange(-magnitude,magnitude); var rand2 = game.rnd.integerInRange(-magnitude,magnitude); game.world.setBounds(rand1, rand2, game.width + rand1, game.height + rand2); shakeWorldTime--; if (shakeWorldTime == 0) { game.world.setBounds(0, 0, game.width,game.height); // normalize after shake? }}// then, whenever you want the shake to be triggered (bullet fired, land on ground, boss appearance, etc.)shakeWorldTime = shakeWorldTimeMax;This allows for short violent shakes or long subtle shakes, without a sharp cut off of non-shake once you settle back to zero. Manifest and Budda 2 Link to comment Share on other sites More sharing options...
mtburdon Posted April 21, 2014 Share Posted April 21, 2014 This was something I was looking for too and works perfectly. I am however having one very small issue, when it normalises after shake, I sometimes get a 1 or 2px gap to the right or bottom of my game screen. Is anyone else seeing this or know why it would be doing this? EDITAfter testing a little more it seems to be something to do with setting the first two params in the setBounds function, when removing rand1 and rand2 and keeping them as 0 it doesn't seem to happen and you still get a good shake effect for anyone coming across this issue. Would still be good to understand why this is happening though as these values are getting reset to 0 afterwards anyway. Link to comment Share on other sites More sharing options...
jackrugile Posted April 22, 2014 Share Posted April 22, 2014 It looks like the issue is that the normalize code might not be getting run. Try changing it to less than or equal to zero:if (shakeWorldTime <= 0) { console.log('normalized'); // test if this is ever getting run, watch your console game.world.setBounds(0, 0, game.width,game.height); // normalize after shake?}Glad it is working for the most part! Link to comment Share on other sites More sharing options...
mtburdon Posted April 22, 2014 Share Posted April 22, 2014 Hi jackrugile, that was what I thought but it turned out it actually was being run still, strange one! Link to comment Share on other sites More sharing options...
ChaosFX Posted July 7, 2014 Share Posted July 7, 2014 Hi,I used the code from jackrugile for my game to shake the screen every time the player dies. But after the shaking of the world the camera stops following the player.Apparently I am doing something wrong, can someone help me and tell me what. Link to comment Share on other sites More sharing options...
c023-dev Posted July 13, 2014 Share Posted July 13, 2014 Heya! I just transitioned from flixel to phaser and loving it so far! TONS OF ♥♥♥ for Richard! I've got the shaking to work fine too thanks jackrugile for sharing. That gave me a bit of insight. I just have one problem now, so I had to bump this. This seems to also reset my camera to 0.0 for x and y ... I tried entering the old current offsets as variables to get that back to where it was... BUT Since my bullets are set to die when off screen, after a shake they get killed earlier (by the camera offset I entered into the game.world.setBounds(96, 0, game.width,game.height)... and re-setting the camera.x doesn't seem to have an effect after setting the bounds?! Do I need to recalculate any other bounds? Thanks for any advice Link to comment Share on other sites More sharing options...
ZED Posted October 2, 2014 Share Posted October 2, 2014 Again was looking for that, thanks Link to comment Share on other sites More sharing options...
hellspawn_bg Posted October 3, 2014 Share Posted October 3, 2014 You can use the phaser screen shake plugin - https://github.com/dmaslov/phaser-screen-shake Link to comment Share on other sites More sharing options...
clark Posted November 9, 2014 Share Posted November 9, 2014 @hellspawn_bg Cool link, I wonder if this could be rolled into a function and submitted as a PR. I have hacked it into my group just for quickness (not shaking camera, shaking a display object) so I do not think it is limited to the camera. Also I am not sure where this belongs in the code. (Utils etc?) Link to comment Share on other sites More sharing options...
MXPain Posted September 12, 2015 Author Share Posted September 12, 2015 I'm glad that my theme lives, my final shake http://toybrainstudio.com/?p=435 Link to comment Share on other sites More sharing options...
Recommended Posts