Share
Als u Corona SDK gebruikt, weet u dat het een krachtige en eenvoudig te gebruiken tool is voor het maken van mobiele games. Het platform is echter beperkt tot slechts twee dimensies, hoewel ze worden uitgevoerd met ingebouwde manieren om 3D-effecten te simuleren. Als gameontwikkelaar kun je deze beperking enigszins overwinnen door het gebruik van wat bekend staat als het scherptediepterconcept.
Hoewel ik in mijn voorbeeld zal verwijzen naar Corona SDK, kan de scherptediepte-theorie worden toegepast op elk ontwikkelingsplatform en op bijna elk grafisch object.
Als je gedurfd hebt met fotografie, weet je al wat de scherptediepte is. Voor degenen onder ons die het niet weten, zal ik proberen het uit te leggen. Scherptediepte is het wazige effect dat u op foto's ziet als gevolg van de focus op een bepaald object boven andere. De scherptediepte is gebaseerd op twee concepten, perceptie van focus en emulatieafstand.
In het eerste concept zal de focusperceptie worden gebruikt op twee objecten of twee vlakken om een omgeving met diepte te creëren. Eén object zal het brandpunt zijn en de andere objecten of vlakken zullen onscherp zijn. De onscherpte-objecten zullen bijna altijd wazig overkomen om de focus van de kijker te beheersen.
Het tweede concept is het emuleren van afstand. Als je naar een landschap kijkt, zal de kastobjecten naar je toe groter lijken en objecten verder weg kleiner lijken. Scherptediepte gebruikt dit concept om de illusie van diepte in de scène te versterken. Door objecten in een 2D-omgeving groter of kleiner te maken, wordt de geest van de kijker misleid door aan te nemen dat er diepte in de scène is.
Als u eerder videogames hebt gespeeld of zelfs naar een aantal populaire foto's hebt gekeken, hebt u al het concept van de scherptediepte in gebruik gezien, maar mogelijk hebt u het effect niet herkend. Als u snel een Google Image-zoekopdracht uitvoert voor de scherptediepte, kunt u honderden voorbeelden voor deze stijl van fotografie bekijken. De foto's die u ziet, variëren van landschappen tot trouwfoto's. In elke scherptedieptefoto weet je meteen waar de fotograaf op wil letten.
Door de scherptediepte te gebruiken, kunt u de focus van de scène regelen en diepte creëren door in te zoomen op het hoofdonderwerp terwijl andere elementen onscherp blijven. Hoewel ik het leuk vind om met Corona SDK te ontwikkelen, is dit effect een eenvoudige maar krachtige manier om de 2D-beperkingen van het Corona SDK-platform te overwinnen.
In de volgende voorbeelden zal ik uitleggen hoe velddiepte kan worden gebruikt in mobiele games. Voel je vrij om het scherptediepteconcept in elk van je mobiele applicaties te gebruiken met de SDK van je keuze.
Nu we weten wat de scherptediepte is, laten we eens kijken naar een voorbeeld van een scène die geen gebruik maakt van het scherptediepterconcept.
In deze scène zijn beide vogels scherpgesteld en lijkt het een flatscreen voor de kijker. Hoewel deze scène misschien goed genoeg is voor sommige games, kunnen we het scherptediepteconcept gebruiken om de scène interessanter voor de speler te maken en echt tot leven te brengen. In de volgende scène ziet u een eenvoudig voorbeeld van het concept van de scherptediepte dat wordt gebruikt.
Door het concept van de scherptediepte te gebruiken, heeft deze scène de afstand gesimuleerd door de vogel links in focus te houden en de vogel rechts onscherp te laten. Door de onscherpe vogel kleiner te maken, wordt ook de perceptie van afstand versterkt.
We kunnen ook de scène omkeren om het brandpunt verder weg te laten lijken. De grotere objecten wazig maken en het brandpunt in focus houden, volbrengen deze omkering. Laten we een voorbeeld van deze scèneomkering bekijken.
In de omkeerscène hebben we van de kleinere vogel het brandpunt gemaakt en hebben we de kijker misleid om aan te nemen dat de kleinere vogel verder weg is door de dichtstbijzijnde objecten te vervagen.
Inmiddels ben je misschien nieuwsgierig naar hoe deze afbeeldingen zijn gemaakt. Als u Photoshop of een vergelijkbaar gereedschap voor grafische bewerking hebt, kunt u een Gaussiaans vervagen gebruiken om scherptediepscènes te maken. Ik weet zeker dat elk type vervaging werkt, maar ik heb het meeste succes gehad met de Gaussian Blur. Laten we eens kijken hoe we een wazige en niet-vervaagde afbeelding voor onze app kunnen maken.
Open met Photoshop een nieuw document van 150 bij 150 pixels. De standaardinstelling voor de andere opties werkt voor deze zelfstudie.
Klik vervolgens op het hulpmiddel voor aangepaste vormen en selecteer Vogel 2 in het vervolgkeuzemenu vorm. In deze tutorial gebruik ik de vorm van een vogel. Elke vorm zal werken.
Nu we een vorm hebben geselecteerd, laten we de voorgrondkleur veranderen in een mooie blauwe kleur door op de te klikken Zet voorgrondkleur op keuze.
Maak met het vormgereedschap een vogelvorm in het document en probeer de vogel het grootste deel van het document te laten opvullen.
Laten we een eenvoudige rand toevoegen aan onze vorm om er een definitie aan te geven.
Voordat we de Gaussiaanse vervaging toevoegen aan onze vorm, laten we gaan Bestand> Opslaan voor web> Apparaten om de vorm als een PNG-bestand op te slaan in onze projectmap. De niet-gevulkaniseerde vorm die we opslaan, zal worden gebruikt als middelpunt in onze mobiele applicatie.
Nadat we de niet-wazige vorm hebben opgeslagen, kunnen we nu de Gaussiaanse vervaging toevoegen. Bij de meeste vormen kunt u gewoon een Gaussiaanse vervaging toevoegen zonder dat u extra stappen hoeft uit te voeren. In ons geval zullen we de Afbeelding afvlakken optie in Photoshop omdat we een rand gebruiken. Als we de afbeelding niet afvlakken, levert de vervaging enkele onverwachte resultaten op.
Klik met de rechtermuisknop op de vormlaag en klik op Afbeelding afvlakken. Nadat de afbeelding is afgeplat, voegt u de Gaussiaanse vervaging toe door naar Filter> Blur> Gaussiaans vervagen.
Met onze Gaussiaanse vervaging op onze vorm toegepast, kunnen we nu de vorm in onze projectmap opslaan met dezelfde instructies in stap 6.
Nadat je deze acht stappen hebt voltooid, zou je twee vogels in je projectmap moeten hebben, een helder en helder beeld van een vogel en een wazige vogel. U kunt deze afbeeldingen nu opnemen in uw volgende mobiele applicatie.
In deze zelfstudie hoop ik dat je hebt geleerd hoe je het scherptediepteconcept kunt gebruiken om je games tot leven te brengen. Hoewel ik een vogel in mijn zelfstudie heb gebruikt, kun je bijna elk object gebruiken om een scène met diepte te maken met behulp van het scherptediepterconcept. Je kunt de scherptediepte toepassen op de achtergrond van je volgende 2D-side-scroller of het concept toepassen op bepaalde elementen van je volgende horrorspel. Bedankt voor het lezen!
Accentsconagua