Share
Jusqu'à présent, dans tous les didacticiels de Crafty, vous utilisiez des boîtes carrées ou rectangulaires pour comprendre différents concepts tels que l'animation et les événements liés au clavier ou au toucher. Bien qu’il s’agisse d’un excellent moyen d’en savoir plus sur la bibliothèque, vous aimerez probablement utiliser des images dans vos jeux réels..
Dans ce didacticiel, vous apprendrez à charger des feuilles d’image-objet afin d’utiliser différentes images dans votre jeu. Après cela, vous apprendrez à animer différents personnages à l'aide de l'animation sprite..
Pour ceux qui ne sont pas familiers avec les feuilles de sprite, ce sont des fichiers image qui contiennent plusieurs graphiques plus petits organisés ensemble dans une grille. Chacun de ces petits graphiques ou sprites peut être utilisé seul ou avec d’autres images pour animer différents objets..
Vous ne pouvez pas simplement charger directement une feuille de sprite dans Crafty et commencer à l'utiliser. Vous devrez également lui indiquer la largeur et la hauteur de différentes tuiles ou images-objets de votre feuille d'images-objets. Vous pouvez également donner des noms spécifiques à des images individuelles. Par exemple, un sprite avec une petite pierre peut être nommé "small_stone" pour faciliter la référence. Se souvenir d'un nom de mosaïque est beaucoup plus facile que de se souvenir des coordonnées réelles des différentes images.
Nous allons utiliser la feuille de sprite suivante par Tokka dans différentes démos de ce tutoriel..
Il contient de nombreuses images qui peuvent être utilisées lorsque le joueur marche, saute, reste inactif ou se fait tirer dessus. Dans ce cas, la largeur et la hauteur de la plupart des carreaux sont respectivement de 80 px et 94 px. Certaines feuilles de sprite peuvent également comporter un rembourrage supplémentaire autour des différentes tuiles ou de la feuille de sprite dans son ensemble. Ceux-ci peuvent être spécifiés lors du chargement de la feuille de sprite à l'aide de la commande paddingX, rembourrageY, et paddingAroundBorder Propriétés.
Voici le code dont nous avons besoin pour charger la feuille de sprite ci-dessus dans notre jeu:
var game_assets = "sprites": "hero_spritesheet.png": mosaïque: 80, mosaïque: 94, carte: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] , hero_sitting: [0, 4]; Crafty.load (game_assets);
Les tuiles sont référencées en utilisant une paire de nombres. Le premier nombre détermine la colonne de notre sprite et le deuxième nombre détermine sa ligne. Les nombres sont basés sur zéro. Par exemple, l’image-objet de la première colonne et de la première ligne est accessible à l’aide de [0, 0]. De même, les images-objets de la troisième colonne et de la quatrième ligne sont accessibles à l'aide de [2, 3]. Comme mentionné précédemment, vous pouvez attribuer différents noms à des sprites individuels pour en faciliter l'utilisation..
Une fois que vous avez chargé une feuille de sprite, vous pouvez restituer les images à l'écran en utilisant le code suivant:
Accentsconagua
var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);le X et y Les attributs déterminent l'emplacement où les images-objets seront rendues. Vous pouvez également définir la largeur et la hauteur de chaque sprite à l’aide des touches w et h les attributs.
Depuis le sprite a un 2D composant, vous pouvez appliquer toutes les propriétés et attributs du 2D composant à ces images. Par exemple, vous pouvez inverser notre héros horizontalement afin qu’il fasse face à l’autre direction en utilisant this.flip ("X"). De même, vous pouvez faire pivoter une image-objet à l'aide de la commande rotation attribuer ou le rendre transparent en utilisant le alpha attribut.
var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");Supposons que vous ne devez restituer qu'une partie d'un sprite donné sur la toile. Vous pouvez le faire avec l'aide du .recadrer (nombre x, nombre y, nombre w, nombre h) méthode. Les deux premiers paramètres déterminent les valeurs de décalage x et y de l'image-objet. Les deux derniers paramètres déterminent la largeur et la hauteur de l’image-objet recadrée. Toutes les valeurs doivent être spécifiées en pixels.
Jusqu’à présent, vous avez déplacé différentes entités en modifiant leur X et y les attributs. Ce n'était pas un problème car vous ne déplaciez que des boîtes rectangulaires la plupart du temps. Cependant, déplacer notre personnage principal en le glissant de la sorte semblera très peu naturel. Ajouter une animation à des objets comme des pièces de monnaie qu'un joueur peut collecter rendra également le jeu plus agréable..
Toutes les animations relatives aux sprites nécessitent l’ajout du SpriteAnimation composant à l'entité. Ce composant traite les différentes images d'une carte sprite en tant qu'images d'animation..
Les informations sur une animation sont stockées dans le bobine objet. L'objet Reel a cinq propriétés différentes:
identifiant qui est le nom de la bobinecadres tableau qui a une liste d'images pour l'animation au format [xpos, ypos] cadre actuel propriété qui retourne l'index de l'image couranteassouplissement propriété qui détermine le déroulement de l'animationdurée propriété qui définit la durée de l'animation en millisecondesUne animation de sprite peut déclencher quatre événements différents. Ceux-ci sont:
Tous ces événements reçoivent le bobine objet en tant que paramètre.
Outre le bobine objet, il y a aussi un .bobine() méthode utilisée pour définir les animations de sprite. Vous pouvez utiliser le .animer() méthode pour jouer n'importe laquelle des animations définies.
Le processus d’animation de sprite commence par créer un sprite statique sur la toile..
var walking_hero = Crafty.e ('2D, Toile, marche_héros, SpriteAnimation') .attr (x: 40, y: 20);le promenade des héros image dans le cas ci-dessus est la première image que l'utilisateur voit avant l'animation. Les attributs sont utilisés pour spécifier l'emplacement de l'entité actuelle. Une fois l’entité créée, vous pouvez utiliser le .bobine() méthode pour définir l'animation réelle.
walking_hero.reel ("marcher", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]]);Cette méthode accepte trois paramètres. Le premier paramètre est le Id de l'animation en cours de création. Le deuxième paramètre est utilisé pour définir la longueur de l'animation en millisecondes et le troisième paramètre est un tableau de tableaux contenant la position de la colonne (x) et de la ligne (y) des images successives. Dans ce cas, le tableau contient la position de tous les sprites dans la deuxième ligne..
Une autre version de cette méthode nécessite cinq paramètres. Les deux premiers paramètres sont la bobine Id et longueur de l'animation. Les troisième et quatrième paramètres permettent de définir les positions de départ x et y de l'animation sur la carte des images-objets. Le dernier paramètre définit le nombre d'images séquentielles dans l'animation. Si elle est définie sur une valeur négative, l'animation sera lue à l'envers.
L'animation de bobine ci-dessus peut également être créée à l'aide du code suivant:
walking_hero.reel ("marcher", 1000, 0, 1, 6);Bien que cette version soit succincte, elle est un peu limitée. Cette méthode n'est utile que si tous les sprites que vous souhaitez inclure dans l'animation se trouvent sur une seule ligne. De plus, l'animation montrera ces images dans l'ordre dans lequel elles apparaissent dans la feuille de sprite..
Après avoir défini l’animation, vous pouvez la lire à l’aide du bouton .animate (reel_Id [, loopCount]) méthode. Le premier paramètre est l'animation que vous souhaitez lire et le second paramètre détermine le nombre de fois où vous souhaitez lire cette animation. Les animations sont lues une fois par défaut. Réglage loopCount à -1 jouera l'animation indéfiniment.
Dans certaines situations, vous pouvez jouer une animation une seule fois en fonction d'un événement. Par exemple, une animation de saut doit être lue lorsque l'utilisateur appuie sur un bouton pour faire sauter le joueur. Vous pouvez l'essayer dans la démo ci-dessus. En appuyant sur Flèche vers le haut clé fera sauter le deuxième sprite. Voici le code pour détecter la pression sur la touche:
jumping_hero.bind ('KeyDown', fonction (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("sautant", 1););Vous pouvez également suspendre et reprendre les animations à mi-chemin en utilisant le .pauseAnimation () et .resumeAnimation () les méthodes.
Si plusieurs animations sont associées à une même image-objet, vous pouvez déterminer si une animation spécifique est en cours de lecture à l'aide de la commande .isPlaying ([String reelId]) méthode. Sinon Id est fourni, il vérifiera si une animation est en cours de lecture.
Une fois ce didacticiel terminé, vous devriez pouvoir charger vos propres feuilles d’image-objet dans Crafty et les utiliser pour représenter différentes entités de jeu au lieu de divers rectangles. Vous pouvez désormais également appliquer différentes animations à une entité en fonction de différents événements. Je dois vous rappeler que j'ai utilisé la version 0.7.1 de Crafty dans ce tutoriel et que les démos risquent de ne pas fonctionner avec d'autres versions de la bibliothèque..
JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n'est pas sans apprendre les courbes, et il y a beaucoup de cadres et de bibliothèques pour vous tenir occupé, aussi. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Dans le prochain tutoriel, vous apprendrez à ajouter des sons à votre jeu..
