How do I adjust Player's physical bounds? - phaser-framework

Question

Object Boundary
I'm a new Phaser developer, in the beginning stages of my first game. My problem is, when my player hits the ground, the bounding box defining his bounds is way bigger than he is (see pic). So in the example shown, the player will bounce when the borders touch, not his feet.
In action
Physics Matter
Do I have to change from ARCADE physics to a more robust physics engine, in order to accomplish my goal?
Code
There's really not much to show, but here is what I have:
/// <reference path="../defs/phaser.d.ts" />
class MainGame extends Phaser.Scene {
constructor() {
super("MainGame");
}
preload() {
this.load.image("bg1", "assets/bg-level1.png");
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/final-jump.png', {
frameWidth: 118,
frameHeight: 118
});
}
create() {
this.setupBackground();
this.setupPlayer();
this.add.text(0, 0, 'Use Cursors to scroll camera.\nQ / E to zoom in and out', {
font: '18px Courier',
fill: 'black'
});
this.physics.add.collider(this.player, this.platforms);
}
update() {
// Set Player Animations
this.setPlayerAnimation();
if (this.player.body.onFloor()) {
console.log("FLOOR");
this.player.body.setAccelerationX(31);
this.player.body.setAccelerationY(31);
}
}
//---------------------------------
// CREATE RELATED FUNCTIONS
//---------------------------------
setupBackground() {
this.background = this.add.image(0, 0, "bg1");
this.background.setOrigin(0, 0);
//this.background.setInteractive();
this.background.setAlpha(.2, .2, .2, .2);
// The platforms group contains the ground and the 2 ledges we can jump on
this.platforms = this.physics.add.staticGroup();
// Here we create the ground.
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
}
setupPlayer() {
this.player = this.physics.add.sprite(100, 283, 'dude');
console.log(this.player.body.touching.down);
this.player.setVelocity(200, 100).setBounce(.8, .8).setCollideWorldBounds(true);
// Re-Size Player Size
this.player.setDisplaySize(220, 210);
// Collision Handler
this.physics.add.overlap(this.player, this.platforms, this.showJump, null, this);
// ANIMATIONS
this.anims.create({
key: 'jump-up',
frames: this.anims.generateFrameNumbers('dude', {
start: 1,
end: 2
}),
frameRate: 5,
repeat: 1
});
this.anims.create({
key: 'falling',
frames: this.anims.generateFrameNumbers('dude', {
start: 0,
end: 1
}),
frameRate: 5,
repeat: 1
});
this.anims.create({
key: 'onGround',
frames: this.anims.generateFrameNumbers('dude', {
start: 4,
end: 4
}),
frameRate: 24,
repeat: 1
});
}
showJump() {
this.player.anims.play('jump-up', true);
}
//---------------------------------
// UPDATE RELATED FUNCTIONS
//---------------------------------
setPlayerAnimation() {
//this.player.anims.play('jump-up', true);
if (this.player.body.deltaY() > 0 && this.player.body.onFloor()) {
this.player.anims.play('falling', true);
}
}
}
Oh, Yeah...
I am very impressed with the functionality of the local documentation package I downloaded and installed, however, I'm confused on where to begin looking for something. For instance, let's say I am struggling with making my player jump and play an animation when in the air, and change back when he hits the ground. Given that information, how do I find the correct class or function I need???

Answer 1

You do not have to change from arcade physics. Try something like this:
// Change the size of the bounding box.
this.player.setSize(32, 32);
// Change the location of the bounding box.
this.player.setOffset(0, 28);
// If that doesn't work, try this instead:
// this.player.body.setOffset(0, 28);
Obviously you need to adjust the width/height and offsets for your scenario.
References:
Sprite setSize method
Sprite setOffset method
Body setOffset method