Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

P2 Physic collide while not overlapped

nhong

By nhong,
in Phaser 2

 Share

Recommended Posts

nhong Newbie

nhong

Posted
Posted

Hi there,

I'm working on some P2 physic and getting the attached result, which is weird because the two objects collides without overlapping on one another.

I'm I missing something?

The code is as follow:      

      game.physics.enable(car, Phaser.Physics.P2JS);
      car.body.debug = true
      car.body.angle = car.angle
      car.body.rotation = car.rotation
      car.body.addCapsule(70,20)

      car.body.setCollisionGroup(this.carCollisionGroup);
      var v =100;
      var angle = car.body.angle;

      var vx = v * Math.cos(angle * (Math.PI/180))
      var vy = v * Math.sin(angle * (Math.PI/180))

      car.body.velocity.x = vx;
      car.body.velocity.y = vy;

Thanks

 

Untitled.gif

Link to comment
Share on other sites
nhong Newbie

nhong

Posted
  • Author
Posted

Hi,

Sorry for the delay, I only work on this on weekend so haven't had a chance to follow up.

Here is an extraction of my app:

https://output.jsbin.com/leniwajopi/

You may need to refresh the page a few times for the cars to show up. Just hit the play button.

Here is the code, thank you so much: 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/phaser/2.5.0/phaser.js"></script>
    </head>
    <body>

    <div id='main'>
    </div>

    <script type="text/javascript">
      window.onload = function() {
        var TheGame = {
          Params : {
            iconSize: 364,
            menuTop: 10,
            menuLeft: 10
          }
        }

        var BootState = {
          init : function(){
            this.scale.scaleMode = window.Phaser.ScaleManager.RESIZE;
            this.game.stage.backgroundColor = "#f8f8f8";
          }, 

          preload : function(){
            this.load.image("car", 'https://i.imgur.com/7VPqbXT.png');
            this.load.image("wood",   'https://i.imgur.com/OyvP5jz.jpg');
            this.load.image("play",   'https://i.imgur.com/1LuPwtt.png');
          },

          create : function(){
            this.state.start("ScenarioSetup");
            this.input.touch.preventDefault = false;
            this.game.physics.startSystem(window.Phaser.Physics.P2JS);
            this.game.physics.p2.setImpactEvents(true);
          },
        }


        var ScenarioSetup = {
          preload : function(){
            this.cars = []
          },

          create : function() {
            var game = this.game

            this.background = game.add.image(0,0, "wood")
            this.background.height = game.height;
            this.background.width = game.width;

            this.carsGroup = game.add.group();
            this.carsGroup.enableBody = true;
            this.carsGroup.physicsBodyType = window.Phaser.Physics.P2JS;

            this.carsCollisionGroup = game.physics.p2.createCollisionGroup();

            this.playButton = game.add.button(TheGame.Params.menuLeft + 100, TheGame.Params.menuTop, "play");
            this.playButton.onInputDown.add(this.play, this);

            var scenario = [
              {"x":301.2662461222614,"y":243.0936843225281,"rotation":-1.616663179600873,"setSpeed":"0","setAngle":0,"tint":12854726},
              {"x":592.8282701605795,"y":240.70069280486896,"rotation":3.1072777136041276,"setSpeed":"80","setAngle":0,"tint":12854726}
            ]
            if (scenario && scenario.length !== 0){
              for (var i = 0; i < scenario.length; i++){
                var savedCar = scenario[i]
                this.createCar(savedCar.x, savedCar.y, savedCar.tint, savedCar.rotation, savedCar.setSpeed, savedCar.setAngle)
              }
            }
          },

          play : function(){
            if (this.isPlaying){
              return
            }
            if (this.cars.length === 0){
              return
            }

            var game = this.game
            var Phaser = window.Phaser

            for (var i = 0; i < this.cars.length; i++){
              var car = this.cars[i]
              
              game.physics.enable(car, Phaser.Physics.P2JS);

              car.body.angle = car.angle
              car.body.rotation = car.rotation
              car.body.addCapsule(70,20)

              car.body.setCollisionGroup(this.carsCollisionGroup);
              car.body.collides(this.carsCollisionGroup, function(){}, car);
              
              var v = car.setSpeed*4;
              var angle = car.body.angle;

              var vx = v * Math.cos(angle * (Math.PI/180))
              var vy = v * Math.sin(angle * (Math.PI/180))

              car.body.velocity.x = vx;
              car.body.velocity.y = vy;
            }
            this.isPlaying = true
          },

          createCar : function(x,y,tint,rotation, speed, angle){
            var game = this.game
            var car = game.add.sprite(x, y, "car");
            car.tint = tint;
            car.inputEnabled = true;
            car.input.enableDrag(true);
            car.anchor.setTo(0.5,0.5)
            car.setSpeed = speed
            car.setAngle = angle
            car.rotation = rotation
            this.cars.push(car)

            return car
          },
        }

        var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'main');
        game.state.add("Boot", BootState);
        game.state.add("ScenarioSetup", ScenarioSetup);
        game.state.start("Boot");
      };
    </script>
    </body>
</html>

 

Link to comment
Share on other sites
samid737 Newbie

samid737

Posted
Posted

