Share
Si vous avez déjà développé des jeux HTML5 auparavant, vous connaissez peut-être quelques moteurs de jeu qui peuvent grandement faciliter leur développement. Ils ont tout le code dont vous avez besoin pour détecter les collisions, générer différentes entités ou ajouter des effets sonores à votre partie. Dans ce tutoriel, vous découvrirez un autre moteur de jeu appelé Crafty. Il est très facile à utiliser et prend en charge tous les principaux navigateurs, y compris IE9..
Une fois minisée, la bibliothèque n’a plus que 127 Ko, ce qui ne retardera pas le chargement de votre jeu. Il prend en charge les cartes de sprite, de sorte que vous pouvez facilement dessiner des entités de jeu à l'écran. Vous pouvez également créer des événements personnalisés pouvant être déclenchés quand vous le souhaitez et sur l'objet de votre choix..
Il existe également des composants pour les sons, les animations et autres effets. Globalement, ce moteur de jeu est un excellent choix si vous souhaitez développer des jeux HTML5 de base..
La première chose à faire est d’inclure Crafty dans votre projet. Vous pouvez soit télécharger le fichier et le charger dans vos projets, soit vous pouvez vous connecter directement à la version simplifiée hébergée sur un CDN. Une fois la bibliothèque chargée, vous pouvez utiliser la ligne suivante pour initialiser Crafty:
Crafty.init ([Number width, Number height, stage_elem]);
Les deux premiers arguments déterminent la largeur et la hauteur de notre scène. Le troisième argument est utilisé pour spécifier l'élément que nous allons utiliser comme étape. Si le troisième argument n’est pas fourni, Crafty utilisera un div avec identifiant cr-stage comme son stade. De même, si les arguments width et height manquent, Crafty définira la largeur et la hauteur de notre scène sur la largeur et la hauteur de la fenêtre..
À ce stade, vous devriez avoir le code suivant:
Les entités sont les éléments constitutifs d'un jeu Crafty. Tout du joueur aux ennemis et aux obstacles est représenté en utilisant des entités. Vous pouvez transmettre une liste de composants à une entité. Chacun de ces composants ajoutera des fonctionnalités supplémentaires à notre entité en attribuant des propriétés et des méthodes de ce composant à l'entité. Vous pouvez également chaîner d'autres méthodes à une entité pour définir diverses propriétés telles que sa largeur, sa hauteur, son emplacement et sa couleur. Voici un exemple très basique d’ajout de composants à une entité:
Accentsconagua
Crafty.e ('2D, Toile, Couleur');Chaque entité que vous souhaitez afficher à l'utilisateur aura besoin à la fois du composant 2D et d'un calque de rendu. La couche de rendu peut être DOM, Toile, ou WebGL. Veuillez noter que le support WebGL a été ajouté dans la version 0.7.1. Actuellement, seuls les Lutin, Image, SpriteAnimation, et Couleur les composants prennent en charge le rendu WebGL. Texte les entités doivent encore utiliser DOM ou Toile pour l'instant.
Maintenant, vous pouvez utiliser le attr () méthode pour définir la valeur de diverses propriétés, notamment la largeur, la hauteur et la position de votre entité. La plupart des méthodes de Crafty renverront l'entité sur laquelle elles sont appelées, et attr () ne fait pas exception. Cela signifie que vous pourrez chaîner davantage de méthodes pour définir d'autres propriétés de vos éléments. Voici un exemple:
Crafty.e ("2D, Toile, Couleur") .attr (x: 200, y: 100, l: 200, h: 50). Couleur ("orange");Cela va créer une entité rectangulaire orange sur la scène.
Maintenant que vous avez créé l'entité, écrivons du code pour la déplacer à l'aide du clavier. Vous pouvez déplacer une entité dans quatre directions différentes, à savoir vers le haut, le bas, la gauche et la droite, en ajoutant le Quatre chemins composante à ce.
L'entité peut ensuite être déplacée à l'aide des touches fléchées ou des touches W, A, S et D. Vous pouvez passer un nombre en argument à la quatre chemins constructeur pour définir la vitesse de l'entité. Voici à quoi devrait ressembler le code de l'entité:
Crafty.e ("2D, Canvas, Couleur, Fourway") .attr (x: 200, y: 100, l: 200, h: 50). Couleur ("orange"). À quatre (300);Vous pouvez limiter le mouvement d’une entité à deux directions à l’aide des touches Twoway composant. Remplacement du Quatre chemins composant dans le code ci-dessus avec Twoway limitera le mouvement de la boîte à la seule direction horizontale. Cela ressort clairement de la démo suivante:
Vous pouvez également ajouter vos propres composants à différentes entités à des fins d'identification ou pour regrouper des entités similaires. Dans ce cas, j'ajoute le Sol composant à notre boîte orange. Vous pouvez utiliser d'autres noms descriptifs pour vous aider à identifier différentes entités..
Crafty.e ("2D, toile, couleur, fenêtre, plancher") .attr (x: 200, y: 340, l: 200, h: 50). Couleur ("orange") .twoway (300);Il existe un autre composant très utile que vous pouvez utiliser pour déplacer des éléments. Il s’appelle le La gravité composant. Une fois ajoutée à une entité, cette dernière tombera. Vous voudrez peut-être empêcher l’entité donnée de continuer à tomber, une fois qu’elle rencontre d’autres entités. Cela peut être réalisé en transmettant un composant identifiant en tant qu'argument à la fonction de gravité. Voici le code qui fait tomber le petit carré noir sur le sol ou la plate-forme:
Crafty.e ("2D, Toile, Couleur, Gravité") .attr (x: 200, y: 50, l: 50, h: 50). Couleur ("noir") .gravity ("Floor");Comme vous le voyez dans le didacticiel, nous avons pu créer la structure de base d’un jeu simple en utilisant très peu de code. Tout ce que nous devions faire était d’ajouter des composants à nos entités et de spécifier les valeurs de différentes propriétés telles que la largeur, la hauteur ou la vitesse de déplacement..
Ce tutoriel était destiné à vous donner une idée de base des entités et d’autres concepts liés à Crafty. Dans la partie suivante, vous en apprendrez beaucoup plus sur les entités. Si vous avez des questions sur ce tutoriel, faites-le moi savoir dans les commentaires..
