Share
Tout comme les images ou les images-objets, le son joue également un rôle essentiel dans les jeux. La bonne musique de fond peut créer l'ambiance du jeu. De même, inclure des effets sonores pour des événements tels que des collisions ou des coups de feu rendra le jeu beaucoup plus intéressant..
Vous pouvez également ajouter des scènes à votre jeu pour le rendre plus organisé. Par exemple, au lieu d'afficher directement l'écran de jeu aux utilisateurs, vous pouvez d'abord leur montrer l'écran d'accueil où ils peuvent choisir un niveau de difficulté pour le jeu ou augmenter / diminuer le volume de la musique de fond..
Dans ce tutoriel, vous allez apprendre à ajouter des sons et des scènes à vos jeux en utilisant Crafty.
Le processus d'ajout de sons à un jeu est similaire à l'ajout de feuilles de sprite. Vous devez créer un objet d'actif, puis fournir un tableau de fichiers audio pour différents effets sonores. Crafty chargera ensuite le premier fichier pris en charge par le navigateur. Voici un exemple:
var game_assets = "audio": "back_music": ["back_music.wav", "back_music.ogg", "back_music.mp3"], "gun_shot": ["gun_shot.wav", "gun_shot.ogg", "gun_shot.mp3"]; Crafty.load (game_assets);
Une fois que vous avez ajouté les fichiers audio, vous pouvez les lire en utilisant Crafty.audio.play (ID de chaîne, Nombre repeatCount, Volume de nombres). Le premier paramètre est le Id du fichier que nous voulons jouer. Pour jouer la musique de fond, vous pouvez passer "back_music" comme Id.
Vous pouvez contrôler le nombre de fois qu'un fichier audio est lu à l'aide du deuxième paramètre. Lorsque ce paramètre n'est pas spécifié, le fichier n'est lu qu'une fois. Vous voudrez probablement continuer à jouer continuellement certains sons. Un tel exemple est la musique de fond d'un jeu. Ceci peut être réalisé en réglant le second paramètre sur -1.
Le troisième paramètre contrôle le volume du fichier audio donné. Il peut avoir n'importe quelle valeur entre 0.0 et 1.0. C'est le code pour jouer de la musique de fond:
Accentsconagua
Crafty.audio.play ("back_music", -1, 0.5);Vous pouvez également lire des fichiers audio en fonction de certains événements tels que la collision entre entités ou une pression sur une touche..
walking_hero.bind ('KeyDown', fonction (evt) if (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("sautant", 1); Crafty.audio.play ("gun_shot", 1) ;);N'oubliez pas que vous devez ajouter le composant Clavier à votre héros avant qu'il puisse détecter le Touche Bas un événement. Le code ci-dessus lie le Touche Bas événement au héros et vérifie si la touche a été enfoncée à l'aide de evt.key. Si la touche Flèche haut est enfoncée, une animation de saut est jouée une fois pour le héros. Un son de coup de feu est également joué.
Essayez d'appuyer sur le Flèche vers le haut Entrez la démo suivante et vous verrez tout cela en action. J'ai commenté la ligne qui joue la musique de fond, mais vous pouvez simplement la décommenter en jouant avec la démo.
La musique de fond de la démo a été créée par Rosalila et le son des coups de feu est de Luke.RUSTLTD.
Il existe de nombreuses autres méthodes que vous pouvez utiliser pour manipuler les sons joués par Crafty. Vous pouvez désactiver et réactiver tous les fichiers audio en cours de lecture en utilisant .muet() et .activer le muet () respectivement. Vous pouvez également suspendre et reprendre des fichiers audio en fonction de leur Id en utilisant le .pause (Id) et .unpause (id) méthode.
Le nombre maximal de sons pouvant être joués simultanément dans Crafty est limité. La limite par défaut pour cette valeur est 7. Chacun des différents sons joués simultanément est un canal. Cependant, vous pouvez définir votre propre valeur en utilisant Crafty.audio.setChannels (Number n). Vous pouvez également vérifier si un fichier audio donné est en cours de lecture sur au moins un canal en utilisant le bouton .isPlaying (ID de chaîne) méthode. Il retournera un booléen indiquant si l'audio est en cours de lecture ou non.
L'écran de jeu n'est généralement pas la première chose que vous voyez dans un jeu. En général, le premier écran que vous voyez est l’écran de chargement ou l’écran du menu principal. Ensuite, une fois que vous avez défini différentes options telles que l’audio ou le niveau de difficulté, vous pouvez cliquer sur le bouton de lecture pour passer à l’écran de jeu actuel. Enfin, lorsque le jeu est terminé, vous pouvez montrer aux utilisateurs un jeu sur écran..
Ces différents écrans ou scènes de jeu rendent votre jeu plus organisé. Une scène dans Crafty peut être créée en appelant Crafty.defineScene (String sceneName, Fonction init [, Fonction uninit]).
Le premier paramètre est le nom de la scène. Le deuxième paramètre est la fonction d’initialisation, qui définit les paramètres lors de la lecture de la scène. Le troisième paramètre est une fonction optionnelle qui est exécutée avant la lecture de la scène suivante et après toutes les entités avec 2D composant dans la scène en cours ont été détruits.
Voici le code pour définir l'écran de chargement:
Crafty.defineScene ("loading_screen", function () Crafty.background ("orange"); var loadingText = Crafty.e ("2D, Canvas, Texte, Clavier") .attr (x: 140, y: 120 ) .text ("Scenes Demo") .textFont (taille: '50px', poids: 'gras') .textColor ("blanc"); loadingText.bind ('KeyDown', fonction (evt) Crafty.enterScene ("game_screen");););Dans le code ci-dessus, j'ai défini un "loading_screen" scène. La fonction d’initialisation définit la couleur d’arrière-plan sur orange et affiche du texte afin de donner à l’utilisateur des informations sur la suite des événements. Vous pouvez inclure un logo et des options de menu dans un jeu réel ici. Appuyez sur n’importe quelle touche lorsque la toile est active pour afficher l’écran de jeu actuel. le .enterScene (String sceneName) méthode a été utilisée ici pour charger la "game_screen".
Dans la démo suivante, vous pouvez appuyer 10 fois sur la touche Haut pour accéder à l'écran final..
Une fois ce didacticiel terminé, vous devriez pouvoir ajouter divers effets sonores à votre jeu et pouvoir contrôler la sortie audio. Vous pouvez maintenant aussi montrer différents écrans à un utilisateur dans différentes situations. 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..
Dans le prochain et dernier didacticiel de cette série, vous apprendrez comment améliorer la détection des collisions dans Crafty..
