Share
In questo tutorial, ti aiuterò a creare il tuo primo gioco HTML5 controllato da un controller Leap Motion, utilizzando il motore Kiwi.js. (Nel caso in cui non ne abbiate sentito parlare, Kiwi.js è un motore di gioco relativamente nuovo che ha come target HTML5, WebGL e JavaScript.)
Dopo aver sentito parlare del controller di movimento Leap, sapevo che dovevo mettere le mani su uno. Si tratta di un dispositivo sensore hardware del computer che supporta i movimenti delle mani e delle dita come input, senza bisogno di toccare la mano o toccare.
Ho visto questa come una nuova frontiera del gioco non ancora completamente esplorata. Come potrei rinunciare a un'opportunità così eccitante? Dopo che il mio controller è arrivato e avevo passato i giorni successivi a giocare con tutte le app nel negozio Airspace, ho deciso che volevo andare oltre e creare i miei giochi con esso.
Per seguire questo tutorial, avrai bisogno di un editor di testo e un browser. Uso Sublime Text 2 e preferisco Google Chrome per i suoi ampi strumenti di sviluppo, ma il flusso di lavoro sarà praticamente lo stesso con qualsiasi editor di testo e browser che scegli.
Avrai anche bisogno di una copia di Kiwi.js, del Kiwi.js Leap Motion Controller Plugin e di un Leap Motion Controller. Per aiutarci a iniziare useremo un gioco Kiwi.js planimetria; i progetti sono modelli che accelerano la creazione del gioco includendo tutte le impostazioni iniziali non specifiche del gioco (come la creazione di strutture di cartelle). È necessario scaricare il progetto Getting Started dal sito Kiwi.JS.
Una volta scaricato il progetto, dovresti essere in grado di navigare nella cartella dei plug-in che si trova al suo interno. Una volta lì, sarà necessario estrarre il plug-in Leap Motion Controller su plugins cartella.
Nel progetto Getting Started, noterai che all'interno di stati cartella, situata all'interno del src cartella, ci sono tre file JavaScript. Questi contengono il principale stati che avremo bisogno di eseguire questo particolare gioco Kiwi.js.
UN Stato in Kiwi.js è la classe principale che usiamo quando vogliamo creare un gioco. Gli stati sono usati per tenere separate le diverse sezioni di un gioco; un singolo gioco può essere composto da molti diversi stati. Ciò significa che possiamo sempre avere un singolo stato attivo in un dato momento.
Il progetto ha separato per noi il gioco Kiwi.js in tre stati: lo stato di caricamento, lo stato di introduzione e lo stato di riproduzione.
All'interno dello stato di caricamento, dobbiamo caricare le nostre risorse nel gioco. Dal momento che stiamo iniziando a fare un gioco di base, non cariceremo molte risorse. Il gioco che faremo darà semplicemente un feedback visivo sulla posizione della mano e delle dita, rappresentate da punti.
Per questo esempio, utilizzeremo le due risorse seguenti. (Non preoccuparti, questi elementi grafici non sono pensati per essere belli!)
Il punto verde verrà usato per mostrare la posizione della tua mano nel gioco, e il punto rosso verrà usato per mostrare la posizione di ogni dito, quindi li ho nominati hand.png e finger.png, rispettivamente. Salvali sotto questi nomi nel img cartella all'interno del risorse cartella.
Per caricare queste risorse nel gioco, dovrai aggiungerle alla cache del gioco tramite preload () metodo di LoadingState, che si trova nel stati cartella, nel file chiamato loading.js, così:
Accentsconagua
GettingStarted.Loading.preload = function () KiwiLoadingScreen.prototype.preload.call (this); this.addImage ('hand', 'assets / img / finger.png'); this.addImage ('finger', 'assets / img / hand.png'); ;Ciò significa che saremo in grado di accedere e utilizzare le immagini di altri stati del gioco, quindi iniziamo ad usarle.
Per consentire al gioco Kiwi.js di utilizzare Leap Motion Controller, è necessario creare un oggetto controller dal plugin Leap Controller.
Innanzitutto, dobbiamo includere gli script di Leap Controller nel index.html file, in questo modo:
In secondo luogo, dobbiamo assicurarci che il Gioco l'oggetto sa che stiamo usando il plugin Leap Controller.
Il Gioco oggetto è il motore di un gioco Kiwi.js; gestisce l'inizializzazione di tutti i vari gestori di giochi individuali. Lasciare che il Gioco sappiamo che vogliamo usare il plugin Leap Motion Controller, abbiamo bisogno di modificare le sue opzioni di gioco. Questo può essere fatto aggiungendo una linea di codice all'interno del game.js file che si trova all'interno del src cartella:
var gameOptions = renderer: Kiwi.RENDERER_WEBGL, plugin: ['LeapMotion'], // Aggiungi questa riga di larghezza del codice: 800, altezza: 600
Ora siamo pronti per creare il nostro oggetto controller, chiamando la seguente riga all'interno del dentro() metodo del Giocare Stato, che puoi trovare all'interno del stati cartella all'interno del play.js file. Noterai che lo stato non ha ancora un dentro() metodo, quindi dovrai aggiungere questo. Per comodità, chiameremo l'oggetto Leap Controller controllo:
GettingStarted.Play.init = function () this.control = Kiwi.Plugins.LEAPController.createController ();
Successivamente, creeremo degli sprite che possiamo usare per mostrare la posizione della nostra mano e delle dita nel gioco: uno sprite "a mano" e cinque sprite "a dito", in particolare. Per fare ciò, crea semplicemente a Kiwi.GameObject.Sprite e aggiungilo allo stato; il posto migliore per farlo è nel creare metodo dello stato.
In questo frammento, creiamo gli sprite e li aggiungiamo allo stage, quindi li memorizziamo nell'array delle dita:
GettingStarted.Play.create = function () this.hand = new Kiwi.GameObjects.Sprite (this, this.textures ['hand'], 0, 0); this.addChild (this.hand); this.fingers = []; per (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); ;
Una volta che il gioco ha precaricato le sue risorse ed è stato creato, il Giocare Il ciclo di aggiornamento dello stato inizierà a funzionare. Questo è dove tutte le cose divertenti che creerai succederanno!
In questo caso, sposteremo gli sprite che abbiamo appena creato nelle posizioni della mano e delle dita corrispondenti, come rilevato dal Leap Motion Controller. Questo può essere fatto facilmente accedendo a varie proprietà dell'oggetto Leap Controller:
mani [0] .posX e mani [0] .posY fornirà le coordinate x e y, nel piano verticale parallelo al Leap Motion Controller, della prima mano che il controller rileva.mani [0] .pointables [n] .tipX e mani [0] .pointables [n] .tipY ti darà le coordinate x e y, nello stesso spazio, della punta dell'ennesimo dito su quella mano.Nel seguente frammento, vedrai che ho centrato la posizione della mano e delle dita spostando la posizione x di metà della larghezza del palco, invertendo la posizione y e aggiungendo l'altezza del palcoscenico alla y- posizione:
GettingStarted.Play.update = function () Kiwi.State.prototype.update.call (this); this.hand.x = this.control.hands [0] .posX + (game.stage.width * 0.5); this.hand.y = -this.control.hands [0] .posY + (game.stage.height); per (var i = 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; ; ;
Guarda l'esempio qui sotto per vedere cosa abbiamo fatto!
Con l'esempio sopra potrai iniziare a vedere quanto è veloce e preciso il Leap Motion Controller con Kiwi.js. Inoltre, con le funzionalità di tracciamento del Leap Motion Controller, puoi vedere rapidamente come sei in grado di gestire più interazioni con una sola mano.
Di seguito è riportato un elenco o valori che il plug-in Leap Motion Controller attualmente traccia per Kiwi.js:
pointables.active proprietà.hands.active proprietà.posX, posY, e posZ i valori dell'oggetto della mano, come abbiamo visto.Questo è anche il momento di guardare nel range in cui il controller Leap Motion può tracciare la tua mano. Noterai che il controller ha limitazioni al suo raggio di rilevamento, come rappresentato dall'immagine qui sotto.
Quindi probabilmente stai pensando: "Cosa succede quando la mia mano lascia questa gamma?" Bene, Leap Controller nota immediatamente che la tua mano non è più visibile e imposta il attivo proprietà della mano a falso. Salva anche tutti i dati dell'ultima posizione nota della tua mano fino a quando la tua mano diventa nuovamente visibile.
Finora abbiamo realizzato solo una demo di base, che potrebbe essere interessante sperimentare, ma non è esattamente divertente. Quindi, facciamo un gioco reale come quello mostrato di seguito:
In questo gioco animeremo alcuni sprite. Ho creato un foglio sprite "FlappyNyan" che userò per questo tutorial, insieme ad alcuni blocchi colorati che saranno usati per la traccia di colore lasciata da FlappyNyan. Siete invitati a utilizzare queste risorse. Basta prenderli dal repository GitHub del tutorial.
Invece di usare lo standard folletto GameObject, vorremmo creare una nuova classe che si estenda folletto. Lo scopo di questa lezione è di aiutare a creare la traccia di colore del gatto. Se si desidera migliorare il proprio gioco, è possibile implementare la fisica arcade nella classe, consentendo un semplice rilevamento delle collisioni e dando accesso a proprietà quali velocità e accelerazione.
Per creare una classe è necessario creare un file JS separato nel file entità cartella; chiamalo Nyan.js. Dovrai anche includere questo script nel tuo index.html file, allo stesso modo degli script di plugin:
All'interno di questo file, crea a FlappyNyan classe che ha un'animazione di sei frame:
var FlappyNyan = function (state, x, y) Kiwi.GameObjects.Sprite.call (this, 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 ( 'passeggiata'); FlappyNyan.prototype.update = function () Kiwi.GameObjects.Sprite.prototype.update.call (this); Kiwi.extend (FlappyNyan, Kiwi.GameObjects.Sprite);Successivamente, vogliamo creare la traccia di FlappyNyan. Per fare questo, creeremo continuamente scatole che assomigliano a quello che FlappyNyan lascia sempre dietro: un glorioso arcobaleno di colori.
Per questo, ho creato un'altra classe, chiamata MovingBox. Questa classe crea semplicemente una scatola con un determinato colore, si sposta a sinistra fino a quando non si allontana dallo schermo e quindi si rimuove dal gioco:
var MovingBox = function (stato, x, y, texture) Kiwi.GameObjects.StaticImage.call (this, state, state.textures [texture], x, y, false); this.physics = this.components.add (new 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 = function () Kiwi.GameObjects.StaticImage.prototype.update.call (this); this.physics.update (); se (questo.x. < -50) this.destroy(); Kiwi.extend(MovingBox,Kiwi.GameObjects.StaticImage);
Ricordati di includere il MovingBox classe nel index.html pagina.
Ora ti starai chiedendo come usare queste scatole, affrontiamola dopo. Queste caselle che seguiranno FlappyNyan rappresenteranno il numero di dita attive (cioè le dita che il controller di movimento Leap può vedere).
Dal momento che vogliamo che le scatole seguano il FlappyNyan oggetto, creeremo un metodo per generare queste scatole all'interno del FlappyNyan classe.
Per fare questo, tutto ciò che devi fare è aggiungere questo metodo al FlappyNyan classe:
FlappyNyan.prototype.spawnBoxes = function (uno, due, tre, quattro, cinque) if (uno) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 05, ' Yellowbox ')); if (two) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 15, 'orangeBox')); if (three) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 25, 'greenBox')); if (four) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 35, 'pinkBox')); if (cinque) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 45, 'blueBox'));
Dal momento che vogliamo creare queste caselle ogni fotogramma, aggiungere il metodo di spawn al ciclo di aggiornamento di FlappyNyan classe:
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);
Ora che abbiamo impostato le due classi di cui abbiamo bisogno, tutto ciò che dobbiamo fare ora è creare un FlappyNyan oggetto nel Creare() metodo del Giocare Stato e aggiungi un Kiwi.Group per memorizzare le scatole, quindi aggiungere queste al palcoscenico.
this.streamerGroup = new Kiwi.Group (this); this.addChild (this.streamerGroup); this.flappyNyan = new flappyNyan (this, 100, 100); this.addChild (this.flappyNyan);
Una volta fatto questo, vogliamo aggiornare la sua posizione, proprio come abbiamo fatto per l'oggetto mano nel gioco precedente.
this.flappyNyan.x = this.control.hands [0] .posX + game.stage.width * 0.5; this.flappyNyan.y = -this.control.hands [0] .posY + game.stage.height;
E questo è tutto! Ora dovresti avere un gioco in cui controlli un FlappyNyan!
Se avete domande non esitate a chiedere. Puoi trovare tutto il codice sorgente e le risorse nel repository GitHub del tutorial.