The problem is that you are mixing up the angles and rotations of the p2 body. Its better to stick to either using angles(degrees) or rotations(radians).

in the for loop you can use this:

  

            for (var i = 0; i < this.cars.length; i++){
              var car = this.cars[i]
              
              game.physics.p2.enable(car,true);
              //car.body.rotation=car.originalRotation;//either this
              car.body.angle=car.originalAngle;//or this
              car.body.setCollisionGroup(this.carsCollisionGroup);
              car.body.collides(this.carsCollisionGroup, function(){}, car);
              
              var v = car.setSpeed*4;
              var angle = car.body.angle;

              var vx = v * Math.cos(angle * (Math.PI/180))
              var vy = v * Math.sin(angle * (Math.PI/180))

              car.body.velocity.x = vx;
              car.body.velocity.y = vy;
            }


and in createCar set a variable that is not named rotation or angle:
  

          createCar : function(x,y,tint,rotation, speed, angle){
            var game = this.game
            var car = game.add.sprite(x, y, "car");
            car.tint = tint;
            car.inputEnabled = true;
            car.input.enableDrag(true);
            car.anchor.setTo(0.5,0.5)
            car.setSpeed = speed;
            car.originalAngle=angle;//car.angle would set the angle of the sprite
            car.originalRotation=rotation; //car.rotation would set the rotation of the sprite
            this.cars.push(car)
            return car
          },


Here is a working version: 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/phaser/2.5.0/phaser.js"></script>
    </head>
    <body>

    <div id='main'>
    </div>

    <script type="text/javascript">
      window.onload = function() {
        var TheGame = {
          Params : {
            iconSize: 364,
            menuTop: 10,
            menuLeft: 10
          }
        }

        var BootState = {
          init : function(){
            this.scale.scaleMode = window.Phaser.ScaleManager.RESIZE;
            this.game.stage.backgroundColor = "#f8f8f8";
          }, 

          preload : function(){
            this.load.image("car", 'https://i.imgur.com/7VPqbXT.png');
            this.load.image("wood",   'https://i.imgur.com/OyvP5jz.jpg');
            this.load.image("play",   'https://i.imgur.com/1LuPwtt.png');
          },

          create : function(){
            this.state.start("ScenarioSetup");
            this.input.touch.preventDefault = false;
            this.game.physics.startSystem(window.Phaser.Physics.P2JS);
            this.game.physics.p2.setImpactEvents(true);
          },
        }


        var ScenarioSetup = {
          preload : function(){
            this.cars = []
          },

          create : function() {
            var game = this.game

            this.background = game.add.image(0,0, "wood")
            this.background.height = game.height;
            this.background.width = game.width;

            this.carsGroup = game.add.group();
            this.carsGroup.enableBody = true;
            this.carsGroup.physicsBodyType = window.Phaser.Physics.P2JS;

            this.carsCollisionGroup = game.physics.p2.createCollisionGroup();

            this.playButton = game.add.button(TheGame.Params.menuLeft + 100, TheGame.Params.menuTop, "play");
            this.playButton.onInputDown.add(this.play, this);

            var scenario = [
              {"x":301.2662461222614,"y":243.0936843225281,"rotation":1.57,"setSpeed":"0","setAngle":90,"tint":12854726},
              {"x":592.8282701605795,"y":240.70069280486896,"rotation":0,"setSpeed":"-80","setAngle":0,"tint":12854726}
            ]
            if (scenario && scenario.length !== 0){
              for (var i = 0; i < scenario.length; i++){
                var savedCar = scenario[i]
                this.createCar(savedCar.x, savedCar.y, savedCar.tint, savedCar.rotation, savedCar.setSpeed, savedCar.setAngle)
              }
            }
          },

          play : function(){
            if (this.isPlaying){
              return
            }
            if (this.cars.length === 0){
              return
            }

            var game = this.game
            var Phaser = window.Phaser

            for (var i = 0; i < this.cars.length; i++){
              var car = this.cars[i]
              
              game.physics.p2.enable(car,true);
              //car.body.rotation=car.originalRotation;//either this
              car.body.angle=car.originalAngle;//or this
              car.body.setCollisionGroup(this.carsCollisionGroup);
              car.body.collides(this.carsCollisionGroup, function(){}, car);
              
              var v = car.setSpeed*4;
              var angle = car.body.angle;

              var vx = v * Math.cos(angle * (Math.PI/180))
              var vy = v * Math.sin(angle * (Math.PI/180))

              car.body.velocity.x = vx;
              car.body.velocity.y = vy;
            }
            this.isPlaying = true
          },

          createCar : function(x,y,tint,rotation, speed, angle){
            var game = this.game
            var car = game.add.sprite(x, y, "car");
            car.tint = tint;
            car.inputEnabled = true;
            car.input.enableDrag(true);
            car.anchor.setTo(0.5,0.5)
            car.setSpeed = speed;
            car.originalAngle=angle;
            car.originalRotation=rotation;
            this.cars.push(car)

            return car
          },
        }

        var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'main');
        game.state.add("Boot", BootState);
        game.state.add("ScenarioSetup", ScenarioSetup);
        game.state.start("Boot");
      };
    </script>
    </body>
</html>

 

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...