Afficher le héros
Il faut bien commencer quelque part !
Avant toute chose
- Navigue vers KAPLAYGROUND.
- Crée un nouveau projet.
- Télécharge ce projet vide Il contient des textures que nous allons utiliser par la suite
- Importe le dans ton nouveau projet
C'est bon ! Tu es prêt pour commencer !
Structure du projet
Le fichier kaplay.js
Pour que ton jeu fonctionne, il faut d’abord préparer l’environnement du jeu.
kaplay({
background: "#4a3052",
});La fonction kaplay() sert à démarrer le moteur du jeu.
Elle prépare l’écran, le canvas et toutes les fonctions dont on aura besoin pour créer le jeu.
Ici, on lui donne une option :
background→ la couleur de fond du jeuSans
kaplay(), le jeu ne peut pas s’afficher.
Le fichier main.js
import "./kaplay.js";
import "./assets.js";main.js est le point d’entrée de ton jeu.
C’est le premier fichier exécuté quand le jeu se lance.
Tout ce que tu veux afficher ou utiliser dans ton jeu doit passer par ici, directement ou indirectement.
Les textures (sprites)
En bas de l’écran, dans l’onglet sprites, tu peux voir un fichier appelé dungeon.png.
Ce fichier contient les textures (ou sprites) de notre jeu :
- les images des personnages
- des ennemis
- du décor
Charger les textures
Si on veut pouvoir afficher, notre héro, la moindre des choses, c'est d'avoir des textures !
Voici le fichier de textures que je vous ai fourni:
Pour charger les textures ça se passe dans le fichier assets.js.
On va utiliser la fonction loadSpriteAtlas dont voici une documentation simplifiée (tout ce dont vous avez besoin)
loadSpriteAtlas("nom-du-fichier-de-texture.png", {
<nom-du-sprite>: {
x: "La coordonnée horizontale de la texture (en haut à gauche)"
y: "La coordonnée verticale de la texture (en haut à gauche)"
width: "Largeur de la texture"
height: "Hauteur de la texture"
},
});Créer l'objet de jeu
- Créer le fichier hero.js dans le dossier
objects. - Exporte ton object hero de ce fichier.
export const hero = ...Avec Kaplay, un objet est un tableau de composants.
Exemple: const monObjet = [text(), pos()]
Quelles capacités veut-on donner à notre objet ?
Ajoute l'objet dans ton jeu
Pour ajouter un objet dans le jeu, tu peux utiliser la fonction add(<ton-objet>)
Pour faire le lien entre deux fichier, tu peux utiliser des imports.
Exemple: Je veux utiliser l'objet toto exporté du fichier machin.js dans le fichier truc.js
(on suppose que machin.js et truc.js sont dans le même dossier)
import { toto } from "./machin.js";🎉 Bravo ! Tu as finis la première étape !