Maintenant que l’on peut jouer, ce serait pas mal de pouvoir gérer le joueur qui sera affiché, pourra se déplacer (suivant des contrôles) et tout un tas d’autres choses…
Créer un joueur basique
Pour créer un joueur, il va falloir créer des sprites personnalisés. En gros, étendre la classe Sprite.
Heureusement, Quintus a tout prévu !
Q.Sprite.extend('Player',{
init: function(p) {
this._super(p, {
sheet: 'my_player',
sprite: 'my_player', // On indique le sprite
collisionMask: Q.SPRITE_DEFAULT, // On verra ça au moment de la gestion des collisions
speed: 300,
jumpSpeed: -500, // Pour sauter plus haut, on diminue la valeur
direction: null // Par défaut il n'y a pas de direction, notre joueur est statique
});
this.add('2d, platformerControls');
this.play('stand');
}
});
Vous aurez sans doute remarqué que l’on utilise une feuille my_player qui n’est pas encore définie. Plus pour très longtemps :
Q.sheet('my_player', 'player-sprite.png', { tileW: 25, tileH: 30 }); // On crée la feuille du joueur, qui permet de décomposer les états (pour l'animer par exemple)
N’oubliez pas d’ajouter le fichier player-sprite.png à la liste des fichiers à pré-charger !
(Oui, bon, je sais, ce n’est pas très original comme sprite, mais je fais de mon mieux, promis !)
On peut maintenant créer notre joueur et l’ajouter à la scène :
var player = new Q.Player(); // On crée notre joueur avec une vitesse de départ
player.p.x = tiles.p.w / 2; // On place notre joueur horizontalement au centre…
player.p.y = tiles.p.h - player.p.cy; // … et verticalement en bas
stage.insert(player);
Suivre le joueur grâce au viewport
Une fonctionnalité sympa dans Quintus, c’est le viewport. Il vous permet, pour faire simple, de centrer la vue sur une partie de la scène, sans avoir à faire de calculs par vous-même.
Un détail encore mieux : il peut être configuré pour suivre le joueur automatiquement !
On va donc faire les deux d’un coup :
stage.add('viewport').follow(player, { x: false, y :true }, { minX:0, maxX: tiles.p.w, maxY: tiles.p.h} );
Voilà, on a donc appliqué un viewport à notre scène, puis on l’a configuré pour suivre le joueur.
Le deuxième paramètre de la méthode follow() permet de configurer dans quelles dimensions il peut bouger : ici peu importe, mais vous pouvez remplacer { x: false, y :true } par null si vous préférez (attention, des traitements supplémentaires risquent d’avoir lieu).
Le troisième paramètre sert à configurer les valeurs minimales et maximales de suivi. Ici on limite donc à la taille de notre niveau : pas besoin de dépasser, sauf en haut (d’où l’absence de minY) où on peut sauter et donc dépasser. Essayez de modifier ces valeurs ou les modifier si vous voulez vous amuser un peu… 
Animer le joueur
Ce serait pas mal de changer le style de notre joueur quand il bouge, non ?
On va donc voir comment gérer les états d’un sprite et comment l’animer simplement.
Pour cela, on va utiliser Q.animations() pour définir les états d’une feuille (un sprite découpé). Mais avant il faut penser à ajouter le composant d’animation lorsque l’on initialise notre joueur :
this.add('2d, platformerControls, animation'); // Remplacer la ligne dans le *constructeur* pour ajouter le composant animation
Une fois notre feuille créée (une fois que l’on a utilisé Q.sheet('my_player'), donc), il suffit d’agir comme suit :
Q.animations('my_player', {
stand: { frames: [0], rate: 1/60, next: 'stand' },
walk_left: { frames: [1], rate: 1/60 },
walk_right: { frames: [2], rate: 1/60 },
jump: { frames: [3], rate: 1/60 },
});
Pour l’instant, il n’y a qu’une seule frame par état, mais la logique ne change pas beaucoup pour en rajouter : on verra cela en fin de chapitre, promis.
Ensuite, il faut gérer la direction de notre joueur (et les sauts, tant qu’à faire). On va donc ajouter une méthode à notre objet (après init()) :
step: function(dt) {
// On va déjà éviter que notre joueur ne sorte de la grille…
if (this.p.x <= 0) {
this.p.x = 0;
}
else if (this.p.x >= Q.width) {
this.p.x = Q.width;
}
// Si on a appuyé sur le bouton pour sauter, on joue l'animation de saut (et on sort de la méthode pour gagner du temps)
if (Q.inputs['up']) {
this.play('jump');
return;
}
// On calcule la variation horizontale pour savoir dans quel sens on bouge
if (this.p.vx > 0) {
this.p.direction = 'right';
}
else if (this.p.vx < 0) {
this.p.direction = 'left';
}
else {
this.p.direction = null; // Si aucune variation, pas de direction : joueur immobile
}
if (this.p.direction) {
this.play('walk_' + this.p.direction); // On joue l'animation qui correspond à notre direction le cas échéant
}
else {
this.play('stand'); // Sinon on affiche un joueur immobile
}
}
Et voilà, Raymond peut maintenant se déplacer comme il le souhaite et en plus on voit dans quelle direction il bouge ! 
Et voilà, vous pouvez dès à présent vous balader dans le niveau !