SpriteKit From Scratch: effets visuels et audio

introduction

Dans ce didacticiel, le quatrième volet de la série SpriteKit From Scratch, nous examinons les différentes fonctionnalités visuelles et audio fournies par SpriteKit pour ajouter plus de détails et de variété à vos jeux. Cela inclut les systèmes de particules, les filtres, l’éclairage et l’audio.

Pour me suivre, vous pouvez soit utiliser le projet que vous avez créé dans le didacticiel précédent de cette série, soit télécharger une nouvelle copie depuis GitHub.

Les graphiques utilisés pour le jeu de cette série se trouvent sur GraphiqueRiver. GraphicRiver est une excellente source pour trouver des illustrations et des graphiques pour vos jeux.

1. Systèmes de particules

Dans SpriteKit, le terme système de particules fait référence à un seul nœud émetteur, représenté par le SKEmitterNode classe. Il définit la position du système dans votre scène et toutes les particules qu’il crée. L’émetteur spécifie les différents comportements des particules qu’il génère.

Les systèmes de particules sont mieux utilisés dans les jeux SpriteKit où vous devez générer un grand nombre de sprites identiques ou similaires, qui n’ont pas besoin d’avoir un emplacement spécifique ou d’exécuter des actions.

Dans ce tutoriel, nous allons ajouter deux systèmes de particules lorsque la voiture rencontre un obstacle:

  • un bref effet d’explosion qui apparaît brièvement
  • un effet de fumée qui reste indéfiniment dans la scène

Bien que les systèmes de particules puissent être créés par programmation, il est beaucoup plus facile de le faire en utilisant l’éditeur intégré de Xcode. Toutes les propriétés d’un système de particules peuvent être modifiées dans cet éditeur et les modifications que vous apportez sont immédiatement visualisées. C’est beaucoup plus facile que de devoir exécuter votre jeu après chaque modification que vous apportez.

Nous allons d’abord créer l’effet d’explosion. Créez un nouveau fichier dans votre projet et choisissez le iOS> Ressource> Fichier de particules SpriteKit modèle.

Modèle de fichier de particules

Dans le menu qui apparaît, sélectionnez Feu comme le Gabarit de particules. Nommez le fichier Explosion ou quelque chose de similaire.

Modèle de particules de feu

Une fois que Xcode a créé le fichier, vous voyez qu’il y a deux nouveaux fichiers dans votre projet, Explosion.sks et spark.png.

Deux fichiers sont ajoutés

Explosion.sks contient le système de particules et c’est le fichier avec lequel nous allons travailler. Le deuxième fichier, spark.png, est une image simple utilisée par le Feu modèle de particules pour créer son effet visuel. Si vous ouvrez Explosion.sks, vous pouvez voir le feu s’animer.

Système de particules de feu

Les changements les plus importants que nous devons apporter à ce système de particules sont de faire en sorte que les particules se déplacent vers l’extérieur de l’émetteur dans toutes les directions et de ne pas engendrer continuellement de nouvelles particules.

Pour effectuer la première modification, ouvrez le Inspecteur d’attributs et, sous le Particules section, changer Gamme d’angle à 360 °.

Modification de la plage d'angle

Tout de suite, vous pouvez voir que les particules se déplacent maintenant vers l’extérieur dans une forme circulaire.

Feu circulaire

Pour empêcher le système de particules de créer continuellement de nouvelles particules, nous pouvons spécifier un Maximum valeur. Cette valeur indique au système de particules le nombre total de particules qu’il doit créer. La valeur par défaut de signifie qu’il n’y a pas de maximum, ce qui provoque la création continue de nouvelles particules.

En plus de spécifier une valeur maximale, nous allons également modifier quelques autres propriétés pour créer un meilleur effet d’explosion. dans le Particules section de la Inspecteur d’attributs, modifiez les valeurs suivantes:

Propriétés personnalisées d'explosion

Nous fixons Taux de natalité à une valeur supérieure à la Maximum propriété car elle détermine le nombre de particules créées par seconde. Nous voulons que l’explosion se produise très rapidement. Donc, plutôt que d’avoir 1000 particules se reproduisant en l’espace d’une seconde complète, ce qui se produirait avec un Taux de natalité de 1000, nous spécifions un Taux de natalité de 5000. Cela signifie que toutes les particules sont créées en seulement 0,2 seconde.

En définissant Durée de vie> Début à 3 les particules vivent 3 secondes. le Gamme de vie La propriété peut être utilisée pour ajouter une variation à la durée de vie des particules.

