I’m attempting to recreate the phaser 3 tutorial game using my own sprites and images. My code is pretty much the exact same as the tutorial, except I’ve added my own images and sprite sheet. So far I’ve gotten the sky to load and a single static platform, however, when my character loads he drops straight through the platform and screen even though I’ve set up my colliders identically to the tutorial’s. At first I thought it was my sprite sheet, so I tried using the sheet from the tutorial but still no luck.
Any help would be greatly appreciated, my code is posted below:
<head>
<meta charset="UTF-8" />
<title>Test Level New</title>
<script type="text/javascript" src="scripts/phaser.min.js">
</script>
<!-- <script type="text/javascript" src="scripts/phaser-arcade-physics.min.js"></script> -->
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player;
var floor;
var floor2;
var floor3;
var outline;
var stairs;
var box1;
var box2;
var base;
var base2;
var game = new Phaser.Game(config);
function preload()
{
this.load.image('sky', 'assets/background.png');
this.load.image('base', 'assets/base.png');
this.load.image('base2', 'assets/base2.png');
this.load.image('box1', 'assets/box2.png');
this.load.image('box2', 'assets/box2.png');
this.load.image('floor', 'assets/floor.png');
this.load.image('floor2', 'assets/floor2.png');
this.load.image('floor3', 'assets/floor3.png');
this.load.image('outline', 'assets/outline.png');
this.load.image('stairs', 'assets/stairs.png');
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 28, frameHeight: 40 });
}
function create()
{
// Add sky
this.add.image(400, 300, 'sky');
// Add platforms
floor = this.physics.add.staticGroup();
floor.create(400, 568, 'floor');
// Character sprite creation
player = this.physics.add.sprite(100, 450, 'dude');
player.setbounce(0.2);
player.setCollideWorldBounds(true);
//player.body.setGravity(75);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8}),
frameRate: 10,
repeat: -1
});
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(player, floor);
}
function update()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-350);
}
}
</script>
</body>
