Share
Introducerad i 2.4.7-versionen av Phaser ser de nya kamerafunktionerna väldigt intressant ut och det är värt att kolla dem. I den här handledningen ser du hur lätt det är att tillämpa kamerain effekter i dina HTML5-spel som är byggda med Phaser.
Obs! Om du behöver en introduktion till Phaser-ramverket kan du kolla Komma igång med Phaser: Bygg "Monster Wants Candy", där jag bryter ner källkoden och förklarar den i detalj.
Det finns tre intressanta nya funktioner du kan använda: kamerans blixt, blekna och skaka. De gör precis vad du kan förvänta dig av dem. Låt oss se varför de är mycket användbara och bör övervägas i ditt nästa spelutvecklingsprojekt med Phaser.
Hittills använde jag Juicy plugin för att uppnå sådana funktioner, men källkoden var övergiven för länge sedan och jag var tvungen att hantera det själv. Nu med funktionerna inbyggda och en del av Phaser-källkoden behöver jag inte oroa mig för kompatibilitetsproblem eller ramuppdateringar. De är också mycket enklare att genomföra.
Jag använder Enclave Phaser Template som en fallstudie - det är en uppsättning grundläggande funktioner, från stater till ljud och highscore management till tweens och animeringar. Mallen är öppen och tillgänglig på GitHub som en del av initiativet open.enclavegames.com, så att du enkelt kan se hur allting har implementerats, inklusive de nya kameraflödena.
Okej, låt oss gå vidare till den faktiska implementeringsdelen.
Blinkar kameran kan användas för hit- eller slagverk-till exempel när spelaren drabbas av fiendens kula kan skärmen bli röd en kort stund. Här är flashkameraffekten med parametrarna som förklaras:
blixt (färg, längd, kraft);
Det fyller skärmen med den fasta färgen och bleknar bort till alfa 0 under den angivna varaktigheten. Du kan använda kraftparametern för att skriva över några andra flasheffekter och få den som den enda som körs vid det aktuella ögonblicket. Standardfärgen är vit, och blixten varar i en halv sekund (500 millisekunder):
blixt (0xffffff, 500, falskt);
Blinkar kameran kan användas för olika effekter. I Enclave Phaser Template gör det en bra sömlös övergång när du får upp ett nytt tillstånd, för att visa huvudmenyn när alla resurser har slutförts. I stället för att visa allt direkt kan vi använda blixten med svart färg som bas:
this.camera.flash (0x000000, 500, false);
Den körs i slutet av skapningsfunktionen i MainMenu.js fil som representerar menystillståndet. Du kan se effekten i åtgärden på ett gif:
Som du kan se, uppnår detta en fin, jämn utseendeffekt. Låt oss nu gå vidare till kamerafärg.
För att få känslan av att flytta mellan olika tillstånd, kan vi använda blekna för att uppnå en omvänd blixt och göra staten bleknad smidigt. Om det görs på rätt sätt kan detta få en uttoning, försvinnande effekt, vilket ser väldigt fint ut. Här är teorin:
blekna (färg, längd, kraft);
Parametrarna är exakt samma som i en kamerans blixt, förutom att standardfärgen inte är vit, men svart:
blekna (0x000000, 500, falskt);
Det börjar fylla skärmen från alfa 0 med den givna färgen och slutar med en solid fyllning. Den faktiska källkoden från clickStart Åtgärd på Start-knappen i MainMenu.js filen ser så här ut:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, funktion () this.game.state.start ('Story');, detta); Det tappar skärmen över en period av 200 millisekunder och lanserar sedan ett nytt tillstånd efter samma tid för att synkronisera båda åtgärderna. Det här ser ut som om det verkar:
Kombinera blixt och blek gör en fin övergång mellan tillstånd. Nu, låt oss gå vidare till skakningseffekten.
En annan användbar Phaser-kamerametod är skaka-den kan användas för situationer där en spelare träffar hindren när han flyger genom asteroidfältet eller använder en kraftfull bomb från inventeringen. Det kan utföras när det kolliderar med spelobjekten som flyter på skärmen.
skaka (intensitet, längd, kraft, riktning, shakeBounds);
Den första parametern styr hur mycket kameran skakar och den andra hur länge skakningen kommer att vara. Den tredje handlar om att ersätta den redan körda skakningen om den här parametern är inställd på Sann. Fjärden kontrollerar skakningen horisontellt, vertikalt eller båda, och den sista parametern bestämmer om kameran ska skaka utanför världsgränserna och visa vad som finns där. Här är exemplet med standardvärdena:
skaka (0,05, 500, sant, Phaser.Camera.SHAKE_BOTH, sant);
Det kommer att skaka kameran med 0,05 intensitet, i en halv sekund (500 millisekunder), tvinga parametern är inställd på Sann, kameran kommer att skaka i båda riktningarna och även utanför världens gränser. Om du inte behöver anpassa skakningen och lämna standardparametrarna, kan du bara släppa bort dem i samtalet och det kommer att fungera som ovan:
skaka();
Och så ser den faktiska skakningen ut i källkoden för Enclave Phaser Template när punkterna läggs till i Game.js fil:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
De tre sista parametrarna är exakt samma som de standardiserade, så det kunde ha utelämnats men lämnades för utbildningsändamål. Se den i aktion:
I detta fall är intensiteten lägre än standardvärdet och varaktigheten är kortare för att få det att känna sig lite svagare, så det kommer inte att distrahera spelaren för mycket.
Det finns också en praktisk liten metod tillsammans med de tre som förklaras ovan. Du kan återställa alla aktiva effekter, och från programmeringssynpunkt behöver du inte ens veta om det går någon gång vid den angivna tiden-det finns en speciell resetFX metod du kan använda.
this.camera.resetFX ();
Det rensar omedelbart eventuella pågående kamerain effekter och tar bort dem från skärmen.
Om du vill veta om en viss effekt är aktiv eller redan avslutad, kan du använda händelserna som tillhandahålls av ramen: onFlashComplete, onFadeComplete, och onShakeComplete.
Kom ihåg det blekna exemplet på knappen klicka på huvudmenyn? Det gjordes genom att vänta en viss tid och sedan byttes staten till en ny. Vi kan göra det bättre med hjälp av onFadeComplete händelse:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (funktion () this.game.state.start ('Game');, detta); Detta sätt genomfördes i nästa steg, i Story.js fil när du växlar från Story-status till Game One. Du måste erkänna att det ser bättre ut, och staten lanseras exakt när effekten är klar, oavsett hur länge den varar.
Som du kan se är det ganska kraftfulla funktioner när det gäller att lägga till denna extra "juice" eller polska till dina spel. De är samtidigt också mycket lätta att använda. Det är bra att se dem implementeras i Phaser.
Känn dig fri att ta tag i källkoden för Enclave Phaser Template, implementera effekterna och dela länkar till dina nyligen uppgraderade spel med oss i kommentarerna!
