Créez des Space Invaders avec Swift et Sprite Kit: Présentation du kit Sprite

Dans cette série, je vais vous apprendre à créer un jeu inspiré de Space Invaders en utilisant Sprite Kit et le langage de programmation Swift. En cours de route, vous découvrirez le moteur physique intégré de Sprite Kit, générerez des particules à l’aide de l’éditeur de particules intégré de Sprite Kit, utiliserez l’accéléromètre pour déplacer le joueur, et bien plus encore. Commençons.

Présentation du kit Sprite

Sprite Kit est le moteur de jeu 2D d’Apple qui a été introduit avec iOS 7. Avec l’introduction du langage de programmation Swift en 2014, il n’y a jamais eu de meilleur moment pour devenir développeur de jeux pour iOS.

Sprite Kit fournit un moteur de rendu basé sur OpenGL. Avec l’utilisation de sprites texturés, un moteur physique intégré et le très puissant SKAction classe, vous pouvez très rapidement créer des jeux 2D fonctionnels.

Boucle de rendu

Sprite Kit, comme la plupart des moteurs de jeu, utilise une boucle de rendu pour rendre et mettre à jour l’écran.La boucle de rendu comporte plusieurs étapes avant de rendre la scène actuelle. Ils sont les suivants:

  1. Mettre à jour
  2. Évaluer les actions
  3. Simuler la physique
  4. Appliquer des contraintes
  5. Rendre la scène

Chacun d’eux a une méthode correspondante que vous pouvez utiliser pour appliquer toute logique supplémentaire qui doit avoir lieu à ce moment-là dans le cadre. Plus précisément, vous utiliseriez les méthodes suivantes dans la scène.

  1. update
  2. didEvaluateActions
  3. didSimulatePhysics
  4. didApplyConstraints
  5. didFinishUpdate

Nous nous intéressons à deux de ces méthodes pour ce tutoriel, update et didSimulatePhysics. Nous utiliserons le update méthode pour déplacer les envahisseurs manuellement et le didSimulatePhysics méthode pour mettre à jour le lecteur, qui sera contrôlé à l’aide de l’accéléromètre et du moteur physique.

SKNode

L’un des éléments constitutifs du framework Sprite Kit est le SKNode classe. le SKNode la classe ne dessine aucun élément visuel. Son rôle principal est de fournir un comportement de base que d’autres classes implémentent. le SKScene class est le nœud racine dans un arbre de SKNode instances et est utilisé pour contenir des sprites et d’autres contenus qui doivent être rendus.

Le rendu et l’animation sont réalisés par un SKView instance placée dans une fenêtre et d’autres vues y sont ensuite ajoutées. le SKScene l’instance est ajoutée au SKView exemple. Vous pouvez utiliser un seul SKView instance dans votre fenêtre et basculez entre les différentes scènes à tout moment.

Le cadre définit un certain nombre de SKNode sous-classes. Le plus courant pour construire une scène est le SKSpriteNode classe. le SKSpriteNode la classe peut être dessinée soit comme un rectangle avec un SKTexture mappé dessus ou sous la forme d’un rectangle coloré non texturé. Vous utiliserez le plus souvent des sprites texturés, car c’est ainsi que vous donnerez vie à vos illustrations dans votre jeu. Consultez l’arbre d’héritage du SKNode classe pour voir quels autres types de nœuds sont disponibles.

SKAction

le SKAction la classe est ce qui apporte votre SKNode cours à la vie. En utilisant le SKAction classe, vous pouvez déplacer, faire pivoter, mettre à l’échelle et estomper les nœuds. Vous pouvez aussi utiliser SKAction pour jouer un son et exécuter un code personnalisé. le SKAction la classe est très puissante et, avec le SKNode classe, est l’un des éléments constitutifs d’un jeu Sprite Kit.

Moteur physique

Sprite Kit dispose d’un moteur physique intégré qui facilite la gestion de situations physiques complexes. Si vous avez déjà essayé d’implémenter un moteur physique par vous-même, vous apprécierez cette fonctionnalité.

