Share
Prezentat în versiunea 2.4.7 a lui Phaser, noile caracteristici ale camerei arată foarte interesant și merită să le verificați. În acest tutorial veți vedea cât de ușor este să aplicați efectele camerei video în jocurile dvs. HTML5 construite cu Phaser.
Notă: dacă aveți nevoie de o introducere în cadrul Phaser, puteți verifica să începeți cu Phaser: Construiți "Monster Wants Candy", unde defalc codul sursă și explic acest lucru în detaliu.
Există trei funcții noi interesante pe care le puteți utiliza: blitz-ul camerei foto, decolorare și agitare. Ei fac exact ceea ce vă puteți aștepta de la ei. Să vedem de ce acestea sunt foarte utile și ar trebui să fie luate în considerare în următorul proiect de dezvoltare a jocului cu Phaser.
Până acum folosesc pluginul Juicy pentru a obține astfel de funcționalități, dar codul sursă a fost abandonat cu mult timp în urmă și a trebuit să o gestionez eu însumi. Acum, cu caracteristicile încorporate și o parte din codul sursă Phaser, nu trebuie să vă îngrijor de probleme de compatibilitate sau de actualizări de cadre. Ele sunt, de asemenea, mult mai ușor de implementat.
Voi folosi Enclave Phaser Template ca un studiu de caz - este un set de funcționalități de bază, de la state, prin gestionarea audio și highscore la tweens și animații. Șablonul este deschis și este disponibil pe GitHub ca parte a inițiativei open.enclavegames.com, astfel încât să puteți vedea cu ușurință modul în care a fost implementat, inclusiv noile efecte ale camerei.
Ok, să trecem la partea de implementare reală.
Intermiterea camerei poate fi folosită pentru efecte de lovitură sau de impact - de exemplu, atunci când jucătorul este lovit de glonțul inamicului, ecranul poate deveni roșu pentru un moment scurt. Iată efectul camerei flash cu parametrii explicați:
bliț (culoare, durată, forță);
Se umple ecranul cu culoarea solidă și se estompează la alfa 0 pe durata dată. Puteți utiliza parametrul de forță pentru a suprascrie orice alte efecte flash și pentru a avea ca singurul care rulează la momentul actual. Culoarea prestabilită este albă și blițul durează o jumătate de secundă (500 milisecunde):
bliț (0xffffff, 500, false);
Intermiterea camerei poate fi folosită pentru diferite efecte. În Template-ul Enclave Phaser, face o tranziție frumosă fără probleme atunci când aduceți un nou stat, pentru a afișa meniul principal după ce toate resursele au terminat încărcarea. În loc să arătăm totul instantaneu, putem folosi blițul cu culoarea neagră ca bază:
this.camera.flash (0x000000, 500, fals);
Se execută la sfârșitul funcției de creare în MainMenu.js fișier reprezentând starea meniului. Puteți vedea efectul în acțiune pe un gif:
După cum puteți vedea, acest lucru are un efect frumos și fără probleme. Acum, hai să trecem la camera.
Pentru a face sentimentul de mișcare între stări complet, putem folosi decolorare pentru a obține un bliț invers și pentru a face ca starea să se estompeze fără probleme. Dacă este făcută în mod corespunzător, acest lucru poate aduce un efect de estompare, estompare, care arată foarte frumos. Iată teoria:
decolorare (culoare, durată, forță);
Parametrii sunt exact la fel ca în blițul camerei, cu excepția faptului că culoarea implicită nu este albă, ci negru:
decolorare (0x000000, 500, fals);
Începe să umple ecranul de la alfa 0 cu culoarea dată și se termină cu o umplere solidă. Codul sursă actual din clic pe Start de acțiune pe butonul Start din MainMenu.js fișierul arată astfel:
Accentsconagua
clickStart: funcția () this.camera.fade (0x000000, 200, false); this.time.events.add (200, funcția () this.game.state.start ('Story');, aceasta); Se estompează ecranul pe o perioadă de 200 de milisecunde și apoi lansează o nouă stare după aceeași perioadă de timp pentru a sincroniza ambele acțiuni. Așa arată în acțiune:
Combinarea blițului și decolorării face o tranziție plăcută între state. Acum, hai să trecem la efectul de agitare.
O altă metodă utilă pentru camera Phaser este agitarea - poate fi utilizată pentru situațiile în care un jucător lovește obstacolele când zboară prin câmpul de asteroizi sau folosește o bomba puternică din inventar. Acesta poate fi executat atunci când se ciocnesc cu obiectele de joc care plutesc pe ecran.
agitare (intensitate, durată, forță, direcție, mișcare);
Primul parametru controlează cât de agitat aparatul foto, iar cel de-al doilea cât durează trecerea. Al treilea se referă la înlocuirea mișcării care funcționează deja dacă acest parametru este setat la Adevărat. Cel de-al patrulea controlează mișcarea orizontală, verticală sau ambele, iar ultimul parametru decide dacă camera se va agita în afara limitelor lumii arătând tot ce există. Iată exemplul cu valorile implicite:
se agită (0,05, 500, adevărat, Phaser.Camera.SHAKE_BOTH, adevărat);
Aceasta va agita aparatul foto 0,05 intensitate, pentru o jumătate de secundă (500 milisecunde), forta parametrul este setat la Adevărat, camera se va agita in ambele directii, dar si in afara limitelor lumii. Dacă nu aveți nevoie să personalizați agitația și să lăsați parametrii impliciți, puteți să le omiteți în timpul apelului și aceasta va funcționa la fel ca mai sus:
scutura();
Iată cum arată shake-ul real în codul sursă Template Phaser Enclave atunci când punctele sunt adăugate în Game.js fişier:
this.camera.shake (0.01, 100, adevărat, Phaser.Camera.SHAKE_BOTH, adevărat);
Ultimii trei parametri sunt exact aceiași cu cei impliciți, astfel încât ar fi putut fi omisi, dar au fost lăsați în scopuri educaționale. Vedeți în acțiune:
În acest caz, intensitatea este mai mică decât valoarea implicită, iar durata este mai scurtă pentru a face să se simtă puțin mai slabă, deci nu va distrage prea mult jucătorul.
Există, de asemenea, o metodă la îndemână, împreună cu cele trei explicate mai sus. Puteți să resetați toate efectele active, iar din punctul de vedere al programării, nici măcar nu trebuie să știți dacă există alergări la momentul dat - există o specială resetFX metoda pe care o puteți utiliza.
this.camera.resetFX ();
Elimină imediat toate efectele actuale ale camerei și le elimină de pe ecran.
Dacă doriți să știți dacă un efect specific este activ sau deja încheiat, puteți utiliza evenimentele furnizate de cadru: onFlashComplete, onFadeComplete, și onShakeComplete.
Amintiți-vă exemplul de decolorare pe butonul de buton din meniul principal? A fost făcută prin așteptarea unei perioade fixe de timp, apoi statul a fost schimbat la unul nou. Putem o face mai bine folosind onFadeComplete eveniment:
faceți clic pe Continuați: funcția () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (funcția () this.game.state.start ('Joc');, aceasta); Acest mod a fost implementat în etapa următoare, în Story.js fișier atunci când treceți de la starea Story la cea de joc. Trebuie să recunoașteți că arată mai bine și statul este lansat exact când efectul este finalizat, indiferent de durata acestuia.
După cum puteți vedea, acestea sunt caracteristici destul de puternice atunci când vine vorba de adăugarea acestui "suc" suplimentar sau polonez la jocurile tale. Ele sunt în același timp foarte ușor de utilizat - este minunat să le vedem implementate nativ în Phaser.
Simțiți-vă liber să apăsați codul sursă al Enclave Phaser Template, să puneți în aplicare efectele și să împărtășiți linkurile către jocurile recent actualizate cu noi în comentarii!
