Construire un jeu Whack Groundhog - Création d'interface

Dans cette série de didacticiels, nous allons créer un jeu Whack-a-Groundhog. L'objectif du jeu est de taper sur les marmottes avant qu'elles ne disparaissent. Continuer à lire!


1. Écran d'introduction

L’écran d’introduction permettra à l’utilisateur de définir certaines options ou de commencer à jouer..


2. Écran Options

L’écran des options permet à l’utilisateur d’activer / désactiver la musique et de choisir la vitesse à laquelle les marmottes apparaissent.


3. Écran de jeu

L'écran de jeu est l'endroit où se déroule toute l'action. Les marmottes sortent au hasard de leurs trous,
et le joueur essaie de les "frapper" avant qu'ils ne retournent à l'intérieur. Le joueur peut également accéder à l'écran des options à partir d'ici.


4. Nouveau projet

Ouvrez le simulateur Corona et choisissez "Nouveau projet".

Sur l'écran qui suit, choisissez les paramètres suivants:

Appuyez sur la "Suivant"bouton, puis choisissez ouvert dans l'éditeur. Cela va ouvrir "Main.lua"dans votre éditeur de texte par défaut.


5. Configuration du projet

Ouvert "Config.lua"et supprimez tout. Mettez à jour le fichier avec les éléments suivants:

 application = contenu = largeur = 320, hauteur = 480, échelle = "letterBox", fps = 30,

Ceci définit la largeur, la hauteur, l'échelle et le FPS par défaut du projet. Le "letterBox"paramètre d'échelle signifie que l'application sera mise à l'échelle dans les deux directions aussi uniformément que possible. Si nécessaire, le jeu affichera" Letter Boxed ", comme vous le voyez dans certains films DVD ou avec d'anciennes applications sur un iPhone 5..


6. Masquer la barre d'état

Nous ne voulons pas que la barre d'état apparaisse dans notre application, alors entrez ce qui suit "Main.lua":

 display.setStatusBar (display.HiddenStatusBar);

7. Variables locales

Ce sont toutes les variables que nous allons utiliser dans ce jeu. Lisez les commentaires pour comprendre à quoi sert chacun.

 local allGroundHogs =  - Table contenant toutes les marmottes local groundHogXPositions = 240 410 10 280,145 429,80,208,366 local groundHogYPositions = 259 259 209,184,166,118,91,99 local gameScreenGroup - groupe qui conserve le contenu de la session, le groupe qui conserve le contenu de la session, le groupe qui conserve le contenu de la session, le groupe qui conserve le contenu de la session, le groupe qui conserve le contenu de la session, le groupe qui conserve le contenu de la session, le groupe qui conserve l’écran, la couche protectrice locale. screen local optionsScreenGroup - groupe qui contient les options screen locales isPlaying = false - que le joueur ait démarré le jeu ou pas groundHogTimer local - le minuteur utilisé pour générer la groundhogs local groundHogSpeed ​​= 1500

8. SetUpIntroScreen ()

le setUpIntroScreen () la fonction est utilisée pour configurer le premier écran auquel l'utilisateur sera présenté.

 fonction setUpIntroScreen () end

9. SetUpOptionsScreen ()

le setUpOptionsScreen () fonction prend en charge la configuration de l'écran des options.

 fonction setUpOptionsScreen () end

10. SetUpGameScreen ()

le setUpGameScreen () fonction configure l'écran de jeu.

 fonction setUpGameScreen () end

11. GetRandomGroundHog ()

le getRandomGroundHog () fonction sélectionne une marmotte au hasard à apparaître dans l'un des trous.

 fonction getRandomGroundHog () end

12. GroundHogSpriteListener ()

Cette fonction est utilisée pour dire quand l'animation de la marmotte est terminée.

 function groundHogSpriteListener (event) end

13. GroundHogHit ()

le groundHogHit (e) fonction est utilisée pour dire quand le joueur a tapé une marmotte.

 function groundHogHit (e) fin

14. SoundComplete ()

Lorsque la musique cesse de jouer, nous utilisons cette fonction pour la redémarrer..

 function soundComplete () end

15. Mise en place du jeu BackGround

Dans cette étape, nous allons commencer à configurer l’écran de jeu. Entrez le code suivant à l'intérieur du setUpGameScreen () fonction que vous avez entrée à l'étape ci-dessus.

 gameScreenGroup = display.newGroup () local gameBackground = display.newImage ("background.png", true); gameScreenGroup: insert (gameBackground)

Tout en bas de "main.lua", entrez les informations suivantes:

 setUpGameScreen ()

Si vous testez maintenant, vous devriez voir le fond du jeu.


16. Configuration de la feuille d'image

Les marmottes sont animées à l'aide d'une feuille de sprite. Entrez ce qui suit sous la ligne gameScreenGroup: insert (gameBackground) que vous avez entré dans l'étape ci-dessus.

 options locales = width = 142, height = 91, numFrames = 7 imageSheet local = graphics.newImageSheet ("groundhogsheet.png", options)

le options variable est une table contenant les options de la feuille d’image. le largeur et la taille sont la largeur et la hauteur des images dans le "groundhogsheet.png", et le numFrames est égal au nombre d'images dans le .png


17. Données de séquence

Maintenant que nous avons notre imageSheet configuration nous pouvons configurer les animations. Les données d'animation (séquence) sont conservées dans une variable sequenceData. Entrez ce qui suit sous le code ci-dessus.

 séquence localeData = nom = "show", début = 2, compte = 3, temps = 1000, loopCount = 0, loopDirection = "bounce"

Ici nous nommons la séquence "show", la début est le "cadre" de la imageSheet sur lequel la séquence commence et compter est le nombre d'images dans la séquence.

le loopCount est le nombre de fois que vous souhaitez que la séquence soit lue. Zéro signifie pour toujours, et le boucleDirection Voici comment vous voulez que la séquence soit jouée. L'option de rebond signifie jouer en avant, puis en arrière.


18. Sprites GroundHog

Avec le imageSheet et sequenceData configuration, nous pouvons placer nos marmottes et les animer. Entrez le code suivant sous le sequenceData vous avez entré dans l'étape ci-dessus.

 local tempGroundHog.x = groundHogXPositions do tempGroundHog = display.newSprite (imageSheet, sequenceData) tempGroundHog.x = groundHogXPositions [i] tempGroundHog.y = groundHogYPositions [i] tempGroundHog: défini comme élément de base, son article sur le produit, table.insert (allGroundHogs, tempGroundHog) tempGroundHog: play () end

A chaque boucle, nous créons un nouveau tempGroundHog Sprite, définir ses X un y positions, réglez la séquence sur "montrer", insérez-la dans le gameScreenGroup, puis insérez-le dans le allGroundHogs table.

Si vous testez maintenant, vous devriez voir toutes les animations de la marmotte jouer. Cela semble un peu faux, et c’est quelque chose que nous corrigerons dans la prochaine partie de cette série.!


Conclusion

Ceci met fin à la première partie de cette série. Dans la prochaine partie, nous terminerons l'animation de la marmotte et compléterons la logique du jeu. Merci d'avoir lu et restez à l'écoute!