Créer un Sapin de Noël en JavaScript avec Phaser - Expert WordPress | Développeur freelance web

Téléchargements

Kit de démarrage Projet final Comment ça marche ?

Dans cet exercice, tu vas explorer dans Phaser l’utilisation de formes géométriques simples, comme des carrés, des rectangles et des cercles. L’objectif est de te familiariser avec des concepts comme la gestion de la position, la taille, la couleur, ainsi que les transformations de ces formes. Et tout ça, pour réaliser un superbe sapin de Noël !

Liste des tâches

Si tu te sens prêt, tu peux commencer directement à créer ton sapin sans suivre les étapes détaillées ci-dessous. L’essentiel est que ton sapin de Noël soit complet et qu’il inclut les éléments suivants :

Un tronc
Un sol
Des boules décoratives
Une étoile au sommet du sapin
Des flocons de neige
Des cadeaux au pied du sapin

Tu trouveras ci-dessous un exemple du rendu final pour t’inspirer, mais n’hésite pas à laisser libre cours à ta créativité ! Modifie la couleur, la taille, la position, ou même la rotation des éléments comme tu le souhaites.

Bonne chance, et amuse-toi bien !

Créer un Sapin de Noël en JavaScript avec Phaser

Besoin d’un coup de main ?
Pas de panique, voici en-dessous un guide détaillé pour t’aider à réaliser ton sapin de Noël ! Si tu ne sais pas par où commencer ou si tu veux être sûr de ne rien oublier, ces étapes te guideront à travers la création de ton sapin. Suis-les à ton rythme, et n’hésites pas à personnaliser ton sapin à ta manière !

Guide détaillé des étapes :

Pour t’aider, chaque image est accompagnée d’un cercle rouge qui marque le point d’origine de la forme. Ce repère t’aidera à déplacer ou à faire tourner les éléments facilement. Tu trouveras également une démonstration des déplacements à réaliser pour t’aider dans tes calcules. Enfin, j’ai ajouté un rappel des directions des axes de coordonnées de la scène sur l’image ci-dessous, pour bien se souvenir de la direction des déplacements.

1. Créer le sol

Positionne un rectangle au centre du bas de la scène pour représenter le sol. Il doit être aussi large que la scène et avoir une hauteur de 50px. Utilise une couleur marron foncé pour simuler la terre.

2. Créer le tronc

Positionne ensuite un rectangle au centre du bas de la scène, en tenant compte de la hauteur du sol et de la moitié de la hauteur du tronc. Le tronc doit mesurer 50px de large et 120px de haut. Pour le placer correctement, tu devras le déplacer de la moitié de sa hauteur vers le haut, à partir du bas de la scène. Utilise une couleur brun clair pour simuler le bois du tronc.

3. Créer les niveaux du sapin

Utilise des rectangles de plus en plus petits pour former les différents niveaux du sapin. Par exemple, commence par un rectangle de 380px de large et 30px de haut. Empile ces rectangles de manière à ce qu’ils se rétrécissent en largeur au fur et à mesure que tu montes vers le sommet du sapin. Pour bien les positionner, applique la même technique que pour le tronc, en ajustant la position verticalement pour que chaque niveau soit bien centré et superposé.

Point d’origine des rectangles « feuilles »

Aperçu des déplacements des « feuilles »

4. Ajouter une étoile au sommet

Dessine un triangle à l’aide de trois points (pour les sommets du triangle) et de l’origine du triangle (en son centre). Utilise un tableau de coordonnées pour définir la position des trois sommets.
Voici un exemple de tableau de coordonnées pour un triangle équilatéral :

javascript

const triangle = this.add.polygon(400, 50, [-20, 20, 20, 0, 0, -20], 0xFFD700);

(400, 50) représente le centre du triangle (positionné a x = 400 et y = 50 sur la scène).
Les autres coordonnées du tableau définissent les trois sommets du triangle :[-20, 20], [20, 0], et [0, 20].

5. Ajouter des boules décoratives

