Share
Dans ce tutoriel, 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étail et de variété à vos jeux. Cela inclut les systèmes de particules, les filtres, l’éclairage et le son..
Pour continuer avec moi, vous pouvez utiliser le projet que vous avez créé dans le précédent tutoriel de cette série ou télécharger une nouvelle copie à partir de GitHub..
Les graphiques utilisés pour le jeu dans cette série sont disponibles sur GraphicRiver. GraphicRiver est une excellente source pour trouver des illustrations et des graphiques pour vos jeux..
Dans SpriteKit, le terme système de particulesfait 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 d'images-objets identiques ou similaires, qui n'ont pas besoin d'un emplacement spécifique ou d'exécuter des actions..
Dans ce tutoriel, nous allons ajouter deux systèmes de particules lorsque la voiture heurte un obstacle:
Bien que les systèmes de particules puissent être créés par programme, 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 d'avoir à 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> Ressources> Fichier de particules SpriteKit modèle.
Dans le menu qui apparaît, sélectionnez Feu comme le Modèle de particules. Nommez le fichier Explosion ou quelque chose de similaire.
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.
Explosion.sks contient le système de particules et c'est le fichier sur lequel nous allons travailler. Le deuxième fichier, spark.png, est une image simple utilisée par le Feu modèle de particule pour créer son effet visuel. Si vous ouvrez Explosion.sks, vous pouvez voir le feu animer.
Les changements les plus importants que nous devons apporter à ce système de particules consistent à faire en sorte que les particules sortent de l'émetteur dans toutes les directions et à ne pas générer de nouvelles particules..
Pour effectuer le premier changement, ouvrez le Inspecteur d'attributs et sous la Particules section, changement Gamme d'angle à 360 °.
Tout de suite, vous pouvez voir que les particules se déplacent maintenant vers l'extérieur dans une forme circulaire.
Pour empêcher le système de particules de créer en permanence de nouvelles particules, nous pouvons spécifier une 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 0 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, changer les valeurs suivantes:
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 1 000 particules apparaissant en l'espace d'une seconde, ce qui se produirait avec un Taux de natalité sur 1 000, nous spécifions un Taux de natalité de 5 000. Cela signifie que toutes les particules sont créées en seulement 0,2 seconde.
En mettant Durée de vie> Démarrer à 3 les particules vivent pendant 3 secondes. le Durée de vie la propriété peut être utilisée pour ajouter de la variation à la durée de vie des particules.
Enfin, nous avons mis Vitesse> Démarrer à 200 afin 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 a un aspect très différent et ressemble davantage à une véritable explosion..
Notez que, même si l'animation se répète périodiquement dans l'éditeur Xcode, le système de particules n'anime qu'une seule fois lorsqu'il est ajouté à votre scène..
Avec le système de particules d'explosion terminé, il est temps de passer au système de particules de fumée. Créer 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 Modèle de particules, que nous avons mis à Fumée.
Le seul changement que nous devons apporter à ce système de particules consiste à faire en sorte que la fumée se déplace vers l’extérieur en cercle plutôt que tout droit. Pour ce faire, changez 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:
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. Ouvrir MainScene.swift et remplacer la mise en œuvre de didBeginContact (_ :) avec ce qui suit:
Accentsconagua
func didBeginContact (contact: SKPhysicsContact) if contact.bodyA.node == player || contact.bodyB.node == player if let explosionPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), let smokePath = NSBundle.mainBundle (). pathForResource ("Smoke", deType: " sks "), laissez explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) as? SKEmitterNode, let smoke = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) as? SKEmitterNode player.removeAllActions () caméra? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)Comme dans la mise en œuvre précédente de didBeginContact (_ :), Nous effectuons le même contrôle que précédemment pour voir si l’un des nœuds impliqués dans la collision est le nœud de la voiture. Nous utilisons ensuite une liaison facultative pour obtenir les chemins d'accès aux fichiers de ressources du système d'explosion et de fumée. Nous utilisons ces chemins pour instancier SKEmitterNode objets d'eux.
Ensuite, nous supprimons toutes les actions des noeuds de la caméra et du lecteur et nous le masquons en le supprimant de la scène. Nous enlevons la voiture pour éviter plus de collisions qui mènent ensuite à 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 lancez votre jeu. Vous devriez voir le système de particules d'explosion dès que la voiture heurte un obstacle. Ceci est suivi par la fumée une fois que le feu est éteint.
Dans SpriteKit, il existe un type spécial de nœud (représenté par le SKEffectNode classe) qui peut utiliser un Image de base objet filtre (représenté par le CIFilter class) pour rendre ses nœuds enfants avec une variété d’effets. le SKScene la classe est également une sous-classe de SKEffectNode, ce qui signifie que vous pouvez également appliquer un filtre à la scène entière.
Malheureusement, au moment de la rédaction de ce didacticiel, iOS 9. 9. À l'heure actuelle, dès qu'un effet est activé pour un nœud d'effet, tous ses enfants sont masqués, ce qui a pour effet de masquer tous ses enfants. l'effet n'étant pas visible.
Même si nous ne pouvons pas implémenter cela 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 fondu progressif d’un effet de flou à l’ensemble de la scène..
func addBlurFilter () let blurFilter = CIFilter (nom: "CIGaussianBl") blurFilter? .setDefaults () blurFilter? .setValue (0.0, pourKey: "inputRadius") filter = blurFilter () blenderFilter? .setValue (0.0, pourKey: "inputRadius") : (noeud: SKNode, elapsedTime: CGFloat) dans let currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))
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 de filtre de base d'image. 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 pas de flou au départ.
Nous assignons ensuite le filtre au filtre propriété de la scène actuelle et définie shouldEnableEffects à vrai pour l'activer. Enfin, nous exécutons une coutume 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 soient résolus, car ils permettent d'ajouter des effets très uniques et intéressants à vos scènes SpriteKit..
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 une 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 la MainScene classe.
override func didMoveToView (view: SKView) … let light = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (light)
Avec ce code, nous créons un nouveau SKLightNode objet, change son couleur claire propriété à blanc, et abaisser son tomber 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 d'une scène par le biais de masques de bits. Lorsque SpriteKit restitue les lumières d’une scène, il utilise un opérateur logique AND sur le noeud Light. catégorieBitMask et le éclairageBitMask et shadowCastBitMask de chaque autre noeud pour déterminer comment ce noeud devrait apparaître.
Pour notre jeu, nous voulons que les obstacles interagissent avec la lumière de manière à projeter des ombres dans la scène. Pour ce faire, ajoutez les deux lignes suivantes à la fin du spawnObstacle (_ :) méthode du MainScene classe:
func spawnObstacle (timer: NSTimer) … obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF
En définissant un masque de bits avec tous les bits activés, les obstacles interagissent avec toutes les lumières de la scène..
Construisez et exécutez votre application. Vous verrez que, lorsque votre voiture se déplace dans la scène, chaque obstacle a une ombre dynamique qui pointe toujours vers le centre de la voiture..
Comme vous pouvez le constater, les lumières dans SpriteKit sont très simples à utiliser et peuvent ajouter de jolis effets à vos scènes..
Enfin, nous allons examiner les nœuds audio dans SpriteKit. Les nœuds audio servent à ajouter des effets sonores à une scène. Ces nœuds spéciaux sont représentés par le SKAudioNode classe. Parce que 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 la lecture audio de manière régulière et du son identique quelle que soit la manière dont votre scène est arrangée (par exemple, une musique de fond), SpriteKit vous permet d’utiliser le son de position pour créer un effet véritablement immersif. Ceci est fait en spécifiant un auditeur nœud pour votre scène, qui est où le son sera "entendu" de.
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 le nœud spécifique d'un nœud. positionnel propriété à faux.
Bien que nous n'implémentions pas cela dans notre jeu, voici un exemple de méthode permettant d'ajouter 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 noeud de son explosion qui commence à jouer lorsque nous le disons..
Notez que nous importons le AVFoundation cadre au sommet. Cela est nécessaire pour accéder et travailler avec le avAudioNode propriété d'un SKAudioNode objet. Comme vous pouvez le constater, les nœuds audio sont très faciles à configurer et à utiliser dans SpriteKit..
import AVFoundation func addAudioNode () listener = player laisse backgroundMusic = SKAudioNode (fileNamed: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (fileNamed: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (explosion) do try explosion.avAudioNode? .engine? .start () // Appelé lorsque vous voulez jouer du son catch // Faites quelque chose avec l'erreur
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 grandement influer sur l'apparence de votre jeu et son immersivité..
Dans le prochain et dernier didacticiel de cette série, nous présentons certaines des meilleures pratiques à garder à l’esprit lorsque vous travaillez avec SpriteKit. Je vous montre également comment créer des atlas de texture et sauvegarder / charger des scènes.
Comme toujours, assurez-vous de laisser vos commentaires dans les commentaires ci-dessous.
