Trouble resizing body of MatterSprite when trying to make game responsive

Hello all!

I’m pretty new to Phaser (and game development in general), and I’m having a bit of trouble with resizing MatterSprite bodies in my Phaser 3 game. For a bit of background, I want to keep the game in a 3:2 aspect ratio, and resize the game div (and all game assets) to fit the screen size.

For the most part, I’ve got that working by calling resize() on the game and the main camera, and then calling setZoom() on the camera as well.

But!

I’ve created body shapes in PhysicsEditor for my sprites, which I attach to the sprites using .setBody() — and I’m having a heck of a time scaling these by the same amount as the sprite itself. I’m at a loss on how to do this, and I’ve created a sample project here to show what I’m talking about:

(You can remix the project for yourselves, or click on the ‘Code’ button in the embed to see how things are set up.)

The game natively runs at 1200 x 800, and there are only two assets: a background image and a car sprite. Clicking on the car will swap the textures and the body. But resizing the browser (or reloading the page after resizing) doesn’t scale the car’s physics body, only the texture itself.

I’ve tried calling car.body.setScale(amount) (where amount is some value) but it doesn’t seem to do anything. I think I’ve got a fundamental misunderstanding of the relationship between matter.js sprites and their bodies.

Any thoughts you all might have would be deeply appreciated!

Hi @Angelo
I can’t help with physics but i can tell that resize helped a lot :smile:

Thanks.

Ah, moving the resizeApp() call from the root of the game.js file and into the create() function fixed this issue. I don’t know exactly why, though, so if there’s any insight on that I’d love to know!