Spilleautomat m4a h1>

Dette blogginnlegget ble skrevet av Peach Pellen (@peachpellen) fra Lanica, og det handler om a lage ditt forste mobile plattformspill med Titanium og Platino. Finn flere oppl ringsprogrammer som denne pa Lanica nettsted.

Dette er en oppl ring laget for a hjelpe nye spillutviklere a lage et enkelt spilleautomat ved hjelp av Lanicas Platino Game Engine.

Resultatet vil se slik ut, og prosessen vil l re deg a lage en scene i Platino, spritesheets, basic Javascript, variabler, berore hendelser, vise og oppdatere tekst og dra objekter.

Grafikken.

Det er flere steder a kilde grafikk for spillene dine, bade betalt og gratis, men nar prototyping av de to nettstedene jeg har funnet mest nyttige, er Openclipart og OpenGameArt.

Alle eiendelene som brukes i denne oppl ringen er tilgjengelige pa GitHub.

& # 8211; Bakgrunnsbildet, 480 x 320 piksler, eller bredere.

& # 8211; Et hovedbilde med mellomrom for hjulene og en linje for spaken.

& # 8211; En ball som skal brukes som handtak pa spaken.

& # 8211; Et enkelt, 2-frame spritesheet a bruke som rotasjonsindikatorlampe.

& # 8211; Viktigst av alt, et hjulblad, med rammer for dine spinnende spilleautomater.

Det jeg foreslar her er at du tar tak i eiendelene fra GitHub-prosjektet, men du folger denne veiledningen for a lage minst ett spritesheet for deg selv. Selvfolgelig kan du ogsa bruke eksisterende ressurser som en mal for a lage din egen grafikk.

Grunnen til at det er viktig a vite hvordan man lager et spritesheet, er fordi sprites er uten tvil den viktigste delen av et 2D-spill. Hvis du ser en animasjon pa skjermen, er det sjanse for at det er et spritesheet. Et tegn som kan lope, hoppe, angripe, etc. er et eksempel. En annen er det vi gjor her, ved hjelp av en animasjon for a vise spilleautomater som spinner.

Bildene nedenfor viser et mindre spritesheet, forst som standard, og viser deretter hvordan hver ramme er nummerert & # 8211;

Som du kan se, starter et standard spritesheet i Platino ved ramme 0 og spiller fra venstre til hoyre.

Arket ovenfor viser et svart rutenett, som mange bruker til a hjelpe dem med a plassere alt. Du kan gjore dette ved a lage et nytt lag i Photoshop, eller det valgte programmet, slik at du enkelt kan fjerne det nar du er ferdig.

For a lage ditt hjulsark, den viktigste grafikken for dette spillet, bor du velge noen bilder fra en av nettstedene knyttet til ovenfor (jeg liker OpenClipart for denne typen ting) og velge 5 forskjellige bilder a bruke pa hjulene dine. I mitt tilfelle har jeg valgt en kirseb r, klokke, 7, vannmelon og standardbaren.

Et spritesheet er opprettet en ramme om gangen. I dette tilfellet onsker vi et ark med 14 rammer, og hver ramme er 116 piksler bred og 338 piksler hoy, sa spritesheet er faktisk 812 x 676 piksler.

Her ser det ut som animasjonens forste ramme ser ut pa egenhand;

Og her er det i et komplett ark, for a gi deg et referansepunkt;

For du fortsetter med a lage ditt forste spill i Platino, trenger du hver av disse eiendelene. Hvis du sliter med a lage et sprite-ark i Photoshop, (eller verktoyet du har valgt), kan du bruke spritesheetet mitt i eget lag, sa legg ganske enkelt dine egne bilder over toppen og slett originalen.

A lage sprites kan v re veldig fiddly, fordi det a fa en merkbar visuell forskjell nar animasjonen spiller, er a v re enda 1 piksel, sa det er viktig a v re noye med at du plasserer alt.

Hvis du ikke er komfortabel med a bruke et bilderedigeringsprogram for a sette arkene sammen, har du ogsa muligheten til a bruke Animo Sprites, som lar deg importere alle bildene dine og deretter plassere dem automatisk for deg.

Skriver koden.

Na som du har dine eiendeler klare, vil vi skrive noen kode for a vise alle disse visuelle elementene pa skjermen, samt legge til litt tekst for myntallet. Vi vil ogsa sette spillet til a lope i liggende retning, («sidelengs» i stedet for oppreist) og laster inn noen lyder.

For du begynner a skrive noen kode, ma du sorge for at Platino-modulene er installert. Hvis du ikke har gjort det enna, er det en installasjonsvideooppl ring her.

Nar den er installert, vil du kunne velge den i moduldelen i tiapp.xml.

Deretter vil du opprette en mappe under den nye appens «Ressurs» -katalog, kalt «grafikk», og plassere eiendelene som er opprettet i forrige seksjon inne i den.

Na er du klar til a begynne a skrive kode i app.js!

Vi begynner med denne koden;

Som du kan se fra kommentarene, krever vi forst Platino, og opprett deretter et vindu som heter «gameWindow» og sorg for at appen er innstilt til tuning bare i liggende modus.

Vi lager en spillvisning for a holde scenene vare, kalt «spill».

