Créer un jeu inspiré de Lunar Lander - Création d'interface

Dans cette série de didacticiels, vous apprendrez à créer un jeu inspiré de Lunar Lander. L’objectif du jeu est de saisir les étoiles à l’écran puis de se poser en toute sécurité à l’endroit indiqué. Continuer à lire!


Étape 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 frapper une rondelle en faisant glisser la palette sur l’écran. Vous pouvez modifier les paramètres dans le code pour personnaliser le jeu..


Étape 2: périphérique cible

La première chose à faire est de sélectionner la plateforme sur laquelle vous souhaitez exécuter notre application. De cette façon, nous serons en mesure de choisir la taille des images que nous utiliserons..

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

  • iPad 1/2: 1024x768px, 132 ppi
  • iPad 3: 2048x1536, 264 ppp
  • iPhone / iPod Touch: 320 x 480 pixels, 163 ppp
  • iPhone 4 / iPod Touch: 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 didacticiel, nous nous concentrerons 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..


Étape 3: interface

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

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

Police Freedom (gratuit pour un usage commercial). Moon and Rocket Graphics à partir de openclipart.org.


Étape 4: Exporter des graphiques

Selon le périphérique sélectionné, vous devrez peut-être exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire dans votre éditeur d'image 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..


Étape 5: le son

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.


Étape 6: 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",

Étape 7: Main.lua

Ecrivons l'application!

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


Étape 8: 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..

 Classes nécessaires Variables et constantes Declare Fonctions constructeur (fonction principale) méthodes de classe (autres fonctions) appelle fonction principale

Étape 9: 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..


Étape 10: Importer la physique

Nous utiliserons la bibliothèque Physics pour gérer les collisions. Utilisez ce code pour importer la bibliothèque de physique:

 physique locale = nécessite ('physique') physics.start ()

Étape 11: Multitouch

Nous utiliserons également la bibliothèque multi-touch pour gérer plusieurs doigts à l'écran. Utilisez ce code pour l'importer:

 -- Multitouch system.activate ('multitouch')

Étape 12: 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')

Étape 13: 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 titleBg local playBtn local creditsBtn local titleView

Étape 14: Affichage des crédits

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

 -- [CreditsView] crédits locauxVoir

Étape 15: Plateau de jeu

Cette image sera placée sur notre arrière-plan précédent. Les lignes suivantes stockent les graphiques pour le pavé à l'écran.

 -- [Fond du jeu] gameBg local - [Pad] local haut gauche local droit local

Étape 16: Lunes

Ce sont les graphiques de la lune, référencés dans les variables suivantes. La plus grande lune sera utilisée comme point d'atterrissage.

 -- [Lunes] local m1 local m2 local m3 local bigM

Étape 17: étoiles

Les objets à collectionner. Quatre articles doivent être collectés avant l'atterrissage.

 -- Étoiles local s1 local s2 local s3 local s4

Étape 18: Fusée

Ceci est le graphique qui sera contrôlé par le joueur, en utilisant le pad à l'écran.

 -- Fusée (joueur) fusée locale

Étape 19: point d'atterrissage

L'indicateur de point d'atterrissage devient actif lorsque les quatre étoiles sont collectées.


Étape 20: Variables

Ce sont les variables que nous allons utiliser. Lisez les commentaires dans le code pour en savoir plus sur leur intégration..

 -- Variables local arrow étoiles locales = 0 - étoiles collectées dir local - direction actuelle hitMoon = false - utilisé pour la détection de collision lors de la mise à jour locale starHit hitStar = false - utilisé pour la détection de collision lors de la mise à jour localGoGo = false - utilisé pour la détection de collision sur la mise à jour locale complète

Étape 21: Déclarez les fonctions

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

 -- Fonctions local Main =  startButtonListeners local =  showCredits local =  hideCredits local =  showGameView local =  gameListeners local =  movePlayer local =  local update =  local onCollision = 

Étape 22: constructeur

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

 fonction Main () - code… fin

Étape 23: Ajouter la 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 () titleBg = display.newImage ('titleBg.png', display.contentCenterX - 100.5, 20.5) creditsBtn = display.newImage ('creditsBtn.png', 14, display.contentHeight - 57) titleView = display.newGroup ( titleBg, 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 traiterons les actions de la manette de jeu, la détection des collisions et les dernières étapes à suivre avant la publication, telles que le test des applications, la création d’un écran de démarrage, l’ajout d’une icône et enfin la création du app. Restez à l'écoute pour la dernière partie!