I'm trying to learn phaser js and I'm following the tutorial but when run my code nothing is showing on the web browser. Here is my code:
<html>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = Phaser.Game(config);
function preload ()
{
this.load.image('player', 'assets/player.png');
this.load.image('sky', 'assets/sky.png');
}
function create ()
{
player = this.physics.add.image(640, 360);
this.add.image(640, 360, 'sky');
player.setBounce(0.2);
player.setColliderWorldBounds(true);
}
what am I doing wrong?
There are some points, that could cause problems(and/or are problematic), and/or should be checked:
your placing the sky ontop of the player. The order in which you add assets / images is important.
player = this.physics.add.image(640, 360) creates a image, with a physics-object, but if you don't pass a key, the image will not be displayed. that line change it to player = this.physics.add.image(640, 360, 'player');
If you don't configure physics the application will crash. (check the browser console for an error message), solution, change the configuration to this:
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 }
}
},
};
btw.: the official phaser examples, are very helpful and showcase many functions of phaser in a tiny scope https://phaser.io/examples, they helped my to get started with phaser.
p.s.: when developing with html and javascript the browser-console is your best friend / tool, it shows error's and can help with debugging and alot more.