How to charachter stand only center of tile not our site of tile

user_18659172 0
Viewed 28

my picture is here

My code is here please look it. I have try my option but stuck in this. https://www.codepile.net/pile/7mPpA9m0

What i do and please share me best solution. I'm stuck from last 2 weeks. in this problem please help me

phaser-framework
1 Answers

As mention in a previews comment (I couldn't answer because the question was closed), the problem is the bounding-box of the physics objects.
It could be the player or the platform, depending on the images.

To know for sure turn on the debug information(debug: true) in the config of the Phaser Game Object. (a nice demo can be found here: https://phaser.io/examples/v3/view/physics/arcade/custom-debug-colors)
And than adjust the size of the bounding box. _(a nice demo can be found here: https://phaser.io/examples/v3/view/physics/arcade/smaller-bounding-box)

I here you can see what I mean in action.
The red and white player would have the same bounding box, but I made the box of the white player smaller with the function setSize and adjusted the position of the bounding box with the function setOffset.

Here a working Demo:

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create: create
    },
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:{y:100},
            //show debug information
            debug: true
        }
    },
    banner: false
}; 

function create () {
    // JUST FOR DEMO START
    let graphics = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillRect(10,5,10,25);
    graphics.generateTexture('player', 30, 30);
    // JUST FOR DEMO END
    
    
    let platform = this.add.rectangle(150, 120, 100, 20, 0x00ff00)
      .setOrigin(0, 1);
      
    this.physics.add.existing(platform)
      .body
      .setImmovable(true)
      .setAllowGravity(false);
      
    let player = this.add.image(136, 50, 'player')
      .setOrigin(.5, 1)
      .setTint(0xff0000);
      
    this.physics.add.existing(player);
    
    let player2 = this.add.image(136, 50, 'player')
      .setOrigin(.5, 1);
      
    this.physics.add.existing(player2)
      .body
      // CHANGE SIZE OFF PHYSICS BOX
      .setSize(14, 25, false)
      .setOffset(8, 5)
      .setAllowGravity(false)
      .setVelocityY(10)
    
    
    this.physics.add.collider(player, platform);
    this.physics.add.collider(player2, platform);
      
}

var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

Depending on, if you player's or your platforms bounding-box is to big you will have to adjust it, or make images, that have less transparent borders.

user_16792860
Related