CODEWITHSUNDEEP
javascriptphaser-framework
eTune
eTune

Reputation: 31

Phaser Specific Tile "Collision"

Simple Maze, created with Tiled

So, the initial plan was to create a maze via Tilemaps if the player(starting top left) touches the thing on the bottom right, the next level should be loaded. What i've done so far is creating the collision between the walls(black) and now i dont really know how to begin with the "collision" of the thing in the bottom right.

This is my code so far 

var labGame = labGame || {};

labGame.Game = function() {};

var map;
var layer;

var player;
var controls = {};
var playerSpeed = 350;
var jumpTimer = 0;

labGame.Game.prototype = {
  create: function() {
    map = this.add.tilemap("map", 64, 64);
    map.addTilesetImage("tileset");
    layer = map.createLayer(0);
    layer.resizeWorld();

    map.setCollisionBetween(2, 2);

    player = this.add.sprite(64, 384, "player");
    player.anchor.setTo(0,5, 0,5);
    this.physics.arcade.enable(player);
    this.camera.follow(player);
    player.body.collideWorldBounds = true;

    controls = {
      right: this.input.keyboard.addKey(Phaser.Keyboard.D),
      left: this.input.keyboard.addKey(Phaser.Keyboard.A),
      up: this.input.keyboard.addKey(Phaser.Keyboard.W),
      down: this.input.keyboard.addKey(Phaser.Keyboard.S),
    }
  },

  update: function() {
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;
    this.physics.arcade.collide(player, layer);
    if(controls.right.isDown) {
      player.body.velocity.x += playerSpeed;
    }
    if(controls.left.isDown) {
      player.body.velocity.x -= playerSpeed;
    }
    if(controls.up.isDown) {
      player.body.velocity.y -= playerSpeed;
    }
    if(controls.down.isDown) {
      player.body.velocity.y += playerSpeed;
    }
  }
};

(Someone in the phaser forum wrote that the Boot.js etc. things are later easier to "handle" or so, so i've started working with that)

Upvotes: 2

Views: 1213

Answers (1)

Fabadiculous
Fabadiculous

Reputation: 574

You can use a Tiled object layer.

In Tiled, under the panel displaying your layers, click the new layer button, but select new object layer.

Then make sure the layer is selected, and put the bottom right tile on the map. Now, all the walls will be on the tiling layer, and there will be one tile on tghe object layer.

Coming across to the code, you will add something like this:

    //Create Exit
    //Add the exit tile to a group
    exit = this.add.group();

        this.map.createFromObjects('Objects', 28, 'door', 0, true, false, exit);
        //Apply properties to the exit
        exit.forEach(function(exit) {
            exit.body.allowGravity = false;
            exit.body.immovable = true;
        },this);

The this.map.createFromObjects parameters are: createFromObjects(name, gid, key, frame, exists, autoCull, group, CustomClass, adjustY)

You can see more about this in the documentation here.

Now that the object is inserted, it is as easy as calling a collision function in the update. so something like:

    update: function() {
        this.physics.arcade.overlap(player,exit, this.endLevel)
    }
    endLevel: function(player,exit) {
        //Code for moving to next Level
    }

Upvotes: 2

Related Questions