Arcade physics generic solid color shapes?

Phaser 3
1

Just familiarizing with Phaser and playing with Arcade physics I was wondering how to get going with just generic shapes or geometry or blank image that doesn’t result in an ‘x’ or black square…

https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html

for example, say I want to just create two rectangles one is blue one is red.

if you had preloaded an image texture, in update you can do:

this.physics.add.image(400, 300, 'myImage')

but i just want to do something like:

this.physics.add.image(400, 300, '0x0000ff') //< the color blue

and then one for red and so forth; in other words: how do I quickly get a solid color shape or polygon for prototyping in there. I don’t want to load a texture each time I want to experiment with a new game object; just need shape & solid color.

alternatively, is it possible to extend Geom objects with Arcade Physics ? Something like this:

let rect = new Phaser.Geom.Rectangle(250, 200, 300, 200)
let graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } })
graphics.fillRectShape(rect)

let rectWithPhysics = this.physics.extend(rect) 
rectWithPhysics.setCollideWorldBounds(true)
rectWithPhysics.setVelocityX(50)
2

Okay pretty much resolved, I found setTintFill which will work on an image object even if said image object has missing texture. So in this way you can preload just any missing path and then fill it with a color and change its size ie:

  let ground = scene.physics.add.image(0, 500, 'ground')  //< 'ground' is a missing texture
  ground.setTintFill('0x8455')  //< green for grass
  ground.setDisplaySize(1200,100)  //< change it from the default small square shape 
   //do normal physics stuff on new solid color object: 
  ground.setImmovable = true
  ground.body.allowGravity = false
3

You can use this.physics.add.existing to create a body on any game object. You can then access the body - and its methods like setVelocityX and setCollideWorldBounds - on the gameObject.body property.

The game objects created by physics.add.image just contain additional methods that delegate down to the body property. They exist for convenience and are not the general way of working with bodies.

1 Like
4

Okay that is much better than my hack; good to know thanks for clarifying!