Til slutt lager vi var forste scene, bare kalt «scene». I de fleste tilfeller vil scenene dine ha navn som «meny», «niva 1», «alternativer» osv., Men vart spilleautomat vil bare bruke en scene, sa navngivning er ikke sa viktig.

Herfra gar vi videre til a erkl re noen variabler, slik som det;

Legg merke til hvordan jeg prover a kommentere hver seksjon? Det er en veldig god vane a komme inn pa. Hvis du holder god kommentarvaner, vil du kunne se tilbake til koden din pa 6 maneder og faktisk kunne folge den.

Her definerer vi «canSpin», som lar oss vite hvorvidt brukeren far lov til a snurre, og sorg for at de ikke kan starte et nytt spinn for hjulene har stoppet.

Vi har ogsa «oY», som jeg heter slik fordi jeg var for lat til a skrive ut «originalY». Det er for den opprinnelige Y-posisjonen til spaken, sa vi kan returnere den til riktig sted etter at brukeren har trukket den.

Neste er «mynter», hvor vi starter brukeren av med 100 mynter a bruke.

Til slutt laster vi to lyder, en for a spole hjulene og en for a vinne mynter. Disse lydene kommer fra App FX, en omfattende samling av 4000 royalty-fri lydelementer, effekter og lyd-signaler designet av Blastwave FX. (Mer om dette nederst i dette innlegget.)

Na har vi vare variabler satt opp og vare lyder lastet, vi kan begynne a legge til grafikken var til spillet!

Denne kodeblokken oppretter forst «bg», bakgrunnsbildet, og legger det til scenen slik at det vil vises nar spillet er lastet. Du vil bruke scene.add () for hvert visuelt element i spillet ditt. Vi legger til bakgrunnen forst slik at den kommer til a ligge bak alle vare andre grafikk.

Deretter legger vi til alle tre hjulene – men i stedet for a bruke platino.createSprite (), bruker vi platino.createSpriteSheet (). Forskjellen er at i motsetning til bakgrunnen er hjulene opprettet fra spritesheets slik at vi kan animere dem. Alle animerte sprites er opprettet ved hjelp av platino.createSpriteSheet ().

Vi legger da til vart grense / maskebilde pa samme mate som vi la til bakgrunnen, sammen med spaken.

Deretter legger vi til litt tekst. Teksten er opprettet ved hjelp av platino.createTextSprite (), og deretter innstiller teksten seg selv, storrelse og posisjon, og legger den til scenen som vi gjor med all grafikk.

Deretter legger vi til en annen sprite ved hjelp av platino.createSpriteSheet () API som vi brukte pa hjulene. Dette er for et lys for a indikere hvorvidt brukeren har lov til a snurre, slik at den ikke animerer i seg selv, men dette gir oss en enkel mate a raskt bytte mellom «av» og «pa» lysbilder nar det er onskelig.

Her oppretter vi en annen variabel som heter «rammer». Den inneholder tallene 0, 2, 4 osv. Opptil 12. Dette er for a hjelpe oss med a holde oversikt over hvilke rammer pa hjulsprites er OK a stoppe pa. (Vi kan ikke ha en hjulsestopp halvveis mellom bilder, det ville v re juks.)

Vi lager en transformasjon ved hjelp av platino.createTransform (). I dette tilfellet heter vi det «transformer», selv om du kan kalle det alt du vil ha. Vi angir varigheten som 1000 millisekunder, eller 1 sekund, og Y-koordinatet for transformasjonen som 50. Dette betyr at uansett sprite vi bruker dette til, vil flytte til en Y av 50 over en periode pa 1 sekund. I dette tilfellet oppretter vi det for a gi spaken tilbake til hvilestilling etter at den er trukket.

Na, dette siste stykket kode vil tillate deg a kjore spillet i simulatoren. Det vant ikke noen interaktivitet for vi legger til funksjoner, men det vil laste inn appen og vise alle bildene vi har lagt til ovenfor. Det vil ogsa endre storrelsen pa alt for a vise riktig pa hvilken enhet du bruker. (Standardstorrelsen, spillet.TARGET_SCREEN, er satt til 480 bred med 320 hoy.)

Vennligst hold oye med neste del av dette innlegget, som kommer neste uke, hvor vi skal fullfore spillet ved a legge til mynter, spinne hjulene og spille av vare lydeffekter, som ble levert av Pro Sound Effects.

Hvis du leter etter lydeffekter for dine egne spill, har de for oyeblikket et spesialtilbud.

Er din app som en stille film? Bruk lydelementer og lyd-signaler for a forbedre brukeropplevelsen, grensesnittnavigasjonen, overordnet engasjement og enkel underholdning! App FX er en omfattende samling av 4000 royalty-fri lydelementer, effekter og lyd-signaler designet av Blastwave FX. Gi din app lydenes gave! Spesiell innledende prising pa $ 99 per sete (gjennom 12/31/13, reg. $ 199) inkluderer evig, ubegrenset bruk i appene dine.

Veldig interessant innlegg, dette er sa nyttig, takk mye, #tryingthis.

Kommentarer er stengt.

Sok i bloggen.

Registrer deg for var blogg!

Siste innlegg.

Start gratis, vokse derfra.

Du bor motta din nye e-post om noen fa minutter.

&kopiere; 2017 Axway. Alle rettigheter reservert. Appcelerator og Titanium er registrerte varemerker.