Jump to content

Adjusting sprite collider offset after scaling a sprite


Recommended Posts

Hi everyone,

I'm trying to figure out how to 'reset/readjust' a sprites collider after adjusting the sprites scale.

The initial collider setup ( size/offset) is working perfectly at scale 1, with the following :

sprite.body.offset.y = 44;



scaling works great for both sprite and collider with :


the issue is when i set the scale ( to 2 in this example ), the collider now has an offset.



is there a built in way to 'reset' this collider so it aligns with the sprite?

thanks for your help.


var config = {
  parent: 'container',
  type: Phaser.WEBGL,
  width: 300,
  height: 300,
  parent: 'phaser-example',
  physics: {
      default: 'arcade',
      arcade: {
          debug: true
  scene: {
      preload: preload,
      create: create

let game = new Phaser.Game(config);
let sprite;

function preload ()
    this.load.image('00', '00.png');

function create ()
    sprite = this.physics.add.image(400, 300, '00');
    sprite.body.offset.y = 44;
    sprite.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true).setGravityY(200);


Link to comment
Share on other sites

Thanks for your responses, i gave them both a shot but no luck yet.


The reason I have the y-offset is the character ( blue square in this instance ) is not centered on the image.




@ samme

gave setDisplaySize() a shot, but it did not do the trick



Link to comment
Share on other sites

3 minutes ago, PixelPicoSean said:

Dynamic body should work without any problems, but I noticed that the arcade body position calculation ignores the scale of its parent, which I believe is a bug. I will make a PR with fix, but you will need to wait.

awesome. thanks!

Link to comment
Share on other sites

  • 5 weeks later...

Hmm, I have a ground image that I scaled up by 1.3. And I have it set to collide with a falling object. The falling object doesn't actually collide till it hits the unscaled edge of where the image would be, so basically the falling object goes half way through the ground then collides. I'm using phaser 3.3.0. How would I get the meteor to actually collide with the surface of the ground if I have to scale it?

    function preload(){
        this.load.spritesheet('meteor', 'images/meteor.png',
                              {frameWidth: 32, frameHeight: 32 });

        this.load.image('ground', 'images/base.png');
    function create(){
        meteor = this.physics.add.sprite(120, 120);
        meteor.body.allowGravity = true;

        ground = this.physics.add.staticImage(180, 584, 'ground');
        this.physics.add.collider(meteor, ground, crash, null, this);


Link to comment
Share on other sites


  • Recently Browsing   0 members

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