Jump to content

Collision with Tilemap not working


Leprosy
 Share

Recommended Posts

H, I'm just beginning a Boulder Dash type of game to teach myself phaser...so far seems to be a fun and easy library but I've found myself unable to make the player sprite collide with the tilemap representing the level. Perhaps the answer is pretty obvious, but I can't manage to see it. I will share my code:

 

/**
 * Super fun gamez
 */
// Main namespaces and definitions
var Engine;

var Game = Game || {};

Game.name = "_lepdash";

Game.version = "0.1";

Game.width = 800;

Game.height = 600;

/*User*/
Game.tileSize = 32;

// Load assets state
Game.loadState = {
    preload: function() {
        console.info(Game.name + " loading assets");
        // Put your assets loader logic here...
        /*User*/
        Engine.add.text(10, 10, "Loading...", {
            font: "20px Arial",
            fill: "#ffffff"
        });
        //Engine.load.image('bg', 'img/bg0.png');
        Engine.load.spritesheet("player", "img/player.png", Game.tileSize, Game.tileSize);
        Engine.load.spritesheet("terrain", "img/terrain.png", Game.tileSize, Game.tileSize);
        Engine.load.tilemap("map", "maps/map1.json", null, Phaser.Tilemap.TILED_JSON);
    },
    create: function() {
        Engine.state.start("main");
    }
};

// Main menu state
Game.mainState = {
    preload: function() {
        console.info(Game.name + " main menu");
    },
    create: function() {
        // Create your main menu logic here...
        /*User*/
        // Draw main menu
        Engine.add.text(10, 10, Game.name, {
            font: "20px Arial",
            fill: "#ffffff"
        });
        Engine.add.text(10, 50, "press space to start", {
            font: "12px Arial",
            fill: "#ffffff"
        });
        // Set game parameters
        Game.level = 1;
        Game.score = 0;
        Game.lives = 3;
        // Wait for user input
        var key = Engine.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        key.onDown.addOnce(function() {
            Engine.state.start("play");
        }, this);
    }
};

// Play loop state
Game.playState = {
    cursors: null,
    //player: null,
    preload: function() {
        console.info(Game.name + " play loop");
    },
    // Create your play logic here
    /*User*/
    create: function() {
        console.info("Game params", Game);
        Engine.physics.startSystem(Phaser.Physics.ARCADE);
        // build map
        Game.map = Engine.add.tilemap("map");
        Game.map.addTilesetImage("tiles", "terrain");
        //"tiles name in JSON", "tileset" defined in preload state
        Game.map.setCollision(1, "map" + Game.level);
        /*Game.map.setTileIndexCallback(2, function(a, b, c) {
            console.info("callback", this, a, b, c)
        }, this);*/
        Game.layer = Game.map.createLayer("map" + Game.level);
        Game.layer.resizeWorld();
        Game.layer.debug = true;
        // add player
        Game.player = this._createPlayer();
        Game.player.animations.play("tap");
        Engine.physics.enable(Game.player);
        //Game.player.body.setSize(10, 14, 2, 1);
        this.cursors = Engine.input.keyboard.createCursorKeys();
        // add HUD
        Game.HUD = Engine.add.text(10, Game.height - 15, "", {
            font: "15px Arial",
            fill: "#ffffff"
        });
    },
    update: function() {
        Engine.physics.arcade.collide(Game.player, Game.layer);
        this._checkInput();
        this._updateHUD();
    },
    render: function() {
        Engine.debug.body(Game.player);
    },
    _updateHUD: function() {
        Game.HUD.text = "Map:" + Game.level + " Score: " + Game.score + " Lives: " + Game.lives;
    },
    _checkInput: function() {
        Game.player.body.velocity.set(0);
        if (this.cursors.left.isDown) {
            Game.player.body.velocity.x = -100;
            Game.player.play("left");
        } else if (this.cursors.right.isDown) {
            Game.player.body.velocity.x = +100;
            Game.player.play("right");
        } else if (this.cursors.up.isDown) {
            Game.player.body.velocity.y = -100;
            Game.player.play("up");
        } else if (this.cursors.down.isDown) {
            Game.player.body.velocity.y = 100;
            Game.player.play("down");
        } else {
            Game.player.play("still");
        }
    },
    _createPlayer: function() {
        var player = Engine.add.sprite(Game.tileSize, Game.tileSize, "player");
        player.animations.add("left", [ 7, 8, 9, 10, 11, 12, 13 ], 20, false);
        player.animations.add("right", [ 14, 15, 16, 17, 18, 19, 20 ], 20, false);
        player.animations.add("up", [ 7, 8, 9, 10, 11, 12, 13 ], 20, false);
        player.animations.add("down", [ 14, 15, 16, 17, 18, 19, 20 ], 20, false);
        player.animations.add("still", [ 0 ], 10, false);
        player.animations.add("blink", [ 0, 1, 2, 1 ], 10, false).onComplete.add(function() {
            player.animations.play("still");
        });
        player.animations.add("tap", [ 3, 4, 3, 4, 5, 6, 5, 4, 3, 4, 3, 4, 5, 6, 5, 4 ], 10, false).onComplete.add(function() {
            player.animations.play("still");
        });
        return player;
    }
};

// Setting up main states
Engine = new Phaser.Game({
    //enableDebug: false,
    width: Game.width,
    height: Game.height,
    renderer: Phaser.AUTO,
    antialias: false,
    //transparent: true,
    parent: "game"
});

//Engine = new Phaser.Game(Game.width, Game.height, Phaser.AUTO, "game");
Engine.state.add("load", Game.loadState);

Engine.state.add("main", Game.mainState);

Engine.state.add("play", Game.playState);

// Let's roll
window.onload = function() {
    console.info(Game.name + " init");
    Engine.state.start("load");
};

 

Attached are the assets I'm using for this project.

 

Thanks in advance ;)
 

player.png

terrain.png

map.tmx

map1.json

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...