Créer un jeu de mémoire sonore - Création d'interface

Dans cette série de didacticiels, je vais vous montrer comment créer un jeu de mémoire basé sur le son avec le SDK Corona. Vous apprendrez à charger et à jouer des sons, ainsi qu'à stocker des informations dans les tables Lua. L'objectif du jeu est de reproduire le niveau sonore en appuyant sur les carrés de couleur. Continuer à lire!


Aussi disponible dans cette série:

  1. Créer un jeu de mémoire sonore - Création d'interface
  2. Créer un jeu de mémoire basé sur le son - Game Logic

1. Aperçu de l'application

En utilisant des graphiques prédéfinis, nous coderons un jeu divertissant à l'aide de Lua et des API Corona SDK.

Le joueur pourra utiliser les boutons à l'écran pour reproduire la séquence sonore en cours. Vous pouvez modifier les paramètres du code pour personnaliser le jeu..


2. Dispositif cible

La première chose à faire est de sélectionner la plate-forme sur laquelle vous souhaitez exécuter notre application. Ainsi, nous pourrons choisir la taille des images que nous utiliserons..

La plateforme iOS présente les caractéristiques suivantes:

  • iPad 1/2 / Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048x1536, 264 ppp
  • iPhone / iPod Touch: 320 x 480 pixels, 163 ppp
  • iPhone / iPod Retina: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Voici quelques-unes des caractéristiques d'écran les plus courantes:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppp
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

Dans ce tutoriel, nous allons nous concentrer sur la plate-forme iOS avec la conception graphique, spécialement conçue pour la distribution sur un iPhone / iPod touch, mais le code présenté ici devrait également s'appliquer au développement Android avec le SDK Corona..


3. interface

Une interface simple et conviviale sera utilisée, elle implique plusieurs formes, boutons, bitmaps et plus.

Les ressources graphiques d'interface nécessaires à ce tutoriel sont disponibles dans le téléchargement ci-joint..


4. Exporter des graphiques

Selon le périphérique que vous avez sélectionné, vous devrez peut-être exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire dans votre éditeur d'images préféré..

J'ai utilisé le Ajuster la taille… fonction dans l'application Aperçu sur Mac OS X.

N'oubliez pas de donner un nom descriptif aux images et de les enregistrer dans votre dossier de projet..


5. Configuration de l'application

Un fichier externe sera utilisé pour que l’application passe en plein écran sur tous les appareils, le config.lua fichier. Ce fichier indique la taille d'écran d'origine et la méthode utilisée pour redimensionner ce contenu si l'application est exécutée dans une résolution d'écran différente..

 application = contenu = largeur = 320, hauteur = 480, échelle = "boîte aux lettres",

6. Main.lua

Ecrivons l'application!

Ouvrez votre éditeur Lua préféré (n'importe quel éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique) et
préparez-vous à écrire votre application géniale. N'oubliez pas de sauvegarder le fichier sous main.lua dans votre dossier de projet.


7. Structure du code

Nous structurerons notre code comme s'il s'agissait d'une classe. Si vous connaissez ActionScript ou Java, la structure vous est familière..

 Necesary Classes Variables et constantes Déclarer des fonctions méthodes de la classe contructor (fonction principale) (autres fonctions) appelle la fonction principale

8. Masquer la barre d'état

 display.setStatusBar (display.HiddenStatusBar)

Ce code masque la barre d'état. La barre d'état est la barre en haut de l'écran de l'appareil qui affiche l'heure, le signal et d'autres indicateurs..


9. Contexte

Un graphique simple est utilisé comme arrière-plan pour l'interface de l'application, la ligne de code suivante le stocke.

 -- Graphiques - [Arrière-plan] local bg = display.newImage ('bg.png')

10. Vue du titre

Ceci est la vue du titre, ce sera le premier écran interactif à apparaître dans notre jeu. Ces variables stockent ses composants..

 -- [Vue titre] local title local playBtn local creditsBtn local titleView

11. Credits Voir

Cette vue montrera le générique et le copyright du jeu, cette variable sera utilisée pour le stocker..

 -- [CreditsView] crédits locauxVoir

12. boutons carrés

Les boutons utilisés pour reproduire le son.

 -- Carrés de couleur local r =  local g =  local ye =  local b = 

13. Message d'instructions

Un message d'instructions apparaîtra au début du jeu. Lorsque le message sera rejeté, la séquence sonore sera jouée..

 -- Instructions locales ins

14. Bouton de vérification

Ce bouton compare les données saisies par l'utilisateur au niveau actuel pour déterminer si la séquence est correcte ou non..

 -- Bouton de vérification locale

15. Alerte

C'est l'alerte qui sera affichée lorsque vous gagnerez la partie. Il va terminer le niveau et terminer le jeu.

 -- Alerte locale alertVoir

16. sons

Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. Les sons utilisés dans cette application ont été générés par AS3SFXR.

 -- Sons rs = audio.loadSound ('1.mp3') gs = audio.loadSound ('2.mp3') ye.s = audio.loadSound ('3.mp3') bs = audio.loadSound ('4.mp3' )

17. variables

Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus sur eux.

 -- Niveaux, modifiez ces tableaux pour modifier ou ajouter plusieurs niveaux, chaque lettre représente un bouton / son, c.-à-d. R = rouge, ye = jaune, etc. local l1 = r, ye, g, b local l2 = ye, r, b, g, b, r, g, ye - Variables locales lastY local currentLevel = l1 local gameTimer locales times = 1 local UserInput =  - stocke les boutons activés local correct = 0

18. Déclarer des fonctions

Déclarer toutes les fonctions comme local au début.

 -- Fonctions local Main =  startButtonListeners local =  showCredits local =  hideCredits local =  showGameView local =  gameListeners local =  localLevel =  local onTap =  checkInput local =  alerte locale =  

19. Constructeur

Nous allons ensuite créer la fonction qui initialisera toute la logique du jeu:

 fonction Main () - code… fin

20. Ajouter une vue du titre

Maintenant, nous plaçons TitleView dans la scène et appelons une fonction qui ajoutera le robinet les auditeurs aux boutons.

 function Main () title = display.newImage ('title.png', 73, 53) playBtn = display.newImage ('playBtn.png', 140, 245) creditsBtn = display.newImage ('creditsBtn.png', 124, 305) titleView = display.newGroup (title, playBtn, creditsBtn) startButtonListeners ('add') end

La prochaine fois…

Dans cette partie de la série, vous avez appris l'interface et la configuration de base du jeu. Dans la prochaine et dernière partie de la série, nous allons gérer la création de niveaux, la comparaison de tables et les dernières étapes à suivre avant la publication, telles que le test d'application, la création d'un écran de démarrage, l'ajout d'une icône et enfin la construction de l'application. Lire la dernière partie maintenant!