Share
Dans cette série de didacticiels, nous utiliserons le SDK Corona pour créer un jeu inspiré par Frenzic. Ce tutoriel se concentrera sur la configuration de l'application et la structure principale en 15 étapes. Continuer à lire!
En utilisant des graphismes prédéfinis, nous coderons un jeu divertissant à l'aide de js et de l'API Corona SDK.
L'utilisateur pourra jouer contre la montre pour compléter les conteneurs carrés en les tapotant. Remplir un conteneur avec une seule couleur donne plus de points!
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 belle interface colorée sera affiché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 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..
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.
Avant d’écrire un code, nous allons définir quelques options en créant un build.settings fichier. Ce fichier contient les paramètres qui seront appliqués à la version finale de votre programme ainsi que la police que nous souhaitons intégrer à notre application..
settings = iphone = plist = UIStatusBarHidden = true, UIPrerenderedIcon = true, UIAppFonts = "Orbitron.ttf",,
Un autre fichier externe sera utilisé pour faire évoluer l’application en plein écran sur plusieurs appareils, le config.js 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 JS 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.js 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..
Necesary Classes Variables et constantes Déclarer des fonctions méthodes de la classe contructor (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..
Ceci est l'écran principal de l'application, ce sera la première vue interactive à apparaître dans notre jeu. Ces variables stockent l’arrière-plan et les composants TitleView..
-- Graphiques - [Arrière-plan] local bg - [Titre] local title local startB local creditsB - [TitleView Group] local titleView
Les variables suivantes stockent les vies et les textes de scores ainsi que sa valeur.
-- [Score & Vies] vies localesSuivant des vies localesTF vies locales score localTexte locales scoreTF score local
Ces graphiques auront un robinet auditeur afin de déplacer les carrés à la position prédéfinie, remplissez-les pour gagner des points!
Une autre variable est déclarée dans ce code, un groupe qui stockera tous les graphiques affichés dans l'écran de jeu..
local haut local droit local bas local gauche local - Game View Group local gameView
Trois blocs seront disponibles dans le jeu. Remplissez un conteneur avec une seule couleur de bloc pour gagner des points bonus. Les blocs seront ajoutés au jeu de manière aléatoire et stockés dans une table que nous créerons plus tard..
Cet écran montrera le générique, l'année et le copyright du jeu. Cette variable sera utilisée pour stocker une référence à la vue:
-- [CreditsView] crédits locaux
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet, certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc pas de commentaire.
local blockColor = 'orange', 'green', 'purple' --Utilisé pour générer un bloc aléatoire blocs locaux = --Stores tous les blocs positions locales = 5, 35 --Les positions disponibles des blocs par rapport à la conteneur local currentXPosition --Utilisé pour positionner le bloc sur les conteneurs local currentYPosition local eventTarget --Store le dernier conteneur exploité timerSource local --Utilisé comme id du timer local local score local bell --Bell son local bell4 --Bell son pour des conteneurs complets buzz local - Son Buzz utilisé lorsque le joueur perd un live
Voici le code complet écrit dans ce tutoriel, accompagné de commentaires vous permettant d'identifier chaque partie:
-- Sort 'Frenzic' like Game - Développé par Carlos Yanez - Masquer la barre d'état display.setStatusBar (display.HiddenStatusBar) - Graphiques - [Arrière-plan] local bg - [Titre] local titre local débutB local créditsB - [ TitleView Group] local titleView - [Score et vies] vies localesSuivant vies localesTF vies locales score localText score localTF score local - [GameView] local haut local bas local gauche local titulaire - [GameView Group] local gameView - [ CreditsView] crédits locaux - Variables local blockColor = 'orange', 'vert', 'violet' blocs locaux = positions locales = 5, 35 local currentXPosition local currentYPosition local eventTarget local timerSource local vies local score local cloche bell4 local buzz local
Dans cette partie de la série, vous avez appris l'interface et la configuration de base du jeu. Restez à l’écoute pour la deuxième partie, où nous traiterons les différentes vues d’écran et commencerons à placer les graphiques en étape pour créer l’interface. À la prochaine!
Accentsconagua