Jusque-là ça reste simple, rien de bien compliqué, on ne touche qu’à du HTML.
Maintenant, on va passer aux choses sérieuses et préparer la librairie pour pouvoir s’en servir dans la partie suivante.
Initialiser la librairie et ses composants
On va donc commencer par créer notre objet Quintus, que l’on nommera Q et qui servira de base tout au long du tuto.
var Q = new Quintus({
development: true // On lance le mode développement, pour forcer le refresh des assets (images, fichiers JSON…). Attention à bien désactiver cela une fois en production !
})
Ensuite on charge les composants dont on aura besoin. Attention, il y en a beaucoup (la plupart ne seront utiles que plus tard dans le tutoriel, mais autant les charger une bonne fois pour toute) :
Q.include([ // On indique quels composants inclure de base
Quintus.Sprites, // Pour gérer les sprites (les calques en gros)
Quintus.Scenes, // Pour gérer les scenes (les différentes pages, pour faire simple)
Quintus.Anim, // Pour gérer les animations (sur des sprites, par exemple)
Quintus['2D'], // Pour gérer la 2D : permet d'avoir des ennemis qui se déplacent et de détecter les collisions automatiquement
Quintus.Input, // Pour gérer les contrôles (certains contrôles sont inclus de base, c'est assez pratique)
Quintus.Touch, // Pour gérer les contrôles via une surcouche tactile (avec un joypad si nécessaire — c'est paramétrable)
Quintus.UI // Pour afficher des boutons, du texte, etc.
])
À noter que vous pouvez aussi faire tout ça en une seule fois :
var Q = new Quintus(/* Vos paramètres */).include([ /* Les composants */ ]);
Vous remarquerez aussi que le plugin 2D n’est pas chargé tout à fait comme les autres. En réalité, il s’agit juste d’une syntaxe différente en JavaScript pour accéder aux propriétés d’un objet, étant donné que 2D commence par un chiffre. Rien de bien grave, juste une particularité du langage (c’est d’ailleurs quelque chose d’assez commun dans plusieurs langages : les noms de variable commencent rarement par des chiffres)…
Paramétrer la librairie
Maintenant que Quintus est chargé, on va s’occuper d’appliquer quelques paramètres pour le lancer :
/* Le premier paramètre permet d'indiquer l'id de notre canvas, vous pouvez aussi passer directement un objet du DOM ou ne rien spécifier si vous voulez que la librairie crée un canvas pour vous */
Q.setup('game', {
maximize: false, // Inutile de modifier la taille du canvas (`true` permet d'étendre à toute la surface disponible)
width: 600, // Largeur de base
height: 800 // Hauteur de base
});
On va aussi charger le plugin de gestion de contrôles, qui s’occupe de gérer le clavier pour lancer des actions automatiquement (comme des mouvements) :
Q.controls();
Et si vous souhaitez développer un jeu compatible avec les terminaux tactiles, il suffit de lancer le plugin adéquat :
Q.touch();
Quintus est maintenant prêt à fonctionner. Alors, vous attendez quoi pour passer à la partie suivante ⁈