Share
I denne opplæringen lærer du hvordan du oppretter, Highway Dodge, et enkelt, men vanedannende, spill. Highway Dodge er lett å hente og spille, men det gir den vanedannende kvaliteten til andre populære spill i App Store.
Highway Dodge starter ut ved å plassere spilleren i en racerbil på motorveien. Under spillet må spilleren unnvike motgående trafikk på motorveien ved å trykke på en av de tre tilgjengelige banene. For hver dodged bil, mottar spilleren ett poeng og det er spill over til spilleren når en motgående bil rammer racerbilen. Over tid kommer de motgående bilene raskere og raskere for å gi en ekte utfordring til spilleren.
Dette spillet er bygget med Lua og Corona SDK. I det minste må du ha en konto med Corona Labs og Corona SDK installert. Du kan hente Corona SDK gratis på Corona Labs nettsted. For denne opplæringen brukte jeg bygge 2015.2731 av Corona SDK.
La oss hoppe rett inn og starte Highway Dodge ved å lage en tom mal. Åpne Corona Simulator og velg Nytt prosjekt fra Fil Meny. Når du har Opprett nytt prosjekt Åpne vinduet, skriv inn Highway Dodge Som prosjektnavn, velg en tom mal, og sett bredden til 400 og høyden til 600. Legg til standard orienteringssettet til Oppreist.
Etter å ha satt opp prosjektet, last ned bildene for Highway Dodge. Opprett en ny mappe i ditt nye prosjekt, navn det bilder, og legg bildene til denne mappen. Ditt prosjekt skal nå se slik ut:
Med prosjektet satt opp, la oss ta en rask titt på to viktige filer, build.settings og config.lua.
Denne filen håndterer spilletidegenskapene til spillet. Den lagrer informasjon om orienteringen til appen din, ikoninformasjon, iOS-innstillinger og Android-innstillinger. Standardoppsettet er tilstrekkelig for vårt spill.
Denne konfigurasjonsfilen styrer spillets kjøretidsegenskaper. Dette inkluderer bredde, høyde, skala, fps (rammer per sekund), og imageSuffix. Eiendommen vi trenger å ta en titt på er imageSuffix. De imageSuffix Egenskapen brukes til dynamisk bildevalg. I et nøtteskall forteller appen at den skal bruke et høyere oppløsningsbilde når det er på en høyere oppløsningsenhet.
Jeg har gitt bilder med høy oppløsning i bildemappen, så vi må oppdatere config.lua tilsvarende. Ditt prosjekt er config.lua filen skal se ut som den nedenfor. Jeg har utelatt push-varslingsseksjonen, som er kommentert.
søknad = content = width = 400, height = 600, skala = "letterBox", fps = 30, imageSuffix = ["@ 2x"] = 2,,,
Med prosjektet og dynamisk bildevalg satt opp, la oss gå videre til main.lua. Denne filen er startpunktet for alle apper som er bygget med Corona SDK. I vårt spill kommer det til å holde tre linjer med kode.
Den første linjen gjemmer statuslinjen på iOS-enheter. Åpen main.lua og legg til følgende linje etter kommentaren -- Koden din her.
display.setStatusBar (display.HiddenStatusBar)
Deretter begynner vi å bruke komponist ved å kreve biblioteket i vårt spill. Vi gjør dette ved å legge til følgende linje:
Accentsconagua
lokal komponist = krever ("komponist") Deretter bruker vi komponist til å flytte til menyscenen. Vi beveger scener ved å ringe funksjonen composer.gotoScene (), passerer verdien "Scene_menu" som parameter. Verdien "Scene_menu" er navnet på scenen og navnet på filen som vi oppretter i neste avsnitt.
composer.gotoScene ( "scene_menu")
Komponist er det offisielle scenebiblioteket til Corona. Komponist lar utviklere enkelt lage en scene og overgang mellom scener. I to linjer var jeg i stand til å overgå fra hovedscenen til menyscenen. Hvis du vil lese mer om Komponist, kan du besøke Corona Komponistbibliotek Guide tilgjengelig på Corona Labs Docs nettsted.
Menyscenen i spillet vårt vil bestå av bare et par elementer. Scenen vil inneholde en bakgrunnsbilde, en tittel og en startknapp. Vi bruker Corona's innebygde widget-bibliotek for å lage startknappen. Widget biblioteket lar oss raskt og enkelt lage felles brukergrensesnitt elementer. I vårt spill bruker vi det bare for å opprette knappen.
I prosjektmappen til Highway Dodge lager du en ny fil, scene_menu.lua, og åpne den i valgfri tekstredigeringsprogram. I stedet for å starte fra bunnen av, skal vi bruke scenemalen tilgjengelig på Corona Labs Docs nettside. Med sin mal kan vi flytte mye raskere. Gå over til Corona Labs Docs og kopier / lim inn scenemalen til scene_menu.lua.
Legg til widgetbiblioteket i vårt spill ved å legge til følgende linje, like under komponistbiblioteket.
lokal widget = krever ("widget") Vi legger til bakgrunnen vår ved hjelp av grafikken du lastet ned tidligere. Bakgrunnen bør plasseres i midten av skjermen. I scene: lage () funksjon og etter screenGroup variabel er erklært, legg til følgende kode:
lokal bakgrunn = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY
Deretter må vi legge til de tre banene som representerer motorveien. Vi gjør dette ved å bruke et bord for å holde banene og lage en til loop som løper tre ganger. Plasser denne koden etter bakgrunnsfilmen:
lokale baner = for i = 1,3 gjør baner [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) baner [i] .x = (display.contentCenterX - 79 * 2 ) + (i * 80) baner [i] .y = display.contentCenterY slutten
For å sikre at banene alltid er sentrert, har jeg plassert banene på x-aksen ved hjelp av litt matte. Dette sikrer at banene forblir sentrert, uansett hvilken enhet spillet kjører på.
Vi legger også til vår logo for Highway Dodge ved å plassere et bildeobjekt nær toppen av skjermen.
lokal logo = display.newImageRect (sceneGroup, "images / logo.png", 300, 150) logo.x = display.contentCenterX logo.y = 75
Før vi kan legge til vår knapp-widget, må vi opprette en funksjon som svarer når knappen berøres. Vi navngir funksjonen handleButtonEvent () og flytt spilleren til spillscenen med composer.gotoScene (). Vi svarer bare når spilleren har løftet fingeren fra knappen eller på endte fasen av arrangementet.
lokalt funksjonshåndtakButtonEvent (event) hvis ("endte" == event.phase) deretter komponent.gotoScene ("scene_game", "slideLeft") endeendMed funksjonen lagt til, kan vi legge til knappen. Vi lager knappen ved å bruke widget.newButton og overfører noen verdier til den. Vi angir bredden og høyden på knappen, bildefiler for knappen, teksten som skal vises, skrifttypen, skriftstørrelsen og skriftfargen.
Vi forteller også Corona hvilken funksjon som skal ringes når knappen trykkes og plasserer den midt på skjermen. Kildefilene i denne opplæringen inneholder kommentarer som forklarer hver av verdiene som brukes til å sette opp knappen.
lokal btn_startPlaying = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank-over.png", label = "Begynn å spille", font = system.defaultFontBold, fontSize = 32, labelColor = standard = 0, 0, 0, over = 0, 0, 0, 0.5, onEvent = handleButtonEvent btn_startPlaying.x = display.contentCenterX btn_startPlaying.y = skjerm .contentCenterY sceneGroup: sett inn (btn_startPlaying)
For å pakke opp meny scenen, må vi fjerne spillscenen når den går ut. Når Corona beveger seg mellom scener, fjerner den ikke alltid den forrige scenen. Uten disse linjene vil spillet alltid være i et spill over scenen etter at det har blitt spilt en gang.
For å fjerne den forrige scenen, får vi scene navn og samtale composer.removeScene () å fjerne den hvis den eksisterer. Legg til følgende kode i scene: vis () funksjon.
lokal prevScene = composer.getSceneName ("forrige") hvis (prevScene) deretter composer.removeScene (prevScene) endVi kan nå begynne å jobbe på spillscenen. Vi bruker den samme arbeidsflyten vi brukte for å lage menyscenen. Opprett en ny fil, scene_game.lua, og kopier / lim inn scenemalen tilgjengelig på Corona Labs Docs. Når du har koden på plass, åpne scene_game.lua i din favoritt tekstredigerer.
For å gjøre kodingen enklere for spillet, skal vi bruke widgetbiblioteket og fysikkbiblioteket. Sistnevnte brukes til kollisjonsdeteksjon. Legg til følgende kode til scene_game.lua:
lokal widget = krever ("widget") lokal fysikk = krever ("fysikk") physics.start () physics.setGravity (0,0) På første og andre linjer krever vi widgetbiblioteket og fysikkbiblioteket henholdsvis. Vi starter så fysikk og deaktiverer tyngdekraften. Vi trenger ikke tyngdekraft for motorveien vår, i stedet bruker vi transition.to () å flytte bilene.
I scene: lage () funksjon, erklærer vi en rekke variabler som vi vil bruke i spillet. Disse variablene vil være ansvarlige for spilleren bil, baner, fiendtlige biler og spiller score. For å gjøre det enklere å lese, har jeg lagt til noen kommentarer.
-- "scene: create ()" funksjonsscene: opprett (event) lokale baner = - opprett et bord kalt baner lokal spillerCar - en variabel for spilleren bil lokal laneID = 1 - en variabel for land id lokale fiendtlige biler = - et bord for å holde fiendens biler lokale fiende Counter = 1 - start fiendens teller på 1 for å holde styr på fiendens biler lokale sendEnemyFrequency = 2500 - definerer hvor ofte å sende fiendtlige biler i millisekunder lokale tmrToSendCars - en variabel for å holde en referanse til timeren for å sende biler lokal playerScore = 0 - start spilleren poengsummen på 0 local playerScoreText - et objekt for å holde poengtekstobjektets ende
Under de variable deklarasjonene setter vi opp funksjonene for spillet. Vi vil implementere hver funksjon i et senere trinn. Legg til følgende kode etter variabeldeklarasjonene i scene: lage () funksjon.
Lokal funksjon økningScore () End lokal funksjon MoveCar (Event) End lokal funksjon sendEnemyCar () End lokal funksjon onPlayAgainTouch () End lokal funksjon onGlobalCollision (Event) End
Etter funksjonene legger vi til bakgrunn og baner. For banene festes en hendelseslytter til hver bane for å få dem til å reagere på berøringshendelser. Når du rører ved, kaller lytteren moveCar () funksjon.
lokal bakgrunn = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY for i = 1,3 do lanes [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) baner [i] .x = (display.contentCenterX - 79 * 2) + (i * 80) baner [i] .y = display.contentCenterY baner [i ] .id = jeg kjørefelt [i]: addEventListener ("touch", moveCar) slutten Med bakgrunnen og banene satt opp, er det på tide å lage et tekstobjekt for å holde spillerens poengsum og lage spilleren bilen. Poengsummen vil være øverst på skjermen og spilleren bilen vil bli plassert på venstre felt. I tillegg vil vi gjøre spillerbilen et dynamisk fysikkobjekt.
playerScoreText = display.newText (sceneGroup, "Score:" ... playerScore, 0, 0, native.systemFont, 36) playerScoreText.x = display.contentCenterX playerScoreText.y = 25 playerCar = display.newImageRect (sceneGroup, "images / playerCar. png ", 50, 100) playerCar.anchorY = 1 playerCar.x = baner [1] .x playerCar.y = display.contentHeight physics.addBody (playerCar) playerCar.bodyType =" dynamic "
Deretter setter vi en tidtaker for å sende ut en bil basert på verdien av sendEnemyFrequency variabel og lag en runtime hendelse lytter for globale kollisjoner.
tmrToSendCars = timer.performWithDelay (sendEnemyFrequency, sendEnemyCar, 0) Runtime: addEventListener ("kollisjon", onGlobalCollision) Vi kan endelig legge til funksjonalitet i vårt spill. Denne delen vil legge til tilleggskode til hver funksjon vi erklærte i forrige seksjon. Vi kommer i gang med incrementScore () og avslutt med onGlobalCollision ().
incrementScore ()Denne funksjonen kalles når en fiendtlig bil passerer av spilleren og overgangen er fullført. Når den blir ringet, blir spillerpoengene økt med 1. Legg til følgende implementering i incrementScore () funksjon.
-- Denne funksjonen øker spillerens score med 1. Denne funksjonen kalles når overgangen til fiendens bil er fullført og er avskjerm. lokal funksjon økningScore () playerScore = playerScore + 1 playerScoreText.text = "Score:" ... playerScore slutten
moveCar ()De moveCar () funksjon kalles når en kjørefelt berøres. På endte Fase av arrangementet, vi tar tak i kjøringsidentifikatoren og flytter bilen til riktig kjørefelt. Vi returnerer ekte på slutten for å indikere en vellykket berøringshendelse. Legg til følgende implementering i moveCar () funksjon.
-- moveCar vil svare på berøringshendelsen på banene. Lokal funksjon moveCar (event) hvis (event.phase == "ended") da laneID = event.target.id - ta tak i lane-ID som vil være 1, 2 eller 3 transition.to (playerCar, x = lanes [laneID] .x, time = 50) - flytt spilleren bilen til riktig lane return true - for å indikere en vellykket berøringshendelse, returner sann endeend
sendEnemyCar ()De sendEnemyCar () Funksjonen skaper en fiendtlig bil, tildeler bilen til en bane, legger til en fysikk kropp til bilen, og bruker transition.to () å sende bilen mot bunnen av skjermen. For å komme i gang, la oss lage fiendens bilobjekt.
enemycars [enemyCounter] = display.newImageRect (sceneGroup, "images / enemyCar" ... math.random (1,3) ... ".png", 50, 100)
Deretter setter vi x og y plasseringen av fiendens bil. Vi lager også en hvis da uttalelse for å tildele fiendens bil til samme kjørefelt spillerens bil er i 50% av tiden. Dette vil tvinge spilleren til å flytte oftere og gjør spillet morsommere.
enemycars [enemyCounter] .x = lanes [math.random (1, # lanes)] x - plasser bilen på en tilfeldig lane hvis (math.random (1,2) == 1) then enemyCars [enemyCounter]. x = baner [laneID] .x; slutt - 50% av tiden, plasser fiendens bil på bilens bilbane. enemyCars [enemyCounter] .y = -125 - plasser fienden av skjermen på toppen
Vi må også rotere fiendens bil så den vender ned og legg til en kinematisk fysikk kroppstype til fiendens bil.
enemycars [enemyCounter]: scale (1, -1) - roter bilene slik at de vender ned fysikk.addBody (enemyCars [enemyCounter]) - legg til en fysikk kropp til fiendtlige biler enemyCars [enemyCounter] .bodyType = "kinematisk" - Gjør legemene kinematiske
Med fiendens bil satt opp, bruker vi transition.to () funksjon for å sende fiendens bil ned en av banene. Når overgangen er fullført, kaller spillet en funksjon for å fjerne objektet. Jeg øker også variabelen enemyCounter av 1 å holde styr på antall fiendtlige biler i spillet.
overgang.to (fiendtlige biler [fiendtlig counter], y = display.contentHeight + enemyCars [enemyCounter] .height + 20, time = math.random (2250,3000), onComplete = funksjon (selv) display.remove (self); incrementScore (); ende) - en overgang som beveger fiendens bil mot bunnen av skjermen. Etter ferdigstillelse blir fiendens bilobjekt fjernet fra spillet. enemyCounter = enemyCounter + 1 - øke fiendtlig counter av en for sporing
Til slutt ønsker vi at spillet skal bli raskere over tid. For hver annen bil som sendes, vil spillet gjenskape timeren og setter den til 200ms raskere.
hvis (enemyCounter% 2 == 0) sendEnemyFrequency = sendEnemyFrequency - 200 hvis (sendEnemyFrequency < 800) then sendEnemyFrequency = 800; end timer.cancel(tmrToSendCars) tmrToSendCars = timer.performWithDelay(sendEnemyFrequency, sendEnemyCar, 0) end
onPlayAgainTouch ()Den korteste funksjonen, onPlayAgainTouch (), returnerer spilleren til hovedmenyen. Dette er hva implementeringen av onPlayAgainTouch () funksjonen ser ut som.
-- Tillat spilleren å gå tilbake til menyen lokalfunksjonen onPlayAgainTouch () composer.gotoScene ("scene_menu", "fade") - flytt spilleren til menyenden onGlobalCollision ()De onGlobalCollision () funksjonen brukes til å oppdage kollisjoner mellom to fysikkobjekter på skjermen. I vårt spill har vi bare to typer fysikkobjekter:
Når disse to gjenstandene kolliderer, stopper spillet alle timere, overganger og hendelseslyttere. I tillegg viser spillet et spill over scenen som gjør at spilleren kan spille igjen.
Først oppretter vi en hvis da setning som lytter etter begynte fase.
hvis (event.phase == "startet") og slutt
I hvis da uttalelse, stopper vi spillet. Vi stopper alle overganger, avbryter timeren, pause fysikk (selv om det ikke er nødvendig, det er en god opprydding) og fjern hendelseslytteren fra alle tre banene. Legg til følgende kode innsiden av hvis da uttalelse:
transition.pause () timer.cancel (tmrToSendCars) physics.pause () for i = 1,3 gjør baner [i]: removeEventListener ("touch", moveCar) slutten Etter at spillmekanikken har stoppet, legger vi til et ugjennomsiktig rektangel og en tekstobjekt som sier "Spillet er slutt!". Dette gir en god visuell indikasjon på at spillet er avsluttet.
lokal gameOverBackground = display.newRect (sceneGroup, 0, 0, display.actualContentWidth, display.actualContentHeight) gameOverBackground.x = display.contentCenterX gameOverBackground.y = display.contentCenterY gameOverBackground: setFillColor (0) gameOverBackground.alpha = 0,5 lokal gameOverText = skjerm .newText (sceneGroup, "Game Over!", 100, 200, native.systemFontBold, 36) gameOverText.x = display.contentCenterX gameOverText.y = 150 gameOverText: setFillColor (1, 1, 1)
For å pakke opp den globale kollisjonen, legger vi til spilleknappen igjen som sender spilleren tilbake til menyen.
lokal playAgain = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank.png", label = "Meny", font = system.defaultFontBold , fontSize = 32, labelColor = standard = 0, 0, 0, over = 0, 0, 0, 0,5, onEvent = onPlayAgainTouch playAgain.x = display.contentCenterX playAgain.y = gameOverText.y + 100 sceneGroup: Sett inn (playAgain)
Kjør programmet for å se om alt fungerer som forventet. Du bør være i stand til å spille spillet, fiendens biler skal dukke opp fra toppen av skjermen, og poengsummen din skal øke for hver fiendtlig bil du lykkes med å unngå.
Takk for at du lest min veiledning om å skape Highway Dodge med Corona SDK. Du kan laste ned kildefilene for dette spillet fra GitHub. Ta et øyeblikk til å tenke hvordan du kan forbedre spillet ytterligere. Hvis du leter etter noen forslag, vil jeg anbefale å legge til en annen kjørefelt, legge til flere fiendtlige typer, og til og med legge til noen kule power ups.
