Revenir

Entre ton email pour recevoir le guide complet pour apprendre Swift peu importe ton niveau

Comment créer un jeu sur iOS en 2D avec SpriteKit et Swift

As-tu déjà rêvé de créer un jeu ?

Si tu es dans ce cas et que tu connais Swift, une grande opportunité t’attends.

Tu n’as pas besoin d’apprendre un autre langage de programmation ou d’apprendre à développer avec un moteur de jeu tel que Unity ou Unreal Engine.

Il y a une solution disponible totalement dans Swift.

Elle s’appelle SpriteKit et je vais vous en montrer les bases.

Nous allons créer un petit jeu où l’utilisateur contrôle un vaisseau spatial qui doit esquiver les comètes qui se dirigent vers lui. 

Mise en place du projet

Crée un nouveau projet Xcode et au lieu de choisir “single view app”, choisis “game”.

En faisant cela, Xcode générera GameScene.sks, Actions.sks, GameScene.swift et un View Controller.

Ce sont les fichiers dans lesquels tu peux créer ton jeu.

Nous n’avons pas besoin des fichiers .sks, il suffit donc de les ouvrir et de supprimer tout leur contenu.

Nous avons juste besoin du controller pour l’écran d’accueil et du fichier GameScene.swift.

L’interface principale

Tout d’abord, créons le menu du jeu. Cela fonctionne exactement comme n’importe quel autre View Controller.

Pour que les choses restent simples, j’ai créé l’interface sur le storyboard et voici à quoi elle ressemble :

Interface dans le storyboard  Tous ces éléments disparaîtront lorsque nous appuierons sur le bouton “Start Game”, sauf le vaisseau.

Voici le contenu de mon View Controller :

Contenu du GameViewController  Rien de nouveau ici jusqu’à la ligne 39 :

  • Ligne 39 à 40 : j’instancie la GameScene qui est la classe qui contient le noyau du jeu. J’ajoute ensuite un joueur au jeu qui est un Ship. Je vous montrerai ces classes plus tard.

  • Lignes 41 à 46 : je crée la vue qui contiendra notre jeu à partir de la vue actuelle. Je met showFPS à true juste pour le développement afin de garder un oeil sur les performances. J’ai également mis showNodeCount à true juste pour vérifier qu’il n’y a pas trop d’éléments à l’écran à chaque étape du jeu. Ensuite, j’ai mis ignoresSiblingOrder à true pour que SpriteKit affiche les node triés par zPosition. Le scaleMode est la façon dont la scène sera présentée dans la vue qui la contient. Lorsqu’il vaut resizeFill, cela signifie que la scène est automatiquement redimensionnée de sorte que ses dimensions correspondent toujours à celles de la vue. Enfin, j’ajoute la scène de jeu à la vue actuelle.

La scène de jeu

Ouvrez GameScene.swift et enlevez tout ce qui s’y trouve.

Maintenant, nous allons faire la partie la plus amusante et intéressante, c’est-à-dire coder le jeu.

didMove de GameScene.swift  Tout d’abord, créons la méthode didMove qui est appliquée lorsque nous passons à cette scène.

Dans cette méthode, je ne fais que positionner l’arrière-plan. Ce qui est nouveau ici, c’est le anchorPoint.

Cette propriété est utilisée pour dire quel point du node est utilisé pour le positionner.

Ensuite, j’ajoute l’arrière-plan à la scène actuelle avec la méthode addChild.

Ensuite, je positionne le joueur et je règle son échelle pour le redimensionner.

Avant d’ajouter le joueur à la scène, je configure son physicsBody pour gérer les collisions avec les autres node.

Je dis que son physicsBody est un rectangle de sa taille et qu’il est dynamique, c’est-à-dire qu’il réagit à la physique et à la gravité.

Après cela, il y a ces propriétés bizarres de bitmasks. Ce sont les propriétés qui disent de quelle catégorie de contact le node provient et avec quelle catégorie il entre en collision.

Voici les catégories que j’ai créées :

Catégories de bitmask

Qu’est-ce que les bitmasks et pourquoi sont-ils des UInt32 ?

C’est un peu difficile à comprendre, alors je vais essayer de l’expliquer étape par étape.

Les bitmasks sont des nombres utilisés pour décrire un élément dans un format binaire.

Imagine que tu aies 8 façons de décrire un objet. Nous utilisons le format binaire parce que nous pouvons stocker les 8 façons dans un seul octet.

SpriteKit n’a pas 8 façons de décrire un objet mais 32, ce qui signifie que vous pouvez décrire 32 catégories de collision en utilisant seulement 4 octets.

Cela nous aide à économiser de la mémoire et la mémoire est cruciale pour conserver de bonnes performances dans votre jeu.

Juste après cela, il y a la boucle de jeu avec la fonction run. C’est ce qui crée l’action du jeu.

Ici, nous répétons à l’infini une séquence qui exécute la fonction addComet et attend ensuite.

À la fin, nous réglons le monde physique de notre scène pour qu’il n’y ait pas de gravité et nous disons que cette classe va gérer toutes les collisions de notre scène.

