SpriteKit From Scratch Principes fondamentaux

introduction

SpriteKit, disponible sur iOS, tvOS et OS X, est un framework qui permet aux développeurs de créer des jeux 2D de haute qualité sans se soucier de la complexité des API graphiques, telles que OpenGL et Metal. En plus de gérer tous les graphiques pour les développeurs, SpriteKit offre également une vaste gamme de fonctionnalités supplémentaires, notamment la simulation physique, la lecture audio / vidéo et la sauvegarde / chargement de jeux..

Tout au long de cette série, vous apprenez tout sur SpriteKit et acquérez des compétences que vous pouvez ensuite appliquer à tout type de jeu en 2D créé avec cet excellent framework. Dans cette série, nous créons un jeu entièrement fonctionnel dans lequel le joueur contrôle une voiture qui doit éviter les obstacles qui se croisent.

Conditions préalables

Cette série nécessite que vous exécutiez Xcode 7.3 ou une version ultérieure, ce qui inclut la prise en charge de Swift 2.2 ainsi que les SDK pour iOS 9.3, tvOS 9.2 et OS X 10.11.5. Vous devez également télécharger le projet de démarrage depuis GitHub, qui contient les ressources visuelles à utiliser dans le jeu et quelques lignes de code pour nous aider à démarrer..

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..

1. Scènes, nœuds et vues

Des scènes

Le premier cours que vous devez connaître lorsque vous travaillez avec SpriteKit est le SKScene classe. Pour tout jeu 2D construit avec SpriteKit, vous divisez le contenu du jeu en plusieurs scènes, chacune avec leur propre SKScene sous-classe.

Nous examinerons la fonctionnalité et le fonctionnement interne de la SKScene classe plus tard dans cette série, ce que vous devez savoir pour le moment, c’est qu’une scène correspond à ce à quoi vous ajoutez le contenu du jeu et qu’elle joue le rôle de Noeud principal. Cela nous amène aux nœuds.

Nœuds (Sprites)

le SKNode classe, qui SKScene est une sous-classe de, est utilisé pour représenter tout type d’élément dans votre scène. Bien qu'il existe de nombreux types de nœuds disponibles dans SpriteKit, couramment appelés sprites, ils partagent les mêmes propriétés de clé, les plus importantes étant:

• position (CGPoint)
• xScale (CGFloat): représentant l'échelle horizontale d'un nœud
• yScale (CGFloat): semblable à xScale mais il agit à la place dans le sens vertical
• alpha (CGFloat): représentant la transparence du nœud
• caché (Bool): valeur déterminant si le nœud doit être visible ou non
• zRotation (CGFloat): représentant l'angle, en radians, de la rotation du nœud
• zPosition (CGFloat): utilisé pour déterminer quels nœuds doivent être affichés au-dessus des autres nœuds de la scène

Comme vous pouvez le constater, les propriétés ci-dessus vous permettent de positionner, faire pivoter et modifier avec précision l'apparence de base de chaque nœud d'une scène..

Tout comme vous pouvez ajouter des sous-vues à tout UIView objet dans UIKit, dans SpriteKit, vous pouvez ajouter un nombre quelconque de enfant nœuds à un nœud existant. Ceci est fait en utilisant le addChild (_ :) méthode sur tout SKNode objet.

Aussi semblable à UIView Dans les objets, les propriétés de position et d’échelle de tout nœud enfant sont relatives au nœud parent auquel il est ajouté. Voici comment un SKScene objet, étant une sous-classe de SKNode, peut servir de nœud racine de votre scène. Pour tous les nœuds que vous souhaitez dans votre scène, vous devez les ajouter en tant qu’enfants de la scène elle-même à l’aide de la commande addChild (_ :) méthode.

le SKNode classe en elle-même n’est pas capable de produire un contenu visuel. Pour ce faire, vous devez utiliser l’une des nombreuses sous-classes disponibles dans SpriteKit. Certains importants SKNode les sous-classes à connaître sont:

• SKSpriteNode: prend une image et crée un sprite texturé dans votre scène
• SKCameraNode: contrôle la vue depuis votre scène
• SKLabelNode: rend une chaîne de texte
• SKEmitterNode: utilisé conjointement avec un système de particules pour rendre les effets de particules
• SKLightNode: crée des effets d'ombre et d'éclairage dans votre scène

Tout au long de cette série, nous utilisons ces types de nœuds ainsi que d’autres types moins courants..

Des vues

Pour afficher votre contenu SpriteKit dans une application en cours d'utilisation, vous devez utiliser le SKView classe. Ceci est une sous-classe de UIView (ou NSView sur OS X), que vous pouvez facilement ajouter à n’importe quelle partie de votre application. Pour présenter une scène SpriteKit, vous devez appeler soit le presentScene (_ :) ou presentScene (_: transition :) méthode sur un SKView exemple. La deuxième méthode est utilisée lorsque vous souhaitez une animation personnalisée ou une transition dans votre nouvelle scène..

