Search the Community

Hey community, this is my first post here, I am sharing my scene in which I have used bounce and collision effect of phaser 3 , I have marked comments in order for understanding and reference purposes. The code I have laid down is as follows: window.onload = () => {//creating game window. class MainScene extends Phaser.Scene { preload() {// the following function preloads the image asset required in scene this.load.image("bird", "bird.png"); } create() { this.player = this.add.group();//grouping the sprite in order to load them at different positions this.time.addEvent({ delay: 1000, loop: true, callback: () => this.addBall() })//calling back addBall function after this.physics.add.collider(this.player, this.player);//setting collider object between every object } update() { if (this.player.getChildren().length > 10) {// if qty of objects/player is >10 const bird = this.player.getFirstAlive();//getting 1st instance of player this.tweens.add({targets: [bird], alpha: 0, duration: 500, onComplete: () => bird.destroy()});//deleting first instance of player } this.player.getChildren().forEach(bird => bird.setAngularVelocity(bird.body.velocity.x * 1));//to produce spiral motion } addBall() { const bird = this.physics.add.sprite(game.config.width / 3, 150, "bird");//assigning sprite to bird vairable this.player.add(bird);//assigning ball to bird.setBounce(0.7);//setting bounce value , bird.setDrag(1);//setting drag value bird.setCollideWorldBounds(true);//to enable collision setting bounds bird.setVelocity(Phaser.Math.Between(-800, 800), 0);//setting velocity bird.setScale(Math.random());//so that the objects are of random, not same size, } } const game = new Phaser.Game({ type: Phaser.AUTO, width: 600,//frame width height: 600,//frame height physics: { default: 'arcade', arcade: { gravity: {y: 1000},//setting up gravity value } }, scene: [MainScene] }); }; So thats how my scene looks and all the birds disappear after a certain time, as mentioned in the code, Feel free to suggest what more I shall improve upon in order to grow and develop, and how you feel of this scene. Thank You

I'm trying to create some billiard-like game, and want to be using arcade physics due to the number of objects. When using the (newer) circular objects, bounce does not seem to work like it's intended - at least if one object is very massy or immovable. Please try https://samme.github.io/phaser-examples-mirror/arcade%20physics/bounce%20knock.html and add a knocker.body.setCircle (16); ball.body.setCircle(16); after both bodys are created - a debugger in render() helps also: game.debug.body(knocker); game.debug.body(ball); You will notice a significant difference in behaviour, when the ball hits the knocker straight on. It should be reflected (bounce is 1), but instead momentum is almost completely killed, it just drifts a bit sideways if movement was not straight on. I can imagine the bounce routines are still rectangular based only, so they work so-so for circular/rectangular hits, but not for circular/circular... but then for rectangular hitboxes it works as intended...

I'm having trouble making enemies bounce back a bit after colliding with the player so that they don't just sit there relentlessly attacking. I had written this messy code: function collideEnemy(player, enemy) { player.immune = true; // Knocks back enemy after colliding enemy.follow = false; if(enemy.body.touching.left) { enemy.body.velocity.x = 256; } else if (enemy.body.touching.right) { enemy.body.velocity.x = -256; } else if (enemy.body.touching.up) { enemy.body.velocity.y = 256; } else if (enemy.body.touching.down) { enemy.body.velocity.y = -256; } // Makes the player immune for 1 second and then resets it and the enemy following movement game.time.events.add(Phaser.Timer.SECOND * 0.5, function() { player.immune = false; enemy.follow = true; }, this); } ...which worked for a single enemy, but stopped functioning when I made my monsters into a group. Does anyone have a better solution for this, or at least a way to make it work for grouped enemies? Here's my collision code: game.physics.arcade.overlap(player, monsters, collideEnemy, null, this); Thanks!

Hi there, I have a basic game where the player jumps from a building and must fall into different platforms during the falling to avoid crashing directly with the ground. The thing is that those platforms should have some bounce, I mean, when the player falls into those platforms, it should rebound like if they were some kind of elastic stuff... the problem is that as the platform has body.immovable = true it seems that body.bounce is not working at all, and I can´t apply body.bounce to the player because he should rebound only on those platforms, not on every single object. I have the world with a global gravity and those platforms immovable and with their gravity.y = -that global gravity, is this the best way to to this? Any other way to create purely static objects?

Hello, I am new to Phaser and I am trying to make the bullet bounce in the y axis in Phaser. Does anyone know how to do it? Thank you.

PIX HOP Hop, Bounce, Fall and Hop again ! Pix hop, simple endless platform game. You control a bouncy white square collecting coins and avoiding lovely colored enemies. [ Available on: GameJolt, itch.io , Newgrounds] Game supports GameJolt API , Don't forget to log in [ press G in Menu] with your Game Jolt account to Submit yourHighscore and achieve trophies [ Guests are allowed to submit scores make sure to change your name [press N in Menu ] Use Left and Right Arrows to Move [ Keyboard ] Use Left-Click Mouse to move [Mouse] Use Left and Right Arrows to Move [ Gamepad ] (Not compatible with all browsers) Waiting your feedbacks, suggestions and have fun playing Twitter: https://twitter.com/TheRockAbdo Facebook: https://www.facebook.com/bnoogames/

I'm working on a platform game using a tilemap and the player continously bounces around the level. The player moves around like a kangaroo and only has to press left or right while hopping around to navigate the level. I've tried setting body.bounce(1.0), but then the maximum height is always the same, the player always bounces up to his starting y-position. Which is not what I'm trying to do. So every time the player bounces on top of on a tile he hops up to a certain height. In other words, every bounce has the same height, when measured to the surface the player bounced on. See screenshots in attachement to see what I mean. My question is; how can I make the player always bounce to the same height?

hello, i need help with my game. I am trying to mkae the asteroids bounce back when they reach my blockedLayer (in tilemap) but when they reach the border they just stick to it(they still move but along the blockedlayer). here is the code. is it because they have a behavior with angular velocity? var TopDownGame = TopDownGame || {}; var bulletProperties = { speed: 400, interval: 250, lifeSpan: 2000, maxCount: 30, }; var playerProperties = { velocity: 300, timeToReset: 3, blinkDelay: 0.2, }; var asteroidProperties = { startingAsteroids: 4, maxAsteroids: 20, incrementAsteroids: 2, asteroidLarge: { minVelocity: 50, maxVelocity: 150, minAngularVelocity: 0, maxAngularVelocity: 200, score: 20, nextSize: 'asteroidMedium', pieces: 2, explosion:'explosionLarge' }, asteroidMedium: { minVelocity: 50, maxVelocity: 200, minAngularVelocity: 0, maxAngularVelocity: 200, score: 50, nextSize: 'asteroidSmall', pieces: 2, explosion:'explosionMedium' }, asteroidSmall: { minVelocity: 50, maxVelocity: 300, minAngularVelocity: 0, maxAngularVelocity: 200, score: 100, explosion:'explosionSmall' }, }; TopDownGame.Game = function(){}; TopDownGame.Game.prototype = { create: function() { this.map = this.game.add.tilemap('level1'); this.map.addTilesetImage('tiles', 'tiles'); this.backgroundlayer = this.map.createLayer('background'); this.blockedLayer = this.map.createLayer('blocks'); this.map.setCollisionBetween(1, 2000, true, 'blocks'); this.backgroundlayer.resizeWorld(); this.bulletGroup=this.game.add.group(); this.bulletGroup.enableBody = true; this.bulletGroup.physicsBodyType = Phaser.Physics.ARCADE; this.bulletGroup.createMultiple(bulletProperties.maxCount, 'bullet'); this.bulletGroup.setAll('anchor.x', 0.5); this.bulletGroup.setAll('anchor.y', 0.5); this.bulletGroup.setAll('lifespan', bulletProperties.lifeSpan); this.asteroidGroup=this.game.add.group(); this.asteroidGroup.enableBody = true; this.asteroidGroup.physicsBodyType = Phaser.Physics.ARCADE; this.resetAsteroids(); this.player = this.game.add.sprite(250, 250, 'player'); this.player.anchor.set(0.5); this.game.physics.arcade.enable(this.player); this.player.maxAngular = 500; this.player.angularDrag = 50; this.game.camera.follow(this.player); this.cursors = this.game.input.keyboard.createCursorKeys(); this.key_fire=this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, init: function () { this.bulletInterval = 0; this.shipLives = 3; this.score = 0; }, createAsteroid: function (x, y, size, pieces) { if (pieces==undefined) {pieces = 1;} for (var i=0; i<pieces;i++) { var asteroid = this.asteroidGroup.create(x, y, size); asteroid.anchor.set(0.5, 0.5); asteroid.body.angularVelocity = this.game.rnd.integerInRange(asteroidProperties.minAngularVelocity, asteroidProperties.maxAngularVelocity); var randomAngle = this.game.math.degToRad(this.game.rnd.angle()); var randomVelocity = this.game.rnd.integerInRange(asteroidProperties.minVelocity, asteroidProperties.maxVelocity); this.game.physics.arcade.velocityFromRotation(randomAngle, randomVelocity, asteroid.body.velocity); } }, resetAsteroids: function () { for (var i=0; i < 150; i++ ) { var side = Math.round(Math.random()); var x; var y; if (side) { x = 300 + Math.round(Math.random()) * 6400; y = 300 + Math.random() * 3200; } else { x = 300 + Math.random() * 6400; y = 300 + Math.round(Math.random()) * 3200; } this.createAsteroid(x, y, 'asteroidLarge'); } }, update: function() { this.game.physics.arcade.collide(this.player, this.blockedLayer, this.borderCollision, null, this); this.game.physics.arcade.overlap(this.player, this.asteroidGroup, this.asteroidCollision, null, this); this.game.physics.arcade.collide(this.asteroidGroup, this.blockedLayer, this.borderBounce, null, this); this.player.body.velocity.x = 0; this.player.body.velocity.y = 0; this.player.body.angularVelocity = 0; if (this.cursors.left.isDown) { this.player.body.angularVelocity = -300; } else if(this.cursors.right.isDown) { this.player.body.angularVelocity = 300; } if (this.cursors.up.isDown) { this.game.physics.arcade.velocityFromRotation(this.player.rotation, playerProperties.velocity, this.player.body.velocity); } if (this.key_fire.isDown) { this.fire(); } }, fire: function () { if (!this.player.alive){ return; } if (this.game.time.now > this.bulletInterval) { //this.sndFire.play(); var bullet = this.bulletGroup.getFirstExists(false); if (bullet) { var length = this.player.width * 0.5; var x = this.player.x + (Math.cos(this.player.rotation) * length); var y = this.player.y + (Math.sin(this.player.rotation) * length); bullet.reset(x, y); bullet.lifespan = bulletProperties.lifeSpan; bullet.rotation = this.player.rotation; this.game.physics.arcade.velocityFromRotation(this.player.rotation, bulletProperties.speed, bullet.body.velocity); this.bulletInterval = this.game.time.now + bulletProperties.interval; } } }, asteroidCollision : function (target, asteroid) { target.kill(); asteroid.kill(); //if (target=='player') { //this.destroyShip(); //} //this.splitAsteroid(asteroid); //this.updateScore(asteroidProperties[asteroid.key].score); //if (!this.asteroidGroup.countLiving()) { //game.time.events.add(Phaser.Timer.SECOND * gameProperties.delayToStartLevel, this.nextLevel, this); //} //var explosionGroup = asteroidProperties[asteroid.key].explosion + "Group"; //var explosion = this[explosionGroup].getFirstExists(false); //explosion.reset(asteroid.x, asteroid.y); //explosion.animations.play('explode', null, false, true); }, borderCollision : function (target) { target.kill(); }, borderBounce : function (asteroid) { if (asteroid!='player') { asteroid.body.bounce.set(1); } }, };

Bounce To Dodge (Android Game) Bounce To Dodge is my second published game made with the Phaser framework. Game-play is very simple, just tap the screen to speed up the ball and avoid the spikes. The game's features include: Arcade Style Graphics Google Play Services Leaderboard Two types of game mechanics https://play.google.com/store/apps/details?id=com.bouncetododge Hope you enjoy, and be sure to rate 5 stars if you like the game.

Recently I am doing a project, in which I have to set a constant velocity value to a ball. This game is much like PingPong. I am now using P2 physics, but when test it on mobile, there are a big performance problem. On Android, the problem could be a small problem due to different browser, but it still remain somtimes, there is a little bit stutter when I playing. Because I don't have the things like vector, so I can not get or set it's magnetic efficiently, so I have to calculate the angel and value of the velocity and set it to constant values every frame, I think this might be the main problem. And I also want to know, if it's also because the P2 physics caused too much, I know that there are a box2d plugin in phaser, it costs a bit, but I want to know if my game's performance would become better if I change to box2D, what's the difference between box2d and p2. And I also want to know if anyone could have a better solution to due with the constant velocity problem, I need it to bounce, and if it's possible I also want to constraint the angle, because I don't want the ball to bounce like parallel to the bouncing board. Thanks a lot!

When implementing collision with P2, I can't seem to get rid of a small bounce-back effect. Example: http://test.xapient.net/phaser/tilemapexample/index-p2.html In this example, when Mario jumps on the ground, it gets a little bit below the ground and then smoothly moves up quickly to stand on it. This doesn't happen with the Arcade physics and I can't seem to get rid of it with P2. Also every other example I've looked at has this effect and I tried several parameters. Since I only need AABB collisions, another approach I tried is implementing the collision myself in the update() routine. A very simple example for just a general ground would be:if (player.body.y >= 500) { player.body.y = 500; player.body.velocity.y = 0;}In this case, for one frame, the player appears below the ground. I assume this is, because this calculation would need to be done between the P2 physics calculations and the rendering, but the update() happens before the P2 physics calculations. Does anyone know how to around this bounce-back effect I'm describing? Cheers!

Hey guys, I'm pretty new to game dev and I am starting with Phaser. I am working on a basic Brickout type game, and am having an issue with getting the ball to bounce off of the paddle. I essentially just turned on "bounce" for the ball and turned on collision between the ball and the paddle. For some reason, when the ball collides with the paddle, it loses a lot of its y velocity. It is moving down toward the paddle, so I expect it to rebound off of the paddle and start moving up at the same velocity. However, after the collision, it is essentially just moving side to side while moving up very slowly. I'm not sure why this is happening because the bounce is fine off other aspects of the level, I am only having this issue with the collision between the paddle and the ball. There are platforms that I load in from a tilemap, and the ball bounces off of them as expected. The relevant code can be seen below. create: function () { this.map = this.game.add.tilemap('level1'); this.map.addTilesetImage('tiles', 'gameTiles'); //create layer this.backgroundLayer = this.map.createLayer('backgroundLayer'); this.platformLayer = this.map.createLayer('platformLayer'); //collision on blockedLayer this.map.setCollisionBetween(1, 4000, true, 'platformLayer'); this.backgroundLayer.resizeWorld(); this.paddle = this.game.add.sprite(500, 700, 'paddle'); this.game.physics.enable(this.paddle); this.paddle.body.collideWorldBounds = true; this.cursors = this.game.input.keyboard.createCursorKeys(); this.ball = this.game.add.sprite(500, 100, 'ball'); this.game.physics.enable(this.ball); this.ball.body.collideWorldBounds = true; this.ball.body.velocity.y = 100 + Math.random()*100; this.ball.body.velocity.x = 100 + Math.random()*100; this.ball.body.bounce.set(1.05); }, update: function () { this.game.physics.arcade.collide(this.paddle, this.platformLayer); this.game.physics.arcade.collide(this.ball, this.paddle); this.game.physics.arcade.collide(this.ball, this.platformLayer); // Paddle movement. this.paddle.body.velocity.x = 0; this.paddle.body.velocity.y = 0; if (this.cursors.left.isDown) { this.paddle.body.velocity.x = -300; } else if (this.cursors.right.isDown) { this.paddle.body.velocity.x = 300; } if (this.ball.position.y > this.paddle.position.y + 10) { this.ball.position.x = 500; this.ball.position.y = 100; this.ball.body.velocity.y = 100 + Math.random()*100; this.ball.body.velocity.x = 100 + Math.random()*100; } },

i have create mini game with collision system on it. the game about the ball bouncing on moveable player's box. all code is working well. the problem is while i move the box and hit the ball it become faster. i want the speed stay as it what ever happen to the ball. here is my code: game.physics.arcade.enable(box);game.physics.arcade.enable(ball); box.body.immovable = true; box.anchor.setTo(0.5, 0.5); ball.anchor.setTo(0.5, 0.5); ball.body.collideWorldBounds = true; ball.body.bounce.setTo(1, 1);ball.body.velocity.setTo(150, -150); this http://phaser.io/examples/v2/arcade-physics/bounce-knock as reference, try to push the ball using the alien, it is what i mean by the speed is changing.

how to set bounce only collide object top side? and for other object should bounce when collide all sides. how to done this? thanks for your help and sorry for my poor english.

how i can make image bounce in center place? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('flyer', 'assets/sprites/phaser-dude.png'); } var image; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); image = game.add.sprite(0, 0, 'flyer'); game.physics.enable(image, Phaser.Physics.ARCADE); image.body.velocity.setTo(200,200); image.body.collideWorldBounds = true; image.body.bounce.set(1); } function update () { } function render () { game.debug.spriteInfo(image,32,32); }

With: player.body.collideWorldBounds = true;player.body.bounce.set(1);I get the nice effect of bouncing off the walls, but I'd like for something (say, a score counter) to be updated every time player collides with the bounds. What is the best way of doing this with Phaser?

Hello Is there anything like bounce in Arcade Physics.... in P2 Physics? I can simply bounce two objects on collision in Aracde, but I cannot generate something like that in P2! I've defined collisions, bodies.... but I cannot generate what I want. I can change velocity to simulate bouncing, but I cannot find collide direction to simulate it correctly! In my sample, I don't want to have any gravity and friction. Thanks a lot.

So we have sprite moving left right and the aim is to make it stop when hit a "invisible" wall. Let's presume that the x coordinate checks are 0px and 300px, so: if(game.input.keyboard.isDown(Phaser.Keyboard.A)) { paddle.body.velocity.x = -paddleSpeed; } else if(game.input.keyboard.isDown(Phaser.Keyboard.D)) { paddle.body.velocity.x = paddleSpeed; }and after checking some Phaser source i came up with this: if(paddle.x < paddle._cache.halfWidth) { paddle.x = paddle._cache.halfWidth; paddle.body.velocity.x *= -paddle.body.bounce.x; } if(paddle.x > game.world.width - paddle._cache.halfWidth) { paddle.x = game.world.width - paddle._cache.halfWidth; paddle.body.velocity.x *= -paddle.body.bounce.x; } If I use: paddle.body.collideWorldBounds = true; //like in the examples it-s all KO no bouncing/jitter when paddle hit the walls And since this is the code for checkWorldBounds: if (this.x < this.game.world.bounds.x){this.x = this.game.world.bounds.x;this.velocity.x *= -this.bounce.x;}else if (this.right > this.game.world.bounds.right){this.x = this.game.world.bounds.right - this.width;this.velocity.x *= -this.bounce.x;}I used the same approach... but still when it hit the right or left border the sprite passes the border and then it's positioned back ... you can check it, here: http://mihail.ilinov.eu/games/PhaserBreakoutJSBuggy/ Just press "A" and "D" for moving left and right and hit the wall you will see the problem... Also what's the deal with: body.bounce