Share
In deze zelfstudie help ik je om je eerste HTML5-spel te maken dat wordt bestuurd door een Leap Motion Controller, met behulp van de Kiwi.js-engine. (Voor het geval je er nog nooit van hebt gehoord, is Kiwi.js een relatief nieuwe game-engine die zich richt op HTML5, WebGL en JavaScript.)
Toen ik hoorde over de Leap Motion Controller, wist ik dat ik er een moest vinden. Het is een computerhardware-sensorapparaat dat hand- en vingerbewegingen als invoer ondersteunt en geen handcontact of aanraking vereist.
Ik zag dit als een nieuwe grens voor gaming die nog niet volledig is onderzocht. Hoe kon ik een kans zo spannend voorbij laten gaan? Nadat mijn controller was gearriveerd en ik de komende dagen met alle apps in de Airspace-winkel had gespeeld, besloot ik dat ik verder wilde gaan en er mijn eigen games mee wilde maken.
Om deze tutorial te volgen, hebt u een teksteditor en een browser nodig. Ik gebruik Sublime Text 2, en ik geef de voorkeur aan Google Chrome voor zijn uitgebreide ontwikkelaarstools, maar de workflow zal vrijwel hetzelfde zijn met welke teksteditor en browser je ook kiest.
Je zult ook een kopie van Kiwi.js, de Kiwi.js Leap Motion Controller plug-in en een Leap Motion Controller nodig hebben. Om ons te helpen aan de slag gaan we een Kiwi.js-game gebruiken plan; blauwdrukken zijn sjablonen die het maken van een game versnellen door alle initiële niet-spelspecifieke instellingen op te nemen (zoals het maken van mapstructuren). Download de Aan de slag-blueprint van de Kiwi.JS-site.
Nadat u de blauwdruk hebt gedownload, moet u naar de map met invoegtoepassingen in de map kunnen navigeren. Eenmaal daar, moet je de Leap Motion Controller-plug-in uitpakken naar de plugins map.
In de Aan de slag-blueprint zul je merken dat in de staten map, gelegen in de src map, er zijn drie JavaScript-bestanden. Deze bevatten de hoofdtabel staten dat we dit specifieke Kiwi.js-spel moeten uitvoeren.
EEN Staat in Kiwi.js is de hoofdklasse die we gebruiken als we een spel willen maken. Staten worden gebruikt om verschillende delen van een spel gescheiden te houden; een enkel spel kan uit veel verschillende staten bestaan. Dit betekent dat we op een bepaald moment slechts één enkele staat actief kunnen hebben.
De blauwdruk heeft het spel Kiwi.js voor ons in drie staten verdeeld: de laadstaat, de intro-staat en de speelstaat.
In de laadstatus moeten we onze activa in het spel laden. Aangezien we een basisspel maken om mee te beginnen, zullen we niet veel items laden. De game die we maken, geeft eenvoudig visuele feedback over de positie van je hand en vingers, weergegeven met stippen.
Voor dit voorbeeld gebruiken we de twee onderstaande items. (Maak je geen zorgen, deze grafische afbeeldingen zijn niet bedoeld om mooi te zijn!)
De groene stip zal worden gebruikt om de positie van je hand in het spel te tonen, en de rode stip zal worden gebruikt om de positie van elke vinger te tonen, dus ik heb ze een naam gegeven hand.png en finger.png, respectievelijk. Bewaar ze onder deze namen in de img map in de middelen map.
Om deze items in het spel te laden, moet je ze toevoegen aan de cache van de game via de preload () methode van LoadingState, die is gevonden in de Staten map, in het bestand genaamd loading.js, zoals zo:
Accentsconagua
GettingStarted.Loading.preload = function () KiwiLoadingScreen.prototype.preload.call (this); this.addImage ('hand', 'assets / img / finger.png'); this.addImage ('finger', 'assets / img / hand.png'); ;Dit betekent dat we de afbeeldingen uit andere landen van het spel kunnen gebruiken en gebruiken, dus laten we beginnen ze te gebruiken.
Om het Kiwi.js-spel in te schakelen om de Leap Motion Controller te gebruiken, moet je een controller object van de Leap Controller-plugin.
Ten eerste moeten we de Leap Controller Scripts opnemen in de index.html bestand, zoals zo:
Ten tweede moeten we ervoor zorgen dat de Spel object weet dat we de Leap Controller-plug-in gebruiken.
De Spel object is de engine van een Kiwi.js-game; het behandelt de initialisatie van alle verschillende individuele game-managers. Om het te laten Spel als we willen dat het de Leap Motion Controller-plug-in gebruikt, moeten we de spelopties bewerken. Dit kan gedaan worden door een regel code toe te voegen in de game.js bestand dat zich binnen de src map:
var gameOptions = renderer: Kiwi.RENDERER_WEBGL, plug-ins: ['LeapMotion'], // Voeg deze regel toe met codebreedte: 800, hoogte: 600
Nu zijn we klaar om ons controllerobject te maken door de volgende regel in de in het() methode van de Spelen Staat, die u kunt vinden in de staten map in de play.js het dossier. Je zult merken dat de staat nog geen a heeft in het() methode, dus je moet dit toevoegen. Voor het gemak bellen we het object Leap Controller controle:
GettingStarted.Play.init = function () this.control = Kiwi.Plugins.LEAPController.createController ();
Vervolgens zullen we sprites maken die we kunnen gebruiken om de positie van onze hand en vingers in het spel te laten zien, met name een sprite met "hand" en vijf "vinger" -sprites. Om dit te doen, maakt u gewoon een Kiwi.GameObject.Sprite en voeg het toe aan de staat; de beste plaats om dit te doen is in de creëren methode van de staat.
In dit fragment maken we de sprites en voegen deze toe aan het werkgebied en slaan deze vervolgens op in de reeks vingers:
GettingStarted.Play.create = function () this.hand = new Kiwi.GameObjects.Site (this, these.textures ['hand'], 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); ;
Zodra de game zijn activa heeft voorgeladen en is gemaakt, is de Spelen De statusupdatelus begint te lopen. Dit is waar alle leuke dingen die je maakt zullen gebeuren!
In dit geval gaan we de sprites die we net hebben gemaakt verplaatsen naar de posities van hun overeenkomstige hand en vingers, zoals gedetecteerd door de Leap Motion Controller. Dit kan eenvoudig worden gedaan door toegang te krijgen tot verschillende eigenschappen van het Leap Controller-object:
handen [0] .posX en handen [0] .posY geeft je de x- en y-coördinaten, in het verticale vlak parallel aan de Leap Motion Controller, van de eerste hand die de controller detecteert.handen [0] .pointables [n] .tipX en handen [0] .pointables [n] .tipY geeft je de x- en y-coördinaten, in dezelfde ruimte, van de punt van de negende vinger van die hand.In het volgende fragment zie je dat ik de positie van de hand en de vingers gecentreerd heb door de x-positie over de helft van de breedte van het werkvlak te verplaatsen, de y-positie om te keren en de hoogte van het werkgebied toe te voegen aan de y- positie:
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); for (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.hoogte; ; ;
Bekijk het onderstaande voorbeeld om te zien wat we hebben gemaakt!
Met het bovenstaande voorbeeld kunt u beginnen om te zien hoe snel en nauwkeurig de Leap Motion Controller is met Kiwi.js. En met de trackingmogelijkheden van de Leap Motion Controller kunt u snel zien hoe u meerdere interacties met slechts één hand kunt beheren.
Hieronder staat een lijst of waarden die de Leap Motion Controller-plug-in momenteel bijhoudt voor Kiwi.js:
pointables.active eigendom.hands.active eigendom.posx, ruiker, en posZ waarden van het handobject, zoals we hebben gezien.Dit is ook het moment om het bereik te bekijken waarop de Leap Motion-controller uw hand kan volgen. U zult merken dat de controller beperkingen heeft aan zijn volgbereik, zoals weergegeven in de onderstaande afbeelding.
Dus je denkt waarschijnlijk: "Wat gebeurt er wanneer mijn hand dit bereik verlaat?" Welnu, de sprongcontroller merkt onmiddellijk dat je hand niet langer zichtbaar is en stelt de actief eigendom van de hand aan vals. Het slaat ook alle gegevens van de laatst bekende positie van je hand op totdat je hand weer zichtbaar wordt.
Tot nu toe hebben we alleen een basisdemo gemaakt, wat misschien leuk is om mee te experimenteren, maar het is niet echt leuk. Laten we vervolgens een echt spel maken zoals hieronder wordt weergegeven:
In dit spel animeren we enkele sprites. Ik heb een "FlappyNyan" sprite-blad gemaakt dat ik zal gebruiken voor deze tutorial, samen met enkele gekleurde blokken die gebruikt zullen worden voor het kleurenpad dat FlappyNyan achterlaat. U bent van harte welkom om deze activa te gebruiken. Pak ze gewoon bij de GitHub-repo van de tutorial.
In plaats van de standaard te gebruiken sprite GameObject, we zullen een nieuwe klasse willen maken die zich uitstrekt sprite. Het doel van deze les is om te helpen bij het maken van het kleurenspoor van de kat. Als je je spel verder wilt ontwikkelen, kun je arcadesfysica in de klas implementeren, zodat botsingen eenvoudig kunnen worden gedetecteerd en je toegang hebt tot eigenschappen zoals snelheid en versnelling..
Als u een klasse wilt maken, moet u een afzonderlijk JS-bestand maken in de entiteiten map; noem het Nyan.js. U moet dit script ook opnemen in uw index.html bestand, op dezelfde manier als de plug-inscripts:
Maak binnen dit bestand een FlappyNyan klas met een animatie van zes frames:
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 ( 'walk'); FlappyNyan.prototype.update = function () Kiwi.GameObjects.Sprite.prototype.update.call (this); Kiwi.extend (FlappyNyan, Kiwi.GameObjects.Site);Vervolgens willen we het spoor van FlappyNyan creëren. Om dit te doen, zullen we continu kisten maken die eruit zien als wat FlappyNyan altijd achterlaat: een glorieuze regenboog van kleur.
Hiervoor heb ik een andere klasse gemaakt, genaamd MovingBox. Deze klasse maakt eenvoudig een doos met een bepaalde kleur, beweegt naar links totdat het van het scherm is en verwijdert zichzelf uit het spel:
var MovingBox = function (state, x, y, texture) Kiwi.GameObjects.StaticImage.call (this, state, state.textures [texture], x, y, false); this.physics = this.components.add (nieuwe 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 (); if (this.x < -50) this.destroy(); Kiwi.extend(MovingBox,Kiwi.GameObjects.StaticImage);
Vergeet niet om de MovingBox klasse in de index.html pagina.
Nu vraag je je misschien af hoe je deze vakjes kunt gebruiken - laten we dat vervolgens aanpakken. Deze vakken die FlappyNyan zullen volgen, vertegenwoordigen het aantal actieve vingers (dat zijn vingers die de Leap Motion Controller kan zien).
Omdat we willen dat de dozen de FlappyNyan object, zullen we een methode maken om deze vakken binnen de spawn te maken FlappyNyan klasse.
Om dit te doen, volstaat het om deze methode toe te voegen aan de FlappyNyan klasse:
FlappyNyan.prototype.spawnBoxes = functie (een, twee, drie, vier, vijf) if (een) this.state.streamerGroup.addChild (nieuwe MovingBox (this.state, this.x, this.y + 05, ' yellowbox ")); if (two) this.state.streamerGroup.addChild (nieuwe MovingBox (this.state, this.x, this.y + 15, 'orangeBox')); if (three) this.state.streamerGroup.addChild (nieuwe MovingBox (this.state, this.x, this.y + 25, 'greenBox')); if (four) this.state.streamerGroup.addChild (nieuwe MovingBox (this.state, this.x, this.y + 35, 'pinkBox')); if (five) this.state.streamerGroup.addChild (nieuwe MovingBox (this.state, this.x, this.y + 45, 'blueBox'));
Omdat we deze boxen elk frame willen maken, voeg je de spawn-methode toe aan de updatelus van de 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);
Nu we de twee klassen hebben ingesteld die we nodig hebben, hoeven we nu alleen nog een FlappyNyan object in de Create () methode van de Spelen Staat en voeg een toe Kiwi.Group om de vakken op te slaan en deze vervolgens aan het werkgebied toe te voegen.
this.streamerGroup = nieuwe Kiwi.Group (dit); this.addChild (this.streamerGroup); this.flappyNyan = nieuwe flappyNyan (dit, 100, 100); this.addChild (this.flappyNyan);
Zodra dit is gebeurd, willen we zijn positie bijwerken, net zoals we hebben gedaan voor het handobject in de vorige game.
this.flappyNyan.x = this.control.hands [0] .posX + game.stage.width * 0.5; this.flappyNyan.y = -this.control.hands [0] .posY + game.stage.height;
En dat is het! Je zou nu een spel moeten hebben waarbij je een FlappyNyan bestuurt!
Als u vragen hebt, kunt u dit stellen. Je kunt alle broncode en items vinden in de GitHub-repo van de tutorial.
