Primeros pasos con Phaser-Framework

Primeros pasos Phaser

  1. Crea una carpeta

  2. Cree un index.html dentro del nuevo directorio. Ábrelo en el editor de corchetes

  3. Descargue el repositorio de Phaser desde github, luego tome el archivo phaser.js de la carpeta de compilación. Coloque el archivo dentro del directorio de su proyecto.

  4. Abra index.html y vincule phaser.js dentro de la etiqueta del encabezado.

    <!doctype html>

    My Gamer 
      <script type="text/javascript" src="lib/phaser.js"></script>

 <style type="text/css">
     body {
         margin: 0;
     }
 </style>

  5. Cree otro archivo js dentro del directorio llamado game.js

  6. Abra el archivo game.js en el editor y escriba el siguiente código:

    // Phaser instance, width 800px, height 600px render as CANVAS. // Method signature - preload, create and update

    var game = new Phaser.Game(800, 600, Phaser.CANVAS,‘gameContainer’, { preload: preload, create: create, update: update });

    function preload() { // this method used to load your game assets }

    function create() { // this method run only once used to create to game world }

    function update() { // this method loop 60 times in a seconds, used to handle gameplay. }

  7. Guarde todos los archivos y abra index.html usando Bracket liveserver (icono superior derecho).

  8. El entorno de desarrollo de Phaser ya está creado. Debería aparecer una pantalla de consola en el navegador para verificar el error.

Primeros pasos con Phaser usando Node.js

  1. Cree una carpeta donde le gustaría tener su juego en vivo y muévase a esa
mkdir mi-nuevo-juego cd mi-nuevo-juego
  1. Inicialice el directorio usando npm.
npm inicializar -y
  1. Instale Phaser como un paquete de nodo.
fasador de instalación de npm
  1. Instale el servidor http como un módulo global, para usar en la línea de comandos.
npm install -g servidor-http
  1. Cree un archivo index.html y haga referencia al ejecutable de Phaser y pegue el siguiente código en él.
<!doctype html>
<html lang="es">

<cabeza>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</cabeza>

<cuerpo>
    <div id="helloWorld"></div>
</cuerpo>
<guion>
var juego = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

función crear () {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>
  1. Inicie el servidor y cargue http://localhost:8080 en su navegador.
 hora
Trabajando con TypeScript →