Share
Bienvenue à la troisième partie de notre jeu de coureur sans fin! Ce tutoriel va expliquer comment créer des sprites via des feuilles de sprite et l'animation de notre personnage de jeu. Jusqu'à présent dans notre jeu, nous devrions avoir une belle vue avec trois couches d'images défilant à différentes vitesses, ce qui donne un impressionnant défilement parrallax! La prochaine étape logique pour nous consistera à ajouter notre héros au jeu. Nous allons le faire en deux étapes. Ce tutoriel couvrira la première étape. Le prochain tutoriel couvrira en fait l'ajout du héros dans notre jeu existant et l'ajout de contrôles lui permettant de suivre chacune de nos commandes..
Maintenant, avant de commencer le jeu, parlons rapidement des sprites, des feuilles de sprite et de l'animation en termes généraux. Si vous avez de l'expérience en matière de graphisme, d'animation ou de développement de jeux, ce sujet vous est probablement familier. Cependant, pour notre discussion, nous allons supposer que vous n’avez aucune expérience des sujets mentionnés ci-dessus. Commençons par l'animation. L'animation dans les jeux est faite exactement de la même manière que dans les dessins animés et les films. Pensez à ce qui se passe lorsque vous allez au cinéma et que le film commence. Lorsque vous regardez le film, vous ne regardez pas réellement les gens bouger et parler, mais vous regardez une série d’images clignotantes avec un son joué en même temps sur la bobine, donnant l’illusion que vous regardez quelque chose qui est vivant et respiration. C'est la même chose qui se passe avec nos jeux. Nous créons l'illusion de "vie" en faisant clignoter rapidement des images à l'écran. Lorsque cela est fait assez rapidement, cela devient une animation fluide. La question est donc de savoir comment intégrer ces animations fluides dans notre jeu. La réponse est d'utiliser des sprites. Corona SDK fournit les fonctionnalités des images-objets. La seule chose dont nous devons nous préoccuper est de créer nos images-objets et de leur attribuer nos animations. Regardez le gif animé ci-dessous:
Lorsque vous voyez cette animation, cela ressemble à un petit monstre qui court et agite les bras. Ce que vous regardez vraiment est une série d’images, tirées d’une seule feuille de sprite, clignotant encore et encore. Notez que la dernière image de la séquence n'est pas incluse dans l'animation. C'est une simple feuille de sprite, et c'est ainsi que vous allez configurer les images pour votre jeu..
Ainsi, la question de savoir précisément pourquoi nous utilisons des feuilles de sprite a probablement surgi dans votre esprit. La réponse est double et assez simple: mémoire et simplicité. Je veux que vous regardiez les quatre images que j'ai faites ci-dessous. Tout très simple, design à damier (bien que les sprites soient très petits, ils ne semblent pas l'être, mais ouvrez-les dans n'importe quel programme et effectuez un zoom avant et vous verrez le damier: D), avec des tailles allant de 8x8 jusqu'à 256x256.
La première raison, la mémoire, deviendra très apparente si vous téléchargez les images et regardez leur taille. Remarquez la différence de taille entre le format 8x8 et 256x256. Si vous ne voulez pas les télécharger, je vous épargnerai 30 secondes..
Supposons que toutes nos images auront une dimension de 16 x 16 pixels (bien sûr, cela n’est pas réaliste, mais notre exemple s’applique également à des images beaucoup plus volumineuses). Les images sont au format 16x16 et occupent 2,74 Ko chacune. Disons que nous avons 256 sprites qui composent notre personnage. Parmi ces images, il peut s'agir de marcher dans différentes directions, de sauter, de tirer avec une arme ou de faire autre chose que vous voudriez que vos personnages fassent. Si nous devions les placer dans des fichiers PNG 16x16 individuels (le format PNG étant un format courant pour les jeux sur mobile car ils ont une très petite empreinte mémoire), il faudrait jusqu'à 701,44 Ko pour contenir toutes les images. Cela ne semble pas si grand parce que la plupart des appareils ont beaucoup de mémoire, non? Oui, mais rappelez-vous que nous allons probablement avoir des centaines d'images de ce type dans notre jeu. Malgré cela, 701K pour une petite image sur un appareil mobile est beaucoup trop gros. Sur l'iPhone, la plupart des petits jeux tentent de rester en dessous de 20 Mo car c'est le fichier le plus volumineux que vous pouvez télécharger en 3G. Les fichiers plus volumineux doivent être créés via WiFi ou téléchargés via iTunes. Si vous pensez qu'une limite de 20 Mo est mauvaise, elle était auparavant de 10 Mo! Voyons maintenant pourquoi il est avantageux de grouper nos sprites dans des feuilles de sprite..
Disons que vous mettez ces 256 sprites 16x16 sur une seule feuille de sprite. Quelle taille pensez-vous que le fichier résultant serait? Si vous avez téléchargé les fichiers et examiné les tailles, vous savez que l’image 256x256 n’est que de 3,42 Ko! C'est une économie de 698.02KB! Mais comment est-ce possible!?! La réponse tient à la manière dont les images sont compressées et à l’échelle, ainsi qu’à d’autres aspects techniques dans lesquels nous n’allons pas nous intéresser. La chose importante à retenir est que doubler une image en taille ne double pas nécessairement en mémoire. En fait, si vous regardez les autres tailles des images, vous remarquerez que la taille des images allant du 16x16 au 128x128 ne se déplace que de 2,98 Ko, et celle de 256 x 256 de 3,43 Ko! Je sais, vraiment bien!?!
La deuxième raison pour laquelle nous faisons cela est par souci de simplicité. Les feuilles de Sprite fournissent un moyen agréable d'organiser toutes nos images. Si vous avez déjà joué à un jeu sur Atari, NDA, Sega Saturn, SNES, Gameboy ou à peu près tout ce qui est en 2D, vous avez déjà vu des feuilles de sprite au travail. Certains de ces jeux contiennent des milliers et des milliers de sprites. Prenez un jeu comme Final Fantasy 3 sur Super Nintendo (que nous savons tous, c’est vraiment Final Fantasy 6, non?). Ils ont des dizaines de personnages, des centaines d'ennemis, des sorts, des objets, des types de terrain et probablement plusieurs dizaines d'autres choses que je laisse de côté. Alors, comment gardent-ils trace de tous ces sprites individuels? Encore une fois, la réponse est des feuilles de sprite. Imaginez qu'au lieu d'avoir des dizaines de sprites ou de feuilles de sprite pour chaque personnage, ils aient toutes les images de chaque personnage sur une feuille. De cette façon, ils ont toujours su exactement à quoi faire référence. La vie devient plus facile lorsque vous travaillez sur de grands projets. Pour une référence rapide, recherchez des images "Finaly Fantasy 6 Sprite Sheets" dans Google et découvrez certaines des feuilles de sprite de Final Fantasy pour avoir une idée de la façon dont elles sont utilisées dans les grands jeux..
Le processus général de création des images-objets avec des animations est un processus assez simple. Ouvrez un fichier vierge et nommez-le main.lua. La première chose à faire est de configurer notre gestionnaire d’images-objets. Allez-y et mettez le code suivant dans:
Accentsconagua
--Cela devrait sembler familier, masque la barre d'état de la vue display.setStatusBar (display.HiddenStatusBar) - "sprite" est ce que nous allons utiliser pour créer nos feuilles de sprite - "require" indique à Corona que nous lançons des appels à fonctions déjà établies dans un autre fichier. "sprite" est déjà intégré à --Corona, nous n'avons donc plus besoin de travailler à cette fin - nous utiliserons sprite en tant que "gestionnaire de sprites" pour créer des spritesheets local sprite = require ("sprite") Comme Corona a déjà effectué la majeure partie du travail pour nous, il nous reste un processus assez simple. Voici ce dont vous devez vous souvenir. À partir de notre gestionnaire de sprite, nous créons une feuille de sprite. À partir de notre feuille de sprite, nous créons des «ensembles». À partir de nos ensembles, nous créons des animations et des objets sprite. Pour que cette méthode de création de feuille d’image-objet fonctionne, chaque image-objet doit avoir la même dimension. Donc, chaque image de notre petit monstre est 100x100. Dans cet exemple, il y a une longue feuille de sprites. Pour que cela fonctionne le mieux et le plus efficacement possible, les feuilles de sprites doivent toujours être réalisées avec des puissances de 2. 2x2, 4x4, 16x16, 32x32, 64x64, etc. Bien sûr, vous n'utiliserez jamais un objet aussi petit que la plupart, mais Cela est vrai jusqu'à 1024x1024. Vous pouvez théoriquement aller encore plus grand que cela, cependant, chaque appareil a une taille de texture maximale et si vous dépassez cette taille, votre application ne pourra pas charger les feuilles de sprite. Par conséquent, avant d’ajouter des feuilles d’image-objet au format 4096x4096, assurez-vous de faire des recherches pour vous assurer que votre appareil cible peut le gérer! Une autre chose à noter est que lorsque vous avez vos images dans un carré, il les lira de la même façon que vous lisiez un livre. De haut en bas, de gauche à droite, comme suit:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
Ainsi, lorsque vous demandez à votre sprite de regarder les images 6 à 12, il saura automatiquement où aller..
Ajoutez ce code à votre projet sous la ligne require:
--créer une nouvelle feuille de sprite cassera l'image que vous avez mise dans des blocs même 100 --by 100, changera ces paramètres à la taille de vos images. Notez que cette méthode --de la création des images-objets ne fonctionne que pour les images-objets de même taille. Il existe d'autres méthodes - pour gérer les images-objets de tailles différentes, mais cela dépasse le cadre de ce tutoriel. local spriteSheet = sprite.newSpriteSheet ("images / monsterSpriteSheet.png", 100, 100) - À partir de notre feuille de sprites, nous créons un spriteSet. C'est ainsi que nous pouvons regrouper différents sprites, ensemble à des fins d'organisation. Disons par exemple que nous avions 2 monstres différents, nous pourrions les mettre dans la même feuille de sprites et créer 2 ensembles de sprites différents contenant chacun les informations pour - leurs images respectives. Cet ensemble d'images-objets contient les sept images de notre image, définies par les valeurs 1 et 7. local monsterSet = sprite.newSpriteSet (spriteSheet, 1, 7). Nous faisons ensuite des animations à partir de nos ensembles d'images-objets. Pour ce faire, indiquez simplement la fonction - quelle fonction nous est assignée, nommez ensuite l'animation, donnez la - image de départ et le nombre d'images dans l'animation, le nombre de millisecondes - nous voulons qu'une animation prenne, et enfin le nombre de fois que nous voulons que le --animation soit exécuté. 0 le fera fonctionner jusqu'à ce que nous disions à l'animation d'arrêter sprite.add (monsterSet, "running", 1, 6, 600, 0) sprite.add (monsterSet, "jumping", 7, 7, 1, 1) - La dernière étape consiste à créer un sprite à partir de notre ensemble de sprites contenant toutes les animations héros local = sprite.newSprite (monsterSet) Maintenant que notre feuille de sprite a été créée et que nous en avons fait un objet, initialisons quelques bases dont nous aurons besoin pour lui..
Ajoutez ceci en dessous du dernier bit de code que vous avez entré:
--trouve le centre de l'écran x = display.contentWidth / 2 y = display.contentHeight / 2 - une variable booléenne indiquant la direction dans laquelle nous nous déplaçons = vrai hero.x = x hero.y = y
Ce code placera notre sprite au centre de l'écran. Ajoutez ensuite ce code:
--utilisez prepare pour indiquer au sprite quelle animation il va utiliser hero: prepare ("running") --calling play lancera l'animation chargée hero: play () Exécutez ce code et notre petit monstre devrait fonctionner au centre de l'écran. C'est vraiment tout ce qu'il y a à créer des sprites animés à partir de feuilles de sprites. Nous les utiliserons un peu plus en profondeur dans les tutoriels suivants. Pour une référence complète sur les feuilles de sprite, vous pouvez consulter la référence Corona SDK. C'est tout ce que nous allons couvrir sur le sujet pour le moment, alors espérons que cela suffira pour vous aider à démarrer! Pour un dernier effet avant de faire courir notre monstre à l’écran, ajoutez le code suivant au bas de votre code:
function update () --si nous courons à droite, continuons à avancer à droite si (à droite), alors hero.x = hero.x + 3 --si nous ne bougeons pas à droite, continuons à nous déplacer à gauche fin - si notre monstre est sorti de l'écran, faites-le tourner - et courez dans la direction opposée. hero.xScale = -1 - retournera notre sprite horizontalement si (hero.x> 380) alors right = false hero.xScale = -1 end if (hero.x < -60) then right = true hero.xScale = 1 end end --call the update function timer.performWithDelay(1, update, -1)
Truc facile. Supprimez tous les commentaires que j'ai faits dans le code pour expliquer les choses et vous verrez à quel point Corona facilite la configuration de jolis sprites animés. Si vous avez des questions ou des commentaires, faites le moi savoir!
