Share
Ce tutoriel vous apprendra comment utiliser le framework Sprite Kit pour créer un jeu simple Airplanes. En cours de route, vous apprendrez tous les concepts de base de Sprite Kit: animations, émetteurs, détection de collision, etc.!
Le didacticiel Avions sera divisé en trois parties afin de couvrir complètement chaque section. Après avoir lu le didacticiel en trois parties, les lecteurs seront en mesure de créer un jeu 2D intéressant en utilisant le nouveau framework Sprite Kit fourni avec iOS 7..
Chaque partie produira un résultat pratique et la somme de toutes les parties produira le jeu final. Bien que chaque partie de la série puisse être lue indépendamment, nous vous recommandons de suivre pas à pas pour bien comprendre le sujet présenté. Le code source du jeu est fourni progressivement à chaque publication..
Illustration du résultat final - Kit Sprite. Bienvenue dans la deuxième partie de notre jeu Avions avec Sprite Kit. Dans le tutoriel d'aujourd'hui, vous allez programmer un émetteur qui formera la traînée de fumée d'un avion. Cette partie de didacticiel se concentre sur plusieurs choses, comme les mouvements, les contacts, etc., mais nous expliquerons tout ci-dessous. Si vous n'avez pas encore terminé la première partie de la série, vous pouvez télécharger le projet de la première partie et le récupérer exactement à l'endroit où nous l'avions laissé..
Les particules sont utilisées pour obtenir différents types d'effets comme le feu, la fumée, la magie, la pluie, la neige ou des chutes d'eau. Dans ce cas, nous les utiliserons pour créer une traînée de fumée pour votre avion. La particule restera activée pendant toute la durée de la partie..
Heureusement, Xcode 5 a introduit un éditeur d'émetteur en tant que fonctionnalité intégrée. C’est un outil extrêmement utile qui nous permettra d’éditer facilement des propriétés telles que la texture, la couleur d’arrière-plan, la particule du taux de naissance, le nombre maximal de particules, la durée de vie, la position, la distance, l’angle, la vitesse, l’accélération, l’échelle, la rotation, etc. Par défaut, Xcode 5 fournit également plusieurs émetteurs clés en main prêts à être utilisés. Commençons par ajouter un émetteur à notre jeu..
Les images de particules nécessaires sont disponibles dans le dossier Ressources du téléchargement joint..Pour ajouter un émetteur à votre jeu, vous devez aller à Fichier> Nouveau> Fichier… . Vous verrez quelque chose comme l'image suivante:
Illustration de la création d'un fichier d'émetteur SpriteKit (Xcode). Sélectionnez le iOS> Fichier de ressources et de particules SpriteKit option (comme dans la figure ci-dessus). Cliquez sur Suivant. Maintenant, il vous sera demandé quel modèle vous souhaitez utiliser. Ce sont 8 modèles différents disponibles. Sélectionnez le modèle de fumée et cliquez sur Suivant, puis nommez-le (nous l'appelons "piste") et cliquez sur Créer. Xcode ajoutera deux nouveaux fichiers à votre projet (trail.sks et spark.png). Vous devez modifier le nombre de particules, la texture, la plage de position, l'angle et l'échelle pour obtenir les meilleurs résultats. Regardez notre configuration:
Illustration des propriétés de l'émetteur (Xcode). Ajoutons maintenant la fumée à notre avion.
Dans MyScene.h, ajouter une propriété de sentier de fumée:
@property SKEmitterNode * smokeTrail;
À la fin de if (self = [super initWithSize: size]) conditionnel dans MyScene.m, ajoutez l'extrait suivant:
// ajout de smokeTrail NSString * smokePath = [[NSBundle mainBundle] pathForResource: @ "Smoke" ofType: @ "sks"]; _smokeTrail = [NSKeyedUnarchiver unarchiveObjectWithFile: smokePath]; _smokeTrail.position = CGPointMake (screenWidth / 2, 15); [auto addChild: _smokeTrail];
Bien sûr, lorsque l'avion bouge, le sentier doit aussi bouger. À la fin de -(void) update: (NSTimeInterval) currentTime méthode, ajoutez cette ligne:
_smokeTrail.position = CGPointMake (newX, newY - (_ plane.size.height / 2));
Construisez et gérez le projet et si tout se passe bien, ce sera génial!
Vous devriez voir quelque chose comme ce qui suit:
Illustration des propriétés de l'émetteur (Xcode). Jusqu'à présent, il ne reste plus que l'avion à l'écran. Mais le plaisir commence lorsque plus d'avions sont disponibles. Alors, ajoutons des avions ennemis!
Vous devez non seulement créer des ennemis, mais également définir un chemin aléatoire pour chacun d'eux afin de simuler un véritable champ de bataille. Pour ce faire, vous utiliserez l'action suivre le chemin. Vous créerez des chemins aléatoires (avec CGPath), puis chaque ennemi se déplacera sur ce chemin..
Une excellente méthode que nous devions faire avec Cocos2D était calendrier: intervalle:. Malheureusement, Apple n'a pas ajouté de méthode similaire à Sprite Kit, mais il est facile d'en créer une similaire à l'aide de SKActions. Pour atteindre ce calendrier, nous devons créer un SKAction appeler pour une méthode waitForDuration. Après cela, nous allons créer une SKAction qui peut exécuter un bloc et l’utiliser pour appeler la méthode qui ajoute des ennemis. Ensuite, nous allons mettre ces deux actions sur une séquence et juste dire de le répéter au fil du temps.
Pour recréer l'explication, vous n'aurez besoin que de l'extrait suivant. Ajoutez-le à la fin du si conditionnel if (self = [super initWithSize: size]):
// programme les ennemis SKAction * wait = [SKAction waitForDuration: 1]; SKAction * callEnemies = [SKAction runBlock: ^ [self EnemiesAndClouds]]; ]; SKAction * updateEnimies = [séquence SKAction: @ [wait, callEnemies]]; [self runAction: [SKAction repeatActionForever: updateEnimies]];
Assez facile? Si vous avez des questions, n'hésitez pas à les poser dans la section commentaires.
Maintenant, vous devez ajouter la méthode qui crée les chemins de mouvement pour les ennemis à suivre. Nous avons choisi d'utiliser le CGPathAddCurveToPoint, puisque cette méthode crée une courbe de Bézier avec deux points de contrôle. L'image suivante explique comment cela fonctionne:
Illustration de la création d'une courbe de Bézier (Xcode). Donc, vous devez ajouter le code suivant à notre MyScene.m fichier:
-(void) EnemiesAndClouds // pas toujours venu dans GoOrNot = [self getRandomNumberBetween: 0 to: 1]; if (GoOrNot == 1) SKSpriteNode * ennemi; int randomEnemy = [self getRandomNumberBetween: 0 to: 1]; if (randomEnemy == 0) ennemis = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 1 N.png"]; else ennemi = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 2 N.png"]; ennemi.échelle = 0,6; ennemi.position = CGPointMake (screenRect.size.width / 2, screenRect.size.height / 2); ennemi.zPosition = 1; CGMutablePathRef cgpath = CGPathCreateMutable (); // valeurs aléatoires float xStart = [self getRandomNumberBetween: 0 + ennemis.size.width à: screenRect.size.width-ennemis.size.width]; float xEnd = [self getRandomNumberBetween: 0 + ennemis.size.width à: screenRect.size.width-ennemis.size.width]; // ControlPoint1 float cp1X = [self getRandomNumberBetween: 0 + ennemis.size.width à: screenRect.size.width-ennemis.size.width]; float cp1Y = [self getRandomNumberBetween: 0 + ennemis.size.width à: screenRect.size.width-ennemis.size.height]; // ControlPoint2 float cp2X = [self getRandomNumberBetween: 0 + ennemis.size.width à: screenRect.size.width-ennemis.size.width]; float cp2Y = [self getRandomNumberBetween: 0 to: cp1Y]; CGPoint s = CGPointMake (xStart, 1024.0); CGPoint e = CGPointMake (xEnd, -100,0); CGPoint cp1 = CGPointMake (cp1X, cp1Y); CGPoint cp2 = CGPointMake (cp2X, cp2Y); CGPathMoveToPoint (cgpath, NULL, s.x, s.y); CGPathAddCurveToPoint (cgpath, NULL, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y); SKAction * planeDestroy = [SKAction followPath: cgpath asOffset: NO orientToPath: YES durée: 5]; [auto addChild: ennemi]; SKAction * remove = [SKAction removeFromParent]; [ennemi runAction: [séquence SKAction: @ [planeDestroy, remove]]]; CGPathRelease (cgpath); - (int) getRandomNumberBetween: (int) de à: (int) à return (int) de + arc4random ()% (to-from + 1);
le ennemis et nuages La méthode ajoute seulement Ennemis pour le moment. Nous attendrons d'ajouter des nuages dans la troisième et dernière partie de cette série.
L'essence de cette méthode est de générer des valeurs aléatoires. Tout d'abord, il décidera si un nouvel ennemi sera libéré, puis créera sa position. Ensuite, il crée les points de contrôle de l’ennemi et, finalement, les actions sont créées..
Lorsque nous ajoutons ou supprimons une image-objet à l'écran, nous devons nous assurer que l'allocation de mémoire et la désallocation sont traitées avec soin et avec succès. L'action
Accentsconagua
removeFromParent prend soin de cela pour nous. Maintenant, construisez et exécutez le projet et observez les ennemis commencer à apparaître à l'écran.
Illustration des ennemis (Xcode). Pour que le jeu soit amusant, nos ennemis doivent pouvoir être détruits. Vous allez ajouter quelques balles à votre avion pour y parvenir. Pour ce faire, nous devons procéder comme suit:
Remplace le toucheBegan méthode avec l'extrait suivant:
-(void) toucheBegan: (NSSet *) touche withEvent: (UIEvent *) événement / * Appelé lorsqu'une touche commence * / CGPoint location = [_plane position]; SKSpriteNode * bullet = [SKSpriteNode spriteNodeWithImageNamed: @ "B 2.png"]; bullet.position = CGPointMake (location.x, location.y + _plane.size.height / 2); //bullet.position = location; bullet.zPosition = 1; bullet.scale = 0,8; SKAction * action = [SKAction moveToY: self.frame.size.height + bullet.size.height duration: 2]; SKAction * remove = [SKAction removeFromParent]; [bullet runAction: [séquence SKAction: @ [action, supprimer]]]; [auto addChild: bullet];
Construisez et exécutez votre projet. Si vous voulez tirer une balle, il vous suffit de toucher l'écran!
Vous avez atteint la fin du deuxième tutoriel de notre série.
À ce stade, vous devez comprendre et être capable d'effectuer les tâches suivantes:
Restez à l'écoute pour le prochain épisode de cette série, où nous allons continuer à construire notre jeu d'avion!
Nous voudrions remercier Daniel Ferenčak de nous avoir fourni l’art du jeu utilisé pour produire cette série de tutoriels..
Pour apprécier pleinement la série de tutoriels, nous vous conseillons de tester notre code en le déployant sur un appareil réel exécutant iOS 7. Vous aurez besoin de Xcode 5 et du dernier SDK iOS 7. Si vous ne disposez pas déjà de ces outils, vous pouvez les télécharger à partir du Centre de développement Apple. Une fois téléchargé, installez le logiciel et vous serez prêt à commencer.
