Librairie de jeu vidéo simple - cegepmv/420-411 GitHub Wiki

Dans l'optique de faire un jeu dans avec un temps limité, voici une section de documentation pour vous aidez à faire le jeu en Javascript. Pour se faire, PixiJS est mon choix de librairie pour vous montrer quelques trucs pour faire un jeu simple.

Limitation pour intégration avec objet connecté (sans serveur)

Il n'est pas nécessaire d'avoir un serveur d'application pour l'exécuter contrairement à certain de ses concurrents.

Architecture

https://pixijs.com/8.x/guides/basics/architecture-overview

Suivre le tutoriel pour un démarrage

https://pixijs.com/8.x/guides/basics/getting-started

Inclure la librairie dans votre html

<script src="https://pixijs.download/release/pixi.min.js"></script>

v7

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>

Initialiser votre PIXI.Application

Déterminer la configuration de base de votre jeu, la résolution de l'écran du jeu.

const app = new PIXI.Application({ width: resolutionX, height: resolutionY, backgroundColor: 0x1099bb });

Créer un espace dans votre html pour le jeu

Si vous développez en html sans React:

 <div id="pixi-container"></div>

Avec l'exemple de React fournit dans le cours:

 const canvasRef = React.useRef(null);

...

 <div style={{ display: 'flex', justifyContent: 'center' }}>
   <canvas ref={canvasRef}></canvas>
 </div>

Ajouter les librairies après le div.

Ajouter la view au container (sans React)

document.getElementById('pixi-container').appendChild(app.view);

Charger le fond d'écran avec un sprite répété

https://github.com/Alan01252/pixi-tilemap-tutorial

Choisir un sprite (lutin) ou un tileset

Charger avec un promise l'image à l'aide de Asserts.load.

const texturePromise = PIXI.Assets.load('img/imgGround.png'); texturePromise.then((resolvedTexture)=> {

Positionner vos items dans l'écran (2D)

sprite.x = 20; sprite.y = 30;

Créer le Sender à votre jeu connecté en version REACT NATIVE (version Chromecast)

Voir le projet React Native:

https://github.com/420-411-MV/cls411-manette1

Transférer le jeu que vous avez conçu sur un serveur pour l'héberger (jeuX.site-web.ca)

  1. Transférer le code de votre application sur le serveur via une commit et push. L'automatisation du déploiement se déroule dans Jenkins pour le cours actuel.
  2. Créer l'application dans la console (fait par le professeur). https://cast.google.com/publish/#/overview
  3. Publier l'application (bouton publish, fait par le professeur).
  4. Ajouter la librairie de chromecast receiver dans votre html après votre fichier javascript (mettre defer après la src du script si du html doit être chargé avant le javascript. Voir aussi type="module").
<script type="text/javascript" src="https://www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  1. Créer le context du receiver.

const context = cast.framework.CastReceiverContext.getInstance();

  1. Copier la constante contenant le nom de votre canal de communication (namespace).

const CHANNEL = 'urn:x-cast:testChannel';

  1. Ajouter une méthode de rappel (callback) pour le canal en question.

context.addCustomMessageListener(CHANNEL, handleMessageFromSender);

Voir https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverContext

  1. Dans la méthode de rappel, ajuster les coordonnées de votre joueur (ou autre).
  2. Démarrer le context avec les options.

const options = new cast.framework.CastReceiverOptions();

Voir documentation: https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverOptions

...

context.start(options);

  1. Déployer le code sur le serveur.
  2. Ajoutez le appId dans le client pour commencer le test.

Planification

  1. Testez le jeu avec la configuration minimale sans objet connecté.
  2. Testez le contrôle avec l'objet connecté.
  3. Ajoutez des fonctionnalités à votre jeu.
  4. Commitez vos changement à chaque étape validée (test fonctionnel).
⚠️ **GitHub.com Fallback** ⚠️