Share
SpriteKit est le moteur de jeu 2D d'Apple, un moteur de rendu basé sur OpenGL. Il a été introduit avec iOS 7 et chaque nouvelle version a apporté d’importants ajouts au framework. Avec l'utilisation d'images-objets texturées, d'un moteur physique intégré et du très puissant SKAction classe, vous pouvez très rapidement créer des jeux 2D fonctionnels.
SpriteKit intègre des éditeurs intégrés pour les scènes et les particules, un nœud de caméra depuis la sortie d'iOS9 et une prise en charge intégrée des jeux de tuiles depuis la sortie d'iOS 10. Grâce à ces nouveaux ajouts, SpriteKit devient rapidement un moteur pour la création de jeux en 2D..
Pour suivre ce didacticiel, il suffit de télécharger le référentiel GitHub joint. Il a un dossier appelé ExampleProject Starter. Ouvrez le projet dans ce dossier dans Xcode et vous êtes prêt à partir.!
Les nœuds sont les éléments fondamentaux de SpriteKit, et SKNode est la classe de base de tous les nœuds. Tous vos éléments à l'écran constitueront un SKNode ou une sous-classe de ceux-ci. SKNodes à eux seuls ne fournissent aucun contenu visuel, cependant. Tout le contenu visuel est dessiné en utilisant l’un des nombreux prédéfinis SKNode sous-classes. SKNodes et ses sous-classes partagent plusieurs propriétés que vous pouvez modifier. Certains des plus importants sont les suivants.
Accentsconagua
position (CGPoint): la position du nœud dans le système de coordonnées de son parentxScale (CGFloat): met à l'échelle la largeur d'un nœud avec un multiplicateuryScale(CGFloat): met à l'échelle la hauteur d'un nœud par un multiplicateuralpha (CGFloat): la transparence du noeudzRotation (CGFloat): la rotation d'Euler autour de l'axe z (en radians)L'un des plus importants SKNodes est le SKScene. C'est le nœud racine auquel tous les autres nœuds sont ajoutés. Par lui-même, SKScene ne fournit aucun élément visuel, mais affiche les nœuds qui lui sont ajoutés.
SKScènes sont les nœuds racine auxquels tous les autres nœuds sont ajoutés. La scène anime et rend le contenu à partir de ses nœuds enfants. Pour afficher une scène, vous l'ajoutez à un SKView (qui est une sous-classe de UIView et a donc beaucoup des mêmes propriétés que UIView).
Dans le projet de démarrage SpriteKit, la scène initiale indique le chargement du projet. Pour le moment, il ne s'agit que d'un écran noir et blanc. Il est montré quand le GameViewController invoque presentScene (_ :) sur l'instance de vue, en passant la scène en tant que paramètre:
remplacer func viewDidLoad () super.viewDidLoad () let scene = GameScene (taille: CGSize (width: 768, height: 1024)) let skView = self.view as! SKView skView.showsFPS = false skView.showsNodeCount = false skView.ignoresSiblingOrder = false scene.scaleMode = .aspectFill skView.presentScene (scene) // Présenter la scène
Ne vous inquiétez pas des autres options pour le moment. Je les expliquerai plus tard dans cette série.
De nombreux jeux ont plus d’un écran ou d’une scène, nous allons donc créer une nouvelle scène à partir de rien et la montrer à partir de notre scène initiale..
Sélectionner Fichier > Nouveau > Fichier dans le menu de Xcode, et choisissez Cacao Touch Class.
Assure-toi Classe est réglé sur NewScene et cela Sous-classe de est réglé sur SKScene. presse Suivant et alors Créer, en s'assurant que la cible principale est cochée. Ci-dessous le code pour le NewScene.swift.
import UIKit import SpriteKit class NewScene: SKScene
Nous avons maintenant deux scènes dans notre projet, et aucune n’a de contenu visuel. Ajoutons un SKLabelNode (comme tous les nœuds, ceci est une sous-classe de SKNode). le SKLabelNodeLe seul but de est d'afficher une étiquette de texte.
Nœuds d'étiquette, implémentés dans SKLabelNode classe, sont utilisés pour afficher du texte dans votre jeu. Vous pouvez utiliser des polices personnalisées si vous le souhaitez, mais pour nos besoins, nous nous en tenons simplement aux valeurs par défaut, qui affichent du texte blanc et sont définies sur Helvetica Neue Ultra Light, 32 points.
Ajouter ce qui suit à l'intérieur du didMove (to :) méthode à l'intérieur GameScene.swift. Cette méthode est appelée immédiatement après qu'une scène est présentée par une vue. En règle générale, c’est à cet endroit que vous définissez les éléments de votre jeu et que vous les ajoutez à la scène..
remplace func didMove (pour afficher: SKView) let startGameLabel = SKLabelNode (text: "Start Game")
Ici nous créons un SKLabelNode en utilisant l'initialiseur de commodité init (texte :), qui prend en paramètre une chaîne de texte.
L'initialisation des nœuds ne les montrera pas dans la scène. Pour faire apparaître les noeuds, vous devez invoquer le addChild (_ :) méthode sur le noeud de réception, en passant le SKNode que vous souhaitez ajouter en paramètre.
Ajouter ce qui suit dans le didMove (to :) méthode.
remplacer func didMove (pour afficher: SKView) let startGameLabel = SKLabelNode (text: "Démarrer la partie") addChild (startGameLabel)
le addChild (_ :) méthode n'est pas exclusive à SKScenes, mais est une méthode de SKNode. Cela vous permet de construire une hiérarchie complexe de noeuds, appelée "arbre de noeuds". Par exemple, supposons que vous ayez un personnage de jeu et que vous vouliez bouger ses bras et ses jambes séparément. Vous pouvez créer un SKNode par exemple, puis ajouter chaque partie individuelle en tant qu'enfant de cette SKNode (le nœud contenant est appelé le nœud parent). Cela vous donnerait l’avantage de pouvoir déplacer le personnage dans son ensemble en déplaçant le parent SKNode, mais vous permettent également de déplacer chaque pièce individuellement.
Une autre méthode importante pour l’ajout de nœuds est la insertChild (_: at :) méthode, qui insère un enfant dans une position spécifique dans la liste des enfants du noeud récepteur. Lorsque vous ajoutez un enfant à un nœud, le nœud conserve une liste ordonnée d’enfants qui est référencée en lisant le les enfants propriété. Il est important de prendre cela en compte lors de l'ajout de plusieurs nœuds à un nœud parent, car l'ordre dans lequel vous ajoutez les nœuds a une incidence sur certains aspects du traitement des scènes, notamment les tests de rendu et le rendu..
Pour supprimer un noeud, vous appelez le removeFromParent () méthode sur le noeud que vous souhaitez supprimer.
Maintenant que nous avons couvert l’ajout et la suppression de nœuds, nous pouvons revenir à l’exemple de projet. Si vous vous en souvenez, nous venions d'ajouter un SKLabelNode au GameScene. Si vous testez maintenant, vous ne verrez que la moitié du texte en bas à gauche de l'écran.
Pourquoi ne montre que la moitié du texte, cependant? Ce serait le bon moment pour parler du système de coordonnées et de positionnement de SpriteKit..
Par défaut, le système de coordonnées de SpriteKit place (0,0) en bas à gauche de l'écran. De plus, par défaut, SpriteKit place les nœuds de manière à ce qu'ils soient positionnés à (0,0). Cependant… pourquoi ne voyons-nous que la moitié du texte? En effet, par défaut, l’étiquette de texte est centrée horizontalement sur l’origine du nœud d’étiquette, qui est (0,0). L'image ci-dessous montre le fonctionnement du système de coordonnées d'un nœud..
Les origines du nœud sont à (0,0), une coordonnée x positive se déplace vers la droite et une coordonnée y positive remonte à l’écran. Rappelez-vous qu'un SKScene est un nœud, et donc son origine est aussi (0,0).
Maintenant que nous avons appris que le système de coordonnées de SpriteKit fonctionne et comment il place les nœuds, nous pouvons déplacer le SKLabelNode à une position différente afin que nous puissions voir tout le texte. Ajouter ce qui suit au didMove (to :) méthode à l'intérieur GameScene.swift.
override func didMove (pour afficher: SKView) let startGameLabel = SKLabelNode (text: "Démarrer le jeu") startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (startGameLabel)
Ici, nous positionnons l'étiquette au centre de la scène. le position propriété est de type CGPoint, qui a des valeurs x et y qui représentent un seul point dans la scène.
Si vous testez maintenant, vous devriez voir que l'étiquette a été placée au centre de la scène.
En l'état actuel, NewScene est juste une scène vide. Ajoutons également une étiquette à celui-ci, et nous pourrons ensuite apprendre à passer d’une scène à l’autre. Voici un défi: avant de lire à l’avance, essayez d’ajouter une étiquette à NewScene ça dit, "Retourner". Ma solution est ci-dessous.
La première chose à faire est d’ajouter le didMove (to :) méthode. Ajouter ce qui suit à NewScene.swift.
classe NewScene: SKScene override func didMove (pour afficher: SKView)
Ensuite, nous devons ajouter l'étiquette. Ajouter ce qui suit dans le didMove (to :) méthode que vous avez ajoutée ci-dessus.
override func didMove (pour afficher: SKView) let goBackLabel = SKLabelNode (text: "Go Back") goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (goBackLabel)
Cela ajoute une étiquette à NewScene avec le texte "Retourner"Ensuite, nous allons implémenter la fonctionnalité suggérée par cette étiquette. Nous répondrons aux événements tactiles en changeant de scène..
Presque tous les jeux mobiles seront interagis avec le toucher. Dans cette étape, vous apprendrez comment réagir aux événements tactiles de votre jeu..
Pour enregistrer des gestionnaires d’événements tactiles dans votre jeu, vous devez implémenter la vue toucheBegan (_: avec :) méthode. Ajouter ce qui suit à GameScene.swift:
remplacer les touches fonctionnellesBien (_ touches: Définir, avec événement: UIEvent?) print ("YOU TOUCHED")
Si vous voulez tester cela maintenant, vous verrez Vous avez touché imprimé sur la console lorsque vous touchez à l'écran. Cependant, nous avons généralement besoin de pouvoir savoir quand un nœud spécifique a été touché. Pour ce faire, nous avons besoin d’un moyen de trouver et d’identifier les nœuds. Nous allons apprendre comment accomplir cela, puis revenir et terminer la toucheBegan (_: avec :) méthode.
Pour pouvoir identifier un nœud, vous utilisez le nœud prénom propriété et recherchez dans l’arborescence de nœuds un nœud portant ce nom. Le noeud prénom property prend une chaîne alphanumérique sans aucune ponctuation.
Il existe plusieurs méthodes pour rechercher un nœud par son prénom propriété. Si vous avez déjà une référence au nœud, vous pouvez simplement vérifier sa prénom propriété directement, ce qui est ce que nous allons faire dans le toucheBegan (_: avec :) méthode. Cependant, il est important de savoir comment rechercher un nœud particulier dans l'arborescence de nœuds ou rechercher un groupe de nœuds portant le même nom..
le childNode (withName :) méthode recherche dans les enfants d'un noeud le nom spécifique transmis en tant que paramètre.
le enumerateChildNodes (withName: using :) méthode recherche les enfants d'un nœud et appelle le bloc une fois pour chaque nœud correspondant qu'il trouve. Vous utilisez cette méthode lorsque vous souhaitez rechercher tous les nœuds qui partagent le même nom..
le indice(_:) méthode retourne un tableau de noeuds qui correspondent au paramètre name.
Vous pouvez également rechercher des nœuds à l'aide d'une syntaxe de recherche avancée vous permettant de rechercher l'ensemble de l'arborescence de la scène ou de rechercher un motif plutôt qu'un nom exact, par exemple. Cette capacité de recherche avancée dépasse le cadre de ce didacticiel. Toutefois, si vous souhaitez en savoir plus, vous pouvez en savoir plus sur le SKNode référence de programmation.
Maintenant que nous savons comment rechercher des noeuds dans l’arbre de noeuds, donnons un nom à nos étiquettes..
Ajouter ce qui suit dans le didMove (to :) méthode à l'intérieur GameScene.swift.
override func didMove (pour afficher: SKView) let startGameLabel = SKLabelNode (text: "Démarrer la partie") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: taille.largeur / 2, y: taille.haut / 2 ) addChild (startGameLabel)
Ici, nous avons mis startGameLabelnom de la propriété à démarrer jeu.
Nous devons également définir le nom de l'étiquette dans NewScene. Ajouter ce qui suit avec le didMove (to :) méthode à l'intérieur NewScene.swift.
override func didMove (pour afficher: SKView) let goBackLabel = SKLabelNode (text: "Go Back") goBackLabel.name = "goback" goBackLabel.position = CGPoint (x: taille.width / 2, y: taille.height / 2 ) addChild (goBackLabel)
Nous avons mis le prénom propriété à retourner.
Ajouter ce qui suit dans le toucheBegan (_: avec :) méthode à l'intérieur GameScene.swift.
remplacer les touches fonctionnellesBien (_ touches: Définir, with event: UIEvent?) gardien laissez touch = touch.first else return laissez touchLocation = touch.location (dans: self) laissez touchedNode = self.atPoint (touchLocation) if (touchedNode.name == "startgame") let newScene = NewScene (taille: taille) newScene.scaleMode = scaleMode let portesClose = SKTransition.doorsCloseVertical (withDuration: 2.0) vue? .presentScene (newScene, transition: doorsClose)
le multiTouchEnabled propriété de la vue de la scène est définie sur faux Par défaut, cela signifie que la vue reçoit uniquement le premier contact d'une séquence multitouch. Avec cette propriété désactivée, vous pouvez récupérer le contact en utilisant le premier propriété calculée de l'ensemble des touches, car il n'y a qu'un seul objet dans l'ensemble.
Nous pouvons obtenir le touchLocation dans la scène de la emplacement propriété du toucher. Nous pouvons alors déterminer quel noeud a été touché en appelant au point(_:) et en passant dans le touchLocation.
Nous vérifions si le touchedNodeLa propriété name de est égale à "démarrer jeu", et si c'est le cas, nous savons que l'utilisateur a touché l'étiquette. Nous créons ensuite une instance de NewScene et mettre sa scalemode La propriété doit être identique à la scène actuelle. Cela garantit que la scène agit de la même manière sur différents périphériques. Enfin, nous créons un SKTransition et invoquer le presentScene (_: transition :) méthode, qui présentera la scène avec la transition.
le SKTransition class dispose de nombreuses méthodes de classe que vous pouvez appeler pour afficher différentes transitions entre les scènes au lieu d'afficher immédiatement la scène. Cela procure un peu de "bonbon à l'oeil" à l'utilisateur final et permet de montrer une nouvelle scène moins abrupte. Pour voir tous les types de transition disponibles, consultez le SKTransition classe dans le guide de référence.
Je ne vais pas mettre en œuvre le toucheBegan (_: avec :) méthode en NewScene. Pourquoi n'essayez-vous pas de le faire vous-même et que l'étiquette revienne au GameScene en utilisant un type de transition différent? Le code ressemblera beaucoup à ce que nous avons ci-dessus, rappelez-vous seulement que nous avons nommé le SKLabelNode "retourner".
Jusqu'à présent, nous avons beaucoup appris sur les nœuds en utilisant des scènes et vous avez vu comment utiliser un nœud d'étiquette comme exemple générique pour connaître certaines de leurs caractéristiques. Nous avons étudié leurs systèmes de coordonnées, comment les localiser dans l'arborescence de nœuds, comment les positionner et comment réagir aux événements tactiles..
Il existe plusieurs autres types de nœuds disponibles, que nous examinerons dans le prochain tutoriel, en commençant par SKSpriteNode!
Pour en savoir plus sur la façon de démarrer avec SpriteKit, vous devriez également consulter le post de Davis Allie ici sur Envato Tuts+.
Découvrez également nos cours SpriteKit! Cela vous guidera à travers toutes les étapes de la construction de votre premier jeu SpriteKit pour iOS, même si vous n'avez jamais codé avec SpriteKit auparavant..
