Share
Geïntroduceerd in de 2.4.7-versie van Phaser, zien de nieuwe camerafuncties er echt interessant uit en is het de moeite waard om ze te bekijken. In deze zelfstudie ziet u hoe eenvoudig het is om camera-effecten toe te passen in uw HTML5-games die met Phaser zijn gebouwd.
Opmerking: als u een inleiding tot het Phaser-framework nodig hebt, kunt u Aan de slag met Phaser: Building "Monster Wants Candy" bekijken, waarin ik de broncode opsreek en in detail uitleg.
Er zijn drie interessante nieuwe functies die u kunt gebruiken: cameraflitser, vervagen en schudden. Ze doen precies wat u van hen kunt verwachten. Laten we eens kijken waarom die erg handig zijn en in overweging moeten worden genomen in je volgende game-ontwikkelingsproject met Phaser.
Tot nu toe gebruikte ik de Juicy plug-in om dergelijke functionaliteiten te bereiken, maar de broncode is al lang geleden verlaten en moest het zelf regelen. Nu met de ingebouwde functies en een deel van de Phaser-broncode, hoef ik me geen zorgen te maken over compatibiliteitsproblemen of framework-updates. Ze zijn ook een stuk eenvoudiger te implementeren.
Ik gebruik de Enclave Phaser-sjabloon als een casestudy: het zijn een aantal basisfunctionaliteiten, van statussen via audio en highscore-management tot tweens en animaties. De sjabloon is open source en beschikbaar op GitHub als onderdeel van het initiatief open.enclavegames.com, zodat je gemakkelijk kunt zien hoe alles is geïmplementeerd, inclusief de nieuwe camera-effecten..
Oké, laten we verder gaan met het daadwerkelijke implementatiedeel.
Het flitsen van de camera kan worden gebruikt voor slag- of impacteffecten, bijvoorbeeld wanneer de speler wordt geraakt door de kogel van de vijand, kan het scherm voor een kort moment rood worden. Dit is het flitscamera-effect met de parameters uitgelegd:
flits (kleur, duur, kracht);
Het vult het scherm met de effen kleur en vervaagt over de gegeven duur naar alpha 0. U kunt de force-parameter gebruiken om andere flitseffecten te overschrijven en deze als enige hebben die op het huidige moment wordt uitgevoerd. De standaardkleur is wit en de flits duurt een halve seconde (500 milliseconden):
flash (0xffffff, 500, false);
Het flitsen van de camera kan voor verschillende effecten worden gebruikt. In de Enclave Phaser-sjabloon maakt het een mooie naadloze overgang bij het oproepen van een nieuwe staat, om het hoofdmenu weer te geven nadat alle bronnen zijn geladen. In plaats van alles meteen weer te geven, kunnen we de flitser met zwarte kleur gebruiken als basis:
this.camera.flash (0x000000, 500, false);
Het wordt helemaal aan het einde van de maakfunctie in de MainMenu.js bestand dat de menustaat vertegenwoordigt. Je kunt het effect in actie zien op een gif:
Zoals u kunt zien, bereikt dit een mooi, vloeiend effect. Laten we nu verdergaan met het vervagen van de camera.
Om het gevoel van bewegen tussen staten compleet te maken, kunnen we fade gebruiken om een omgekeerde flits te bereiken en de toestand soepel laten verdwijnen. Als dit goed wordt gedaan, kan dit een fade-out, fade-in effect tot gevolg hebben, dat er heel mooi uitziet. Dit is de theorie:
vervagen (kleur, duur, kracht);
De parameters zijn exact hetzelfde als in de flits van een camera, behalve dat de standaardkleur niet wit is, maar zwart:
vervagen (0x000000, 500, false);
Het begint het scherm te vullen van alpha 0 met de opgegeven kleur en eindigt met een effen vulling. De daadwerkelijke broncode van de clickStart actie op de Start-knop in de MainMenu.js bestand ziet er als volgt uit:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, function () this.game.state.start ('Story');, this); Het vervaagt het scherm over een periode van 200 milliseconden en opent vervolgens een nieuwe status na dezelfde hoeveelheid tijd om beide acties te synchroniseren. Dit is hoe het eruit ziet in actie:
Het combineren van flash en fade maakt een mooie overgang tussen staten. Laten we nu verdergaan met het shake-effect.
Een andere handige Phaser-cameramethode is shake-it. Deze methode kan worden gebruikt voor situaties waarbij een speler de obstakels raakt wanneer hij door het asteroïdenveld vliegt of een krachtige bom uit de inventaris gebruikt. Het kan worden uitgevoerd wanneer het botst met de spelobjecten die op het scherm zweven.
shake (intensiteit, duur, kracht, richting, shakeBounds);
De eerste parameter bepaalt hoeveel de camera schudt en de tweede parameter hoelang de shake zal duren. De derde gaat over het vervangen van de reeds draaiende beweging als deze parameter is ingesteld op waar. De vierde bestuurt de shake horizontaal, verticaal of beide, en de laatste parameter bepaalt of de camera buiten de grenzen van de wereld zal trillen om te laten zien wat daar is. Dit is het voorbeeld met de standaardwaarden:
schudden (0,05, 500, waar, Phaser.Camera.SHAKE_BOTH, waar);
Hij zal de camera schudden 0.05 intensiteit, gedurende een halve seconde (500 milliseconden), de dwingen parameter is ingesteld op waar, de camera zal in beide richtingen schudden, en ook buiten de grenzen van de wereld. Als u de shake niet hoeft aan te passen en de standaardparameters niet hoeft aan te houden, kunt u deze tijdens de aanroep gewoon weglaten en hetzelfde doen als hierboven:
schudden();
En zo ziet de daadwerkelijke shake eruit in de Enclave Phaser Template-broncode wanneer de punten worden toegevoegd in de Game.js het dossier:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
De laatste drie parameters zijn exact hetzelfde als de standaardwaarden, dus hadden ze kunnen worden weggelaten, maar werden achtergelaten voor educatieve doeleinden. Zie het in actie:
In dit geval is de intensiteit lager dan de standaardwaarde en is de duur korter om het gevoel een beetje zwakker te maken, dus het zal de speler niet te veel afleiden.
Er is ook een handige kleine methode samen met die drie hierboven uitgelegd. Je kunt alle actieve effecten resetten, en vanuit het oogpunt van programmeren hoef je niet eens te weten of er op dat moment een probleem is - er is een speciale resetFX methode die u kunt gebruiken.
this.camera.resetFX ();
Het wist onmiddellijk alle actieve camera-effecten en verwijdert ze van het scherm.
Als u wilt weten of een bepaald effect actief is of al is beëindigd, kunt u de gebeurtenissen gebruiken die door het framework worden geboden: onFlashComplete, onFadeComplete, en onShakeComplete.
Denk aan het vervagingsvoorbeeld bij het klikken op een knop in het hoofdmenu? Het werd gedaan door een vaste hoeveelheid tijd te wachten, en toen werd de staat overgeschakeld naar een nieuwe. We kunnen het beter doen met behulp van de onFadeComplete evenement:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (function () this.game.state.start ('Game');, this); Deze weg werd in de volgende stap geïmplementeerd, in de Story.js bestand bij het overschakelen van de Verhaalstatus naar de Game-een. Je moet toegeven dat het er beter uitziet, en de staat wordt precies gelanceerd wanneer het effect is voltooid, ongeacht hoe lang het duurt.
Zoals je kunt zien, zijn dat behoorlijk krachtige functies als het gaat om het toevoegen van dit extra "sapje" of het oppoetsen van je games. Ze zijn tegelijkertijd ook heel gemakkelijk te gebruiken - het is goed om te zien dat ze van nature geïmplementeerd zijn in Phaser.
Voel je vrij om de broncode van Enclave Phaser Template te pakken, de effecten te implementeren en links naar je nieuw geüpgradede games met ons te delen in de comments!
