Share
Corona SDK rende facile lo sviluppo di giochi per iPhone, iPad e Android. Corona utilizza il linguaggio di programmazione Lua per creare app multipiattaforma. In questo tutorial esploreremo come creare uno sfondo a scorrimento con Corona SDK.
L'SDK Corona rende molto facile la creazione di effetti dinamici con poche righe di codice. Usando il Corona SDK, creeremo uno sfondo 2D a scorrimento con la grafica che creiamo in Photoshop. Questo tutorial non riguarderà la progettazione di un particolare dispositivo. Invece, lo sfondo a scorrimento che creiamo può essere utilizzato per le piattaforme iPhone, iPad o Android.
Usando Photoshop, useremo lo Strumento forme personalizzate per creare stelle per il nostro background. Mentre in teoria è possibile utilizzare qualsiasi forma per lo sfondo, questo tutorial mostrerà come creare uno sfondo "notte stellata".
Con Photoshop aperto, crea un nuovo documento di 45x45 pixel.
Seleziona lo Strumento forma personalizzata e seleziona la stella a 5 punte come forma personalizzata. Se non riesci a trovare la stella a 5 punte, potresti dover aggiungere l'elenco con l'elenco forme.
Dopo aver selezionato la stella a 5 punte, assicurati che il colore di primo piano sia bianco e disegni una stella su un nuovo livello.
Ora che abbiamo disegnato una stella, utilizza lo strumento Salva per Web e dispositivi per salvare la stella in 3 diverse dimensioni:
Star1.png 45x45 pixel
Star2.png 30x30 pixel
Star3.png 15x15 pixel
Con la nostra grafica, possiamo iniziare a creare lo sfondo a scorrimento. Iniziamo aprendo l'editor Lua preferito e creando un nuovo documento chiamato main.lua.
Il nostro primo passo è nascondere la barra di stato. La barra di stato è una barra nella parte superiore dello schermo che fornisce informazioni all'utente come l'intensità del segnale o il livello della batteria.
display.setStatusBar (display.HiddenStatusBar);
Ora imposteremo alcune variabili da utilizzare nel nostro programma.
_W = display.contentWidth; - Ritorna alla larghezza dello schermo _H = display.contentHeight; - Ripristina l'altezza dello schermo locale starTable = - Imposta la tabella delle stelle
Dopo aver inizializzato alcune variabili globali, inseriremo gli oggetti stellari nello starTable. In questa tabella, identifichiamo il percorso dell'immagine delle stelle e la velocità di movimento di ogni stella. Quindi inseriamo la stella in StarTable.
La velocità di movimento viene calcolata in millisecondi e determinerà la velocità con cui la stella si sposterà dalla parte inferiore dello schermo verso la parte superiore dello schermo. Le stelle più grandi si sposteranno leggermente più velocemente delle stelle più piccole per dare l'illusione della profondità allo sfondo.
function initStar () local star1 = star1.imgpath = "star1.png"; - Imposta percorso immagine per Star star1.movementSpeed = 10000; - Determina la velocità di movimento della stella in millisecondi table.insert (starTable, star1); --Inserisci Star in starTable local star2 = star2.imgpath = "star2.png"; star2.movementSpeed = 12000; table.insert (starTable, star2); local star3 = star3.imgpath = "star3.png"; star3.movementSpeed = 14000; table.insert (starTable, star3); fine
La funzione getRandomStar restituisce un oggetto stella casuale da starTable. Una volta che la funzione ottiene la stella, impostiamo il percorso dell'immagine, il nome della stella e la velocità con cui la stella si muoverà. Ecco come appare la funzione completa.
function getRandomStar () local temp = starTable [math.random (1, #starTable)] randomStar locale = display.newImage (temp.imgpath) physics.addBody (randomStar, isSensor = true) randomStar.myName = "star" randomStar .movementSpeed = temp.movementSpeed; randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360) starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = function (self) self.parent: remove (self); self = nil; end) end
La prima riga riceve una stella casuale dalla stellaTabella e la memorizza nella variabile locale randomStar.
local temp = starTable [math.random (1, #starTable)]
Dopo aver recuperato una stella casuale, imposteremo il percorso dell'immagine della stella.
randomStar locale = display.newImage (temp.imgpath)
Ora, imposterai il nome dell'oggetto stella a? Stella? e la velocità del movimento sarà impostata in base alla velocità della stella casuale che abbiamo estratto dal parametro stella.
randomStar.myName = "star" randomStar.movementSpeed = temp.movementSpeed; - in millisecondi
Il punto di partenza della stella sarà una posizione X casuale nella parte inferiore dello schermo. La stella inizierà anche dallo schermo per una transizione più fluida nell'area visibile dello schermo. Ruotiamo anche casualmente ogni stella per aggiungere varianza allo sfondo.
randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360)
Dopo aver impostato la stella, possiamo usare il metodo transition.to () per spostare la stella verso la parte superiore dello schermo. L'oggetto stella verrà quindi rimosso dalla memoria quando avrà raggiunto il suo punto di destinazione.
starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = function (self) self.parent: remove (self); self = nil; end)
Questa funzione imposta tre timer che richiameranno la funzione getRandomStar per generare l'oggetto stella e avviare la stella spostandosi verso la parte superiore dello schermo.
Il primo parametro in timer.performWithDelay è il ritardo, che determina quante volte verrà chiamato il timer. Il secondo parametro è la funzione che verrà chiamata e l'ultimo parametro è il numero di volte che verrà chiamato il timer. Un valore di? 0? dice al timer di eseguire il ciclo per sempre.
function startGame () starTimer1 = timer.performWithDelay (1700, getRandomStar, 0) starTimer2 = timer.performWithDelay (2300, getRandomStar, 0) starTimer3 = timer.performWithDelay (2700, getRandomStar, 0) fine
Finalmente, possiamo eseguire la nostra app. Il seguente codice chiama le funzioni che abbiamo creato durante il tutorial per iniziare a creare le stelle, spostandole verso la parte superiore dello schermo e rimuovendole quando hanno raggiunto la barra dei sensori.
initStar () startGame ()
Puoi utilizzare uno sfondo a scorrimento 2D in una varietà di giochi e utilizzare uno sfondo a scorrimento è un modo semplice per rendere i giochi più dinamici. Prova a scambiare le stelle con nuvole, foglie o qualsiasi altra cosa tu possa pensare!
Grazie per aver letto!
Accentsconagua