Share
Introdusert i 2.4.7-versjonen av Phaser, ser de nye kamerafunksjonene veldig interessant ut, og det er verdt å sjekke dem ut. I denne opplæringen ser du hvor lett det er å bruke kameraeffekter i HTML5-spillene dine, bygget med Phaser.
Merk: Hvis du trenger en introduksjon til Phaser-rammen, kan du sjekke Komme i gang med Phaser: Bygg "Monster vil ha godteri", der jeg bryter ned kildekoden og forklarer det i detalj.
Det er tre interessante nye funksjoner du kan bruke: kameraflits, fade og riste. De gjør akkurat det du kan forvente av dem. La oss se hvorfor de er veldig nyttige og bør vurderes i ditt neste spillutviklingsprosjekt med Phaser.
Til nå brukte jeg Juicy plugin for å oppnå slike funksjoner, men kildekoden ble forlatt for lenge siden, og jeg måtte klare det selv. Nå, med funksjonene som er innebygd og en del av Phaser-kildekoden, trenger jeg ikke å bekymre meg for kompatibilitetsproblemer eller rammeoppdateringer. De er også mye enklere å implementere.
Jeg vil bruke Enclave Phaser Template som en case study-det er et sett med grunnleggende funksjoner, fra stater gjennom lyd og highscore-ledelse til tweens og animasjoner. Malen er åpen og tilgjengelig på GitHub som en del av open.enclavegames.com-initiativet, slik at du enkelt kan se hvordan alt har blitt implementert, inkludert de nye kameraffekter.
Ok, la oss gå videre til selve implementeringsdelen.
Blinkende kameraet kan brukes til treff- eller støtvirkninger, for eksempel når spilleren rammes av fiendens kulde, kan skjermen bli rød i et kort øyeblikk. Her er flashkameraeffekten med parametrene forklart:
flash (farge, varighet, kraft);
Den fyller skjermen med den fargede fargen og fades bort til alfa 0 over den angitte varigheten. Du kan bruke kraftparameteren til å overskrive andre flasheffekter og ha dette som den eneste som kjører i øyeblikket. Standardfarge er hvit, og blitsen varer i et halvt sekund (500 millisekunder):
flash (0xffffff, 500, false);
Blinkende kameraet kan brukes til ulike effekter. I Enclave Phaser Template gjør det en fin sømløs overgang når du oppretter en ny stat, for å vise hovedmenyen etter at alle ressursene er ferdig lastet. I stedet for å vise alt umiddelbart, kan vi bruke blitsen med svart farge som en base:
this.camera.flash (0x000000, 500, false);
Den utføres på slutten av opprettingsfunksjonen i MainMenu.js fil som representerer menystilstanden. Du kan se effekten i handling på en gif:
Som du kan se, oppnår dette en fin, glatt utseende-effekt. La oss nå gå videre til kamerafade.
For å få følelsen av å flytte mellom tilstandene er fullført, kan vi bruke fade til å oppnå en omvendt blits og få staten til å falle ut jevnt. Hvis det gjøres riktig, kan dette føre til en uttoning, fade-in effekt, som ser veldig bra ut. Her er teorien:
fade (farge, varighet, kraft);
Parametrene er nøyaktig det samme som i et kameras flash, bortsett fra at standardfarge ikke er hvit, men svart:
fade (0x000000, 500, false);
Det begynner å fylle skjermen fra alfa 0 med den oppgitte fargen og ender med en solid fylling. Den faktiske kildekoden fra clickStart handling på Start-knappen i MainMenu.js filen ser slik ut:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, funksjon () this.game.state.start ('Story');, dette); Det fader skjermen over en periode på 200 millisekunder og lanserer deretter en ny stat etter samme tid for å synkronisere begge handlingene. Dette er hvordan det ser ut til å fungere:
Kombinere blits og fade gjør en fin overgang mellom tilstandene. Nå, la oss gå videre til shake-effekten.
En annen nyttig Phaser-kamerametode er risting. Den kan brukes til situasjoner der en spiller treffer hindringene når de flyr gjennom asteroidefeltet, eller bruker en kraftig bombe fra lageret. Det kan utføres når det kolliderer med spillobjektene som flyter på skjermen.
rist (intensitet, varighet, kraft, retning, shakeBounds);
Den første parameteren styrer hvor mye kameraet rister og den andre hvor lenge risten varer. Den tredje handler om å erstatte den allerede kjørte risten hvis denne parameteren er satt til ekte. Den fjerde styrer risten horisontalt, vertikalt eller begge deler, og den siste parameteren bestemmer om kameraet skal riste utenfor verdensgrensen som viser hva som er der. Her er eksemplet med standardverdiene:
rist (0,05, 500, sant, Phaser.Camera.SHAKE_BOTH, sant);
Det vil riste kameraet med 0.05 intensitet, i et halvt sekund (500 millisekunder), makt parameteren er satt til ekte, Kameraet vil riste i begge retninger, og også utenfor verdensgrensen. Hvis du ikke trenger å tilpasse risten og forlate standardparametrene, kan du bare utelate dem i samtalen, og det vil fungere som det samme som ovenfor:
riste();
Og slik ser den faktiske risten i kildekode Enclave Phaser Template når punktene legges til i Game.js fil:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
De tre siste parameterne er nøyaktig de samme som standardene, slik at de kunne ha blitt utelatt, men ble etterlatt for utdanningsformål. Se det i aksjon:
I dette tilfellet er intensiteten lavere enn standardverdien, og varigheten er kortere for å få det til å føles litt svakere, så det vil ikke forstyrre spilleren for mye.
Det er også en praktisk liten metode sammen med de tre som er forklart ovenfor. Du kan nullstille eventuelle aktive effekter, og fra programmeringssynspunktet trenger du ikke engang å vite om det kjører på det gitte tidspunktet - det er en spesiell resetFX metode du kan bruke.
this.camera.resetFX ();
Det fjerner umiddelbart eventuelle pågående kameraeffekter og fjerner dem fra skjermen.
Hvis du vil vite om en bestemt effekt er aktiv eller allerede avsluttet, kan du bruke hendelsene som følger med rammen: onFlashComplete, onFadeComplete, og onShakeComplete.
Husk fadeeksempelet på knappeklikk i hovedmenyen? Det ble gjort ved å vente en fast tid, og da ble staten byttet til en ny. Vi kan gjøre det bedre med å bruke onFadeComplete begivenhet:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (funksjon () this.game.state.start ('Game');, dette); Denne måten ble implementert i neste trinn, i Story.js fil når du bytter fra Story-tilstand til Game One. Du må innrømme at det ser bedre ut, og staten lanseres nøyaktig når effekten er fullført, uansett hvor lenge den varer.
Som du kan se, er de ganske kraftige funksjoner når det gjelder å legge til denne ekstra "juice" eller polish til spillene dine. Samtidig er de også veldig enkle å bruke. Det er flott å se dem implementert i Phaser.
Ta gjerne kilden til Enclave Phaser Template, implementer effektene, og del linker til dine nylig oppgraderte spill med oss i kommentarene.!
