Home
CS POK MON Projets

Phaser et CI sur Github

Tags :
  • MON
  • 2022-2023
  • temps 3
  • Phaser
  • Game Engine
  • Github Actions
  • Github Pages
  • Javascript
Auteurs :
  • Jean-Baptiste Durand
Promotions/2022-2023/Jean-Baptiste Durand/MON Jean-Baptiste/Phaser et CI sur Github

Phaser - Game Engine + Github CI

Lien du jeu Lien du github

Table des matières

Choix de la technologie

Je me suis renseigné sur 4 différents moteurs de jeu :

Je me suis tourné vers Phaser car il permettait d'être disponible en static sur un navigateur. Ce qui, combiné avec Github Pages, permet d'avoir mon jeu hébergé directement par Github sans trop de difficultés.

Hébergement sur Github

Actions

Github propose d'héberger gratuitement un site static (comportant seulement des pages HTML, avec CSS et JS, mais sans serveur), c'est ce qui permet notamment d'héberger le site de Do_It. Pour cela, Github a besoin d'une branche sur laquelle est toute l'infrastructure statique du site.

Pour éviter d'avoir à chaque fois à mettre le site static sur une branche, on peut utiliser les Github Actions qui est une routine, exécutée sur une machine de Github.

Voici l'action github que j'ai mis en place, avec en dessous les informations sur les différentes fonctionnalités :

name: Build
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./static
          github_token: ${{ secrets.DEPLOY_KEY }}

Clé de déploiement

Bien évidement, nous n'allons pas donner aux machines de Github notre mot de passe de connexion à notre compte Github. Il faut donc trouver un moyen de donner l'accès à notre projet en évitant de se faire voler notre mot de passe.

Access token

Github nous permet d'avoir des mots de passes ayant des accès restreints sur notre compte. On peut choisir d'avoir un accès en écriture seulement sur un projet ou autre.

Pour cela :

Settings (celui de votre compte, pas du repo) -> Developer Settings -> Personal Access Token

Vous pouvez ensuite choisir les droits de votre clé. Il faut faire attention à ne pas donner plus de droits que nécessaire. Donner une date d'expiration de la clé et supprimer les clés inutiles.

Documentation officielle

Secrets

Un secret est une variable qui est stockée de manière sécurisée par Github et qui peut être transmise lors de l'exécution d'actions. Un secret peut être un token d'accès (comme dans ce projet), ou par exemple l'url d'un serveur distant sur lequel déployer notre code (comme on a pu le faire sur Gitlab dans le cours AWS/Docker).

Documentation officielle

Présentation de Phaser

Phaser est un moteur de jeu open source, dont le code source se trouve ici.

Pour installer Phaser, il faut mettre, dans un fichier html, la balise :

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

Le reste du code sera dans un fichier js, ou dans une autre balise script.

Phaser a une énorme bibliothèque d'exemples, pour voir une mise en application de chaque fonctionnalités, et un fichier API complet. Il est important de s'y référer pour voir comment implémenter une des fonctionnalités.

exemples

API

Physique (Physics)

Phaser a 2 models de physique implémentée Arcade et Matter

Le choix de la physique est quelque chose de primordial car il influencera les fonctionnalités de votre application.

Les méthodes des objets ne sont pas les mêmes dans différents cas.

Arcade

La physique Arcade est une physique plus simple, qui est faite pour mettre en place un projet rapidement.

C'est plus simple de le prendre en main. Par contre la détections des éléments extérieurs (blocks) n'est pas implémentée ce qui peut-être limitant.

Exemple

Matter

La physique Matter essai de se rapprocher au plus proche de la réalité, en ayant une implémentation de mécanique : il y a des frottements, il est possible de pousser des objets etc.

Il y a une variété plus importante d'objet qu'on peut créer.

Exemple

Scène (Scene)

La scène est l'élément principal de Phaser, c'est lui qui va s'occuper de précharger les images d'initier les components et de faire tourner le jeu.

On doit créer une classe qui hérite de Phaser.Scene.

On peut créer 3 méthodes :

Méthodes utilisées pour charger les images (preload), initialiser les éléments du jeu (create), et effectuer des actions à chaque tick du jeu (update).

Joueur (Sprite)

Un Sprite est un objet animé du jeu, il peut être contrôlé par le joueur ou par d'autres éléments du jeu. Il est créé à partir d'une image.

Exemple

Carte (Tilemap)

La carte du jeu peut-être générée en plaçant des bloques un par un ou en utilisant une Tilemap qui va contenir toutes les informations pour créer la map.

La carte peut être composée de plusieurs couches, dont des touches qui créent des collisions ou non. C'est pratique pour générer des décors de fond, et les blocks avec lesquels notre personnage va interagir.

Exemple

Mon point de vue

Points positifs 👍

Points négatifs 👎

Liens Utiles

Mon projet

Github

Phaser