u_furan

tilemap collision HELP

Recommended Posts

help with collision. 

When I add collision it's layer has offset (or not work). You can show demo in https://game.tlgrm.info/phaser.html.

var game = new Phaser.Game(900, 600, Phaser.AUTO, 'gameTroll', { preload: preload, create: create, update:update, render:render});

  function preload () {

    game.load.tilemap('level', 'assets/level.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.spritesheet('dude', 'assets/NPC.png', 16, 32);
    game.load.image('snow-expansion', 'assets/snow-expansion.png');
    game.load.image('tiles_packed', 'assets/tiles_packed.png');
    
  }

  var cursors;
  function create() {
    game.world.setBounds(0, 0, 1400, 1400);

    map = game.add.tilemap('level');

    map.addTilesetImage('snow-expansion');
    map.addTilesetImage('tiles_packed');


    Voda = map.createLayer('Voda');
    Ostrova = map.createLayer('Ostrova');
    Atributika = map.createLayer('Atributika');
    collision = map.createLayer('collision');
    player = game.add.sprite(16, 32, 'dude');

    map.setCollisionByExclusion([0], true, 'collision')
    Ostrova.resizeWorld()
    collision.resizeWorld()

    collision.debug = true

    player.animations.add('down', [0, 1, 2, 3], 7, true);
    player.animations.add('right', [4, 5, 6, 7], 7, true);
    player.animations.add('up', [8, 9, 10, 11], 7, true);
    player.animations.add('left', [12, 13, 14, 15], 7, true);
    
    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.body.setSize(16, 32, 50, 50);
    player.body.bounce.y = 0;
    player.body.collideWorldBounds = true;
    player.bringToTop();

    
    var startPos = map.objects.Meta.find(c => c.name == "start")
    player.x = startPos.x;
    player.y = startPos.y;
    
    game.camera.follow(player);
    // game.camera.x = 314;
    // game.camera.y = 390;

    cursors = game.input.keyboard.createCursorKeys();
    
  }
  
  var facing;
  function update() {

  	game.physics.arcade.collide(player, collision);
      
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -100;

        if (facing != 'left')
        {
            player.animations.play('left');
            facing = 'left';
        }
    }
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 100;

        if (facing != 'right')
        {
            player.animations.play('right');
            facing = 'right';
        }
    }

    else if (cursors.up.isDown)
    {
        player.body.velocity.y = -100;

        if (facing != 'up')
        {
            player.animations.play('up');
            facing = 'up';
        }
    }
    else if (cursors.down.isDown)
    {
        player.body.velocity.y = 100;

        if (facing != 'down')
        {
            player.animations.play('down');
            facing = 'down';
        }
    }
    else
    {
        if (facing != 'idle')
        {
            player.animations.stop();

            if (facing == 'down')
            {
                player.frame = 0;
            }
            else if (facing == 'right')
            {
                player.frame = 4;
            }
            else if (facing == 'up')
            {
                player.frame = 8;
            }
            else if (facing == 'left')
            {
                player.frame = 12;
            }

            facing = 'idle';
        }
    }

  }

  function render() {

    game.debug.cameraInfo(game.camera, 32, 32);

  }

 

Share this post


Link to post
Share on other sites

I'm not sure why your exclusion isn't working, but i thought i would throw out how I handle collisions because I'm new and I really struggled to get collisions in my game working. I have a little 32x32 redSquare.png that I made with paint. I make a layer in Tiled called "Collisions" as the topmost layer. I then use my red square and put it everywhere I want my player to collide. I then add the image and layer just as you are doing except I put the layer as the first rendered layer so that you cannot see it. I then put the line 

map.setCollision(137, true, 'Collisions');

137 is the ID of the red square image. You can find this by checking the .json file that you get when you import it into tiled. There are a number of ways to do collision, but I struggled to get many of them working. I found this method to be very easy. Let me know if you want to try this method and have any problems.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.