Dans Sprite Kit, la coordonnée (0,0) est situé en bas à gauche de l’écran au lieu du coin supérieur gauche, ce à quoi vous pouvez être habitué si vous avez travaillé avec Flash, Corona, HTML5 Canvas et de nombreux autres frameworks de jeu. C’est parce que Sprite Kit utilise OpenGL sous le capot.

En relation :  Vous pouvez maintenant recevoir une alerte de précommande pour le Samsung Galaxy S21

Je vous suggère fortement de lire Apple Guide de programmation du kit Sprite pour vous familiariser avec les concepts ci-dessus. Avec cette courte introduction à l’écart, commençons à créer un jeu avec Sprite Kit.

1. Configuration du projet

Ouvrez Xcode et choisissez Créer un nouveau projet Xcode ou choisissez Nouveau> Projet … du Fichier menu.

Créer un nouveau projet

Assurez-vous que vous ciblez iOS, que le type est Application, et que vous avez choisi Jeu comme type de modèle. Cliquez sur Prochain continuer.

Choisissez un modèle de projet

Ensuite, choisissez ce que vous souhaitez pour le Nom du produit, nom de l’organisation, et Identifiant d’organisation. Sois sûr que Langue est réglé sur Rapide, Technologie de jeu est réglé sur SpriteKit, et Dispositifs est réglé sur iPad. Spécifiez un emplacement pour enregistrer les fichiers du projet et cliquez sur Créer.

Choisissez les options du projet

Si vous cliquez sur le bouton Exécuter en haut à gauche (ou appuyez sur Commande + R), Xcode construira et exécutera votre application, affichant le texte “Bonjour le monde!”. Lorsque vous appuyez sur l’écran, une image d’un vaisseau spatial est ajoutée et commence à tourner.

Capture d'écran du jeu par défaut

2. Configuration du projet

Sélectionnez le projet dans le Navigateur de projet et ouvrez le Général onglet en haut. En dessous de Informations de déploiement, décochez toutes les cases mais Portrait pour Orientation de l’appareil.

Ensuite, sélectionnez et supprimez GameScene.sks. le .sks fichier vous permet de présenter la scène visuellement. Pour ce projet, nous ajouterons chaque nœud par programmation. Ouvert GameViewController.swift, supprimez son contenu et remplacez-le par ce qui suit.

le GameViewController classe hérite de UIViewController et aura un SKView comme son point de vue. À l’intérieur de viewDidLoad méthode, nous forçons à abattre son view propriété à un SKView instance, en utilisant le as! tapez l’opérateur de conversion et configurez la vue.

Vous avez peut-être remarqué le texte dans le coin inférieur droit de l’écran lorsque vous avez exécuté l’application pour la première fois. C’est ce que le showsFPS et showsNodeCount sont pour, indiquant les images par seconde auxquelles le jeu tourne et le nombre de SKNodes visible dans la scène.

Si certains des nœuds devaient quitter l’écran, le nombre de nœuds chuterait, mais ils seraient toujours en mémoire. Ceci est important à retenir et ne vous laissez pas tromper par le nombre de nœuds. Si vous ajoutez 100 nœuds à une scène et que 90 d’entre eux sont hors écran, vous avez toujours 100 nœuds occupant de la mémoire.

À des fins d’optimisation, le ignoresSiblingOrder est réglé sur true. Vous pouvez en savoir plus à ce sujet dans Guide de programmation du kit Sprite. La dernière chose que nous faisons est d’appeler le SKViewde presentScene méthode et passer dans le StartGameScene, que nous créerons à l’étape suivante.

Enfin, nous ne voulons pas que la barre d’état soit affichée, nous retournons donc true du preferStatusBarHidden méthode.

3. Création StartGameScene

Étape 1: Ajout du StartGameScene Classe

Choisir Nouveau > Fichier… du Fichier menu et choisissez Classe Touch Cocoa du iOS> Source section. Cliquez sur Prochain continuer.

Créer une nouvelle classe

Ensuite, nommez la classe StartGameScene et assurez-vous qu’il hérite de SKScene. Langue devrait être réglé sur Rapide. Cliquez sur Prochain continuer.

Dites à Xcode où vous souhaitez enregistrer le fichier pour la nouvelle classe et cliquez sur Créer. Ajoutez le code suivant à StartGameScene.swift.

