phaser-framework Tutorial
Empezando con phaser-framework

Android Cordova CSS HTML html5-canvas ionic-framework JavaScript jQuery Node.js TypeScript
Buscar..


Observaciones

Phaser es un framework de juegos de escritorio y Mobile HTML5 de código abierto principalmente.

Incluye un conjunto robusto de documentación, características y ejemplos para que pueda avanzar rápidamente hacia un juego de trabajo. Es compatible con WebGL, a través del motor de renderizado Pixi.js , e incluye un respaldo Canvas para soporte en dispositivos más antiguos.

Aunque el motor está incorporado en JavaScript, también incluye definiciones de TypeScript

Hay una nueva visualización del proyecto que cumple con ES6 llamada Lazer .

Versiones

Phaser 2

Versión Fecha de lanzamiento
2.6.2 Kore Springs 2016-08-25
2.6.1 Caemlyn 2016-07-11
2.6.0 Fal Moran 2016-07-08
2.5.0 cinco reyes 2016-06-17
2.4.9 cuatro reyes 2016-06-16
2.4.8 Watch Hill 2016-05-19

Cómo empezar Phaser

  1. Crear una carpeta
  2. Crea un index.html dentro del nuevo directorio. Abrirlo 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> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
  1. Crea otro archivo js dentro del directorio llamado game.js
  2. 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.
}
  1. Guarde todos los archivos y abra index.html usando Bracket liveserver (icono superior derecho).
  2. El entorno de desarrollo Phaser ahora está creado. Debe aparecer una pantalla de consola en el navegador para la verificación de errores.

Comenzando con Phaser utilizando Node.js

  1. Crea una carpeta donde te gustaría tener tu juego en vivo y muévete a esa 
mkdir my-new-game
cd my-new-game
  1. Inicialice el directorio usando npm. 
npm init -y
  1. Instale Phaser como un paquete de nodo. 
npm install phaser
  1. Instale http-server como un módulo global, que se utilizará en la línea de comandos. 
npm install -g http-server
  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="en">

<head>
    <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>
</head>

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

function create() {

    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! 
    hs


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow