Share
Ce tutoriel va vous apprendre à utiliser le framework Sprite Kit pour créer un jeu de faits basé sur des questions. Il est conçu pour les utilisateurs novices et avancés. En cours de route, vous appliquerez le noyau du kit Sprite. La série The Facts Game est divisée en trois tutoriels afin de couvrir complètement chaque sujet.
Cette série est divisée en trois tutoriels: Configuration du projet, Création d'interface et Logique de jeu. Chaque partie produira un résultat pratique et la somme de toutes les parties produira le jeu final. Après la série en trois parties, les lecteurs seront en mesure de créer un simple jeu de questions / réponses comportant des sons, des animations, des menus, des règles, des minuteries et une interaction UIKit. Bien que chaque partie puisse être lue indépendamment, pour une meilleure compréhension, nous vous suggérons de suivre les tutoriels dans l’ordre. Nous avons également inclus le code source de chaque partie séparément, ce qui permet de lancer le didacticiel dans n’importe quelle section..
A la fin de ce tutoriel, le résultat ressemblera à ceci:
Recommencer du début SpriteKit Projet Xcode et nommez-le Faits. Les informations de déploiement utilisées dans les trois parties sont les suivantes:
Notez que les quatre cadres suivants sont automatiquement inclus dans le projet: CoreGraphics, UIKit, SpriteKit, et Fondation. Vous verrez trois classes, une image (Spaceship.png) et un Tableau principal fichier. Vous pouvez supprimer l'image car vous ne l'utiliserez pas.
Maintenant ouvrez le Myscene.m et commenter l'ensemble -(void) toucheBegan: (NSSet *) touche avecEvent: (UIEvent *) événement méthode. Vous n’avez pas besoin de créer un geste de tapotement dans cette scène car vous utiliserez plusieurs UIKit UIButtons pour l'interaction de l'utilisateur.
Commencez par changer la couleur de fond du SKScene en changeant le self.backgroundColor Propriétés. Notez qu'il utilise un SKColor objet avec trois propriétés pour les composants rouge, bleu et vert. Maintenant changer le myLabel texte à "faits !!" ou à tout autre titre de votre intérêt.
La prochaine étape consiste à ajouter les ressources nécessaires à votre projet. trouvez-les dans le dossier Ressources. Bien que vous n'utilisiez pas toutes les ressources maintenant, vous devriez toutes les ajouter. Puisque vous utiliserez le framework UIKit, ajoutez une méthode spécifique -(void) didMoveToView: (SKView *) voir qui détecte si la transition de scène s’est produite sans problème. Si aucun problème ne se produit, l'application charge les ressources sur l'écran. Ajoutez cette méthode à votre code. À l'intérieur, vous déclarerez trois boutons: un pour démarrer le jeu, un pour les options et le dernier pour quitter l'application..
Ajouter trois UIButtons à ton MyScene.m. Il ressemblera à ceci:
@implementation MyScene UIButton * startButton; UIButton * optionsButton; UIButton * exitButton;
Chaque bouton a des configurations spécifiques concernant l'emplacement et la taille du cadre, la couleur d'arrière-plan et l'image d'arrière-plan. Vous devriez essayer de créer un UIButton et l'ajouter à la vue de la scène. Les boutons doivent ressembler à l'extrait suivant:
-(void) didMoveToView: (SKView *) view startButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; startButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame), 200, 70.0); startButton.backgroundColor = [UIColor clearColor]; [startButton setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; UIImage * buttonImageNormal = [UIImage imageNamed: @ "StartBtn.png"]; UIImage * strechableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [startButton setBackgroundImage: strechableButtonImageNormal forState: UIControlStateNormal]; [self.view addSubview: startButton]; optionsButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; optionsButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +90, 200, 70.0); optionsButton.backgroundColor = [UIColor clearColor]; [optionsButton setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; UIImage * buttonOptionsImageNormal = [UIImage imageNamed: @ "OptionsBtn.png"]; UIImage * strechableButtonOptionsImageNormal = [buttonOptionsImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [optionsButton setBackgroundImage: strechableButtonOptionsImageNormal forState: UIControlStateNormal]; [self.view addSubview: optionsButton]; exitButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; exitButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +180, 200, 70.0); exitButton.backgroundColor = [UIColor clearColor]; [exitButton setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [exitButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [self.view addSubview: exitButton];
Courir le projet et voir la nouvelle interface racine. Si vous le souhaitez, vous pouvez ajuster l'emplacement, la taille et la position des objets d'interface. Si vous voulez en savoir plus sur le SKLabelNode ou UIButton, Je vous conseille de jouer un peu plus avec ces cours. L'interface doit ressembler à l'image suivante:
Il est maintenant temps d'ajouter plus de classes à votre projet.
Puisque vous avez ajouté plusieurs boutons, il est maintenant temps de les utiliser pour rediriger l'utilisateur vers une autre interface. Ajoutez deux nouvelles classes. Choisir Fichier> Nouveau> Fichier et Objectif c classe. Nommez les classes FactsScene et OptionsScene. Notez que les deux seront une super-classe de SKScene.
Quatre nouveaux fichiers sont disponibles dans votre projet: FactsScene.h, FactsScene.m, OptionsScene.h, et OptionsScene.m. Notez que les fichiers d'implémentation des deux classes sont presque vides. Par conséquent, vous devez ajouter les initialiseurs de classe. Pour les deux classes, utilisez le -initWithSize: méthode. Essayez de l'ajouter vous-même. Si vous rencontrez des problèmes, l'extrait suivant vous aidera:
-(id) initWithSize: (CGSize) taille if (self = [super initWithSize: size]) NSLog (@ "Opstions Scene"); retourner soi-même;
Encore une fois, vous devriez l'appliquer pour les deux classes. Maintenant que vous avez les initialiseurs de classe, il est maintenant temps de modifier le UIButton code de la dernière étape pour changer de classe. Revenir à MyScene.m et importez les deux classes dans la section import:
#import "OptionsScene.h" #import "FactsScene.h"
Maintenant dans le Bouton Start, optionsBouton, et sortieButton, vous devez ajouter une action personnalisée. A chaque bouton, ajoutez la ligne de code correspondante.
[startButton addTarget: action propre: @selector (moveToGame) forControlEvents: UIControlEventTouchUpInside]; [optionsButton addTarget: action propre: @selector (moveToOptions) forControlEvents: UIControlEventTouchUpInside]; [exitButton addTarget: action propre: @selector (endApplication) pourControlEvents: UIControlEventTouchUpInside];
Vous devriez voir trois avertissements ("sélecteur non déclaré"). Ne t'inquiète pas! Il est maintenant temps d'ajouter ces méthodes à votre classe.
-(void) moveToGame - (void) moveToOptions - (void) endApplication
Chacun est responsable d'une action spécifique et le nom de chaque méthode est explicite. le -(void) moveToGame et -(void) moveToOptions les méthodes sont similaires, car les deux sont utilisées pour créer une transition de cette SKScene à un autre. À chaque méthode, vous devez créer un SKScene objet de destination et objet de transition, et présente la nouvelle scène. Notez que puisque vous utilisez des objets UIKit, vous devez également les supprimer de la scène à la fin. SKScene les transitions. Si vous rencontrez des problèmes avec ces étapes, les extraits suivants vous guideront:
-(void) moveToGame NSLog (@ "moveToGame"); FactsScene * factsScene = [[FactsScene alloc] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]]; SKTransition * transition = [SKTransitionvelWithDirection: Durée de SKTransitionDirectionUp: 1]; [startButton removeFromSuperview]; [optionsBoutton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: réalitésScene transition: transition]; - (void) moveToOptions NSLog (@ "moveToOptions"); OptionsScene * optionsScene = [[OptionsScene alloc] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; SKTransition * transition = [SKTransitionveheWithDirection: SKTransitionDirectionLeft durée: 1]; [startButton removeFromSuperview]; [optionsBoutton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: optionsScene transition: transition];
La dernière méthode -(void) endApplication est plus simple puisqu'il n'est utilisé que pour terminer l'application.
-(void) endApplication [startButton removeFromSuperview]; [optionsBoutton removeFromSuperview]; [exitButton removeFromSuperview]; sortie (0);
Il est maintenant temps de Courir le code et tester les nouvelles fonctionnalités. Si tout va bien, vous devriez pouvoir changer la vue par défaut en Nouveau jeu voir et Les options vue. Cependant, vous ne pouvez pas revenir au menu principal. Changeons ça maintenant.
Vos prochaines étapes consistent à ajouter un UIButton au Les options scène, programmez-la pour effectuer une transition dans le menu principal et choisissez de créer (ou non) un effet de transition. Pour ce faire, plusieurs étapes sont nécessaires:
Accentsconagua
-(void) didMoveToView: (SKView *) voir méthode@sélecteur méthodeMyScene.h D'abord, allez au OptionsScene.h et ajouter:
@property (nonatomic, keep) UIButton * backButton;
Maintenant, changez votre attention sur OptionsScene.m. Les extraits pour le pseudo-code sont à ajouter à la didMoveToView méthode, le bouton UIB et la configuration des boutons.
-(void) didMoveToView: (SKView *) view _backButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; _backButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +180, 200, 70.0); _backButton.backgroundColor = [UIColor clearColor]; [_backButton setTitleColor: [WhiteColor UIColor] pourState: UIControlStateNormal]; UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [_backButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [_backButton addTarget: action propre: @selector (moveToHome) forControlEvents: UIControlEventTouchUpInside]; [self.view addSubview: _backButton];
Ensuite, ajoutez le @sélecteur méthode.
-(void) moveToHome MyScene * myScene = [[MyScene alloc] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; [_backButton removeFromSuperview]; [self.scene.view presentScene: myScene];
Courir votre code pour vérifier si tout est opérationnel. Vous pouvez maintenant passer de l'interface racine à la OptionsScene et retour Maintenant, nous pouvons peupler la scène Options.
Les options de jeu permettent à l’utilisateur de modifier les configurations du jeu. Pour l'instant, vous ne vous focaliserez que sur deux options: la musique et le son. Vous devez ajouter un SKLabelNode, une UISwitch, Et un AVAudioPlayer objecter à OptionsScene.h:
@property (nonatomic, keep) IBOutlet UISwitch * musicSwitch; @property (nonatomic, keep) IBOutlet UISwitch * soundSwitch; @property (nonatomic, keep) SKLabelNode * soundTitle; @property (nonatomic, keep) SKLabelNode * musicTitle;
Puis sur le OptionsScene.m à l'intérieur de didMoveToView méthode, allouer les objets comme:
_soundSwitch = [[UISwitch alloc] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) +50, CGRectGetMidY (auto.frame) -26, 100, 100)]; [_ soundSwitch addTarget: action indépendante: @selector (flipMusicAndSound :) pour UIControlEventValueChanged]; [self.view addSubview: _soundSwitch]; _musicSwitch = [[UISwitch alloc] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) +50, CGRectGetMidY (self.frame) +50, 100, 100)]; [_musicSwitch addTarget: action propre: @selector (flipMusicAndSound :) pourControlEvents: UIControlEventValueChanged]; [auto.view addSubview: _musicSwitch]; _soundTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_soundTitle setText: @ "Sound"]; [_soundTitle setFontSize: 40]; [_soundTitle setPosition: CGPointMake (CGRectGetMidX (self.frame) -80, CGRectGetMidY (self.frame))]]; [auto addChild: _soundTitle]; _musicTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_musicTitle setText: @ "Music"]; [_musicTitle setFontSize: 40]; [_musicTitle setPosition: CGPointMake (CGRectGetMidX (self.frame) -80, CGRectGetMidY (self.frame) -80)]; [auto addChild: _musicTitle];
Vous recevrez un avertissement. Pour le corriger, ajoutez le flipMusicAndSound méthode. Cette méthode vérifie l'état de _soundSwitch et _musicSwitch UISwitches et définit une clé par défaut pour chaque propriété à l'aide de NSUserDefaults. Avant de terminer la méthode, vous devez ajouter le NSUserDefaults objet à la classe.
@implementation OptionsScene NSUserDefaults * defaults;
Ensuite, vous devriez le répartir dans le initWithSize méthode comme:
defaults = [NSUserDefaults standardUserDefaults];
Vous êtes maintenant prêt à utiliser les avantages de NSUserDefaults. Vous l'utiliserez pour stocker l'état des propriétés du son et de la musique dans l'ensemble de l'application. Vous pouvez écrire et compléter le flipMusicAndSound méthode. Vous utiliserez le entier valeur 1 pour activer le son et la musique, et 0 sinon. le flipMusicAndSound est inférieure à.
- (IBAction) flipMusicAndSound: (id) expéditeur if (_musicSwitch.on) [defaults setInteger: 1 forKey: @ "music"]; else [[defaults setInteger: 0 forKey: @ "music"]; if (_soundSwitch.on) [par défaut setInteger: 1 pourKey: @ "sound"]; else [defaults setInteger: 0 forKey: @ "sound"];
Si vous Courir le projet et jouer avec les deux commutateurs, vous verrez que chaque fois que vous allez à la OptionsScene les deux commutateurs ont un état par défaut, plutôt que le dernier état défini. Pour changer cela, nous devons lire le NSUserDefaults objet au didMoveToView méthode.
Vous allez définir deux variables pour le son et la musique et vérifier chaque clé de propriété inhérente. C'est un test de décision très simple et logique. Si vous ne savez pas comment faire cela, l'extrait suivant vous aidera:
long soundDefaults = [valeur par défaut integerForKey: @ "sound"]; long musicDefaults = [valeurs par défaut integerForKey: @ "music"]; if (soundDefaults == 1) [_soundSwitch setOn: YES animé: YES]; else [_soundSwitch setOn: FALSE animated: YES]; if (musicDefaults == 1) [_musicSwitch setOn: OUI animé: OUI]; else [_musicSwitch setOn: FALSE animated: YES];
La dernière étape de la OptionsScene.m fichier consiste à supprimer les éléments UISwitch de la vue d'ensemble chaque fois que l'utilisateur appuie sur le bouton Précédent:
[_soundSwitch removeFromSuperview]; [_musicSwitch removeFromSuperview];
Voici une illustration de l'interface Options:
Déplacer vers le FactsScene.m. Nous pouvons maintenant ajouter les éléments sonores et musicaux. Comme avec le OptionsScene, nous devons utiliser NSUserDefaults pour obtenir la valeur pour la musique et le son. Nous aurons également besoin d'un objet pour stocker le chemin de musique et d'un autre pour le lecteur de musique iOS. Nous allons donc les déclarer comme:
@implementation FactsScene NSUserDefaults * defaults; NSString * musicPath;
Aussi dans le FactsScene.h:
@property (nonatomic, strong) AVAudioPlayer * musicPlayer;
Vous devez déclarer (comme vous l'avez fait avec la dernière classe) la méthode -(void) didMoveToView: (SKView *) voir. À l'intérieur, vous devez vérifier si les préférences de musique et de son sont activées et attribuer les préférences de musique. Les deux peuvent être atteints par:
musicPath = [[NSBundle mainBundle] pathForResource: @ "music" ofType: @ "mp3"]; _musicPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL: [fileURLWithPath NSURL: musicPath] error: NULL]; _musicPlayer.numberOfLoops = -1; // boucle pour toujours _musicPlayer.volume = 0.7; long musicFlag = [defaults integerForKey: @ "music"]; if (musicFlag == 1) [_musicPlayer play]; else [_musicPlayer stop];
Le code mentionné ci-dessus ne démarre ou n'arrête la musique que si sa propriété est activée. Nous voulons également créer des sons lorsqu'un tapotement se produit. Nous devons donc saisir les interactions tactiles et réagir en conséquence.
Vous souvenez-vous du -(void) toucheBegan: (NSSet *) touche avecEvent: (UIEvent *) événement méthode de la MyScene.m fichier d'implémentation? Vous allez le définir et l'utiliser ici.
-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event pour (UITouch * touches tactiles) [self touchWillProduceASound: @ "False"];
Notez que le -(void) touchWillProduceASound: (NSString *) answer n'est pas encore déclaré. Le déclarer. Il est utilisé pour tester si une touche donnée est "correcte" ou "incorrecte" (il y en aura plus dans le prochain tutoriel). Il analyse le (NSString *) répondre et produit un son en fonction du contenu de cette NSString.
Le son est créé avec le SKAction objet. Il crée un objet sonore et joue un son spécifique. Encore une fois, cela ne se produit que si la propriété son (donnée par le NSUserDefaults) est sur.
-(void) touchWillProduceASound: (NSString *) answer long soundFlag = [defaults integerForKey: @ "sound"]; if (soundFlag == 1) SKAction * sound; if ([answer isEqualToString: @ "False"]) sound = [SKAction playSoundFileNamed: @ "beep.mp3" waitForCompletion: YES]; NSLog (@ "inside"); [self runAction: sound];
Exécutez le projet et testez la nouvelle musique et les interactions sonores. Activer et désactiver les commutateurs UIS de son et de musique et passer à la scène du nouveau jeu pour les tester correctement.
C'est la fin du premier tutoriel! À ce stade, vous pouvez lancer et configurer un projet SpriteKit, ajouter et initialiser SKScene objets, naviguer entre SKScene objets, interagissez entre les frameworks SpriteKit et UIKit et ajoutez et supprimez des sons et de la musique. Dans les tutoriels suivants, vous aborderez la création d’interface et la logique de jeu..
