Jump to content

Collide character with walls ES6 classes


Skrskr707
 Share

Recommended Posts

Hello!

Im trying to collide walls with a player to not let the player walk through walls (will be doing the same with enemies so this is cruciall). Since im using ES6 classes i cant combine the player class with the level class, this is how the game looks:

image.thumb.png.ef3f4807424c840a95660f2fb6bb5839.png

This is the code for creating the background/level

class firstLevel extends Phaser.Scene {
    constructor() {
        super({ key: "firstLevel"}) //super must be used before using this key to access or create properties (throws an error if not)   
     }
    preload() {
        this.load.tilemapTiledJSON("level", "./assets/levels/level-1.json");
        this.load.image("tiles", "./assets/levels/terrain_atlas.png");
    }

    create() {
        let map = this.make.tilemap({key: 'level'});
        let terrain = map.addTilesetImage("terrain_atlas", "tiles");
        map.createLayer("Grass", terrain).setDepth(-1);
        map.createLayer("Walls", terrain).setDepth(-1);
        map.createLayer("Small flowers", terrain).setDepth(-1);
        map.createLayer("Entrance", terrain).setDepth(-1);
    }
    update() {}
}
export default firstLevel;

And this is the code for creating the player and making it move with keys..

class Player extends Phaser.Scene {
    constructor() {
        super({ key: "Player"}) //super must be used before using this key to access or create properties (throws an error if not)
        this.player;
    }

    preload(){
        this.load.spritesheet("dude", "./assets/characters/player.png", {
            frameWidth: 49,
            frameHeight: 62
        });
    }
    create(){
        this.player = this.physics.add.sprite(400, 400, 'dude');
        this.player.setCollideWorldBounds(true);
        this.player.setScale(1.3);

        this.anims.create({
            key: "Up",
            frames: [{
                key: 'dude',
                frame: 0
            }],
            frameRate: 20
        });
        this.anims.create({
            key: "Left",
            frames: [{
                key: 'dude',
                frame: 1
            }],
            frameRate: 20
        });
        this.anims.create({
            key: "Down",
            frames: [{
                key: 'dude',
                frame: 2
            }],
            frameRate: 20
        });
        this.anims.create({
            key: "Right",
            frames: [{
                key: 'dude',
                frame: 3
            }],
            frameRate: 20
        })
    }
    update(){
        var cursors = this.input.keyboard.createCursorKeys();
        this.player.setVelocityX(0);
        this.player.setVelocityY(0);

        if (cursors.left.isDown) {
            this.player.setVelocityX(-190);
            this.player.anims.play('Left', true);

        } else if (cursors.right.isDown) {
            this.player.setVelocityX(190);
            this.player.anims.play('Right', true);

        } else if (cursors.up.isDown) {
            this.player.setVelocityY(-190);
            this.player.anims.play('Up', true);

        } else if (cursors.down.isDown) {
            this.player.setVelocityY(190);
            this.player.anims.play('Down', true);
        } else {
            this.player.setVelocityX(0);
            this.player.setVelocityX(0);
        }
    }
    
}
export default Player;

Lastly i have a script.js file that creates these instances

var config = {
    type: Phaser.AUTO, //selects WEBGL as standard but if the browser does not support it it switches to CANVAS
    width: 1024,
    height: 800,
    physics: {
        default: 'arcade',
    }
};
var game = new Phaser.Game(config);

import firstLevel from './firstLevel.js';
import Player from './player.js';
import Title from './Title.js';


var level1 = new firstLevel();
var player1 = new Player();
var titleScene = new Title();

game.scene.add("Title", titleScene);
game.scene.add("firstLevel", level1);
game.scene.add("Player", player1);

game.scene.start("Title"); //starts with this scene

 

this.physics.add.collider(player, platforms);

This code is provided by phaser documentation but cant find ES6 classes examples.. Any ideas?

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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