Share
I denne veiledningen hjelper jeg deg med å lage ditt første HTML5-spill som styres av en Leap Motion Controller, ved hjelp av Kiwi.js-motoren. (Hvis du ikke har hørt om det, er Kiwi.js en relativt ny spillmotor som retter seg mot HTML5, WebGL og JavaScript.)
Etter å ha hørt om Leap Motion Controller visste jeg at jeg måtte ta hendene på en. Det er en maskinvare sensor enhet som støtter hånd og finger bevegelser som input, krever ingen håndkontakt eller berøring.
Jeg så dette som en ny grense til spill ennå ikke fullstendig utforsket. Hvordan kunne jeg passere på en mulighet denne spennende? Etter at min kontroller ankom, og jeg hadde tilbrakt de neste dagene med alle appene på Airspace-butikken, bestemte jeg meg for at jeg ville ta det videre og lage mine egne spill med det.
For å følge denne opplæringen trenger du en tekstredigerer og en nettleser. Jeg bruker Sublime Text 2, og jeg foretrekker Google Chrome for sine omfattende utviklerverktøy, men arbeidsflyten vil være stort sett den samme med hvilken tekstredigerer og nettleser du velger.
Du skal også ha en kopi av Kiwi.js, Kiwi.js Leap Motion Controller Plugin og en Leap Motion Controller. For å hjelpe oss med å komme i gang bruker vi et Kiwi.js-spill blåkopi; Blueprints er maler som fremskynder spillopprettelsen ved å inkludere alt det opprinnelige, ikke-spillspesifikke oppsettet (for eksempel å lage mappestrukturer). Du bør laste ned Komme i gang-tegningen fra Kiwi.JS-siden.
Når du har lastet ned planen, bør du kunne navigere til plugin-mappen som ligger i den. Når du er der, må du pakke ut Leap Motion Controller-pluginet til plugins mappe.
I Komme i gangsblåkopien merker du det inne i stater mappe, plassert inne i src mappe, det er tre JavaScript-filer. Disse inneholder hoveddelen stater at vi må løpe dette bestemte Kiwi.js spillet.
EN Stat i Kiwi.js er hovedklassen vi bruker når vi ønsker å lage et spill. Stater er vant til å holde forskjellige deler av et spill skilt; et enkelt spill kan bestå av mange forskjellige stater. Dette betyr at vi bare kan ha en enkelt stat aktiv på et gitt tidspunkt.
Tegningen har skilt Kiwi.js spillet i tre stater for oss: Lastingstaten, Intro-staten og Play State.
Inne i lastetilstanden, må vi laste våre eiendeler inn i spillet. Siden vi gjør et grunnleggende spill å starte med vil ikke vil laste mange eiendeler. Spillet vi skal lage, vil bare gi visuell tilbakemelding om stillingen av din hånd og fingre, representert ved prikker.
For dette eksempelet bruker vi de to ressursene nedenfor. (Ikke bekymre deg, denne grafikken er ikke ment å være pen!)
Den grønne prikken vil bli brukt til å vise posisjonen til din hånd i spillet, og den røde prikken vil bli brukt til å vise posisjonen til hver finger, så jeg har kalt dem hand.png og finger.png, henholdsvis. Lagre dem under disse navnene i img mappe inne i eiendeler mappe.
For å laste disse eiendelene inn i spillet må du legge dem til spillets cache via forbelastning () Metode av LoadingState, som finnes i States mappe, i filen som heter loading.js, som så:
Accentsconagua
GettingStarted.Loading.preload = funksjon () KiwiLoadingScreen.prototype.preload.call (dette); this.addImage ('hånd', 'assets / img / finger.png'); this.addImage ('finger', 'assets / img / hand.png'); ;Å gjøre dette betyr at vi vil kunne få tilgang til og bruke bildene fra andre stater i spillet, så la oss begynne å bruke dem.
For å aktivere Kiwi.js-spillet til å bruke Leap Motion Controller, må du opprette en kontrollerobjekt fra Leap Controller plugin.
Først må vi inkludere Leap Controller Scripts i index.html fil, slik som:
For det andre må vi sørge for at Spill objektet vet at vi bruker Plugin Controller plugin.
De Spill objekt er motoren til et Kiwi.js-spill; den håndterer initialiseringen av alle de forskjellige individuelle spillledere. Å la Spill vet at vi vil at den skal bruke Leap Motion Controller-pluginet, vi må redigere spillalternativene. Dette kan gjøres ved å legge til en linje med kode inne i game.js fil som ligger inne i src mappe:
var gameOptions = renderer: Kiwi.RENDERER_WEBGL, plugins: ['LeapMotion'], // Legg denne linjen med kodebredde: 800, høyde: 600
Nå er vi klare til å lage vårt kontrollobjekt, ved å ringe følgende linje inne i i det() metode av Spille Stat, som du finner i stater mappe inne i play.js fil. Du vil legge merke til at staten ennå ikke har a i det() metode, så du må legge til dette. For enkelhets skyld kaller vi Leap Controller-objektet styre:
GettingStarted.Play.init = funksjon () this.control = Kiwi.Plugins.LEAPController.createController ();
Deretter skal vi lage sprites som vi kan bruke til å vise posisjonen til vår hånd og fingre i spillet-en "hånd" -sprit og fem "finger" sprites, spesielt. For å gjøre dette, bare opprett en Kiwi.GameObject.Sprite og legg det til staten Det beste stedet å gjøre dette er i skape metode av staten.
I denne utgaven lager vi sprites og legger dem til scenen, og lagrer dem i fingrene:
GettingStarted.Play.create = function () this.hand = nye Kiwi.GameObjects.Sprite (dette, dette.textures ['hånd'], 0, 0); this.addChild (this.hand); this.fingers = []; for (var i = 0; i <= 5; i++) var temp = new Kiwi.GameObjects.Sprite(this, this.textures['finger'], 0, 0); this.addChild(temp); this.fingers.push(temp); ;
Når spillet har forhåndslastet sine eiendeler og blitt opprettet, vil Spille Statens oppdateringsløkke begynner å løpe. Dette er hvor alle de morsomme tingene du lager, vil skje!
I dette tilfellet skal vi flytte spritesne som vi nettopp har opprettet til stillingene til deres tilsvarende hånd og fingre, som oppdaget av Leap Motion Controller. Dette kan gjøres enkelt ved å få tilgang til forskjellige egenskaper av Leap Controller-objektet:
hender [0] .posX og hender [0] .posY vil gi deg x- og y-koordinatene, i vertikalplanet parallelt med Leap Motion Controller, av den første hånden som kontrolleren oppdager.hender [0] .pointables [n] .tipX og hender [0] .pointables [n] .tipY vil gi deg x- og y-koordinatene, i samme rom, av spissen av den nte fingeren på den hånden.I følgende utdrag vil du se at jeg har sentrert posisjonen til hånden og fingrene ved å flytte x-stillingen over halvparten av scenens bredde, reversere y-posisjonen og legge scenens høyde til y- stilling:
GettingStarted.Play.update = funksjon () Kiwi.State.prototype.update.call (dette); this.hand.x = this.control.hands [0] .posX + (game.stage.width * 0.5); this.hand.y = -this.control.hands [0] .posY + (game.stage.height); for (var jeg = this.fingers.length - 1; i> = 0; i--) this.fingers [i] .x = this.control.hands [0] .pointables [i] .tipX; this.fingers [i] .x + = game.stage.width * 0,5; this.fingers [i] .y = -this.control.hands [0] .pointables [i] .tipY; this.fingers [i] .y + = game.stage.height; ; ;
Sjekk ut eksemplet nedenfor for å se hva vi har gjort!
Med eksemplet ovenfor kan du begynne å se hvor raskt og nøyaktig Leap Motion Controller er med Kiwi.js. Med Leap Motion Controller sporingskapasitet kan du også raskt se hvordan du klarer å håndtere flere interaksjoner med bare en hånd.
Nedenfor er en liste eller verdier som pluggen for Leap Motion Controller sporer for Kiwi.js:
pointables.active eiendom.hands.active eiendom.POSX, Posy, og posZ verdier av håndobjektet, som vi har sett.Dette er også på tide å se området der Leap Motion-kontrolleren kan spore hånden din. Du vil legge merke til at kontrolleren har begrensninger for det sporing av rekkevidde, som vist ved bildet nedenfor.
Så du tenker nok, "Hva skjer når hånden min forlater dette spekteret?" Vel, Leap Controller oppdager øyeblikkelig at hånden din ikke lenger er synlig og setter aktiv Egenskapen til hånden til falsk. Det lagrer også alle dataene fra den siste kjente posisjonen til hånden din til hånden din blir synlig igjen.
Så langt har vi bare laget en grunnleggende demo, som kan være kult å eksperimentere med, men det er ikke så morsomt. Deretter la oss lage et faktisk spill som vist nedenfor:
I dette spillet vil vi animere noen sprites. Jeg har laget et "FlappyNyan" sprite-ark som jeg vil bruke til denne opplæringen, sammen med noen fargede blokker som vil bli brukt til fargesporet som FlappyNyan etterlater seg. Du er velkommen til å bruke disse eiendelene. Bare ta dem fra opplæringen GitHub repo.
Istedenfor å bruke standarden Sprite GameObject, Vi vil ønske å lage en ny klasse som strekker seg Sprite. Formålet med denne klassen er å bidra til å skape kattens fargespor. Hvis du vil fortsette spillet ditt, kan du implementere arkadfysikk inn i klassen, slik at det blir enkelt å kollisjonere og gi tilgang til egenskaper som hastighet og akselerasjon.
For å opprette en klasse må du opprette en egen JS-fil i enheter mappe; kall det Nyan.js. Du må også inkludere dette skriptet i din index.html fil, på samme måte som plugin-skriptene:
Innenfor denne filen, opprett en FlappyNyan klassen som har en animasjon på seks rammer:
var FlappyNyan = funksjon (tilstand, x, y) Kiwi.GameObjects.Sprite.call (dette, state, state.textures ['FlappyNyanCat'], x, y); this.state = state; this.animation.add ('walk', [0, 1, 2, 3, 4, 5], 0,1, true); this.animation.play ( 'gange'); FlappyNyan.prototype.update = function () Kiwi.GameObjects.Sprite.prototype.update.call (dette); Kiwi.extend (FlappyNyan, Kiwi.GameObjects.Sprite);Deretter ønsker vi å lage FlappyNyans sti. For å gjøre dette vil vi kontinuerlig gyte bokser som vil se ut som FlappyNyan alltid etterlater seg: en strålende regnbue av farge.
For dette har jeg opprettet en annen klasse, kalt MovingBox. Denne klassen oppretter bare en boks med en bestemt farge, beveger seg til venstre til den er utenfor skjermen, og fjerner seg fra spillet:
var MovingBox = funksjon (tilstand, x, y, tekstur) Kiwi.GameObjects.StaticImage.call (dette, tilstand, state.textures [tekstur], x, y, false); this.physics = this.components.add (nye Kiwi.Components.ArcadePhysics (dette, denne boksen)); this.xVelo = -200; this.yVelo = 0; this.physics.velocity.x = this.xVelo; this.physics.velocity.y = this.yVelo; MovingBox.prototype.update = function () Kiwi.GameObjects.StaticImage.prototype.update.call (dette); this.physics.update (); hvis (this.x < -50) this.destroy(); Kiwi.extend(MovingBox,Kiwi.GameObjects.StaticImage);
Husk å inkludere MovingBox klasse i index.html side.
Nå lurer du kanskje på hvordan du bruker disse boksene - la oss takle det neste. Disse boksene som følger FlappyNyan vil representere antall aktive fingre (det vil si fingre som Leap Motion Controller kan se).
Siden vi vil at boksene skal følge FlappyNyan objekt, vil vi lage en metode for å gyte disse boksene i FlappyNyan klasse.
For å gjøre dette, alt du trenger å gjøre er å legge denne metoden til FlappyNyan klasse:
FlappyNyan.prototype.spawnBoxes = funksjon (ett, to, tre, fire, fem) if (one) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 05, ' yellowbox ')); hvis (to) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 15, 'orangeBox')); hvis (tre) this.state.streamerGroup.addChild (ny MovingBox (this.state, this.x, this.y + 25, 'greenBox')); hvis (fire) this.state.streamerGroup.addChild (ny MovingBox (this.state, this.x, this.y + 35, 'pinkBox')); hvis (fem) this.state.streamerGroup.addChild (ny MovingBox (this.state, this.x, this.y + 45, 'blueBox'));
Siden vi vil lage disse boksene hver ramme, legger du til gytemetoden til oppdateringssløyfen til FlappyNyan klasse:
this.spawnBoxes (this.state.control.hands [0] .pointables [0] .active, this.state.control.hands [0] .pointables [1] .active, this.state.control.hands [0] .pointables [2] .active, this.state.control.hands [0] .pointables [3] .active, this.state.control.hands [0] .pointables [4] .active);
Nå som vi har satt opp de to klassene vi trenger, er alt vi trenger å gjøre nå, skape a FlappyNyan objekt i Skape() metode av Spille Stat, og legg til en Kiwi.Group å lagre boksene i, legg deretter til disse på scenen.
this.streamerGroup = ny Kiwi.Group (dette); this.addChild (this.streamerGroup); this.flappyNyan = new flappyNyan (dette, 100, 100); this.addChild (this.flappyNyan);
Når dette er gjort, vil vi oppdatere sin posisjon, akkurat som vi har gjort for håndobjektet i forrige spill.
this.flappyNyan.x = this.control.hands [0] .posX + game.stage.width * 0,5; this.flappyNyan.y = -this.control.hands [0] .posY + game.stage.height;
Og det er det! Du bør nå ha et spill hvor du styrer en FlappyNyan!
Har du spørsmål, kan du spørre. Du finner all kildekoden og eiendelene i opplæringen GitHub repo.
