Share
Corona SDK facilite le développement de jeux pour iPhone, iPad et Android. Corona utilise le langage de programmation Lua pour créer des applications multiplates-formes. Dans ce didacticiel, nous verrons comment créer un arrière-plan de défilement avec le SDK Corona..
Le SDK Corona facilite très facilement la création d’effets dynamiques avec très peu de lignes de code. À l’aide du SDK Corona, nous allons créer un arrière-plan 2D avec défilement des graphiques que nous créons dans Photoshop. Ce tutoriel ne couvrira pas la conception d'un périphérique particulier. Au lieu de cela, l’arrière-plan de défilement que nous créons peut être utilisé pour les plateformes iPhone, iPad ou Android.
À l'aide de Photoshop, nous allons utiliser l'outil Forme personnalisée pour créer des étoiles pour notre arrière-plan. Bien que vous puissiez théoriquement utiliser n'importe quelle forme pour l'arrière-plan, ce tutoriel montrera comment créer un arrière-plan "Nuit étoilée"..
Avec Photoshop ouvert, créez un nouveau document de 45x45 pixels.
Sélectionnez l'outil Forme personnalisée et sélectionnez l'étoile à 5 branches comme forme personnalisée. Si vous ne trouvez pas l'étoile à 5 points, vous devrez peut-être ajouter la liste à la liste Formes..
Après avoir sélectionné l’étoile à 5 branches, assurez-vous que votre couleur de premier plan est blanche et dessinez une étoile sur un nouveau calque..
Maintenant que nous avons dessiné une étoile, utilisez l'outil Enregistrer pour le Web et les périphériques pour enregistrer l'étoile en 3 tailles différentes:
Star1.png 45x45 pixels
Star2.png 30x30 pixels
Star3.png 15x15 pixels
Avec nos graphiques, nous pouvons commencer à créer l’arrière-plan de défilement. Commençons par ouvrir votre éditeur Lua préféré et créer un nouveau document appelé main.lua.
Notre première étape consiste à masquer la barre d'état. La barre d'état est une barre en haut de l'écran qui fournit des informations à l'utilisateur telles que la force du signal ou le niveau de la batterie..
display.setStatusBar (display.HiddenStatusBar);
Nous allons maintenant configurer quelques variables à utiliser tout au long de notre programme.
_W = display.contentWidth; --Retourne la largeur de l'écran _H = display.contentHeight; --Returns Screen Height local starTable = - Configurer la table en étoile
Après avoir initialisé certaines variables globales, nous allons insérer des objets étoiles dans le tableau starTable. Dans ce tableau, nous identifions le chemin d'image des étoiles et la vitesse de déplacement de chaque étoile. Puis on insère l'étoile dans starTable.
La vitesse de déplacement est calculée en millisecondes et détermine la vitesse à laquelle l'étoile se déplace pour passer du bas de l'écran au haut de l'écran. Les étoiles les plus grosses bougeront un peu plus vite que les étoiles les plus petites pour donner l’illusion de profondeur à l’arrière-plan.
fonction initStar () local star1 = star1.imgpath = "star1.png"; --Définir le chemin de l'image pour Star star1.movementSpeed = 10000; - Détermine la vitesse de déplacement de l'étoile en millisecondes. Table.insert (starTable, star1); --Insérez Star dans starTable local star2 = star2.imgpath = "star2.png"; star2.movementSpeed = 12000; table.insert (starTable, star2); étoile locale3 = étoile3.imgpath = "étoile3.png"; star3.movementSpeed = 14000; table.insert (starTable, star3); fin
La fonction getRandomStar renvoie un objet étoile aléatoire à partir de la table starTable. Une fois que la fonction obtient l’étoile, nous définissons le chemin de l’image, le nom de l’étoile et la vitesse à laquelle elle se déplacera. Voici à quoi ressemble la fonction complète.
fonction getRandomStar () local temp = starTable [math.random (1, #starTable)] local randomStar = display.newImage (temp.imgpath) physics.addBody (randomStar, isSensor = true) randomStar.myName = "étoile" randomStar .movementSpeed = temp.movementSpeed; randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360) starMove = transition.to (randomStar, heure = randomStar.movementSpeed, y = -45, onComplete = fonction (self) self.parent: remove (self); self = nil; fin) fin
La première ligne obtient une étoile aléatoire de starTable et la stocke dans la variable locale randomStar..
temp local = starTable [math.random (1, #starTable)]
Après avoir récupéré une étoile au hasard, nous allons définir le chemin de l'image de l'étoile.
local randomStar = display.newImage (temp.imgpath)
Maintenant, nous allons définir le nom de l'objet étoile sur? Star? et la vitesse de déplacement sera définie en fonction de la vitesse de l'étoile aléatoire que nous avons extraite de la table starTable.
randomStar.myName = "star" randomStar.movementSpeed = temp.movementSpeed; - en millisecondes
Le point de départ de l'étoile va être une position X aléatoire au bas de l'écran. L'étoile démarrera également à l'écran pour une transition plus en douceur dans la zone visible de l'écran. Nous faisons également pivoter chaque étoile de manière aléatoire pour ajouter de la variance à l'arrière-plan..
randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360)
Une fois l’étoile configurée, nous pouvons utiliser la méthode transition.to () pour la déplacer vers le haut de l’écran. L'objet étoile sera alors supprimé de la mémoire lorsqu'il aura atteint son point de destination..
starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = fonction (self) self.parent: remove (self); self = nil; fin)
Cette fonction configure trois minuteries qui feront appel à la fonction getRandomStar pour générer l'objet étoile et faire en sorte que l'étoile se déplace vers le haut de l'écran..
Le premier paramètre de timer.performWithDelay est le délai, qui détermine le nombre d'appels du timer. Le deuxième paramètre est la fonction qui sera appelée et le dernier paramètre est le nombre d'appels de la minuterie. Une valeur de? 0? dit à la minuterie de boucler pour toujours.
function startGame () starTimer1 = timer.performWithDelay (1700, getRandomStar, 0) starTimer2 = timer.performWithDelay (2300, getRandomStar, 0) starTimer3 = timer.performWithDelay (2700, getRandomStar, 0) fin
Enfin, nous pouvons exécuter notre application. Le code suivant appelle les fonctions que nous avons créées tout au long du didacticiel pour commencer à créer les étoiles, en les déplaçant vers le haut de l'écran et en les supprimant une fois qu'elles ont atteint la barre de détection..
initStar () startGame ()
Vous pouvez utiliser un arrière-plan de défilement 2D dans une variété de jeux et utiliser un arrière-plan de défilement est un moyen simple de rendre les jeux plus dynamiques. Essayez d'échanger les étoiles contre des nuages, des feuilles ou toute autre chose à laquelle vous pouvez penser!
Merci pour la lecture!
Accentsconagua