Créer un jeu de réflexion basé sur la physique - Création d'interface

Dans cette série de didacticiels, je vais vous montrer comment créer un jeu de puzzle basé sur la physique dans Corona SDK. Vous en apprendrez plus sur la manipulation de la physique et les commandes tactiles. L'objectif du jeu est de faire entrer la balle dans le conteneur en tapotant les cases appropriées. Continuer à lire!


Aussi disponible dans cette série:

  1. Créer un jeu de réflexion basé sur la physique - Création d'interface
  2. Créer un jeu de réflexion basé sur la physique - Ajouter une interaction

1. Aperçu de l'application

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

Le joueur pourra utiliser l'écran tactile de l'appareil pour supprimer les cases de la scène. Vous pouvez modifier les paramètres dans le code pour personnaliser le jeu..


2. Dispositif cible

Nous allons d’abord sélectionner la plateforme sur laquelle nous voulons exécuter notre application. Cela nous permettra de 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 PPI
  • iPhone / iPod Touch: 320x480px, 163 PPI
  • iPhone / iPod Retina: 960x640px, 326 PPI
  • iPhone 5 / iPod Touch: 1136x640, 326 PPI

Comme Android est 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 PPI
  • 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, en la développant spécifiquement pour la distribution sur un iPhone / iPod touch. Le code présenté ici devrait s’appliquer également au développement Android avec le SDK Corona..


3. interface

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

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… fonctionner dans le Aperçu application 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 rendre l'application en plein écran sur tous les périphériques. C'est 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é et préparez-vous à écrire votre superbe application. 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'un Classe. Si tu sais ActionScript ou Java, vous trouverez la structure 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. Physique d'importation

Nous utiliserons la bibliothèque de physique pour gérer les collisions. Utilisez le code ci-dessous pour l'importer.

 -- Physique physique locale = requiert ('physique') physics.start ()

10. Contexte

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

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

11. Vue 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

12. Credits Voir

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

 -- [CreditsView] crédits locauxVoir

13. Boites

Les cases créent le niveau. Il y a trois tailles dans cette application.


14. Message d'instructions

Un message d'instructions apparaîtra au début de la partie. Ça va être tweened après deux secondes.

 -- Instructions locales ins

15. Ball

Ceci est le graphique de la balle. L'objectif du jeu est de mettre cet objet dans la zone de but.

 -- Balle balle locale

16. Boîte à objectifs

Ce code stocke le graphique de la boîte de but.

 -- Boîte de but gBox locale

17. Alerte

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

 -- Alerte locale alertVoir

18. 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 locaux win = audio.loadSound ('win.caf')

19. Variables

Ce sont les variables que nous allons utiliser. Lisez les commentaires dans le code pour en savoir plus..

 -- Variables locales lvlImg - stocke le titre de l'image du niveau actuel

20. 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 =  addBox local =  local removeBox =  local onCollision =  local alert = 

21. constructeur

Ensuite, nous allons créer la fonction qui initialisera toute la logique du jeu..

 fonction Main () - code… fin

22. Ajouter une vue du titre

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

 function Main () titleBg = display.newImage ('titleBg.png', 84, 12) playBtn = display.newImage ('playBtn.png', 220, 150) creditsBtn = display.newImage ('creditsBtn.png', 204, 202) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end

La prochaine fois…


Dans cette partie de la série, nous avons découvert 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 niveau, la détection de collision et les dernières étapes avant la publication. Nous allons passer en revue les applications, créer un écran de démarrage, ajouter une icône et enfin construire l'application. Restez à l'écoute pour la dernière partie!