Share
Als je ooit eerder HTML5-spellen hebt ontwikkeld, ben je misschien bekend met een paar game-engines die het ontwikkelen van spellen een stuk eenvoudiger kunnen maken. Ze hebben alle code die je nodig hebt om botsingen te detecteren, verschillende entiteiten te spawnen of geluidseffecten aan je spel toe te voegen. In deze tutorial leer je over een andere dergelijke game-engine genaamd Crafty. Het is heel gemakkelijk te gebruiken en ondersteunt alle belangrijke browsers, inclusief IE9.
Eenmaal geminimaliseerd, heeft de bibliotheek een grootte van slechts 127 kb, dus het zal geen grote vertraging veroorzaken bij het laden van je game. Het ondersteunt spritekaarten, zodat u gemakkelijk spelentiteiten op het scherm kunt tekenen. Je kunt ook aangepaste evenementen maken die kunnen worden geactiveerd wanneer je maar wilt en op welk object je maar wilt.
Er zijn ook componenten voor geluiden, animatie en andere effecten. Over het algemeen is deze game-engine een goede keuze als je wat eenvoudige HTML5-games wilt ontwikkelen.
Het eerste dat je moet doen, is Crafty opnemen in je project. U kunt het bestand downloaden en het in uw projecten laden of u kunt rechtstreeks een koppeling maken naar de verkleinde versie die op een CDN wordt gehost. Nadat de bibliotheek is geladen, kunt u de volgende regel gebruiken om Crafty te initialiseren:
Crafty.init ([nummerbreedte, aantal hoogte, stage_elem]);
De eerste twee argumenten bepalen de breedte en hoogte van onze fase. Het derde argument wordt gebruikt om het element dat we gaan gebruiken als onze fase te specificeren. Als het derde argument niet wordt opgegeven, gebruikt Crafty a div met id cr-fase als zijn fase. Evenzo, als de breedte en hoogte argumenten ontbreken, zal Crafty de breedte en hoogte van ons niveau gelijk aan de breedte en hoogte van het venster instellen.
Op dit punt zou u de volgende code moeten hebben:
Entiteiten zijn bouwstenen voor een Crafty-spel. Alles van de speler tot de vijanden en obstakels wordt weergegeven met behulp van entiteiten. U kunt een lijst met componenten doorgeven aan een entiteit. Elk van deze componenten voegt extra functionaliteit toe aan onze entiteit door eigenschappen en methoden van die component toe te wijzen aan de entiteit. U kunt ook andere methoden aan een entiteit koppelen om verschillende eigenschappen in te stellen, zoals de breedte, hoogte, locatie en kleur. Hier is een zeer eenvoudig voorbeeld van het toevoegen van componenten aan een entiteit:
Accentsconagua
Crafty.e ('2D, canvas, kleur');Elke entiteit die u voor de gebruiker wilt weergeven, heeft zowel de 2D-component als een renderinglaag nodig. De weergavelaag kan zijn DOM, Canvas, of WebGL. Houd er rekening mee dat WebGL-ondersteuning is toegevoegd in versie 0.7.1. Momenteel zijn alleen de sprite, Beeld, SpriteAnimation, en Kleur componenten ondersteunen WebGL-rendering. Tekst entiteiten moeten nog steeds gebruiken DOM of Canvas voor nu.
Nu kunt u de attr () methode om de waarde van verschillende eigenschappen in te stellen, inclusief de breedte, hoogte en positie van uw entiteit. De meeste methoden in Crafty zullen de entiteit waarop ze worden geroepen, teruggeven, en attr () is geen uitzondering. Dit betekent dat je meer methoden kunt ketenen om andere eigenschappen van je elementen in te stellen. Hier is een voorbeeld:
Crafty.e ("2D, Canvas, Color") .attr (x: 200, y: 100, w: 200, h: 50) .color ("orange");Dit creëert een oranje rechthoekig geheel op het podium.
Nu dat je de entiteit hebt gemaakt, laten we wat code schrijven om het te verplaatsen met behulp van het toetsenbord. U kunt een entiteit in vier verschillende richtingen verplaatsen, d.w.z. omhoog, omlaag, links en rechts door de. Toe te voegen Vier weg component ervan.
De entiteit kan vervolgens worden verplaatst door de pijltoetsen of W, A, S en D te gebruiken. U kunt een getal als argument doorgeven aan de vier weg constructor om de snelheid van de entiteit in te stellen. Hier is hoe de code van de entiteit er nu zou moeten uitzien:
Crafty.e ("2D, Canvas, Color, Fourway") .attr (x: 200, y: 100, w: 200, h: 50) .color ("orange") .fwayway (300);U kunt de verplaatsing van een entiteit beperken tot slechts twee richtingen met behulp van de Twoway component. De. Vervangen Vier weg component in de bovenstaande code met Twoway beperkt de beweging van de doos tot alleen de horizontale richting. Dit is te zien aan de volgende demo:
U kunt ook uw eigen componenten toevoegen aan verschillende entiteiten voor identificatie of om gelijksoortige entiteiten samen te groeperen. In dit geval voeg ik de Verdieping component aan onze oranje doos. U kunt enkele andere beschrijvende namen gebruiken om verschillende entiteiten te identificeren.
Crafty.e ("2D, Canvas, Color, Twoway, Floor") .attr (x: 200, y: 340, w: 200, h: 50) .color ("orange") .twoway (300);Er is nog een zeer bruikbare component die je kunt gebruiken om elementen rond te verplaatsen, en het wordt het Zwaartekracht component. Wanneer het wordt toegevoegd aan een entiteit, zal het die entiteit doen mislukken. Je zou willen dat de gegeven entiteit niet verder vervalt als ze een aantal andere entiteiten tegenkomt. Dit kan worden bereikt door een identificatiecomponent door te geven als argument voor de zwaartekrachtfunctie. Hier is de code die het kleine zwarte vierkant op de vloer of het platform laat vallen:
Crafty.e ("2D, Canvas, Kleur, Zwaartekracht") .attr (x: 200, y: 50, w: 50, h: 50) .color ("black") .gravity ("Floor");Zoals je in de tutorial kunt zien, hebben we de basisstructuur van een eenvoudig spel kunnen maken met heel weinig code. Alles wat we moesten doen, was componenten aan onze entiteiten toevoegen en de waarden van verschillende eigenschappen specificeren, zoals breedte, hoogte of bewegingssnelheid.
Deze tutorial was bedoeld om u een basisidee te geven van entiteiten en andere concepten met betrekking tot Crafty. In het volgende deel leer je meer over entiteiten in meer detail. Als je vragen hebt over deze tutorial, laat me dit dan weten in de comments.
