Image / colide

Phaser 3
1

Hello, I am new at phaser so please have patience. I am trying to develop a game where I have a boat that takes trash from the ocean. I am using an example as base.
I Maneged to put the images inside the colider “enemy” but I dont know how to remove it also when i colide them.
So basically i want the image to also generated randomly after i remove it when coliding and the enemys not “spawn” in the layer of the rocks. How can i do this?

This is the code:

var CenaMundo = new Phaser.Class({

Extends : Phaser.Scene,



initialize :

 function CenaMundo(){

     Phaser.Scene.call(this, {key :'CenaMundo'});

 },

 preload: function(){

     //Vazio, pode -se dar preload, mas não é necessário colocar

 },

 create: function(){

    //criar mundo do jogo

    var mapa = this.make.tilemap({key: 'map'});

   

    //obter o nome de um tileset chamado spritesheet dentro do json

    var tiles = mapa.addTilesetImage('TiledMap', 'tiles', 16, 16);

    //var obter a layer "Oceano" e adicionar ao mapa

    var oceano = mapa.createLayer('Oceano', tiles, 0, 0);

    //var obter a layer "Areia" e adicionar ao mapa

    var areia = mapa.createLayer('Areia', tiles, 0, 0);



    //obter a layer dos obstaculos

    var obstaculos = mapa.createLayer('Obstaculos', tiles, 0, 0);

    //obstaculos estarão disponoveis para colisão

    areia.setCollisionByExclusion( [ -1 ] );

    obstaculos.setCollisionByExclusion( [ -1 ] );

    //adicionar frames do player

    this.player = this.physics.add.sprite(50, 100, 'player', 6);

    //limitar movimento do player á area de jogo

    this.physics.world.bounds.width = mapa.widthInPixels;

    this.physics.world.bounds.height = mapa.heightInPixels;

    this.player.setCollideWorldBounds(true);

    // input do teclado

    this.cursors = this.input.keyboard.createCursorKeys();

    //camara a seguir o player

    this.cameras.main.setBounds(0, 0, mapa.widthInPixels, mapa.heightInPixels);

    this.cameras.main.startFollow(this.player);

    this.player.body.setVelocity(0);

    //Adicção da colision com uma layer

    this.physics.add.collider(this.player, areia);

    //Adicção da colision com uma layer

    this.physics.add.collider(this.player, obstaculos);

   

    //animação do player

    //esquerda e direita

    this.anims.create({

        key: 'esquerdaDireita',

        frames: this.anims.generateFrameNumbers('player',

                                                {frames: [1, 7, 1, 13]}),

        frameRate: 10,

        repeat: -1,

    });

   

    //andar para cima

    this.anims.create({

        key: 'up',

        frames: this.anims.generateFrameNumbers('player',

                                                {frames: [2, 8, 2, 14]}),

        frameRate: 10,

        repeat: -1,

    });

    //andar para baixo

    this.anims.create({

        key: 'down',

        frames: this.anims.generateFrameNumbers('player',

                                                {frames: [0, 6, 0, 12]}),

        frameRate: 10,

        repeat: -1,

    });

    //criar 100 zonas de lixo

    this.zonas = this.physics.add.group({

        classType: Phaser.GameObjects.Zone,

    });

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

        var x = Phaser.Math.RND.between(100, this.physics.world.bounds.width - 100);

        var y = Phaser.Math.RND.between(100, this.physics.world.bounds.height - 100);

        this.image = this.add.image(x, y, 'trash');

        this.zonas.create(x, y, 20, 20);

    }

    this.physics.add.overlap(this.player, this.zonas, this.colisaoInimigo, false, this);



 },

//colisãoInimigo

colisaoInimigo: function(player, zona){

    zona.y= Phaser.Math.RND.between(0, this.physics.world.bounds.width);

    zona.y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);

   

    this.cameras.main.shake(10);

    this.cameras.main.flash(10);

},

 update: function(){

    this.player.body.setVelocity(0);

    //movimento horizontal

    if(this.cursors.left.isDown){

        this.player.body.setVelocityX(-50);

       

    }else if(this.cursors.right.isDown){

        this.player.body.setVelocityX(50);

    }

     //movimento vertical

    if(this.cursors.up.isDown){

        this.player.body.setVelocityY(-50);

    }else if(this.cursors.down.isDown){

        this.player.body.setVelocityY(50);

    }

   

    //Animações

    if(this.cursors.left.isDown){

        this.player.anims.play('esquerdaDireita', true);

        this.player.flipX = true;

    }else if(this.cursors.right.isDown){

        this.player.anims.play('esquerdaDireita', true);

        this.player.flipX = false;

    }else if(this.cursors.up.isDown){

       

        this.player.anims.play('up', true);

    }else if(this.cursors.down.isDown){

        this.player.anims.play('down', true);

    }else{

        this.player.anims.stop();

    }            

 },

});

2

This is the image to better understand.

Capturar
Capturar1046×883 132 KB

3

:wave:

Where is this in the code?

4

this.zonas = this.physics.add.group({

    classType: Phaser.GameObjects.Zone,

});

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

    var x = Phaser.Math.RND.between(100, this.physics.world.bounds.width - 100);

    var y = Phaser.Math.RND.between(100, this.physics.world.bounds.height - 100);

i putted the image here, i did not found a way to merge with the this.zonas.create(…)
this.image = this.add.image(x, y, ‘trash’);

    this.zonas.create(x, y, 20, 20);

}

this.physics.add.overlap(this.player, this.zonas, this.colisaoInimigo, false, this);

},

//This after colliding the player with the object, the object creates another one in anothe place

colisaoInimigo: function(player, zona){

zona.y= Phaser.Math.RND.between(0, this.physics.world.bounds.width);

zona.y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);


this.cameras.main.shake(10);

this.cameras.main.flash(10);

},

5

And what’s going wrong now?

6

So first: I have to merge the image with the zones created, so when the player touch them they disapeer and apeer somewhere else

7

I solv it, never mind. I need help with not allowing the objects spawn in the layer obsctacles, do you anything about? I trie with

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

        if( What i should compare here?){

            var x = Phaser.Math.RND.between(50, this.physics.world.bounds.width - 100);

            var y = Phaser.Math.RND.between(50, this.physics.world.bounds.height - 100);

            this.spawns.create(x, y, this.getEnemySprite());

        }else{

            console.log('não');

            i--;

        }

    }
8

One way is

var x = Phaser.Math.RND.between(50, this.physics.world.bounds.width - 100);
var y = Phaser.Math.RND.between(50, this.physics.world.bounds.height - 100);

if (!obstaculos.getTileAtWorldXY(x, y)) {
  this.spawns.create(x, y, this.getEnemySprite());
} else {
  console.log('não', x, y);
  i--;
}
9

It worked, doing this would not work also?

if(!obstaculos.getTileAtWorldXY(x, y) || !areia.getTileAtWorldXY(x, y)){

            this.spawns.create(x, y, this.getEnemySprite());

        }else{

            console.log('nop', x, y);
            i--;

        }