Passons maintenant à la méthode addComet :

addComet dans GameScene  D’abord, nous créons une comète que le joueur devra esquiver.

On la plaçons à une position X aléatoire et légèrement hors écran en haut.

On configure également sa catégorie de physicsBody et les collisions.

J’ai créé une variable de score qui va compter le nombre de comètes esquivées par le joueur.

Si c’est 0, je crée le label et je l’ajoute à l’écran, sinon, je l’incrémente simplement.

Je n’ai pas besoin de créer le label à chaque fois parce que lorsque le joueur perd et appuie sur le bouton rejouer, qui sera créé plus tard, le label de score n’est pas détruit.

Ensuite, on crée une vitesse aléatoire à la comète et on la fait aller de haut en bas de l’écran en utilisant SKAction.move et en ajoutant cette action à l’objet à l’aide de la fonction run.

Maintenant que nous avons notre vaisseau et nos comètes, permettons à l’utilisateur déplacer le vaisseau :

touchesMoved de GameScene  Dans cette méthode, pour chaque touche sur l’écran (donc lorsque l’utilisateur fait glisser le vaisseau), j’obtiens la position X de la touche et je déplace le vaisseau à cette position X.

C’est comme dans la méthode addComet : vous créez une action move et vous l’ajoutez à l’objet en utilisant la fonction run.

La dernière partie de la scène de jeu est consacrée à la gestion des collisions :

didBegin contact de GameScene  Cette méthode permet de vérifier quel est le bitmask du physicsBody le plus grand afin de savoir plus tard quel corps est la comète et quel est le joueur.

Ensuite, on appelle la méthode playerDidCollideWithComet :

playerDidCollideWithWithComet de GameScene  C’est une méthode assez simple, je mets simplement à jour le score et je supprime le joueur de l’écran.

Ensuite, je présente le jeu sur la scène à l’aide d’une animation.

Pour le jeu sur scène, créez un fichier appelé GameOverScene.swift dans lequel vous créez la classe GameOverScene tout comme la classe GameScene.

Dans l’initialisateur, je crée simplement le fond d’écran comme dans la classe GameScene et un bouton pour relancer le jeu en utilisant ce code :

Init de GameOverScene  On ne peut pas créer de boutons dans SpriteKit, alors on crée un node qui contient un label et on l’ajoute à la scène.

Pour gérer le tap sur notre bouton, j’utilise la méthode touchesEnded :

touchedEnded GameOverScene  Dans cette méthode, je vérifie simplement si l’utilisateur a appuyé à l’intérieur du bouton ou à l’extérieur et je redirige l’utilisateur vers la GameScene en utilisant une fois de plus la fonction run mais cette fois-ci non pas avec une fonction mais avec une closure.

Au début de cet article, j’ai parlé de la classe Ship. J’ai créé cette classe qui hérite de SKSpriteNode et qui contient les valeurs par défaut de la vitesse du vaisseau.

Elle possède également un initialisateur où je peux changer le nom de l’image du vaisseau :

Init de la classe Ship  Ce n’est pas utile pour l’instant mais vous pouvez voir avec ce code comment changer la texture d’un node.

Conclusion

Dans cet article, je n’ai fait que couvrir les bases de SpriteKit. Il y a beaucoup plus à apprendre dans ce framework.

Grâce à ce framework, vous pouvez créer la plupart des jeux mobiles que vous voyez sur l’App Store.

Si vous êtes un freelance, le fait d’avoir un jeu mobile dans votre portefeuille est un excellent ajout et vous donne une tonne d’opportunités d’emploi.

Avant de partir

J’ai plus de contenu spécialement pour toi.

Si tu as lu cet article jusque ici c’est que tu es intéressé par le développement mobile et la création de jeux.

Si tu veux apprendre à créer des jeux iOS rapidement, j’ai quelque chose spécialement pour toi.

C’est la formation que j’aurais aimé avoir quand j’ai commencé à m’intéresser à la création de jeux mobiles.

Si ça t’intéresse, tu peux rejoindre le cours complet sur SpriteKit

Mais attention, ce n’est pas pour tout le monde. Il faut être prêt à travailler et à s’impliquer.

Si ça ne tintéresse pas, j’ai quelque chose d’autre pour toi.

Tu souhaites apprendre à créer des applications iOS par toi-même sans avoir besoin de tutoriel ou de cours ?

Tu veux apprendre toutes les bases du développement iOS pour créer tes propres applications ?

Si oui, j’ai créé une formation spécialement pour toi qui va t’apprendre à créer des applications par toi-même.

À la fin de la formation tu aura ta première application et tu sera en mesure d’en créer tout seul.

Si ça t’intérêsse, tu peux la rejoindre juste ici :

Rejoindre la formation

Ce n’est pas pour tout le monde.

Il faut connaître le langage Swift, pour cela tu as mes 2 articles :

Et il faut également être prêt à s’impliquer pour réussir et à travailler sur ce que je te proposerai.

Si tu souhaites rejoindre la formation :

Apprendre le développement iOS