Nous allons commencer par apprendre à afficher un sprite à l'écran. Mais qu'est-ce qu'un sprite ?
D'après Wikipédia :
Sprite est un mot anglais possédant plusieurs significations. Il est notamment employé dans les domaines de l'infographie et du jeu vidéo, où sprite désigne une image en deux dimensions qui peut être déplacée par rapport au fond de l'écran.
Comme indiqué ci-dessus, un sprite est avant tout une image. Dans un premier temps il est donc nécessaire de télécharger une image.
Téléchargez l'image en cliquant ici (clic droit puis "Enregistrer sous"). Placez ensuite cette image dans le dossier "asset".
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite;
function preload() {
img=loadImage("asset/smiley.png")
}
function setup() {
createCanvas(800,300);
smiley_sprite=createSprite(400,150);
smiley_sprite.addImage(img);
}
function draw() {
background(240,240,240);
drawSprites();
}
Analysons le code ci-dessus :
Nous retrouvons la structure déjà vue avec p5.js : fonctions setup et draw (si nécessaire, n'hésitez pas à reprendre les activités sur p5.js). Petite nouveauté : la fonction preload que nous utiliserons quand nous aurons besoin de charger des images.
La méthode loadImage nous permet de charger une image. Cette image est "placée" dans la variable img.
La méthode createSprite permet de créer un sprite. Cette méthode prend en paramètres les coordonnées x et y du centre du sprite (dans notre exemple, nous avons placé le sprite au centre de notre canvas (fenêtre de jeu)). Le sprite est placé dans la variable smiley_sprite.
La méthode addImage permet d'associer un sprite à une image. Cette méthode prend en paramètre une image.
La fonction drawSprites permet d'afficher tous les sprites présents. Notez que le background(240,240,240) placé dans la fonction draw permet d'effacer la fenêtre à chaque image.
En modifiant le code vu dans le "À faire vous même 2.2", placez le sprite aux coordonnées (200,75).
Sachant que smiley_sprite.position.x correspond à la coordonnée x du sprite et que smiley_sprite.position.y correspond à la coordonnée y du sprite (à condition que votre sprite soit "rangé" dans la variable smiley_sprite comme dans l'exemple ci-dessus), écrivez un programme permettant au sprite de traverser l'écran de gauche à droite.
N.B : Pour revoir l'animation, il suffit de recharger la page (touche F5)
p5.play propose la méthode "setVelocity" qui permet de donner à notre sprite une vitesse. Cette méthode prend 2 paramètres : la vitesse selon x et la vitesse selon y
Saisissez le code suivant dans le fichier script.js et testez cet exemple
var img;
var smiley_sprite;
function preload() {
img=loadImage("asset/smiley.png")
}
function setup() {
createCanvas(800,300);
smiley_sprite=createSprite(0,150);
smiley_sprite.addImage(img);
smiley_sprite.setVelocity(2,0);
}
function draw() {
background(240,240,240);
drawSprites();
}
le smiley_sprite.setVelocity(2,0) donne une vitesse de 2 pixels par image à notre sprite
Il est possible d'utiliser smiley_sprite.velocity.x et smiley_sprite.velocity.y à la place de la méthode setVelocity.
Par exemple :
smiley_sprite.setVelocity(2,4);
peut être remplacée par :
smiley_sprite.velocity.x=2;
smiley_sprite.velocity.y=4;
Écrivez un programme permettant au sprite de traverser l'écran en diagonale.
N.B : Pour revoir l'animation, il suffit de recharger la page (touche F5)
En vous aidant de ce qui a déjà été vu dans l'activité 8 consacrée aux bases de p5.js, créez un programme permettant de faire bouger le sprite à l'aide des flèches du clavier.