phaser-framework Tutoriel
Démarrer avec phaser-framework

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


Remarques

Phaser est principalement une infrastructure de jeu open source Desktop et Mobile HTML5.

Il comprend un ensemble robuste de documentation, de fonctionnalités et d’exemples pour vous permettre de progresser rapidement vers un jeu de travail. Il prend en charge WebGL, via le moteur de rendu Pixi.js , et inclut une solution de secours Canvas pour prendre en charge les anciens périphériques.

Bien que le moteur soit construit en JavaScript, il inclut également des définitions TypeScript

Il y a une nouvelle vision du projet qui est conforme à la norme ES6 appelée Lazer .

Versions

Phaser 2

Version Date de sortie
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 Cinq rois 2016-06-17
2.4.9 Quatre rois 2016-06-16
2.4.8 Watch Hill 2016-05-19

Mise en route de Phaser

  1. Créer un dossier
  2. Créez un index.html dans le nouveau répertoire. Ouvrez-le dans l'éditeur Bracket
  3. Téléchargez le référentiel Phaser à partir de github , puis récupérez le fichier phaser.js du dossier build. Placez le fichier dans votre répertoire de projet.
  4. Ouvrez index.html et liez le phaser.js dans la balise header. 
<!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. Créez un autre fichier js dans le répertoire nommé game.js
  2. Ouvrez le fichier game.js dans l'éditeur et écrivez le code suivant: 
// 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. Enregistrez tous les fichiers et ouvrez index.html en utilisant le serveur de vie Bracket (icône en haut à droite).
  2. L'environnement de développement Phaser est maintenant créé. Un écran de console devrait apparaître dans le navigateur pour la vérification des erreurs.

Premiers pas avec Phaser avec Node.js

  1. Créez un dossier dans lequel vous souhaitez que votre jeu soit en direct et accédez à celui-ci. 
mkdir my-new-game
cd my-new-game
  1. Initialiser le répertoire en utilisant npm. 
npm init -y
  1. Installez phaser en tant que package de nœud. 
npm install phaser
  1. Installez http-server en tant que module global, à utiliser sur la ligne de commande. 
npm install -g http-server
  1. Créez un fichier index.html et référencez l'exécutable Phaser et collez-y le code suivant. 
<!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. Démarrez le serveur et chargez http: // localhost: 8080 dans votre navigateur! 
    hs


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow