Crafty Beyond the Basics Sprites

In alle Crafty-tutorials tot nu toe gebruikte je vierkante of rechthoekige vakken om verschillende concepten te begrijpen, zoals animatie en toetsenbord of aanraakgebeurtenissen. Hoewel dit een uitstekende manier is om snel meer te weten te komen over de bibliotheek, zult u hoogstwaarschijnlijk afbeeldingen in uw eigenlijke games gebruiken.

In deze tutorial leer je hoe je sprite-sheets laadt om verschillende afbeeldingen in je game te gebruiken. Hierna leer je hoe je verschillende personages kunt animeren met behulp van sprite-animatie.

Een Sprite-blad laden

Voor degenen die niet vertrouwd zijn met Sprite-vellen, zijn dit afbeeldingsbestanden die verschillende kleinere afbeeldingen bevatten die in een raster zijn gerangschikt. Elk van deze kleinere afbeeldingen of sprites kan alleen of samen met andere afbeeldingen worden gebruikt om verschillende objecten te animeren.

Je kunt niet zomaar een spriteblad rechtstreeks in Crafty laden en het gaan gebruiken. Je moet het ook de breedte en hoogte van verschillende tegels of sprites in je sprite-sheet vertellen. U kunt ook specifieke namen geven aan afzonderlijke afbeeldingen. Een sprite met een kleine steen erin kan bijvoorbeeld "small_stone" worden genoemd voor eenvoudige verwijzing. Het onthouden van een tegelnaam is een stuk eenvoudiger dan het onthouden van de feitelijke coördinaten van verschillende afbeeldingen. 

We gaan het volgende sprite-blad van tokka gebruiken in verschillende demo's van deze tutorial.

Het heeft veel afbeeldingen die kunnen worden gebruikt wanneer de speler loopt, springt, inactief is of wordt neergeschoten. In dit geval zijn de breedte en hoogte van de meeste tegels respectievelijk 80 px en 94 px. Sommige Sprite-vellen bevatten mogelijk ook extra vulling rond afzonderlijke tegels of het sprite-vel als geheel. Deze kunnen worden opgegeven tijdens het laden van het sprite-blad met behulp van de paddingX, paddingY, en paddingAroundBorder eigenschappen. 

Hier is de code die we nodig hebben om het bovenstaande sprite-blad in ons spel te laden:

var game_assets = "sprites": "hero_spritesheet.png": tile: 80, tileh: 94, map: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] , hero_sitting: [0, 4]; Crafty.load (game_assets);

Naar de tegels wordt verwezen door een paar cijfers te gebruiken. Het eerste getal bepaalt de kolom van onze sprite en het tweede getal bepaalt de rij. De cijfers zijn gebaseerd op nul. De sprite in de eerste kolom en de eerste rij kan bijvoorbeeld worden geopend met [0, 0]. Evenzo is de sprite in de derde en vierde rij toegankelijk via [2, 3]. Zoals eerder vermeld, kunt u individuele sprites een andere naam geven voor gebruiksgemak.

Het weergeven van statische sprites

Nadat u een sprite-werkblad hebt geladen, kunt u de afbeeldingen op het scherm weergeven met behulp van de volgende code:

var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);

De X en Y attributen bepalen de locatie waarop de sprites worden weergegeven. U kunt ook de breedte en hoogte van afzonderlijke sprites instellen met behulp van de w en h attributen.

Omdat de sprite een heeft 2D component, kunt u alle eigenschappen en kenmerken van de 2D component van deze afbeeldingen. Je kunt onze held bijvoorbeeld horizontaal omdraaien zodat deze de andere kant op kijkt door hem te gebruiken this.flip ( "X"). Op dezelfde manier kunt u een sprite draaien met behulp van de omwenteling attribuut of maak het transparant door de alpha attribuut.

var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");

Stel dat u slechts een deel van een bepaalde sprite op het canvas moet renderen. U kunt dit doen met behulp van de .gewas (nummer x, nummer y, w nummer, nummer h) methode. De eerste twee parameters bepalen de x- en y-offsetwaarden van de sprite. De laatste twee parameters bepalen de breedte en hoogte van de bijgesneden sprite. Alle waarden moeten worden opgegeven in pixels.

Sprites animeren

Tot nu toe heb je verschillende entiteiten verplaatst door hun te veranderen X en Y attributen. Het was geen probleem, omdat je meestal alleen rechthoekige vakken bewoog. Het verplaatsen van onze hoofdpersoon door deze op deze manier te verschuiven, ziet er echter heel onnatuurlijk uit. Het toevoegen van animatie aan objecten zoals munten die een speler kan verzamelen, zal het spel ook aangenamer maken.

Voor alle sprite-gerelateerde animaties moet u de SpriteAnimation component van de entiteit. Dit onderdeel behandelt de verschillende afbeeldingen in een sprite-kaart als animatieframes.

De informatie over een animatie wordt opgeslagen in de haspel voorwerp. Het haspelobject heeft vijf verschillende eigenschappen: 

