Det är lätt att lägga till spelanimationer i Phaser. Animation väcker videospelkaraktärer till liv. Ett sätt du kan införliva animation i ditt spel är att animera din karaktärs rörelser. Du kan till och med ge dem en vilolägesanimering som körs när spelaren inte rör sig alls. Detta kommer att ge dina karaktärer mer personlighet.
Spelinställningar
Du behöver en grundläggande förståelse för Phaser för att arbeta med animationer. Om du inte är bekant med Phaser, börja med en grundläggande spelhandledning innan du fortsätter. Denna handledning kommer att bygga på dessa grunder.
För att komma igång, skapa ett spel med en rörlig karaktär. I vårt exempel börjar vi med ett block som flyttas med piltangenterna. Nedan är startkoden:
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF ,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};var gamePiece;
var keyInputs;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}
Denna kod kommer att skapa en spelpjäs som kan röra sig runt en blå bakgrund. För enkelhetens skull använder exemplet bara ett orange block för spelkaraktären. Det ser ut så här:
Skapa ett Sprite-ark
Det första steget är att skapa animationen. Det finns många sätt att skapa animationer, men det är bortom vad vi kan täcka här. För våra ändamål är det bara viktigt att du sparar din animation som ett spriteark.
Ett spriteark är en enda bildfil som innehåller en uppsättning animationsramar. Varje bildruta i animationen placeras bredvid den den följer. Varje ram måste ha samma storlek. Animationsprogram kommer att skära upp bilden i individuella ramar baserat på måtten på en enda bildruta.
Bildkredit: isaiah658/Open Clipart
Bilderna lagras i en array. Som alla arrayer betyder detta att den första bilden är i nollpositionen. Så i exemplet ovan börjar nedanimationen vid noll och slutar vid tre. Den vänstra animeringen börjar klockan fyra och slutar klockan sju.
Lägga till ett Spritesheet till Phaser
Att ladda ett spriteark liknar att ladda en bild i Phaser. Ditt program kommer dock att kräva lite mer information om bildfilen. Tidigare laddade vi vår bild med denna text:
this.load.image('gamePiece', 'img/gamePiece.png');
Sprite-ark behöver dock några fler parametrar. Vi måste också ange måtten på en ram. Så för att ladda ett sprite-ark måste vi justera koden enligt följande:
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});
Koden är väldigt lik. Den stora skillnaden är att vi har lagt till en tredje parameter som anger bredden och höjden på våra animationsramar. I det här fallet är ramarna 60 pixlar gånger 60 pixlar.
Detta exempel kommer att använda ett enkelt sprite-ark. Vi har lagt till en pil och blinkande indikatorer till spelspriten. Pilen kommer att peka i den riktning som vår sprite rör sig när en indikator blinkar i den riktningen. Om karaktären inte rör sig kommer animationen att cirkulera genom alla bildrutor.
Skapa animationer
Innan vi kan animera vår karaktär måste vi skapa animationen. Vi har redan laddat upp spritearket, nu måste vi säga vilka ramar som finns i en animation. För att skapa en animation, lägg till följande kod i skapa-funktionen:
this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});
Ovan är animationen för upp riktning.
Nyckelordet anims är en förkortning för animationer. Tidigare versioner använde hela nyckelordet animationer, men den aktuella versionen använder denna genväg. De nyckel- är namnet på animationen. Du kommer att använda knappen för att ringa upp animationen. FrameRate styr hur många bildrutor som visas på en sekund. Det här exemplet kommer bara att ha två bilder per sekund. Nästa rad pekar på vilken bild och ramar som används i animeringen. Upp-animationen använder gamePiece bild och börjar på bildruta 0 och slutar på bildruta 2. Om du vill att animationen ska gå i loop kontinuerligt, ställ in repeat på -1. Annars kan du ange hur många gånger animeringen ska upprepas innan den stoppas.
Du måste skapa en animation för varje riktning och viloläge.
Hur man animerar din karaktär
Det är ganska enkelt att lägga till en animation till en karaktär. Den knepiga delen är att växla mellan animationer. Du kan ställa in en startanimation i skapa-funktionen.
gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");
Den första raden skapar spelaren. Det är samma sak som att skapa en sprite med en enda bild som vi gjorde tidigare. Den andra raden ställer in animeringen till snurra. Spin är en ledig animation som går igenom alla bildrutor från noll till elva.
Nu, när du laddar om ditt spel, kommer den inaktiva animeringen att börja spelas. Men du kommer att märka att den fortsätter att spela även efter att du flyttat din karaktär. Att ställa in animationerna baserat på rörelse är lite knepigare.
Frestelsen är att ändra animationen när spelaren trycker på knappen som vi gjorde för att ställa in rörelsen. Problemet med detta tillvägagångssätt är att vi kontrollerar om spelaren trycker på en tangent i uppdateringsfunktionen. Uppdateringsfunktionen kör varje bildruta. Om vi lägger en animation där, kommer animeringen att starta om varje bild som spelaren trycker ner tangenten.
För att lösa detta måste vi använda en annan metod. Istället för att kolla om en nyckel är nere, vi vill veta om en nyckel är JustDown. JustDown är bara sant när knappen först trycks ned. Om nyckeln hålls inne är det inte sant. Om vi ställer in animeringen med JustDown kommer animeringen inte att återställa varje bildruta.
Du måste skapa en variabel för nyckelinmatningen du vill övervaka i skapa-funktionen:
leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
Sedan vill du kontrollera om knappen är nedtryckt i uppdateringsfunktionen:
if(Phaser.Input.Keyboard.JustDown(upKey)){
gamePiece.anims.play("up");
}
Nu kommer spelet att ändras till upp-animeringen när upp-tangenten först trycks ned. Du måste skriva en liknande if-sats för varje riktningsknapp.
Vi har fortfarande en sista ändring att göra. Just nu, när spelaren slutar trycka på en tangent, fortsätter den sista animeringen att spelas. Vi vill att den ska gå tillbaka till vår inaktiva animation. För att göra detta använder vi JustUp metod. Liknande JustDown, tänds den när spelaren släpper en nyckel.
if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
}
När spelaren slutar trycka på upp-tangenten kommer den att ställa tillbaka animationen till vår tomgångsanimering. Du måste skriva ett liknande uttalande för varje riktningsknapp.
Gå till pastebin för att se den slutliga koden.
Nästa steg: Skapa din egen animering
Att skapa animationer i Phaser skiljer sig inte så mycket från att använda en statisk bild. Men det kommer att ta din spelutveckling till nästa nivå! Phaser gör det enkelt att lägga till animationer så att du kan koncentrera dig på den svåra delen: att göra animeringen!
Glöm inte dessa tips när du skapar ditt eget spriteark:
Animationsramarna måste alla ha samma dimensioner. Ramarna kommer att lagras i en array som börjar på noll. Animationer kräver ofta andra triggers än de triggers som ställer in rörelse.
Om författaren
Jennifer Seaton (21 artiklar publicerade)
J. Seaton är en vetenskapsskribent som specialiserat sig på att bryta ner komplexa ämnen. Hon har en doktorsexamen från University of Saskatchewan; hennes forskning fokuserade på att använda spelbaserat lärande för att öka elevernas engagemang online. När hon inte arbetar hittar du henne när hon läser, spelar tv-spel eller trädgårdsarbete.
Mer från Jennifer Seaton
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