Enfin, nous définissons Vitesse> Démarrer à 200 de sorte que les particules s’envolent très rapidement de l’émetteur comme cela se produirait dans une véritable explosion.

Après avoir apporté ces modifications, vous pouvez voir que le système de particules est assez différent et ressemble plus à une véritable explosion.

Système de particules d'explosion

Notez que, même si l’animation se boucle périodiquement dans l’éditeur Xcode, le système de particules ne s’anime qu’une fois lorsqu’il est ajouté à votre scène.

En relation :  Comment récupérer de l'espace de stockage sur une tablette Amazon Fire complète: 9 conseils clés

Une fois le système de particules d’explosion terminé, il est temps de passer au système de particules de fumée. Créez un nouveau fichier, Fumée, en utilisant le même modèle que nous avons utilisé pour l’explosion. La seule différence est la Gabarit de particules, que nous avons mis Fumée.

Modèle de particules de fumée

Le seul changement que nous devons apporter à ce système de particules est de faire en sorte que la fumée se déplace vers l’extérieur en cercle plutôt que simplement vers le haut. Pour ce faire, modifiez le Angle> Gamme propriété à 360 ° comme nous l’avons fait pour le système de particules d’explosion. Après cela, le système de particules de fumée devrait ressembler à ceci:

Système de particules de fumée

Avec les deux systèmes de particules prêts, nous pouvons les ajouter à notre scène. Pour ce faire, nous chargeons chacun des fichiers que nous avons créés en tant que SKEmitterNode objets, puis ajoutez-les à la scène comme un nœud normal. Ouvert MainScene.swift et remplacer la mise en œuvre de didBeginContact(_:) avec ce qui suit:

Comme dans l’implémentation précédente de didBeginContact(_:), nous effectuons la même vérification que précédemment pour voir si l’un des nœuds impliqués dans la collision est le nœud voiture. Nous utilisons ensuite une liaison facultative pour obtenir les chemins d’accès aux fichiers de ressources système d’explosion et de particules de fumée. Nous utilisons ces chemins pour instancier SKEmitterNode objets de leur part.

Ensuite, nous supprimons toutes les actions de la caméra et des nœuds du joueur, et nous masquons le nœud du joueur en le supprimant de la scène. On enlève la voiture pour éviter plus de collisions qui conduisent alors à plus d’explosions.

Nous définissons également la position des nœuds émetteurs sur celle de la voiture et les ajoutons à la scène. En conséquence, SpriteKit commence immédiatement à animer les systèmes de particules dès qu’ils sont ajoutés à la scène.

Construisez et exécutez votre jeu. Vous devriez voir le système de particules d’explosion dès que la voiture heurte un obstacle. Ceci est suivi de fumée une fois que le feu s’est dissipé.

Particules en scène

2. Filtres de scène et nœuds d’effets

Dans SpriteKit, il existe un type spécial de nœud (représenté par le SKEffectNode class) qui peut utiliser un Image principale objet de filtre (représenté par le CIFilter class) pour rendre ses nœuds enfants avec une variété d’effets. le SKScene class est également une sous-classe de SKEffectNode, ce qui signifie que vous pouvez également appliquer un filtre à toute la scène.

Malheureusement, au moment de la rédaction de ce tutoriel, il y a quelques problèmes liés à ces filtres et nœuds d’effets dans iOS 9. Actuellement, dès qu’un effet est activé pour un nœud d’effet, tous ses enfants sont masqués, ce qui entraîne l’effet n’étant pas visible.

Même si nous ne pouvons pas l’implémenter dans notre jeu et voir à quoi il ressemble, nous pouvons toujours parcourir le code qui serait utilisé pour créer un effet. Dans ce cas, la méthode suivante est un exemple d’ajout et de décoloration progressive d’un effet de flou sur toute la scène.

Nous créons un CIFilter objet d’un type particulier. Si vous souhaitez consulter certains des autres filtres intégrés disponibles, consultez la Référence du filtre d’image principale. Nous nous assurons que ce filtre a toutes les valeurs d’entrée par défaut, puis définissons manuellement inputRadius à 0,0, ce qui signifie qu’il n’y a initialement aucun flou.

Nous attribuons ensuite le filtre au filter propriété de la scène actuelle et de l’ensemble shouldEnableEffects à true pour l’activer. Enfin, nous exécutons une personnalisation SKAction qui augmente progressivement le rayon d’entrée du filtre à dix.

