Premiers pas avec Phaser-Framework

Premiers pas 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][1], puis récupérez le fichier phaser.js dans le dossier de construction. Placez le fichier dans votre répertoire de projet.

  4. Ouvrez index.html et liez le phaser.js à l’intérieur de la balise d’en-tête.

    <!doctype html>

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

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

  5. Créez un autre fichier js dans le répertoire nommé game.js

  6. 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. }

  7. Enregistrez tous les fichiers et ouvrez index.html en utilisant Bracket liveserver (icône en haut à droite).

  8. 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.

[1] : https://github.com/photonstorm/phaser

Premiers pas avec Phaser à l’aide de Node.js

  1. Créez un dossier dans lequel vous aimeriez avoir votre jeu en direct et déplacez-vous dans ce dossier.

<pré> mkdir mon-nouveau-jeu cd mon-nouveau-jeu

  1. Initialisez le répertoire à l’aide de npm.

<pré> npm init -y

  1. Installez phaser en tant que package de nœud.
phaseur d'installation npm
  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="fr">

<tête>
    <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>
</tête>

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

fonction créer() {

    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
Travailler avec TypeScript →