Logo Makeyourgame
Accueil Les formations Créer un jeu Les ateliers Les tutoriels Blog
Logo Makeyourgame
Les formations Les financements Les exercices La certification Unity
Logo Makeyourgame
Mes objectifs Les jeux Les ressources Le glossaire
Logo Makeyourgame
Les tutos Les tutos Youtube

Phaser - Mise en place : Phaser

pictureProfil_Callan_
Ecrit par Callan_
Catégorie Phaser
Mis à jour le 08/04/2020
Phaser - Mise en place

Dans ce tutoriel on va voir ensemble comment mettre en place Phaser avec un seul fichier pour pouvoir développer un jeu.

6 min Débutant

Salut à toi qui lit ce tutoriel,

Avant de commencer, je vais me présenter.

Je suis Callan, Développeur Web de formation (chez Simplon) et formateur dans ce domaine, je ne suis pas un expert dans le domaine juste un grand passionné.

Je suis plus orienté sur les technologies web avec un penchant pour Javascript. J'aime bien fouiner pour me trouver de nouveaux problèmes et des solutions.

Je n'ai pas parole d'évangile et rien de ce que j'écris/dis n'est figer dans le marbre, mais on va essayer de voir ensemble comment qu'on fait un jeu vidéo avec les technologies du web.

Introduction

Ce Tutoriel n'est que le début de notre grande aventure sur Phaser.

Alors voilà ce que nous dis wikipedia à son sujet :

Phaser est un moteur de jeu en HTML5 en 2D,il utilise la technologie des Canvas et du WEBGL, ce qui permet d'avoir un rendu rapide sur navigateur et smartphone.Phaser est developpé en `javascript` ce qui rend sont approche beaucoup plus simple pour les débutants

Donc pour faire du Phaser on aura besoin littéralement d'un éditeur de texte (bloc-note, sublime-text, vscode...) et d'un navigateur (firefox, chrome...).

Mettre en place Phaser

Étape 1 : Importer Phaser

On commence par créer un fichier index.html et on importe le CDN(Continous Delivery Network) de Phaser.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon Super Jeu</title>
</head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.22.0/dist/phaser.min.js"></script>
    <!-- On met une 2em balise pour écrire notre programme. -->
    <script>

    </script>
  </body>
</html>

Source : Liens vers le CDNCode : Le code pour l'étape 1

Ouvrir votre  index.html  dans votre navigateur et ouvrez vos outils développeur (F12 ou CTRL+SHIFT+I).

Étape 2 : Configurer Phaser

Puis dans le second bloc script on va commencer par configurer Phaser :

<script>
  let config = {
    type: Phaser.AUTO, // Définit le moteur graphique à utilisé CANVAS, WEBGL ou AUTO.
    width: 800, // largeur de l'écran de jeu.
    height: 600, // hauteur de l'écran de jeu.
    physics: {}, // définit la physique utiliser par phaser.
    scene: {
      preload: preload,
      create: create
    }// configure la scene utiliser pour phaser.
  };

  let game = new Phaser.Game(config);
</script>

Code : Le code pour l'étape 2

Étape 3 : Impoter les assets

Une fois configurer on peut mettre en place les fonctions utiles pour notre scène.

Tout d'abord on commence par la fonction preload, cette fonction vous permettra de charger vos assets.

function preload(){
  this.load.image('sky', 'https://labs.phaser.io/assets/skies/space2.png ');
  this.load.image('atari', 'https://labs.phaser.io/assets/sprites/atari800xl.png');
}

La méthode load.image(key, url) prend 2 paramètres :

- key(string) : permet créer une référence pour la ressource

- url(string) : est le chemin d'accès afin de charger l'image

Source : Phaser 3 API Documentation - Class: LoaderPlugin#Image

Code : Le code pour l'étape 3

Étape 4 : Afficher les assets

Une fois que les ressources sont chargées, on va pouvoir les afficher grâce à la fonction create.

// il y à l'étape 3 juste au-dessus
let atari
function create(){
  this.add.image(400, 300, 'sky');
  atari = this.add.image(400, 300, 'logo');
}

La méthode add.image(x, y, key) prend 3 paramètre :

- x(int) : position de l'image sur l'axe X

- y(int) : position de l'image sur l'axe Y

- key(string) : Fait référence à la ressource qu'on à chargé.

Source : Phaser 3 API Documentation - Class: GameObjectFactory#Image

Code : Le code pour l'étape 4

Étape 5 : Animation

Et pour finir une animation avec tweens, on reviendra sur cette méthode plus tard dans les tutoriels.

function create(){
  // Étape 4 juste au-dessus
  // on ajoute un petite animation 
  this.tweens.add({
    targets: atari,
    y: 270,
    duration: 3000,
    ease: 'Power2',
    repeat: -1,
    yoyo: true
  })
}

Et on en a fini pour ce tuto, tu pourras retrouver le code intégral sur le repo github.

Maintenant tu sais comment mettre en place ton projet Phaser c'est pas si compliqué.

Bien sûr ce n'est pas la seule façon de faire un projet Phaser, il existe autant possibilité que de projet.

Dans les prochains tutoriels, nous allons voir comment gérer les assets, les scènes et bien plus encore.

Sur ces mot je te souhaite un Happy Hacking et reste curieux.

N'oublie pas de rejoindre le discord de MYG, si tu à des question &&/|| envie de discuter.

Vues: 4532

Licence:



Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner de l'expérience (XP) !

Vous aimerez aussi...

Blog et Tutoriels

Asset 101 : Modélisation low-poly

Asset 101 : Modélisation low-poly

par Plantigraf

Dans ce tutoriel, nous allons repartir de notre base de voiture cartoon pour venir ajouter du détail et modéliser les fenêtres et les roues avec très peu de polygones.

applause logo1