Detect text overlap

Phaser 3
1

Hi, I am new to phaser and trying to program my first game. The starting point are 85 numbers which are randomly placed on the screen. (position/rotation). I try to figure out how I can place them without overlapping, but without any luck. I tried to play around with something like " this.physics.arcade.overlap(text, nummers, onOverlap)" and binding the text to a container. but nothing seems to work. See the code below:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
    default: 'arcade',
    arcade: {
        debug: false
    }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{      
    this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js');
    this.cameras.main.backgroundColor.setTo(255,255,255);
}

function create ()
{

  var start = this.physics.add.staticGroup();

  var nummers = this.physics.add.staticGroup();

for (var i = 0; i < 85; i++)
{

   let text = this.add.text(0+ Math.random() * 800, 0 + Math.random() * 600, i+1 ,{font: 20+ Math.random() * 30 + "px Arial", fill: '#000000' }, nummers);
    text.setAngle(Phaser.Math.Between(0, 359));


}


}

function update ()
{
}
2

You can try it this way. It’s a little nonrandom.

3

Thank you, a complete other approach then I had in mind but is works!

1 Like