Dans cette série de didacticiels, vous apprendrez à créer un jeu similaire au populaire Cent. L'objectif du jeu est d'atteindre 100 points sans que les cercles ne se touchent pendant que vous augmentez le score. Continuer à lire!
En utilisant des graphismes prédéfinis, nous allons coder un jeu divertissant en utilisant Lua et les API Corona SDK.
Le joueur pourra taper sur les cercles à l'écran pour augmenter le score. Vous pouvez modifier les paramètres dans le code pour personnaliser le jeu..
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:
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:
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..
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..
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..
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",
Ecrivons l'application!
Ouvrez votre éditeur Lua préféré (n'importe quel éditeur de texte fonctionnera, mais la syntaxe ne sera pas mise en évidence) et préparez-vous à écrire votre superbe application. N'oubliez pas de sauvegarder le fichier sous main.lua dans votre dossier de projet.
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
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..
Nous utiliserons la bibliothèque Physics pour gérer les collisions. Utilisez ce code pour l'importer:
physique locale = nécessite ('physique') physics.start () physics.setGravity (0,0)
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')
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
Cette vue montrera le générique et le copyright du jeu, cette variable sera utilisée pour le stocker..
-- [CreditsView] crédits locauxVoir
Cette image remplacera notre arrière-plan précédent. Ce sera le fond du jeu.
-- Contexte de jeu gameBg local
Le groupe de cercles stockera les cinq cercles qui seront créés dynamiquement plus tard dans la partie. Nous utiliserons l'API de dessin Corona SDK.
-- Cercles Groupe de cercles locaux
Des murs de physique sont créés pour faire rebondir les cercles à l'écran.
-- Murs local gauche local droite droite local haut local bas
La valeur du score est gérée par cette variable.
-- Score score local de TextField
C'est l'alerte qui sera affichée lorsque vous gagnerez la partie. Il complétera le niveau et mettra fin à la partie. Il existe également une alerte "Vous avez perdu" qui se comportera de la même manière.
-- Alerte locale alertVoir
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 repositionner la vue des crédits local lastX - utilisé pour repositionner la vue du titre
Déclarer toutes les fonctions comme local au début.
-- Fonctions local Main = startButtonListeners local = showCredits local = hideCredits local = showGameView local = gameListeners local = onTouch local = onCollision local = alerte local =
Nous allons ensuite créer la fonction qui initialisera toute la logique du jeu:
fonction Main () - code… fin
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', 10, 20) playBtn = display.newImage ('playBtn.png', 100, 220) creditsBtn = display.newImage ('creditsBtn.png', 100, 290) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end
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 niveau, la détection de collision 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. . Restez à l'écoute pour la dernière partie!