En plus du rendu de votre contenu SpriteKit, le SKView La classe offre également des fonctionnalités supplémentaires très utiles. Cela comprend un Bool propriété appelée en pause, qui peut facilement être utilisé pour mettre en pause ou reprendre une scène.

Plusieurs propriétés sont également utiles lors du débogage de votre jeu et peuvent afficher des informations, telles que le nombre d'images par seconde (FPS) actuel, le nombre de nœuds et les champs physiques de votre scène. Si vous souhaitez consulter toutes les propriétés disponibles, consultez la SKView référence de classe.

2. éditeur de scène

Maintenant que nous avons examiné les classes de base utilisées dans les jeux SpriteKit, il est temps de créer notre toute première scène. Bien que les scènes puissent être créées entièrement par programme, Xcode fournit un excellent outil de modification de scène, qui vous permet de glisser-déposer facilement des nœuds dans votre scène tout en modifiant leur position, leur apparence et d’autres propriétés..

Ouvrez le projet de démarrage et créez un nouveau fichier en appuyant sur Commande + N ou en sélectionnant Nouveau> Fichier…  de Xcode Fichier menu. Choisir la iOS> Ressources> Scène SpriteKit type de fichier et cliquez sur Suivant.

Nommez le fichier MainScene et enregistrez-le. Vous devriez maintenant voir votre nouveau fichier de scène dans Navigateur de projet.

Sélectionner MainScene.sks pour ouvrir l'éditeur de scène de Xcode. Pour le moment, votre scène est vide et sur fond gris. Il n'y a pas encore de nœuds dedans. Avant d'ajouter des sprites à votre scène, nous devons d'abord changer sa taille..

dans le Inspecteur d'attributs à droite, changez la taille de votre scène pour avoir une largeur (W) de 320 points et une hauteur (H) de 480 points.

Cette taille de scène correspond à la plus petite taille d'écran que nous ciblons (écran de 3,5 pouces sur l'iPhone 4s), de sorte que nous puissions dimensionner correctement nos nœuds. Nous modifierons la taille de la scène pour l'adapter à la taille d'écran actuelle du périphérique dans un didacticiel ultérieur..

Pour ajouter des noeuds à votre scène, ouvrez le Bibliothèque d'objets sur la droite. Vous devrez peut-être cliquer sur l’icône surlignée en bleu si le Bibliothèque d'objets n'est pas visible.

Du Bibliothèque d'objets, faites glisser un Sprite de couleur au milieu de ta scène.

Ouvrez le Inspecteur d'attributs à droite et changez le Texture, Position, et Taille attributs aux valeurs suivantes:

Votre scène devrait maintenant avoir une voiture au milieu, comme indiqué ci-dessous.

Notez que, contrairement au système de coordonnées UIKit, dans SpriteKit, le position d'un nœud se rapporte toujours à son centre depuis le point d'origine du coin inférieur gauche de la scène (0, 0). C’est pourquoi il faut régler la position de la voiture sur (160, 120) place le centre de la voiture à 160 points de la gauche et à 120 points du haut.

3. Affichage d'une scène

Avec votre scène terminée pour l'instant, ouvrez ViewController.swift et ajoutez une instruction d'importation pour le framework SpriteKit en haut. Cela nous permet d’utiliser les classes et les API SpriteKit dans ViewController.swift.

importer UIKit importer SpriteKit

Ensuite, mettez à jour la mise en œuvre de la viewDidLoad () méthode du ViewController classe comme suit:

remplacer func viewDidLoad () super.viewDidLoad () let skView = SKView (cadre: self.view.frame) let scene = SKScene (fichierNommé: "MainScene") skView.presentScene (scène) view.addSubview (skView)

Avec ce code, nous créons d’abord un SKView instance, qui est la même taille que la vue du contrôleur de vue. Ensuite, nous chargeons notre scène à partir du fichier que nous avons créé en utilisant le SKScene (fileNamed :) initialiseur. Nous faisons le SKView par exemple présenter cette scène puis l'ajouter en tant que sous-vue à la vue principale.

Sélectionnez le iphone 4s simulateur (afin que notre scène soit correctement dimensionnée pour l'écran) et construisez et exécutez votre application. Vous devriez voir un écran semblable au suivant:

Conclusion

Dans ce premier didacticiel de SpriteKit From Scratch, vous avez appris les bases des vues, des scènes et des nœuds dans SpriteKit. Vous avez créé une scène de base avec une seule image-objet à l'aide de l'éditeur de scènes intégré à Xcode, ce qui facilite la création de scènes par rapport à une programmation complète..

Dans le prochain didacticiel, nous ajouterons davantage de fonctionnalités à notre jeu en utilisant des actions SpriteKit pour déplacer la voiture dans la scène. Vous serez également initié à la simulation physique dans SpriteKit en détectant le moment où la voiture entre en collision avec un autre nœud..

Comme toujours, laissez vos commentaires dans la section commentaires ci-dessous.