• een ID kaart dat is de naam van de haspel
• een frames array met een lijst met frames voor de animatie in de indeling [xpos, ypos]
• een currentFrame eigenschap die de index van het huidige frame retourneert
• een versoepeling eigenschap die bepaalt hoe de animatie vooruit moet gaan
• een looptijd eigenschap die de duur van de animatie in milliseconden instelt

Er zijn vier verschillende gebeurtenissen die kunnen worden geactiveerd door een sprite-animatie. Dit zijn:

• StartAnimation: Deze gebeurtenis wordt geactiveerd wanneer de animatie wordt gestart of hervat vanuit de gepauzeerde status.
• AnimationEnd: Deze gebeurtenis wordt geactiveerd wanneer een animatie eindigt.
  
• FrameChange: Deze gebeurtenis wordt geactiveerd elke keer dat het frame in de huidige rol verandert.
  
• ReelChange: Deze gebeurtenis wordt geactiveerd wanneer de haspel zelf wordt gewijzigd.
  

Al deze evenementen ontvangen de haspel object als een parameter.

naast de haspel object, er is ook een .haspel() methode die wordt gebruikt om sprite-animaties te definiëren. U kunt de .animeren () methode om een ​​van de gedefinieerde animaties te spelen. 

Het proces van sprite-animatie begint met het maken van een statische sprite op het canvas.

var walking_hero = Crafty.e ('2D, Canvas, hero_walking, SpriteAnimation') .attr (x: 40, y: 20);

De hero_walking afbeelding in het bovenstaande geval is de eerste afbeelding die de gebruiker vóór de animatie ziet. De attributen worden gebruikt om de locatie van de huidige entiteit op te geven. Nadat de entiteit is gemaakt, kunt u de .haspel() methode om de eigenlijke animatie te definiëren.

walking_hero.reel ("walking", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]]);

Deze methode accepteert drie parameters. De eerste parameter is de ID kaart van de animatie die wordt gemaakt. De tweede parameter wordt gebruikt om de lengte van de animatie in milliseconden in te stellen en de derde parameter is een array met arrays die de kolom (x) en rij (y) -positie van opeenvolgende frames bevatten. In dit geval bevat de array de positie van alle sprites in de tweede rij.

Een andere versie van deze methode vereist vijf parameters. De eerste twee parameters zijn de haspel ID kaart en animatielengte. De derde en vierde parameters worden gebruikt om de begin- en y-positie voor de animatie op de sprite-kaart in te stellen. De laatste parameter stelt het aantal opeenvolgende frames in de animatie in. Als de waarde is ingesteld op een negatieve waarde, wordt de animatie achteruit afgespeeld.

De bovenstaande haspelanimatie kan ook worden gemaakt met de volgende code:

walking_hero.reel ("walking", 1000, 0, 1, 6);

Hoewel deze versie beknopt is, is deze een beetje beperkt. Deze methode is alleen nuttig als alle sprites die u in de animatie wilt opnemen in één rij staan. Bovendien zal de animatie deze afbeeldingen tonen in de volgorde waarin ze in het sprite-blad verschijnen. 

Nadat u de animatie hebt gedefinieerd, kunt u deze afspelen met behulp van de .animeren (reel_Id [, loopCount]) methode. De eerste parameter is de animatie die u wilt spelen en de tweede parameter bepaalt het aantal keren dat u deze animatie wilt afspelen. De animaties worden standaard een keer afgespeeld. omgeving loopCount naar -1 speelt de animatie eindeloos af.

In bepaalde situaties wilt u misschien maar één keer een animatie afspelen op basis van een evenement. Bijvoorbeeld, een spronganimatie moet worden gespeeld wanneer de gebruiker op een knop drukt om de speler te laten springen. Je kunt het uitproberen in de bovenstaande demo. Druk op de Pijltje omhoog sleutel zorgt ervoor dat de tweede sprite springt. Hier is de code om de toetsdruk te detecteren:

jumping_hero.bind ('KeyDown', functie (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("jumping", 1););

U kunt de animaties halverwege pauzeren en hervatten door de .pauseAnimation () en .resumeAnimation () methoden. 

Als er een enkele sprite met meerdere animaties aan is gekoppeld, kunt u bepalen of een specifieke animatie momenteel wordt afgespeeld met behulp van de .isPlaying ([String reelId]) methode. Als Nee ID kaart is meegeleverd, wordt gecontroleerd of er een animatie wordt afgespeeld.

Conclusie

Na het voltooien van deze tutorial zou je in Crafty je eigen sprite-sheets moeten kunnen laden en deze gebruiken om verschillende game-entiteiten weer te geven in plaats van verschillende rechthoeken. U kunt nu ook verschillende animaties toepassen op een entiteit op basis van verschillende gebeurtenissen. Ik wil u eraan herinneren dat ik Crafty-versie 0.7.1 in deze zelfstudie heb gebruikt en dat de demo's mogelijk niet werken met andere versies van de bibliotheek. 

JavaScript is een van de de-facto talen geworden van het werken op het web. Het is niet zonder zijn leercurve, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.

In de volgende tutorial leer je hoe je geluiden in je game kunt toevoegen.