Share
Dans cette série, nous apprenons à utiliser SpriteKit pour créer des jeux 2D pour iOS. Dans cet article, nous allons continuer notre exploration des nœuds SpriteKit et découvrir un type spécial de nœud appelé "sprite" -an SKSpriteNode.
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.!
Un SKSpriteNode est dessiné soit sous forme de rectangle avec une texture, soit sous forme de rectangle coloré non texturé. Créer un SKSpriteNode avec une texture mappée sur elle est la plus commune, car c'est ainsi que vous donnez vie à l'art de votre jeu.
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 la partie") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: taille.largeur / 2, y: taille.haut / 2 ) addChild (startGameLabel) let redSprite = SKSpriteNode (color: .red, size: CGSize (width: 200, height: 200)) addChild (redSprite)
Ici, nous utilisons l’interface de confort init (couleur: taille :) qui dessine un sprite rectangulaire avec la couleur et la taille que vous transmettez en tant que paramètres. Si vous testez le projet maintenant, vous verrez la moitié du carré rouge montrant.
Vous vous demandez peut-être pourquoi seule la moitié de l'image-objet est affichée, car nous avons déjà déterminé que SKNodeLes origines sont à (0,0). Ceci parce que le SKSpriteNodeLe cadre de et donc sa texture est centrée sur sa position. Pour changer ce comportement, vous pouvez changer le sprite point d'ancrage propriété, qui détermine le point où le cadre est positionné. Le diagramme ci-dessous montre comment le point d'ancrage travaux.
le point d'ancrage est spécifié dans le système de coordonnées de l'unité, qui place (0,0) en bas à gauche et (1,1) dans le coin supérieur droit du cadre. La valeur par défaut pour SKSpriteNodes est (0.5,0.5).
Allez-y et changez le point d'ancrage propriété à (0,0) et remarquez la différence que cela fait.
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) let redSprite = SKSpriteNode (color: .red, taille: CGSize (width: 200, height: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild (redSprite)
Maintenant, si vous testez, vous verrez que le sprite est parfaitement aligné avec le coin inférieur gauche de la scène..
Déplaçons-le maintenant en haut au centre de la scène en modifiant sa propriété de position. Remplacez votre didMove (to :) fonctionner avec ce qui suit:
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) let redSprite = SKSpriteNode (color: .red, taille: CGSize (width: 200, height: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) redSprite.position = CGPoint (x: size.width / 2 - 100, y: size.height - 210) addChild (redSprite)
Remarquez comment nous avons dû soustraire à la fois le X et y valeurs pour centrer le sprite. Si nous avions quitté le point d'ancrage à son défaut, il aurait déjà été centré sur le X axe. Il est important de se rappeler que lorsque vous modifiez le point d'ancrage, vous devrez peut-être effectuer quelques ajustements dans votre positionnement..
Cette boîte rouge est utile pour la pratique du positionnement, mais vous voudrez généralement texturer votre sprite avec des illustrations pour votre jeu..
Créons un texturé SKSpriteNode. Ajoutez le code suivant au bas de la didMove (to :) méthode.
override func didMove (pour afficher: SKView) … let player = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild (player)
Ici nous utilisons l'initialiseur de commodité init (imageNamed :), qui prend en paramètre le nom d'une image sans extension. C'est le moyen le plus simple de créer un sprite texturé, car il crée la texture pour vous à partir de l'image que vous transmettez..
L’autre façon de créer une texture SKSpriteNode est de créer un SKTexture au préalable, et utilisez l'un des intializers qui prennent une texture en paramètre.
Créons un couple de plus SKSpriteNodes et changer certaines de leurs propriétés. Encore une fois, ajoutez-les au bas de votre didMove (to :) une fonction.
override func didMove (pour afficher: SKView) … let ennemi1 = SKSpriteNode (imageNamed: "ennemi1") ennemi1.position = CGPoint (x: 100, y: 300) ennemi1.xEchelle = 2 addChild (ennemi1) laisse ennemi2 = SKSpriteNode ( imageNamed: "ennemi2") ennemi2.position = CGPoint (x: size.width - 100, y: 300) ennemi2.zRotation = 3.14 * 90/180 addChild (ennemi2)
Ici on crée deux SKSpriteNodes, Ennemi n ° 1 et ennemi2. Nous avons mis le xScale sur Ennemi n ° 1 à 2 et changer le zRotation sur ennemi2 faire pivoter par 90 degrés. (Le zRotation property prend les valeurs en radians et une valeur positive indique une rotation dans le sens antihoraire.)
Nous avons expérimenté la modification de quelques propriétés sur un sprite. Consultez la documentation de SKNodes et de SKSpriteNodes et essayez de modifier quelques-unes des autres propriétés pour voir leurs effets..
Les nœuds de sprite conviennent aux rectangles et aux textures de base, mais il faudra parfois une forme plus complexe. le SKShapeNode a vous couvert dans ces cas. Nous allons examiner les nœuds de forme.
Un autre noeud utile est le SKShapeNode. Ce nœud restitue une forme définie par un chemin Core Graphics. SKShapeNodes sont utiles pour les contenus difficiles à réaliser avec un SKSpriteNode. Cette classe nécessite plus de mémoire et est moins performante que d’utiliser un SKSpriteNode, de sorte que vous devriez essayer de l'utiliser avec parcimonie.
Pour assigner une forme à SKShapeNode, vous pouvez définir un CGPath au noeud chemin propriété. Cependant, quelques initialiseurs offrent des formes prédéfinies telles que des rectangles, des cercles et des ellipses. Créons un cercle en utilisant l'initialiseur de commodité init (circleOfRadius :).
Ensuite, ajoutez ce qui suit au bas de la didMove (to :) méthode.
override func didMove (pour afficher: SKView) … let circle = SKShapeNode (circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint (x: size.width / 2, y: 400) addChild (cercle)
Nous changeons quelques propriétés sur le nœud de la forme, le positionnons et l'ajoutons à la scène. Il est très facile d'utiliser les initialiseurs de forme prédéfinis. Cependant, créer un complexe CGPath prend manuellement une quantité de temps considérable et n’est pas pour les âmes sensibles, car cela implique généralement des calculs complexes.
Heureusement, il existe un outil qui vous permet de dessiner des formes visuellement et d’exporter leurs CGPath comme code Swift. Consultez PaintCode si vous voulez en savoir plus.
Les nœuds Sprite et Shape Nodes couvrent la plupart des cas, mais vous pouvez parfois souhaiter afficher des vidéos dans vos applications. le SKVideoNode, que nous verrons ensuite, a vous couvert.
Le dernier noeud que nous allons examiner est le SKVideoNode. Comme son nom l'indique, ce nœud vous permet de lire des vidéos dans vos jeux..
Il y a plusieurs façons de créer un SKVideoNode. On utilise une instance d'un AVPlayer, une autre utilise simplement le nom d'un fichier vidéo stocké dans l'ensemble d'applications, et la troisième consiste à utiliser un URL.
Une chose à garder à l'esprit est que la vidéo est Taille La propriété sera initialement la même que la taille de la vidéo cible. Tu peux changer ça Taille propriété, cependant, et la vidéo sera étirée à la nouvelle taille.
Une autre chose à prendre en compte est que le SKVideoNode des offres jouer() et pause() méthodes seulement. Si vous souhaitez plus de contrôle sur vos vidéos, vous devez initialiser une SKVideoNode avec un existant AVPlayer et l'utiliser pour contrôler vos vidéos.
Utilisons la méthode la plus simple pour créer un SKVideoNode. Ajouter ce qui suit au bas de la didMove (to :) méthode.
override func didMove (pour afficher: SKView) … let video = SKVideoNode (fileNamed: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild (vidéo) video.play ( )
Ici nous avons utilisé l'intiailizer init (fileNamed :) créer une vidéo. Vous transmettez le nom de la vidéo avec l'extension. Je n'ai pas inclus de vidéo avec le code source du projet, mais si vous voulez voir ce travail, vous pouvez ajouter une vidéo intitulée "video.mov"à votre projet.
Ceci termine notre étude sur les nœuds. Après avoir lu cet article et le précédent, vous devriez avoir une bonne compréhension de SKNodes et leurs sous-classes. Dans la prochaine partie de cette série, nous examinerons SKActions et en utilisant la physique dans nos jeux. Merci d'avoir lu, et je vous verrai là-bas!
En attendant, découvrez certains de nos autres cours et tutoriels sur la création d'applications iOS avec Swift et SpriteKit..
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..
Accentsconagua