le didMoveToView(_:) est appelée immédiatement après la présentation de la scène par la vue. Généralement, c’est ici que vous effectuerez la configuration de votre scène et créerez vos ressources.

En relation :  6 grands jeux de fiction interactifs pour jouer en ligne dès maintenant

Si vous testez le jeu maintenant, vous devriez être présenté avec un écran noir qui montre la fréquence d’images et le nombre de nœuds dans le coin inférieur droit de l’écran.

Étape 2: ajout startGameButton

Ce n’est pas amusant de regarder un écran noir alors créons notre premier SKSpriteNode exemple. Mettre à jour le didMoveToView(_:) méthode comme indiqué ci-dessous.

Nous déclarons une constante startGameButton utilisation de l’initialiseur pratique init(imageNamed:), qui prend comme argument le nom de l’image. Nous le centrons sur l’écran à la fois horizontalement et verticalement, sauf que nous soustrayons 100 points pour le placer un peu décentré sur l’axe vertical. Nous définissons son name propriété à démarrer jeu afin que nous puissions y revenir plus tard. Enfin, nous l’ajoutons à la scène en invoquant addChild(_:), qui prend comme argument le nœud à ajouter à la scène. Vous pouvez en savoir plus sur SKSpriteNode classe dans le Référence du framework SpriteKit.

Ce serait maintenant le bon moment pour ajouter les images au projet. Téléchargez les fichiers source de ce didacticiel et recherchez le dossier nommé images. Faites-le glisser sur le dossier qui porte le nom de tout ce que vous avez nommé votre projet, par exemple, MobileTutsInvaderz. Assure-toi Copiez les éléments si nécessaire est cochée ainsi que la cible principale dans la liste des cibles.

Ajout d'un dossier d'images

Si vous testez votre application, vous devriez voir un bouton intitulé “Nouveau jeu”.

Nouveau bouton de jeu

Étape 3: mise en œuvre touchesBegan

Ensuite, nous devons mettre en œuvre le touchesBegan(_:withEvent:) méthode. Sa mise en œuvre est illustrée ci-dessous. le touchesBegan est invoquée lorsqu’un ou plusieurs doigts touchent l’écran.

le multiTouchEnabled la propriété de la vue de la scène est définie sur false par défaut, ce qui signifie que la vue ne reçoit que la première touche d’une séquence multitouch. Lorsque cette propriété est désactivée, vous pouvez récupérer le toucher en utilisant le first propriété calculée du touches défini car il n’y a qu’un seul objet dans l’ensemble. Notez que nous l’avons également réduit à un UITouch.

Nous stockons l’emplacement du toucher dans la scène dans une constante nommée touchLocation. Nous faisons cela en invoquant locationInNode(_:) sur le touch objet, passant dans la scène. Nous pouvons alors déterminer quel nœud a été touché en invoquant nodeAtPoint, en passant dans l’emplacement tactile. Avec ce nœud touchedNode trouvé, nous pouvons vérifier le name propriété et, s’il est égal à démarrer jeu, nous savons qu’ils ont appuyé sur le bouton.

Si l’utilisateur a appuyé sur le bouton, nous instancions le GameScene classe et définissez son scaleMode être le même que le mode d’échelle de la scène actuelle. Nous créons ensuite un SKTransition nommé transitionType et montrez la scène en invoquant presentScene(_:transition:) passant dans le gameOverScene et le transitionType.

Il y en a pas mal SKTransistion types à choisir. Vous pouvez en savoir plus à leur sujet dans le Référence du framework SpriteKit. Je vous suggère d’en essayer quelques-uns et de voir lesquels vous préférez.

Si vous testez votre application, vous pouvez appuyer sur le bouton, qui vous amène à GameScene. C’est la même scène avec laquelle le projet a commencé.

Conclusion

Cela met fin à la première partie de cette série. Vous avez été présenté à Sprite Kit et avez appris à créer des scènes personnalisées, utilisez le SKSpriteNode classe et détectez les contacts. Ce n’est que le début, nous avons encore beaucoup à apprendre. Merci d’avoir lu et je vous verrai dans la prochaine partie de cette série.

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.