Crée des cercles colorés à chaque niveau du sapin pour représenter les boules de Noël. Positionne-les de manière à ce qu’elles soient bien réparties sur les branches du sapin. Pour chaque niveau, commence par placer trois boules (une à gauche, une au centre et une à droite), mais tu peux aussi ajouter d’autres boules si tu veux varier ! Utilise des couleurs différentes pour chaque boule (par exemple, rouge, bleu, jaune, vert, etc.) pour ajouter un aspect festif. ✨

Générer des couleurs aléatoires 🌈
Dans Phaser, tu peux facilement générer des couleurs aléatoires pour rendre ton sapin encore plus beau ! Une méthode simple consiste à utiliser Math.random() pour obtenir une couleur aléatoire à chaque fois.

Phaser accepte les couleurs en format hexadécimal (comme 0xFF0000 pour le rouge). Pour créer une couleur aléatoire, tu peux générer un nombre entre 0 et 0xFFFFFF (qui représente toutes les couleurs possibles en hexadécimal).

Voici comment faire :

javascript

const randomColor = Math.random() * 0xFFFFFF; // Génère une couleur aléatoire

Cette méthode produit un nombre aléatoire entre 0 et 16777215 (la valeur maximale pour une couleur hexadécimale). Tu peux ensuite l’appliquer à tes formes pour qu’elles aient des couleurs variées à chaque fois.

Voici un exemple pour appliquer une couleur aléatoire à une boule de Noël :

javascript

this.add.circle(x, y, radius, Math.random() * 0xFFFFFF); // Une couleur aléatoire pour la boule

Essaie cette méthode pour ajouter un peu de magie à ton sapin avec des boules colorées ou même des cadeaux avec des couleurs différentes à chaque fois ! 🎨✨

7. Ajouter des flocons de neige

Crée des flocons de neige en générant des cercles blancs de tailles variées, puis positionne-les aléatoirement au-dessus du sol. Ils devraient être dispersés de manière à simuler une chute de neige légère et naturelle. Pour un effet plus réaliste, varie la taille et la position des flocons, certains étant en générale plus grands ou plus petits que d’autres. Cela ajoutera une petite touche hivernale !

Point d’origine des cercles des « boules de neige »

Point des déplacement d’une boule « boule de neige »

8. Ajout de la ligne centrale

Trace une ligne verticale au centre exact de la scène, de haut en bas, pour servir de repère et t’assurer que tous les éléments de ton sapin sont bien alignés. Cette ligne permettra de vérifier l’équilibre de la composition. Elle peut être de couleur noire ou d’une teinte neutre, avec une largeur fine afin de ne pas interférer visuellement avec les autres éléments de la scène. Utilise cette ligne pour valider que ton sapin, incluant le tronc, les niveaux, l’étoile et les cadeaux, est parfaitement centré.

À ne pas oublier :
Cette ligne est uniquement un outil pour vérifier l’alignement des éléments pendant la création. Elle ne doit pas être incluse dans la capture d’écran finale de ton sapin. 😊

Aperçu du déplacement de la ligne d’origine

Attention !
L’origine d’une ligne dans Phaser est située au centre de celle-ci. Cela signifie que, lorsqu’elle est tracée, elle s’étend de manière symétrique dans les deux directions à partir de ce point central. Ce fonctionnement peut sembler un peu déroutant au début, mais ne t’inquiète pas ! Avec un peu de pratique, tu t’y habituera rapidement et cela deviendra plus facile. 😊

Félicitations, tu as terminé ! 🎉

Ton sapin de Noël est maintenant prêt ! Si tu souhaites partager ton travail, n’hésite pas à m’envoyer une capture d’écran de ton résultat. Je serai ravi de la publier dans la galerie pour que tout le monde puisse admirer ta création 😊

Si tu as ajouté ta touche personnelle, que ce soit en modifiant les couleurs, en jouant avec les transformations ou en ajoutant d’autres éléments créatifs, c’est encore mieux ! J’adore découvrir les différentes versions de ce sapin 🌟

Envoie-moi ta capture d’écran à l’adresse hello@wmalbos.fr et surtout sois fier de ce que tu as accompli, c’est un super premier pas dans la création de jeux vidéo !