Estoy tratando de aprender Phaser js y estoy siguiendo el tutorial, pero cuando ejecuto mi código, no aparece nada en el navegador web. Aquí está mi código:
<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); }¿Qué estoy haciendo mal?
Hay algunos puntos que podrían causar problemas (y/o son problemáticos) y/o deben verificarse:
tu colocando el cielo encima del jugador . El orden en el que agrega recursos/imágenes es importante.
player = this.physics.add.image(640, 360) crea una imagen, con un objeto físico, pero si no pasa una clave, la imagen no se mostrará. esa línea cámbiela a player = this.physics.add.image(640, 360, 'player');
Si no configura la physics , la aplicación se bloqueará. (verifique la consola del navegador para ver si hay un mensaje de error), solución, cambie la configuración a esto:
var config = { type: Phaser.AUTO, width: 1280, height: 720, scene: { preload: preload, create: create, update: update }, physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, };Por cierto: los ejemplos oficiales de Phaser son muy útiles y muestran muchas funciones de Phaser en un alcance pequeño https://phaser.io/examples , me ayudaron a comenzar con Phaser.
pd: al desarrollar con html y javascript, la consola del navegador es su mejor amigo / herramienta, muestra errores y puede ayudar con la depuración y mucho más.