Hi. Total noob here, to Phaser as well as Javascript. Winning combo, I realize. Anyway, I’m trying to learn the basics of tilemaps by following this rpg tutorial, and I’m losing my mind.
The problem is, I think, with the create function of Worldscene (I put it where it goes in the tutorial). I’m pretty sure my tilemap isn’t loading. When I try
const map = this.make.tilemap({ key: “map”});
like in the tutorial, I get an error that it can’t read property 2 of undefined. So I switch it to:
const map = this.make.tilemap(‘map’);
Which seems to help, but all I get is a black screen in the browser and warnings that my layer ID’s are invalid. I only have two layers and I’ve checked their ID’s over and over.
I’m also a bit confused about the anatomy of a Phaser project, so I’ve sort of just dumped everything into the body tag of index.html. It’s possible that or my lack of understanding the Javascript DOM may be the issue. Anyway as embarrassing as it is, here is my code:
<html>
<head>
<title>Breaking ur first phaser game </title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script type="text/ecmascript">
var BootScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function BootScene ()
{
Phaser.Scene.call(this, { key: 'BootScene' });
},
preload: function ()
{
// load the resources here
this.load.image('tiles', '../assets/level3.png')
this.load.tilemapTiledJSON('map', '../assets/level3.json');
this.load.spritesheet('player', '../assets/sp1.png', { frameWidth: 64, frameHeight: 64});
},
create: function ()
{
this.scene.start('WorldScene');
}
});
var WorldScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function WorldScene ()
{
Phaser.Scene.call(this, { key: 'WorldScene' });
},
preload: function ()
{
},
create: function ()
{
// create your world here
const map = this.make.tilemap('map');
//const map = this.make.tilemap({ key: "map"});
const tiles = map.addTilesetImage('sp2019tileset1', 'tiles', 0, 0);
var World = map.createStaticLayer('World', 'tileset', 0, 0);
var BelowPlayer = map.createStaticLayer('Below', 'tileset', 0, 0);
//Create player
this.player = this.physics.add.sprite((map.widthInPixels / 2), (map.heightInPixels / 2), 'player', 6)
this.physics.world.bounds.width = map.widthInPixels;
this.physics.world.bounds.height = map.heightInPixels;
this.player.setCollideWorldBounds(true);
//Create cursors
this.cursors = this.input.keyboard.createCursorKeys();
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
this.cameras.main.startFollow(this.player);
this.cameras.main.roundPixels = true;
},
update: function (time, delta)
{
this.player.body.setVelocity(0);
// Horizontal movement
if (this.cursors.left.isDown)
{
this.player.body.setVelocityX(-80);
}
else if (this.cursors.right.isDown)
{
this.player.body.setVelocityX(80);
}
// Vertical movement
if (this.cursors.up.isDown)
{
this.player.body.setVelocityY(-80);
}
else if (this.cursors.down.isDown)
{
this.player.body.setVelocityY(80);
}
}
});
var config = {
type: Phaser.AUTO,
parent: 'content',
width: 320,
height: 240,
zoom: 2,
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 }
}
},
scene: [
BootScene,
WorldScene
]
};
var game = new Phaser.Game(config);
</script>
</body>
</html>