Le blog d'Arcade Village

Un jeu en javascript 4 : Commentaires sur le moteur

CCAnimeEngine.prototype.run


C'est la fonction principale.
Que fait-elle ?
this.ae_l1 = Date.now();
Elle regarde le temps au moment du début du processus
this.onTip();
Elle appelle une fonction onTip() qui demande aux sprites de réaliser leurs opérations. Avant les sprites, une fonction onBeforeSprite() est appelée. Elle gère les opérations générales. Elle est vide dans la classe ete doit être redéfinie en fonction du jeu. Nous verrions un exemple de l'utilisation de cette fonction avec Sokoban.


if ( !this.ae_paint )
{
if ( window.requestAnimationFrame )
{
requestAnimationFrame (()=>{this.repaint()});
}
else
this.repaint();
}

Ici, nous sommes proches du système. Pour simplifer, ce code redessine l'écran de jeu si celui-ci n'est pas déjà en train de le faire. C'est quelque chose que je n'ai jamais vu d'autres cours de programmations de jeu en javascript. Je pars du principe que certains affichages peuvent être lent et que cela ne doit pas modifier le déroulement du jeu. Je découple donc la partie intelligence de la partie affichage.


this.ae_l2 = Date.now();
this.ae_lw = this.ae_l2 - this.ae_l1;
if ( this.ae_lw > this.ae_wait ) // On a mis plus de temps que demander
this.ae_lw = 1;
else
this.ae_lw = this.ae_wait - this.ae_lw;

setTimeout(()=>{this.run()}, this.ae_lw);
}

Dans cette dernière partie, on calcule la durée totale du processus.

Ce code javascript setTimeout(()=>{this.run()}, this.ae_lw); permet de relancer la fonction CCAnimeEngine.prototype.run en respectant la durée this.ae_wait définie par le créateur du jeu.
Si je veux que chaque boucle de mon jeu dure 25ms.
Si le processus qui s'achève a duré 10ms
J'attends 25-10=15ms (dans la variable this.ae_lw)
Je relance CCAnimeEngine.prototype.run.

Si le processus a pris plus de 25ms, je relance tout de suite.

CCAnimeEngine.prototype.onTip


Deuxième fonction importante. Elle est l'intelligence de la classe.

this.onBeforeSprites();
Appelle la fonction qui gère les données générales du jeu

for (this.ae_is = 0 ; this.ae_is < this.ae_sprites.length ; this.ae_is++ )
{
this.ae_st = this.ae_sprites[this.ae_is];
this.ae_st.prepareMove();
this.ae_st.think();
}

Pour chaque sprite, une fonction prepareMove est appelée.Ensuite, une fonction think(), vide par défaut, dans laquelle le sprite interagit avec le jeu.


for (this.ae_is = 0 ; this.ae_is < this.ae_sprites.length ; this.ae_is++ )
{
this.ae_st = this.ae_sprites[this.ae_is];
this.ae_st.move();
}

Un fois que tous les sprites ont réfléchi, cette fonction applique leurs mouvements.

CCAnimeEngine.prototype.repaint


Cette fonction vérifie juste qu'un dessin du jeu n'est pas déjà en cours. Elle appelle la fonction
CCAnimeEngine.prototype.drawOff

Celle-ci appelle une fonction drawBackOff qui peut être modifiée pour dessiner un arrière plan. Puis, elle demande à chacun des sprites de se dessiner.

CCAnimeEngine.prototype.defineCanvas


Définit le canvas qui sera utilisé pour tous les dessins. Cette fonction crée un objet CCGraphics.

Les autres groupes de fonctions


La classe offre aussi quelques fonction permettant de gérer les sprites (ajout, suppression), ainsi que des fonction permettant de gérer les événements. Les systèmes sont tellements différents que j'ai préféré écrire ma propre classe d'événements. Les événements les plus courants sont le click d'une souris, l'appui sur une touche de clavier ou sur l'écran, mais ils peuvent aussi être déclenchés par des clics sur des boutons ou des menus.

La classe CCGameEvent


Elle se trouve dans le fichier cc_gameevnt.js

function CCGameEvent(event_type)
{
 this.etype = event_type;
 this.ip = 0;
 this.str = "";
 this.x = 0;
 this.y = 0;
}

CCGameEvent.prototype.getType = function()
{
 return this.etype;
}

CCGameEvent.prototype.setIntParam = function( ip )
{
 this.ip = ip;
}

CCGameEvent.prototype.setStringParam = function( str )
{
 this.str = str;
}

GameEvent.prototype.setCoord = function( x, y )
{
 this.x = x;
 this.y = y;
}

CCGameEvent.prototype.toString = function()
{
 return "GameEvent "+this.etype+" "+this.ip+" "+this.str+" ["+this.x+","+this.y+"]";
}

Nous verrons dans la pratique comment l'utiliser. Le processus sera toujours le même : l'application crée un objet CCGameEvent et utilise CCAnimeEngine.prototype.addEvent pour l'ajouter à la file d'attente des événements de CCAnimeEngine.

Dans la fonction CCAnimeEngine.prototype.onBeforeSprites, on ajoute le code permettant de gérer les événements de la file d'attente.


La prochaine fois, je vous présenterai la classe Sprite2D
ArcadeVillage.com 1999 - 2024