Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Création de jeux en Swift avec SpriteKit

Par Mathieu ROSSETTO Publié le 23/07/2017 à 23:37:03 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

SpriteKit est un framework propre à Apple qui permet de créer des jeux pour iOS (iPhone, iPod Touch et iPad...) en langage Swift.

Créer un jeu est devenu une passion pour certains. De plus, sur l'iPhone (et les smartphones en général), le nombre de jeux vidéo a explosé tellement que ça plait à un grand nombre de personne.

Le framework s'utilise soit en Objective-C, soit en Swift. Je vais vous présenter quelques exemples de jeux que l'on peut tout à fait développer avec la technologie SpriteKit:

Outils nécessaires

Etant donné qu'il s'agit ici de développer des jeux et applications pour iOS, vous aurez besoin d'un Mac (si possible, avec la dernière version de macOS 10.12 - Sierra.)

Il faut également vous procurer l'environnement de développement intégré Xcode qui se télécharge gratuietemt sur le Mac App Store

Bien que vous pouvez développer des applications iOS en les testant sur le simulateur, je vous conseille quand même de tester vos projets sur votre propre iDevice, pour des questions de performances entre autres.

Mise en place d'un nouveau projet

Ouvrez Xcode, et créez un nouveau projet en faisant File > New > Project (ou sinon avec le raccourci clavier Shift + Pomme + N).

Dans product name, mettez le titre du jeu que vous voulez.

Langage: Mettez bien que vous voulez coder en Swift.

Game Technology: Selectionnez bien SpriteKit (car il existe aussi SceneKit, mais le but de ce tutoriel est d'utiliser SpriteKit)

Faites Next, sélectionnez un dossier au choix, puis une belle fenêtre s'ouvre avec différents fichiers déjà en place.

Créer la vue

Ouvrez le dossier GameScene.sks , ceci est la partie visuelle de notre jeu: C'est la scène.

Ensuite, rajoutez un élélement "Color Sprite", puis, dans l'inspecteur, mettez bien un nom à votre élément. On va l'appeller "personnage".

Vous pouvez dessiner comme bon vous semble.

Passons au code !

Remplacez tout le code précédent par celui-ci. On va vous l'expliquer pas à pas.

import SpriteKit
import GameplayKit

class GameScene: SKScene {
    
    var perso = SKSpriteNode()
    var locx = CGFloat()
    var locy = CGFloat()
    
    override func update(_ currentTime: TimeInterval) {
        if(locx > 0) {
            perso.position.x += 1;
        } else if (locx < 0) {
            perso.position.x -= 1;
        }
        if(locy > 0) {
            perso.position.y += 1;
        } else if (locy < 0) {
            perso.position.y -= 1;
        }
    }
    
    override func didMove(to view: SKView) {
        self.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        perso = self.childNode(withName: "perso") as! SKSpriteNode
        perso.color = UIColor.blue
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            locx = touch.location(in: self).x
            locy = touch.location(in: self).y
        }
    }
    
}   
    

Explications

import SpriteKit
import GameplayKit

Ces deux premières lignes sont des directives de pré-processeur. C'est en quelque sorte du code déjà écrit que vous importez dans votre projet. N'y touchez pas, ces 2 imports seront toujojours présents.

class GameScene: SKScene {
	
}

La classe GameScene hérite de de SKScene. Si vous vous y connaissez déjà en orienté-objet, c'est parfait !

class GameScene: SKScene {
	
}

La classe GameScene hérite de de SKScene. Si vous vous y connaissez déjà en orienté-objet, c'est parfait !

var perso = SKSpriteNode()
    var locx = CGFloat()
    var locy = CGFloat()

On a créé 3 variables globales.

La variable perso qui correspond au sprite joueur et est de type SKSpriteNode. Elle va donc correpondre au sprite "personnage" que l'on a rajouté dans l'étape précédente sur la scène.

locx et locy vont correspondre à la position du joueur

    override func didMove(to view: SKView) {
        self.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        perso = self.childNode(withName: "perso") as! SKSpriteNode
        perso.color = UIColor.blue
    }

Cette fonction va préciser que la variable "perso" correspond au sprite perso qu'on a nommé "perso" au niveau de l'inspecteur dans le fichier sks.

Ensuite, on choisir une couleur de fond bleue pour notre personnage.

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            locx = touch.location(in: self).x
            locy = touch.location(in: self).y
        }
    }

Ici, on détecte la position de l'écran à l'endroit où on a touché sur l'écran de l'iPhone et on les enregistre dans les variables locx et locy déclarées précédemment.

    override func update(_ currentTime: TimeInterval) {
        if(locx > 0) {
            perso.position.x += 1;
        } else if (locx < 0) {
            perso.position.x -= 1;
        }
        if(locy > 0) {
            perso.position.y += 1;
        } else if (locy < 0) {
            perso.position.y -= 1;
        }
    }

La fonction update sera éxecutée environ 60 fois par secondes. C'est dans cette fonction que l'on va mettre à jour l'affichage de la position de notre personnage et de tous les éléments mobiles de notre scène.

Les coordonnées (0,0) correspondent au centre de l'écran.

Si on touche l'écran au niveau supérieur droit, le joueur se déplacera en haut à droite de l'écran.

Si on touche l'écran au niveau inférieur droit, le joueur se déplacera en bas à droite de l'écran.

Si on touche l'écran au niveau supérieur gauche, le joueur se déplacera en haut à gauche de l'écran.

Si on touche l'écran au niveau inférieur gauche, le joueur se déplacera en bas à gauche de l'écran.

Créer plusieurs scènes

Vous pouvez sans problème créer autant de scènes que vous le souhaitez. Pour cela, il suffit de faire File > New > File et vous choisissez un fichier de typr Scène SpriteKit.

Pour passer d'une scène à une autre via le code Swift, voici la syntaxe à utiliser:

       let gamescene = GameScene(fileNamed: "GameScene")
        self.scene?.view?.presentScene(gamescene!, transition: SKTransition.crossFade(withDuration: 1.0))

Déployer le jeu sur son iPhone

Si vous avez un compte de développeur chez Apple, vous pouvez sans problème tester votre jeu sur votre iPhone/iPod/iPad, mais en plus vous pouvez les mettre en vente sur l'App Store et attendre que beaucoup de personnes viennent télécharger votre jeu.

Toutefois, si vous n'avez pas de compte développeur, vous pouvez quand même déployer l'application sur votre propre appareil (iPhone, iPad ou iPod Touch). Il faut quand même vous inscrire comme membre sur le portail des développeurs Apple mais sans payer les 99$/an.

https://developer.apple.com/

Une fois ceci fait, il vous suffit de sélectionner votre iPhone sur le menu déroulant en haut de Xcode, d'attendre que les fichiers se mettent en place, puis de cliquer sur le bouton pour compiler. Enfin, vous pourrez lancer votre jeu sur votre propre iPhone.

Conclusion

Dans ce tutoriel, nous avons vu les bases pour créer des jeux pour iPhone en Swift avec SpriteKit. Entre autres, nous avons vu comment déplacer un personnage sur une scène. Si vous souhaitez d'avantage vous perfectionner sur cette technologie, je peux vous recommander la documentation d'Apple qui est très claire à ce sujet.

https://developer.apple.com/documentation/spritekit
A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels