Share
Om du använder Corona SDK, vet du att det är ett kraftfullt och lättanvänt verktyg för att skapa mobilspel. Plattformen är dock begränsad till bara två dimensioner, även om de kommer ut med inbyggda sätt att simulera 3-D-effekter. Som spelutvecklare kan du något övervinna denna begränsning genom att använda det som kallas djupfältkonceptet.
Även om jag ska referera till Corona SDK i mitt exempel kan skärpedjeteori tillämpas på någon utvecklingsplattform och till nästan alla grafiska objekt.
Om du har dabbled i fotografi, vet du redan vad skärpedjupet är. För de av oss som inte vet, ska jag försöka förklara. Djupfältet är den suddiga effekten som du ser på fotografier som orsakas av fokus på ett visst objekt över andra. Djupfältet baseras på två begrepp, uppfattning om fokus och emulerande avstånd.
I det första konceptet kommer uppfattningen av fokus att användas på två objekt eller två plan för att skapa en miljö med djup. Ett objekt kommer att vara brännpunkten och de andra objekten eller planerna kommer att vara out of focus. De objekta objekten visas nästan alltid suddiga för att hjälpa till att styra betraktarens fokus.
Det andra konceptet är emulerande avstånd. När du tittar på landskapet kommer skåpets föremål att visas större och objekt längre bort kommer att visa sig mindre. Fältets djup använder detta koncept för att förstärka djupets illusion i scenen. Genom att göra föremål i en 2D-miljö större eller mindre kommer betraktarens sinn att luras in om det finns djup i scenen.
Om du har spelat videospel före eller ens tittat på några populära fotografier har du redan sett djupet av fältkonceptet i bruk, men du kanske inte har erkänt effekten. Om du kör en snabb Google Image-sökning efter skärpedjup kan du se hundratals exempel på den här fotografistilen. De bilder som du ser ser allt från landskap till bröllopsfoton. I varje djupfältfotografi vet du omedelbart vad fotografen vill att tittaren ska titta på.
Genom att använda skärpedjup kan du styra motivets fokus och skapa djup genom att fokusera på huvudämnet samtidigt som andra element sparas ur fokus. Även om jag gillar att utveckla med Corona SDK, är denna effekt ett enkelt men kraftfullt sätt att övervinna 2D-begränsningarna i Corona SDK-plattformen.
I följande exempel förklarar jag hur fältets djup kan användas i mobilspel. Använd gärna djupfältkonceptet i något av dina mobila applikationer med SDK efter eget val.
Nu när vi vet vad skärpedjup är, låt oss titta på ett exempel på en scen som inte använder fältets djupkoncept.
I denna scen är båda fåglarna i fokus och det verkar som en platt skärm till betraktaren. Även om den här scenen kan vara tillräckligt bra för vissa spel kan vi använda djupet på fältkonceptet för att göra scenen mer intressant för spelaren och verkligen ta den till liv. I nästa scen ser du ett grundläggande exempel på fältkonceptet i bruk.
Genom att använda skärpedjupskonceptet har denna scen simulerat avstånd genom att hålla fågeln till vänster i fokus och lämnar fågeln helt utan fokus. Att få bort fokusfågeln mindre förstärker också uppfattningen av avstånd.
Vi kan också vända scenen så att kontaktpunkten visas längre bort. Att göra de större föremålen suddiga och hålla fokuspunkten i fokus gör det här omkastningen. Låt oss ta en titt på ett exempel på denna scenomvandling.
I omvänd scenen har vi gjort den mindre fågeln i fokus och vi har lurat betraktaren i att antagandet att den mindre fågeln ligger längre bort genom att suddas på närmaste föremål.
Nu kan du vara nyfiken på hur dessa grafik skapades. Om du har Photoshop eller ett liknande grafiskt redigeringsverktyg kan du använda en Gaussian Blur för att skapa skärmdjupscenar. Jag är säker på att någon typ av suddning kommer att fungera, men jag har haft mest framgång med Gaussian Blur. Låt oss ta en titt på hur du skapar en suddig och en oskarp bild för vår app.
Med Photoshop öppna, skapa ett nytt dokument som är 150 pixlar med 150 pixlar. Standardinställningen för de andra alternativen fungerar för denna handledning.
Klicka sedan på verktyget anpassade former och välj Fågel 2 från formmenyn. I denna handledning använder jag formen av en fågel. Vilken form som helst kommer att fungera.
Nu när vi har valt en form, låt oss ändra förgrundsfärgen till en fin blå färg genom att klicka på Ställ in förgrundsfärg alternativ.
Med formverktyget skapar du en fågelform i dokumentet och försöker få fågeln att fylla upp det mesta av dokumentet.
Låt oss lägga till en enkel gräns för vår form för att ge den en viss definition.
Innan vi lägger till Gaussian Blur i vår form, låt oss gå till Arkiv> Spara för webben> Enheter för att spara formen som en PNG-fil i vår projektmapp. Den oskärpa form som vi sparar kommer att användas som kontaktpunkt i vår mobilapplikation.
När vi har sparat den oskarpa formen kan vi nu lägga till Gaussian Blur. Med de flesta former kan du bara lägga till en Gaussian Blur utan att behöva slutföra några extra steg. I vårt fall måste vi använda Flatten bild alternativet i Photoshop eftersom vi använder en gräns. Om vi inte plattar ut bilden kommer oskärpa att ge några oväntade resultat.
Högerklicka på formen och klicka på Flatten bild. När bilden är utplattad, lägg till Gaussian Blur genom att gå till Filter> Blur> Gaussian Blur.
Med vår Gaussian Blur applicerad på vår form kan vi nu spara formen i vår projektmapp med samma anvisningar i steg 6.
När du har genomfört dessa åtta steg borde du ha två fåglar i projektmappen, en tydlig och skarp bild av en fågel och en suddig fågel. Nu kan du integrera dessa bilder i din nästa mobilapplikation.
I den här handledningen hoppas jag att du har lärt dig hur du använder djupet på konceptet för att få dina spel till liv. Även om jag har använt en fågel i min handledning kan du använda nästan alla föremål för att skapa en scen med djup med hjälp av djupet av fältkonceptet. Du kan tillämpa skärpedjup till bakgrunden på din nästa 2D-sida-scroller eller tillämpa konceptet på vissa delar av ditt nästa skräckspel. Tack för att du läser!
Accentsconagua