Construire un jeu Air Hockey - Création d'interface

Dans cette série de didacticiels, vous apprendrez à créer un jeu Air Hockey. L'objectif du jeu est de frapper la rondelle en utilisant les palettes pour augmenter le score. Continuer à lire!


Aussi disponible dans cette série:

  1. Construire un jeu Air Hockey - Création d'interface
  2. Construire un jeu Air Hockey - Ajouter de l'interaction

É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 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: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320 x 480 pixels, 163 ppp
  • iphone 4: 960x640px, 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:

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480 x 800 pixels, 217 pixels par pouce

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


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


Étape 4: Exporter des graphiques

Selon le périphérique que vous avez sélectionné, vous devrez peut-être exporter les graphiques dans les ppi recommandés. 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..


Étape 5: le son

Nous utiliserons les effets sonores pour améliorer la sensation du jeu. Vous pouvez trouver les sons utilisés dans cet exemple sur Soungle.com en utilisant les mots-clés. cloche et bourdonner.


É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é (n'importe quel éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique en surbrillance) 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 Déclarer des fonctions méthodes de classe du constructeur (fonction principale) (autres fonctions) appelle la 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 l'importer:

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

Étape 11: 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 12: 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 13: 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 14: Contexte de jeu

Cette image sera placée sur notre arrière-plan précédent pour ajouter une sensation de hockey.

 -- [Fond de jeu] gameBg local

Étape 15: Rondelle

Ceci est le graphique de la rondelle, référencé dans la variable suivante.

 -- [Rondelle] rondelle locale

Étape 16: Pagaies

Joueur et ennemi ou paddle CPU. Utilisé pour frapper la rondelle.

 -- [Pagaies] joueur local ennemi local

Étape 17: Score

Les variables de score sont ajoutées pour les afficher plus tard à l'écran.

 -- Scores joueur localScore ennemi local

Étape 18: Son

Nous utiliserons les effets sonores pour améliorer le jeu. Vous pouvez trouver le son utilisé dans cet exemple sur Soungle.com à l'aide du mot clé cloche.

 -- Sonne local bell = audio.loadSound ('bell.caf')

Étape 19: les murs

Les murs où la balle pourra rebondir. Celles-ci sont créées à l'aide de l'API Corona Display, puis ajoutées au moteur physique..

 -- [Murs] local gauche local droite droit local topLeft local basLight supérieur topRight local bottomRight

Étape 20: Variables

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

 -- Variables local lastY - utilisé pour animer l'écran de crédits timer localSrc --a timer pour le mouvement ennemi / cpu

É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 =  moveEnemy local =  mise à jour locale = 

Étape 22: constructeur

Nous allons ensuite 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 ('title.png', display.contentCenterX - 143.5, 50) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 39.5, display.contentCenterY) creditsBtn = display. newImage ('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, 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 nous occuperons du mouvement de la palette, de la détection de collision et des dernières étapes à suivre avant la publication, comme la création d’un test d’application, la création d’un écran de démarrage, l’ajout d’une icône et enfin la création de l’application. Restez à l'écoute pour la dernière partie!