Collision Groups

Press the arrow keys to move. This example demonstrates how to use collision groups. Just move around the character using the arrow-keys and watch how it does or does not collide with the other characters.

Example Code

const game = new Phaser.Game(config(preload, create, update));

function preload() {
  this.load.image("tiles", "../../assets/tf_jungle_tileset.png");
  this.load.tilemapTiledJSON("jungle", "../../assets/jungle-small.json");
  this.load.spritesheet("player", "../../assets/characters.png", {
    frameWidth: 52,
    frameHeight: 72,
  });
}

function create() {
  const jungleTilemap = this.make.tilemap({ key: "jungle" });
  jungleTilemap.addTilesetImage("jungle", "tiles");
  for (let i = 0; i < jungleTilemap.layers.length; i++) {
    const layer = jungleTilemap.createLayer(i, "jungle", 0, 0);
    layer.scale = 3;
  }
  const [playerSprite, container] = createSpriteWithContainer.call(
    this,
    ['cg1', 'cg2']
  );
  const [npc1Sprite, npc1Container] = createSpriteWithContainer.call(
    this,
    ['cg1']
  );
  const [npc2Sprite, npc2Container] = createSpriteWithContainer.call(
    this,
    ['cg2']
  );
  const [npc3Sprite, npc3Container] = createSpriteWithContainer.call(this, []);

  this.cameras.main.startFollow(container, true);
  this.cameras.main.setFollowOffset(-playerSprite.width, -playerSprite.height);

  const gridEngineConfig = {
    characters: [
      {
        id: "player",
        sprite: playerSprite,
        walkingAnimationMapping: 6,
        startPosition: { x: 8, y: 12 },
        container: container,
        collides: {
          collisionGroups: ['cg1', 'cg2']
        }
      },
      {
        id: "npc1",
        sprite: npc1Sprite,
        walkingAnimationMapping: 1,
        startPosition: { x: 10, y: 12 },
        container: npc1Container,
        collides: {
          collisionGroups: ['cg1']
        }
      },
      {
        id: "npc2",
        sprite: npc2Sprite,
        walkingAnimationMapping: 2,
        startPosition: { x: 12, y: 12 },
        container: npc2Container,
        collides: {
          collisionGroups: ['cg2']
        }
      },
      {
        id: "npc3",
        sprite: npc3Sprite,
        walkingAnimationMapping: 3,
        startPosition: { x: 14, y: 12 },
        container: npc3Container,
        collides: {
          collisionGroups: []
        }
      },
    ],
  };

  this.gridEngine.create(jungleTilemap, gridEngineConfig);
}

function update() {
  const cursors = this.input.keyboard.createCursorKeys();
  if (cursors.left.isDown) {
    this.gridEngine.move("player", "left");
  } else if (cursors.right.isDown) {
    this.gridEngine.move("player", "right");
  } else if (cursors.up.isDown) {
    this.gridEngine.move("player", "up");
  } else if (cursors.down.isDown) {
    this.gridEngine.move("player", "down");
  }
}

function createSpriteWithContainer(collisionGroups) {
  const text = this.add.text(-10, -20, `${JSON.stringify(collisionGroups)}`);
  const sprite = this.add.sprite(0, 0, "player").setScale(1.5);
  const container = this.add.container(0, 0, [sprite, text]);
  return [sprite, container];
}

Example Phaser Config

function config(preload, create, update) {
  return {
    title: "GridEngineExample",
    render: {
      antialias: false,
    },
    type: Phaser.AUTO,
    plugins: {
      scene: [
        {
          key: "gridEngine",
          plugin: GridEngine,
          mapping: "gridEngine",
        },
      ],
    },
    scale: {
      width: 700,
      height: 528,
    },
    scene: {
      preload: preload,
      create: create,
      update: update,
    },
    backgroundColor: "#48C4F8",
  };
}