Comment faire un jeu Tile avec Cocos2D 2
Mmm, melons savoureux!
Dans ce tutoriel, 2 parties, nous allons couvrir comment faire un jeu basé sur la tuile avec Cocos2D et l'éditeur de cartes carrelés. Nous allons le faire en créant un jeu simple à base de tuiles où un ninja explore un désert à la recherche de choses délicieuses pastèques!
Dans cette partie du tutoriel, nous allons couvrir comment créer une carte du carrelage au sol, comment ajouter la carte au jeu, comment faire défiler la carte pour suivre le joueur, et comment utiliser les calques d'objets.
Dans la deuxième partie du tutoriel, nous allons couvrir comment faire des zones collidable sur la carte, comment utiliser les propriétés de tuiles, comment faire et modifier des articles de collection la carte dynamique, et comment vous assurer que votre ninja ne pas trop manger.
Ok, donc nous allons avoir du plaisir avec des cartes de tuiles!
Création d'un projet Skeleton
Nous allons commencer par la création d'un projet de squelette pour nous assurer que nous avons tous les fichiers dont nous avons besoin pour le reste du projet au bon endroit.
Remarque: Si vous n'avez pas installé Cocos2d 2.1 RC0 encore, le télécharger ici et à partir d'un terminal exécuter ces commandes:
/Downloads/cocos2d-iphone-2.1-rc0
./install-templates.sh -f -u
Créer un nouveau projet dans Xcode avec l'iOS / cocos2d 2.x / cocos2d modèle iOS et nommez-le TileGame. Sélectionnez les options pour rendre le projet universel et inclure la configuration du dépôt git.
Nous allons utiliser l'ARC dans ce projet, mais par défaut le modèle n'est pas configuré pour utiliser ARC. Heureusement, la fixation, il est vraiment facile. Il suffit d'aller Modifier \ Refactor \ Convertir en Objective-C ARC. Développez le menu déroulant, puis sélectionnez uniquement les quatre derniers fichiers (main.m. AppDelegate.m. HelloWorldLayer.m. Et IntroLayer.m), puis cliquez sur Vérifier et terminer les étapes de l'assistant.
Et c'est tout! Construire et exécuter et assurez-vous que tout fonctionne encore OK - vous devriez voir l'écran normal Bonjour tout le monde.
Ensuite, téléchargez ce fichier zip des ressources pour le jeu. Le fichier zip contient les éléments suivants:
Une fois que vous avez les ressources téléchargées, décompressez et faites glisser le dossier TileGameResources au groupe « Ressources » dans votre projet. Verify « Copier les éléments dans le dossier du groupe de destination (si nécessaire) » est cochée, « Créer des groupes pour tous les dossiers ajoutés » est sélectionné, puis cliquez sur Terminer.
Si tout fonctionne bien, tous les fichiers doivent être répertoriés dans votre projet.
Votre projet devrait ressembler à ceci:
Qu'il est pour l'instant - le temps de vous amuser et de faire notre carte!
Faire une carte du carrelage au sol
Cocos2D prend en charge les cartes créées avec l'open source et carrelée éditeur de cartes enregistrées au format TMX.
Si vous visitez le lien ci-dessus, vous verrez qu'il ya deux versions de tuiles - un écrit avec le cadre de l'application Qt, et un écrit avec Java. Il existe deux versions car a été écrit d'abord carrelé en Java, et ils sont le portage vers Qt.
Quelle est la version que vous utilisez est en grande partie à vous. Dans ce tutoriel, nous allons couvrir en utilisant la version Qt parce que c'est la ligne principale de développement de tuiles à partir de maintenant, mais certaines personnes aiment utiliser la version Java, car toutes les anciennes fonctionnalités ont été entièrement porté sur encore.
Donc, de toute façon - si vous voulez suivre, téléchargez la version Qt et installer et exécuter l'application. Allez dans Fichier \ Nouveau, et remplissez la boîte de dialogue comme suit:
Dans la section d'orientation, vous pouvez choisir entre Orthogonal (pensez: The Legend of Zelda) ou isométriques (pensez: Disgaea). Nous allons prendre Orthogonal ici.
Ensuite, vous arrivez à mettre en place la taille de la carte. Gardez à l'esprit que c'est en tuiles, pas de pixels. Nous allons faire une carte de taille plutôt petite, afin de choisir 50 × 50 ici. Carrelage vous montrera la taille de la carte totale en pixels, au bas de la nouvelle boîte de dialogue de la carte. Ceci est calculé en multipliant la taille de la carte (50 tuiles) par la taille de la tuile (32 px) en hauteur et en largeur.
Enfin, vous spécifiez la largeur et la hauteur de la tuile. Ce que vous choisissez ici dépend du jeu de tuiles que votre artiste fera. Pour ce tutoriel, nous allons utiliser des tuiles d'échantillons qui viennent avec l'éditeur carrelés, qui sont 32 × 32, afin de choisir que.
Ensuite, nous avons pour ajouter le jeu de tuiles que nous allons utiliser pour dessiner notre carte. Cliquez sur « Carte » dans la barre de menu, « New Tileset ... », et remplir la boîte de dialogue comme suit:
Pour obtenir l'image, cliquez sur Parcourir et naviguez dans votre dossier / TileGame TileGameResources et choisissez le fichier tmw_desert_spacing.png que vous avez téléchargé à partir du zip des ressources et ajouté à votre projet. Il remplira automatiquement le nom en fonction du nom de fichier.
Une fois que vous cliquez sur OK, vous verrez les tuiles apparaissent dans la fenêtre Tilesets. Maintenant, vous pouvez commencer à dessiner loin! cliquez simplement sur l'icône « STAMP » dans la barre d'outils, puis cliquez sur une tuile, puis cliquez sur la carte où vous souhaitez placer une tuile.
Alors allez-y et vous dessiner une carte - être aussi créatifs que vous le souhaitez! Assurez-vous d'ajouter au moins un bâtiment couple sur la carte, parce que nous aurons besoin de quelque chose à entrer en collision plus tard!
Certains raccourcis pratiques pour garder à l'esprit:
- Vous pouvez faire glisser une boîte autour d'une série de tuiles dans le sélecteur de tileset, de déposer plusieurs tuiles adjacentes en même temps.
- Vous pouvez utiliser le bouton de peinture dans la barre d'outils pour peindre tout le fond avec une tuile de base.
- Vous pouvez zoomer et dézoomer avec « View \ Zoom avant ... » et « View \ Zoom arrière ... ».
- La touche « z » va maintenant tourner la tuile lors de la modification d'une carte avec l'outil de timbre
Il y a une nouvelle fonctionnalité que vous pourriez avoir remarqué « Mini-carte ». Ceci est une caractéristique impressionnante, il nous allons vous voir un (vous l'aurez deviné) Mini-carte! Jetez un oeil à ma pauvre tentative un labyrinthe dans le fond de la mini-carte ci-dessous. La boîte rouge indique la zone que vous voyez dans la fenêtre d'édition principale.
Gardez ce point de vue mini-carte à l'esprit quand on parle de défilement dans la section suivante.
Une fois que vous avez terminé dessiner la carte, cliquez deux fois sur la couche dans les couches (qui dit probablement « Carreleur 1 » en ce moment), et de changer le nom de « arrière-plan ». Cliquez ensuite sur « Fichier \ Enregistrer » et enregistrez le fichier à TileGame \ TileGameResources dans le projet TileGame et nommez le fichier « TileMap.tmx ».
Nous allons faire un peu plus de choses avec poele plus tard, mais pour l'instant nous allons obtenir cette carte dans notre jeu!
Ajout de la carte à notre sol carrelé Scène Cocos2D
Première chose tout d'abord, faites un clic droit sur le groupe TileGameResources, cliquez sur « Ajouter \ Fichiers existants ... » et ajoutez le nouveau fichier TileMap.tmx que vous venez de créer à votre projet.
Ensuite, nous allons désactiver Retina support d'affichage parce que nous n'avons pas l'art de taille rétine.
Effectuez les modifications suivantes à AppDelegate.m:
Ouvrez HelloWorldLayer.h, et remplacer le contenu par le texte suivant:
Remplacez le contenu de HelloWorldLayer.m ce qui suit:
Ici nous faisons un appel au fichier CCTMXTiledMap, le chargeant de créer une carte à partir du fichier carte que nous avons créé avec carrelage au sol.
Un peu d'histoire rapide sur CCTMXTiledMap. Il est un CCNode, de sorte que vous pouvez définir sa position, échelle, etc. Les enfants du nœud sont les couches de la carte, et il y a une fonction d'assistance où vous pouvez regarder le par nom - que nous faisons ici pour obtenir l'arrière-plan. Chaque couche est une sous-classe de CCSpriteSheet pour des raisons de performance - mais cela signifie aussi que vous ne pouvez avoir un tileset par couche.
Donc, tout ce que nous faisons ici est enregistrer une référence à la carte de la tuile et de la couche d'arrière-plan, puis ajouter la carte de tuiles à la couche HelloWorld.
Et c'est tout! Compilez et exécutez le code, et vous devriez voir le coin inférieur gauche de votre carte:
Pas mal! Mais pour que cela soit un jeu, nous avons besoin de trois choses: a) un joueur, b) un point de départ pour mettre le lecteur, et c) pour déplacer notre point de vue afin que nous regardons le joueur.
Et c'est là que ça devient délicat. Alors attaquons-nous à la prochaine!
Carrelés couches d'objets et les carreaux de céramique Carte Position
Carrelage supporte deux types de couches - couches de tuiles (qui est ce que nous avons travaillé avec à ce jour) et des couches d'objets.
couches d'objets vous permettent de dessiner des boîtes autour des parties des cartes pour indiquer les zones où les choses pourraient se produire. Par exemple, vous pourriez faire une zone où les monstres se reproduisent, ou une zone qui est mortelle pour entrer. Dans notre cas, nous allons créer un espace pour notre « Spawn point » pour notre joueur.
Alors, allez à la barre de menu carrelées et choisissez « Layer \ Ajouter une couche d'objet ... », nommez la couche « objets », puis cliquez sur OK. Pour insérer un objet, sélectionnez l'élément Rectangle Insérer (R) de la barre d'outils. Votre couche actuelle est affichée dans le coin inférieur gauche.
Si vous dessinez sur la carte, vous remarquerez qu'il ne tire pas une tuile, au lieu, il dessine un rectangle, que vous pouvez étendre pour couvrir plusieurs tuiles ou de se déplacer. Dans la dernière version de tuiles vous pouvez également dessiner d'autres types de formes d'objets.
Nous voulons juste choisir une tuile pour le joueur de commencer. Donc choisir quelque part sur votre carte et cliquez sur le carreau. La taille de la boîte n'a pas vraiment, puisque nous allons emploierons les coordonnées x, y.
Ensuite, cliquez droit sur l'objet gris que vous venez d'ajouter et cliquez sur « Propriétés de l'objet ». Donnez-lui un nom de « Spawnpoint » et cliquez sur OK:
Soi-disant, vous pouvez obtenir la fantaisie ici et définir le type de l'objet à un nom de classe Cocos2D et il créer un objet de ce type pour vous (comme CCSprite), mais je ne pouvais pas trouver où il a été fait que dans la source code. Mise à jour: Tyler de GeekAndDad.com a souligné que le code utilisé pour être dans une version précédente de Cocos2D, mais il a été retiré en raison de problèmes avec un certain temps.
Quoi qu'il en soit - nous allons juste laisser le type vide, ce qui va créer un NSMutableDictionary pour nous où nous pouvons accéder aux différents aspects de l'objet, y compris les coordonnées x, y.
Enregistrez la carte et revenir à Xcode. Effectuez les modifications suivantes à HelloWorldLayer.m:
Ok, nous allons arrêter pour une seconde et expliquer le bit de la couche d'objet et des groupes d'objets. Notons d'abord que vous récupérez des couches d'objets via la méthode objectGroupNamed sur l'objet CCTMXTiledMap (plutôt que layerNamed). Il retourne un objet spécial CCTMXObjectGroup.
Nous appelons ensuite la méthode objectNamed sur la CCTMXObjectGroup pour obtenir un NSMutableDictionary contenant un tas d'informations utiles sur l'objet, y compris les coordonnées x et y, la largeur et la hauteur. Dans ce cas, tout ce que nous soucions est les coordonnées x, y, donc nous tirer ceux sur et définir que la position de notre sprite joueur.
A la fin, nous voulons définir la vue de se concentrer sur l'endroit où le joueur est. Alors ajoutez maintenant la nouvelle méthode suivante pour HelloWorldLayer.m (partout dans le fichier est bien maintenant en Objective-C):
Ok, nous allons expliquer cela un peu trop. Imaginez cette fonction est mise au centre d'une caméra. Nous permettons à l'utilisateur de passer dans toutes les coordonnées x, y dans la carte ici - mais si vous pensez à ce sujet il y a quelques points que nous ne voulons pas être en mesure de montrer - par exemple, nous ne voulons pas que l'écran d'étendre au-delà des bords de la carte (où il serait juste l'espace vide!)
Par exemple, jetez un oeil à ce schéma:
Voyez comment si le centre de la caméra est inférieure à winSize.width / 2 ou winSize.height / 2, une partie de la vue serait hors de l'écran? De même, nous devons vérifier les limites supérieures aussi bien, et c'est exactement waht que nous faisons ici.
Maintenant, jusqu'à présent, nous avons le traitement de cette fonction comme si elle mettait le centre d'où une caméra était à la recherche. Mais ... ce n'est pas exactement ce que nous faisons. Il y a une façon Cocos2D pour manipuler la caméra d'un CCNode, mais en utilisant qui peut rendre les choses plus difficiles que la solution que nous allons utiliser: déplacer la totalité de la couche à la place.
Jetez un oeil à ce schéma:
Imaginez un grand monde, et nous examinons les coordonnées de 0 à winSize.height / largeur. Le centre de notre point de vue est centerOfView, et nous savons où nous voulons que le centre soit (ActualPosition). Donc, pour obtenir la position réelle de faire correspondre au centre de vue, tout ce que nous faisons est de glisser la carte vers le bas pour correspondre!
Ceci est accompli en soustrayant la position réelle du centre de vue, puis le réglage de la couche de HelloWorld à cette position.
Phew! Assez de théorie - nous allons le voir en action! Compiler et exécuter le projet, et si tout va bien, vous devriez voir votre ninja dans la scène, en vue de lui montrer déplacé pavanant sa substance!
Migrer de Ninja
Nous sommes à un bon départ, mais notre ninja est juste assis là! Et ce n'est pas très ninja-comme.
Faisons en sorte que le ninja se déplacer simplement en le déplaçant dans la direction que l'utilisateur tape. Ajoutez le code suivant à HelloWorldLayer.m:
Tout d'abord, nous avons mis notre couche en contact activée dans la méthode d'initialisation. Ensuite, nous remplaçons la méthode registerWithTouchDispatcher pour nous inscrire pour gérer les événements tactiles Targed. Cela se traduira par des méthodes ccTouchBegan / ccTouchEnded appelés (singulier), au lieu des méthodes ccTouchesBegan / ccTouchesEnded (cas pluriel).
- « Vous n'êtes pas obligé de traiter NSSets, le répartiteur fait le travail de les séparer. Vous obtenez exactement un UITouch par appel. »
- « Vous pouvez * * une réclamation UITouch en retournant OUI à ccTouchBegan. Les mises à jour de touches réclamées sont envoyées uniquement au délégué (s) qui les avait réclamés. Donc, si vous obtenez un vous êtes déplacer / terminé / mise à jour annulée que c'est votre contact. Cela vous libère de faire beaucoup de contrôles lorsque vous faites multi-touch « .
Quoi qu'il en soit, à l'intérieur de notre emplacement ccTouchEnded, nous convertissons l'emplacement pour voir les coordonnées et les coordonnées de GL comme d'habitude. Ce qui est nouveau est que nous appelons [auto convertToNodeSpace: touchLocation].
En effet, l'emplacement de contact nous donnera les coordonnées pour lesquelles l'utilisateur tapé dans la fenêtre (par exemple 100100). Mais nous aurions pu la carte un défilé bon peu afin qu'il corresponde réellement à (800800) par exemple. Donc, appeler cette méthode compense la touche en fonction de la façon dont nous avons déplacé la couche.
Nous ajustons la position du joueur en conséquence, puis mis le centre de point de vue de la position du joueur, que nous avons déjà écrit dans la dernière section!
Donc, compiler et exécuter le projet et l'essayer! Vous devriez maintenant être en mesure de toucher l'écran pour déplacer le ninja autour.
Où aller en partant d'ici?
C'est tout pour cette partie du tutoriel. À ce stade, vous devez connaître les notions de base sur la création de cartes et de les importer dans votre jeu.
Voici un exemple de projet avec le code que nous avons développé jusqu'à présent.
vérifier PROCHAIN partie 2 du tutoriel. où nous montrons comment ajouter la détection de collision dans la carte, pour empêcher notre ninja de marcher joyeusement à travers les murs!
