How to add movement to enemies created from Tiled Objects

Phaser 3
1

Hello everyone,
How do I add physical movement to the enemies that are created from the Tiled objects?

This is what I have at this moment,

  this.enemies = this.map.filterObjects('objects', (object) => object.type === 'enemy');
    //console.log(this.enemies);
    this.enemies.forEach((enemy) => {
      this.add.sprite(enemy.x, enemy.y, 'enemy');
    });

imagem
imagem.png1366×379 64.4 KB

imagem

But I’m just adding spritesheets to them, and as you can see they’re static in the air …
I want them to have movement… and collision with the ground just like my player has it.

2

Have you tried this.physics.add.sprite() instead of this.add.sprite()?

3

Tried what you said, but got the same result…

4

Have you enabled physics in your game?
Something like this:

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
            debug: true
        }
    }
}

let game = new Phaser.Game(config)
5

Yes, I have

imagem

6

What about gravity?

Have you added a gravity on the y axis?

7

Forgot that, but now the enemies fall off the map, even by adding
this.physics.add.collider(enemy, ground);
imagem

8

Because it is wrong. The enemy you get from the forEach loop is not a sprite!

Try this:

this.map
  .filterObjects('objects', (object) => object.type === 'enemy')
  .forEach((enemy) => {
    let enemySprite = this.physics.add.sprite(enemy.x, enemy.y, 'enemy')
    this.physics.add.collider(enemySprite, ground)
  })
1 Like
9

Your right, I was doing it wrong!
But that means if I add 10 or more enemies on the map, and I want them to move, shoot against my player, how am I going to work with each enemy? Knowing that I don’t even know how to make movement for them, let alone make them shoot.

The only thing so far I did right, was creating the map correctly, and make my player move and shoot

imagem

10

With a phaser group. Maybe you even have an id you can pass to each enemy?

let enemiesGroup = this.add.group()
this.map
  .filterObjects('objects', (object) => object.type === 'enemy')
  .forEach((enemy) => {
    let enemySprite = this.physics.add.sprite(enemy.x, enemy.y, 'enemy')
    enemySprite.id = enemy.id // I don't know if you have some sort of id you can pass here
    enemiesGroup.add(enemySprite)
  })
this.physics.add.collider(enemiesGroup, ground)

I suggest you make the official “first game” tutorial. You will learn all of this.

1 Like
11

That was the first example I made to better understand the phaser, but to be honest, it is not a simple example of colliding the map, adding a player, adding stars that a person will understand / know everything about the game at first. Also, I can say that I think it’s absolutely stupid, devs are always launching new versions of the phaser, and we’re already on 3.16 when they still have only phaser 2 examples on the website.

During the development of my game I always had to see other games on the web that use phaser 3, and found only 35% of information that I can use to work on my game… Or ask questions about my problems I’m having on this forum and communities and pray to god someone helps me.

But taking back what you said I’m getting the objects all inside enemiesGroup, but for some reason I’m not able to access this same variable in the update function, says it’s not defined… such as, I do not know how to add movement to these enemies …

imagem

imagem

imagem
imagem1364×635 22.8 KB

And I want to thank you for the help you have given me so far.

12

You have to use the this keyword.

I once started to make Phaser 3 video tutorials, but I had not time to really get into it yet. I posted the links in topic #1690. You will see how to use this in my videos.

1 Like
13

I was able to add my enemies with movement, the problem was in the way I was thinking about the algorithm. But then I got there with a switch case!

I will leave here the code if somebody needs its

movement() {
        switch (this.direction) {
            case -1:
                 // Move left
                if (this.x > this.fminX) {
                    this.setVelocityX(-45);
                } else {
                   // Hit left bounds, change direction
                    this.direction = 1;
                }
                break;

            case 1:
                // Move right
                if (this.x < this.fmaxX) {
                    this.setVelocityX(45);
                } else {
                    //  Hit rightbounds, change direction
                    this.direction = -1;
                }
                break;
        }
    }

yannick thank you for all the help you gave me!!!

1 Like