Skrskr707 Posted February 12, 2021 Share Posted February 12, 2021 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: 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 More sharing options...
Recommended Posts