Share
În acest tutorial, vă ajut să faceți primul dvs. joc HTML5 controlat de un controler Leap Motion, folosind motorul Kiwi.js. (În cazul în care nu ați auzit de el, Kiwi.js este un motor de joc relativ nou care vizează HTML5, WebGL și JavaScript.)
După ce am auzit despre Controlerul mișcărilor de mișcare, știam că trebuie să-mi pun mâna pe una. Este un dispozitiv senzor de hardware pentru computer care susține mișcările mâinilor și a degetelor ca intrare, fără a solicita nici un contact de mână sau atingere.
Am văzut acest lucru ca o nouă frontieră pentru jocurile care nu au fost încă explorate pe deplin. Cum aș putea să renunț la o oportunitate atât de interesantă? După ce controlorul meu a sosit și am petrecut următoarele câteva zile jucând cu toate aplicațiile din magazinul Airspace, am decis că am vrut să-l dau mai departe și să-mi fac propriile jocuri cu el.
Pentru a urma acest tutorial, veți avea nevoie de un editor de text și de un browser. Eu folosesc Sublime Text 2 și prefer Google Chrome pentru instrumentele sale extensibile de dezvoltatori, dar fluxul de lucru va fi aproape același cu editorul de text și browserul pe care îl alegeți.
De asemenea, veți avea nevoie de o copie a lui Kiwi.js, Plugin-ul de control al mișcării de mișcare Kiwi.js și un controler de mișcare Leap. Pentru a ne ajuta să începem, vom folosi un joc Kiwi.js plan; schițele sunt șabloane care accelerează crearea jocului prin includerea tuturor configurațiilor inițiale care nu sunt specifice jocului (cum ar fi crearea structurilor de directoare). Ar trebui să descărcați planul Getting Started de pe site-ul Kiwi.JS.
Odată ce ați descărcat planul, ar trebui să puteți naviga la dosarul plugin-ului din interiorul acestuia. Odată ajuns acolo, va trebui să extrageți pluginul Leap Motion Controller la Plugin-uri pliant.
În planul de început, veți observa că în interiorul statele folder, situat în interiorul src folder, există trei fișiere JavaScript. Acestea conțin principalul statele că va trebui să executăm acest joc Kiwi.js special.
A Stat în Kiwi.js este clasa principală pe care o folosim atunci când dorești să creezi un joc. Statele sunt folosite pentru a separa diferite secțiuni ale jocului; un singur joc poate fi compus din mai multe state diferite. Aceasta înseamnă că putem avea vreodată un singur stat activ la un moment dat.
Planul a separat jocul Kiwi.js în trei stări pentru noi: starea de încărcare, starea de intrare și starea de redare.
În interiorul statului de încărcare, trebuie să încărcăm activele noastre în joc. Din moment ce facem un joc de bază pentru a începe cu voință nu va încărca multe active. Jocul pe care îl vom face va da pur și simplu un feedback vizual privind poziția mâinii și a degetelor, reprezentate de puncte.
Pentru acest exemplu, vom utiliza cele două elemente de mai jos. (Nu vă faceți griji, aceste grafice nu sunt menite a fi frumoase!)
Punctul verde va fi folosit pentru a arăta poziția mâinii tale în joc, iar punctul roșu va fi folosit pentru a arăta poziția fiecărui deget, așa că i-am denumit hand.png și finger.png, respectiv. Salvați-le sub aceste nume în img dosar în interiorul bunuri pliant.
Pentru a încărca aceste elemente în joc, va trebui să le adăugați în memoria cache a jocului prin preîncărcare () Metodă de LoadingState, care se găsește în statele folder, în fișierul numit loading.js, ca astfel:
Accentsconagua
GettingStarted.Loading.preload = funcția () KiwiLoadingScreen.prototype.preload.call (aceasta); this.addImage ('hand', 'assets / img / finger.png'); this.addImage ("deget", "assets / img / hand.png"); ;Acest lucru înseamnă că vom putea accesa și folosi imaginile din alte state ale jocului, așa că să începem să le folosim.
Pentru a permite jocului Kiwi.js să utilizeze Leap Motion Controller, trebuie să creați un obiectul controlerului de la plugin-ul Controlerelor Leap.
În primul rând, trebuie să includeți scripturile de control al saltului în index.html dosar, după cum urmează:
În al doilea rând, trebuie să ne asigurăm că Joc Obiectul știe că folosim pluginul Controlerelor Leap.
Joc obiect este motorul unui joc Kiwi.js; se ocupă de inițierea tuturor diferiților manageri individuali de jocuri. Pentru a lăsa Joc știți că vrem să folosească pluginul Leap Motion Controller, trebuie să modificăm opțiunile jocului. Acest lucru se poate face adăugând o linie de cod în interiorul game.js fișier care se află în interiorul src pliant:
var gameOptions = renderer: Kiwi.RENDERER_WEBGL, plugins: ['LeapMotion'], // Adăugați această linie de lățime a codului: 800, înălțime: 600
Acum suntem gata să creăm obiectul controlerului nostru, sunând la următoarea linie în interiorul lui init () metodă a Joaca Stat, pe care îl puteți găsi în interiorul statele dosar în interiorul play.js fişier. Veți observa că statul nu are încă init () metodă, deci va trebui să adăugați acest lucru. Pentru comoditate, vom apela obiectul Controller de salt Control:
GettingStarted.Play.init = funcția () this.control = Kiwi.Plugins.LEAPController.createController ();
Apoi, vom crea sprite pe care le putem folosi pentru a arăta poziția mâinii și a degetelor noastre în jocul "o mână" sprite și cinci "degeturi" sprites, în mod specific. Pentru a face acest lucru, creați pur și simplu a Kiwi.GameObject.Sprite și adăugați-o la stat; cel mai bun loc pentru a face acest lucru este în crea metoda statului.
În acest fragment, creăm spritele și le adăugăm în scenă, apoi le stocăm în matricea degetelor:
GettingStarted.Play.create = function () this.hand = nou Kiwi.GameObjects.Sprite (aceasta, this.textures ['hand'], 0, 0); this.addChild (this.hand); this.fingers = []; pentru (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); ;
Odată ce jocul și-a preîncărcat activele și a fost creat, Joaca Buclă de actualizare de stat va începe să ruleze. Aici se vor întâmpla toate lucrurile distractive pe care le creați!
În acest caz, vom muta mutanțele pe care tocmai le-am creat în pozițiile mâinii și degetelor lor corespunzătoare, așa cum le-a detectat Leap Motion Controller. Acest lucru se poate face cu ușurință prin accesarea diferitelor proprietăți ale obiectului Controller de salt:
mâinile [0] .posX și mâinile [0] .posY vă va da coordonatele x și y, în planul vertical paralel cu Leap Motion Controller, a primei mâini pe care controlerul o detectează.mâini [0] .pointables [n] .tipX și mâini [0] .pointables [n] .tipY vă va da coordonatele x și y, în același spațiu, a vârfului celui de-al doilea deget pe acea mână.În următorul fragment, veți vedea că am centrat poziția mâinii și a degetelor mișcând poziția x peste jumătate din lățimea treptei, inversând poziția y și adăugând înălțimea scenei la poziția y- poziţie:
GettingStarted.Play.update = funcția () Kiwi.State.prototype.update.call (aceasta); this.hand.x = this.control.hands [0] .posX + (game.stage.width * 0.5); this.hand.y = -acest.control.hands [0] .posY + (game.stage.height); pentru (var i = this.fingers.length - 1; i> = 0; i -) this.fingers [i] .x = această.control.hands [0] .pointables [i] .tipX; acest.fingeri [i] .x + = game.stage.width * 0.5; this.fingers [i] .y = -acest.control.hands [0] .pointables [i] .tipY; acest.fingers [i] .y + = game.stage.height; ; ;
Consultați exemplul de mai jos pentru a vedea ce am făcut!
Cu exemplul de mai sus, veți putea începe să vedeți cât de repede și precis este controlul Leap Motion Controller cu Kiwi.js. De asemenea, cu capabilitățile de urmărire a Leap Motion Controller, puteți vedea rapid modul în care puteți gestiona mai multe interacțiuni cu o singură mână.
Mai jos este o listă sau valori pe care pluginul Leap Motion Controller le monitorizează în mod curent pentru Kiwi.js:
pointables.active proprietate.hands.active proprietate.posX, buchet de flori, și Posz valorile obiectului mâinii, după cum am văzut.De asemenea, este timpul să priviți domeniul în care controlerul Leap Motion vă poate urmări mâna. Veți observa că controlerul are limitări la domeniul de urmărire, așa cum este reprezentat de imaginea de mai jos.
Așa că probabil vă gândiți, "Ce se întâmplă când mâna mea părăsește acest interval?" Controlerul de salt informează imediat că mâna nu mai este vizibilă și stabilește activ proprietatea mâinii fals. De asemenea, salvează toate datele ultimei poziții cunoscute a mâinii până când mâna dvs. devine din nou vizibilă.
Până acum am făcut doar un demo de bază, care poate fi plăcut să experimentați, dar nu este chiar distractiv. Apoi, să facem un joc real ca cel prezentat mai jos:
În acest joc, vom anima niște sprite. Am creat o foaie de sprite "FlappyNyan" pe care o voi folosi pentru acest tutorial, împreună cu niște blocuri colorate care vor fi folosite pentru traseul de culoare pe care FlappyNyan îl lasă în urmă. Sunteți bineveniți să utilizați aceste active. Luați-le din reputația GitHub a tutorialului.
În loc să utilizați standardul spiriduș GameObject, vom dori să creați o nouă clasă care să se extindă spiriduș. Scopul acestei clase este de a ajuta la crearea traseului de culoare al pisicii. Dacă doriți să vă continuați jocul, puteți implementa fizica arcadei în clasă, permițând detectarea simplă a coliziunii și oferind acces la proprietăți precum viteza și accelerația.
Pentru a crea o clasă, va trebui să creați un fișier JS separat în entități pliant; sună-l Nyan.js. Va trebui, de asemenea, să includeți acest script în dvs. index.html fișier, în același mod ca script-urile plugin:
În acest fișier, creați un FlappyNyan clasa care are o animație de șase cadre:
var FlappyNyan = functie (stare, x, y) Kiwi.GameObjects.Sprite.call (aceasta, state, state.textures ['FlappyNyanCat'], x, y); thisstatestate = stat; this.animation.add ("plimbare", [0, 1, 2, 3, 4, 5], 0,1, true); this.animation.play ( 'mers pe jos'); FlappyNyan.prototype.update = funcția () Kiwi.GameObjects.Sprite.prototype.update.call (aceasta); Kiwi.extend (FlappyNyan, Kiwi.GameObjects.Sprite);Apoi, vrem să creăm traseul lui FlappyNyan. Pentru a face acest lucru, vom continua să aruncăm cutii care vor arăta ca ceea ce FlappyNyan întotdeauna lasă în urmă: un curcubeu glorios de culoare.
Pentru aceasta, am creat o altă clasă, numită MovingBox. Această clasă creează pur și simplu o cutie de o anumită culoare, se mișcă la stânga până când este în afara ecranului și apoi se elimină din joc:
var MovingBox = functie (stare, x, y, textura) Kiwi.GameObjects.StaticImage.call (aceasta, stare, state.textures [texture], x, y, false); this.physics = this.components.add (noul Kiwi.Components.ArcadePhysics (this, this.box)); this.xVelo = -200; this.yVelo = 0; this.physics.velocity.x = this.xVelo; this.physics.velocity.y = this.yVelo; MovingBox.prototype.update = funcția () Kiwi.GameObjects.StaticImage.prototype.update.call (aceasta); this.physics.update (); dacă (acest lucru < -50) this.destroy(); Kiwi.extend(MovingBox,Kiwi.GameObjects.StaticImage);
Nu uitați să includeți MovingBox clasa în index.html pagină.
Acum s-ar putea să vă întrebați cum să utilizați aceste cutii - să abordăm acest lucru în continuare. Aceste casete care vor urma FlappyNyan vor reprezenta numărul de degete active (adică, degetele pe care Leap Motion Controller le poate vedea).
Deoarece vrem ca cutiile să urmeze FlappyNyan obiect, vom crea o metodă de a reproduce aceste cutii în interior FlappyNyan clasă.
Pentru a face acest lucru, tot ce trebuie să faceți este să adăugați această metodă la FlappyNyan clasă:
FlappyNyan.prototype.spawnBoxes = funcția (una, două, trei, patru, cinci) if (one) this.state.streamerGroup.addChild (noua MovingBox (this.state, this.x, this.y + 05, yellowBox ')); dacă (doi) this.state.streamerGroup.addChild (MovingBox nou (this.state, this.x, this.y + 15, 'orangeBox')); dacă (trei) this.state.streamerGroup.addChild (nou MovingBox (this.state, this.x, this.y + 25, 'greenBox')); dacă (patru) this.state.streamerGroup.addChild (nou MovingBox (this.state, this.x, this.y + 35, 'pinkBox')); dacă (cinci) this.state.streamerGroup.addChild (nou MovingBox (this.state, this.x, this.y + 45, 'blueBox'));
Deoarece vrem să creăm aceste casete la fiecare cadru, adăugăm metoda spawn în buclă de actualizare a FlappyNyan clasă:
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);
Acum că am creat cele două clase de care avem nevoie, tot ce trebuie să facem acum este să creezi un a FlappyNyan obiect în Crea() metodă a Joaca Statul și adăugați a Kiwi.Group pentru a stoca casetele, apoi adăugați-le pe scenă.
this.streamerGroup = noua grupare Kiwi (aceasta); this.addChild (this.streamerGroup); this.flappyNyan = flappyNyan nou (acest lucru, 100, 100); this.addChild (this.flappyNyan);
Odată ce acest lucru este făcut, dorim să ne actualizăm poziția, așa cum am făcut pentru obiectul mână din jocul anterior.
this.flappyNyan.x = această.control.hand [0] .posX + game.stage.width * 0.5; this.flappyNyan.y = -aceste.control.hands [0] .posY + game.stage.height;
Si asta e! Ar trebui să aveți acum un joc în care controlați un FlappyNyan!
Dacă aveți întrebări, nu ezitați să întrebați. Puteți găsi toate codurile sursă și active în GitHub repo tutorialului.