Espérons que dans une future version iOS, les problèmes affectant les nœuds d’effets seront résolus, car ils fournissent un moyen d’ajouter des effets très uniques et intéressants à vos scènes SpriteKit.

En relation :  Comment Washie aide à garder votre voiture parfaitement propre

3. Nœuds légers

SpriteKit comprend également un excellent système d’éclairage qui peut être utilisé pour rendre vos scènes plus réalistes. Les lumières sont très faciles à mettre en œuvre et sont créées grâce à l’utilisation du SKLightNode classe. Un nœud de lumière définit certaines propriétés, telles que la couleur de la lumière (y compris la couleur ambiante) et sa force sur la distance.

Dans notre scène, nous allons créer une seule lumière blanche qui sera attachée à la voiture. Cette lumière éclairera les obstacles devant la voiture et produira des ombres.

Commençons par créer une lumière dans le didMoveToView(_:) méthode de votre MainScene classe.

Avec ce code, nous créons un nouveau SKLightNode objet, changez son lightColor propriété au blanc et abaisser sa falloff propriété de la valeur par défaut de 1 à 0,5.

Tout comme lors de la configuration de la détection de collision physique dans SpriteKit, vous devez spécifier quelles lumières interagissent avec quels nœuds dans une scène grâce à l’utilisation de masques de bits. Lorsque SpriteKit rend les lumières dans une scène, il utilise un opérateur logique AND sur le nœud de lumière categoryBitMask et le lightingBitMask et shadowCastBitMask de chaque autre nœud pour déterminer comment ce nœud particulier doit apparaître.

Pour notre jeu, nous voulons que les obstacles interagissent avec la lumière afin qu’ils projettent des ombres dans la scène. Pour ce faire, ajoutez les deux lignes suivantes à la fin du spawnObstacle(_:) méthode de la MainScene classe:

En définissant un masque de bits avec tous les bits activés, les obstacles interagissent avec chaque lumière de la scène.

Créez et exécutez votre application. Vous verrez que, au fur et à mesure que votre voiture se déplace dans la scène, chaque obstacle a une ombre dynamique, qui pointe toujours loin du centre de la voiture.

Ombres dans la scène

Comme vous pouvez le voir, les lumières dans SpriteKit sont très simples à utiliser et peuvent ajouter de beaux effets à vos scènes.

4. Nœuds audio

Enfin, nous allons examiner les nœuds audio dans SpriteKit. Les nœuds audio sont utilisés pour ajouter des effets sonores à une scène. Ces nœuds spéciaux sont représentés par le SKAudioNode classe. Car SKAudioNode est un SKNode sous-classe, vous pouvez les ajouter et les positionner n’importe où dans une scène, comme un nœud normal.

En plus de jouer de l’audio de manière régulière et d’avoir le même son quelle que soit l’organisation de votre scène (par exemple, la musique de fond), SpriteKit vous permet d’utiliser l’audio positionnel pour créer un effet vraiment immersif. Cela se fait en spécifiant un listener nœud pour votre scène, d’où le son sera “entendu”.

Les nœuds audio sont positionnels par défaut. Cela signifie que, si vous ne souhaitez pas utiliser cette fonctionnalité dans des cas particuliers, vous pouvez définir un nœud spécifique positional propriété à false.

Bien que nous n’implémentions pas cela dans notre jeu, voici un exemple de méthode d’ajout d’un nœud de musique de fond en boucle tant qu’il fait partie de la scène. Dans la méthode, nous ajoutons également un nœud de son d’explosion qui commence à jouer lorsque nous le lui disons.

Notez que nous importons le AVFoundation cadre en haut. Ceci est nécessaire pour accéder et travailler avec avAudioNode propriété d’un SKAudioNode objet. Comme vous pouvez le voir, les nœuds audio sont très faciles à configurer et à utiliser dans SpriteKit.

Conclusion

Vous devriez maintenant être à l’aise avec certains des effets les plus avancés de SpriteKit, notamment les systèmes de particules, les filtres, la lumière et l’audio. Ces effets combinés peuvent avoir un impact considérable sur l’apparence de votre jeu et sur son immersion.

Dans le prochain et dernier tutoriel de cette série, nous abordons certaines des meilleures pratiques à garder à l’esprit lorsque vous travaillez avec SpriteKit. Je vous montre également comment créer des atlas de textures et enregistrer / charger des scènes.

Comme toujours, assurez-vous de laisser vos commentaires et commentaires dans les commentaires ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.