Share
Hva du skal skapeMange spillutviklere er programmerere først og artister andre. Enten du bruker pikselkunst fordi du foretrekker det "retro" utseendet, eller du ikke har tid eller erfaring til å ta kunsten til neste nivå, kan denne enkle effekten øke visuell appell av spillet ditt.
Denne fasade pixel-stilen oppnås ved først å forstørre din 1: 1-pixelkunst samtidig som du opprettholder det opprinnelige aspektforholdet. Deretter kan du, gjennom en veldig enkel prosess som kan brukes under eiendomsopprettelse eller på kjøretid, slå din standardpikselkunst til noe som ser bra ut selv ved HD-oppløsninger. Effekten er så enkel at den kan brukes på nesten hvilket som helst programmeringsspråk, utviklingsmiljø og motor. I denne opplæringen vil jeg introdusere deg til fasade piksler på en slik måte at du med sikkerhet vil kunne implementere denne effekten i ditt eget spillprosjekt.
Så hva er en skråpiksel? En enkelt piksel er det minste grafiske elementet som brukes til å representere kunst i digital form, så på en måte kan du tenke på piksler som 2D byggeblokker. En faset piksel utvider bare på det byggesteinekonseptet ved å introdusere kunstig dybde.
Ting blir litt forvirrende når du innser at skråpiksler er sammensatt av flere "vanlige" piksler, men det er faktisk ikke så nær så komplisert som det ser ut til. For å forstå prosessen fullt ut, starter vi fra begynnelsen med en grunnleggende forståelse av piksler.
Først, la oss snakke om pikselstørrelser og -forhold. Ovennevnte bilde viser det samme sprite i sin opprinnelige størrelse, og forstørres hele veien opp til fem ganger den størrelsen. For hver forstørrelse øker også den opprinnelige pikselblokkens "byggestein" i størrelse. Når en standardpiksel forstørres fem ganger (500%), blir den en 5x5 blokk piksler. Nå er du igjen med en sprite som har et 1: 5 pikselforhold. Dette tallet betyr ganske enkelt at hver 1x1 piksel i den opprinnelige sprite er nå representert av en 5x5 blokk piksler. Hele sprite, opprinnelig måling 14x15 piksler, er nå 70x75 piksler i størrelse.
Nå som vår sprite består av mye større pikselblokker, kan vi se hvordan skråpiksler fungerer.
Ovenstående bilde viser det samme sprite ved hjelp av standardpiksler til venstre og fasade piksler til høyre. Med standardpiksler er hver 5x5 blokk sammensatt av samme farge. I det fasade pikseleksemplet kan vi se at 5x5-blokken nå består av flere forskjellige nyanser av samme farge.
Den første firkanten i hver versjon er 5x5 pixelblokken som representerer standard 1x1 pixel i det opprinnelige bildet. Det andre settet av firkanter er en forstørret versjon av denne 5x5-blokken for å vise sammensetningen av den fasade pixelblokken. Disse pikslene er arrangert på en slik måte at de gir illusjonen om dybde, med høydepunkter i øverste høyre hjørne av 5x5-blokken og skyggene i nederste venstre hjørne. Når det kombineres for å opprette det endelige bildet, resulterer dette i en sprite som ser ut til å være sammensatt av små, skråblokkerte blokker, i stedet for flat, 2D piksler.
Nå som du forstår grunnleggende om avfasede piksler, la oss kort oppsummere hvordan denne effekten oppnås.
Først må du avgjøre om du skal implementere denne effekten på kjøretid i ditt faktiske spill, eller generere dine kunstverdier med fasade piksler "bakte i". I begge tilfeller oppnås den avfasede pikselvirkningen på omtrent samme måte.
Du begynner med å lage en skråsprett som er den samme dimensjonen som den endelige forstørrede "sprite block" -størrelsen. For eksempel, hvis ditt endelige kunstverk skal være 1: 4 (forstørret fire ganger), vil du opprette en 4x4-skråblokk. Denne bevelen blir deretter lagt på toppen av det forstørrede sprite- eller spillvinduet, og gjentas for å fylle hele skjermen. Ved å leke med blandemodus og opasitet, kan du oppnå forskjellige resultater.
Jeg vil dekke begge metodene mer detaljert senere, men for nå bør vi være oppmerksomme på noen få kritiske regler og retningslinjer.
Selv om denne effekten enkelt oppnås ved å bruke et enkelt overlegg, er det flere viktige ting som kan hindre at de avfasede pikslene fins opp riktig.
Det mest åpenbare problemet er sprite størrelse i forhold til skrå overlay størrelse. Alle dine eiendeler må følge utvidelsesforholdet diktert av størrelsen på skråblokken din, eller skrålinjer vil ikke være konsekvente.
Det er også viktig å bestemme størrelsen på spillvinduet ditt før du forstørrer noen av dine eiendeler. Hvis størrelsen på ditt spillvindu er 640x480px, og du vil bruke en 4x4-skråning (1: 4-forhold), bør dine opprinnelige eiendeler utformes til 160x120px. Når du forstørrer kunstmidler, husk at alt må være 'X' ganger større enn den opprinnelige størrelsen, hvor 'X' er et helt tall.
Enhver endring i spillvisningen eller den individuelle sprite-posisjoneringen må også vurderes nøye når du prøver å tegne skråoverlegget. Dette bringer oss til den viktigste regelen som følger:
Grid-basert bevegelse er obligatorisk! I bildet ovenfor har vi et riktig eksempel på nettbasert bevegelse til venstre og et feil eksempel til høyre. Fordi de opprinnelige eiendelene har blitt forstørret fire ganger, bør alle vertikale og horisontale bevegelser feste seg til et 4x4-rutenett. Katten sprite, til høyre, har flyttet en piksel til høyre og en piksel ned, noe som resulterer i at sprite bryter strømmen av jevne skråblokker.
Det var et eksempel på en avfaset piksel-effekt som ble "bakt inn" til eiendelene. Følgende eksempel viser hva som skjer når du ikke følger nettbasert bevegelse mens du implementerer effekten på runtime:
Legg merke til hvordan skråpikseloverlegget er litt feiljustert over hele bildet. Dette skyldes at skråoverlegget dekker hele spillvinduet og beveger seg ikke, mens sprites under beveger seg, men ikke snapper til 4x4-nettet. Husk at alle i bevegelsesbevegelsen må tilpasses gridet diktert av størrelsen på skråblokken din, som bestemmes av ressursforstørrelsesforholdet ditt.
Ja, det er mer logisk fornuftig å implementere denne effekten innen spillkoden din, i stedet for under opprettelsen av aktiva. Hvis du bruker denne virkningen under eiendomsopprettelsen, kan du imidlertid få mer frihet til å eksperimentere raskt og finne den perfekte stilen som passer ditt prosjekt. Du kan bruke forskjellige overlegg ved å bruke forskjellige blandestiler, justere metningen og kontrasten til din underliggende kunst, og erstatte farger for å finne akkurat den rette balansen før du bestemmer deg for det endelige utseendet ditt.
Dette er et forstørret eksempel på en 6x6 skråblokk. Du vil ønske å holde svingblokkene dine på en gjennomsiktig bakgrunn, men jeg brukte blå her, slik at du kan se forskjellen i ugjennomtrengelighet.
For å lage denne skråblokken begynte jeg med et lerret som passer til min forutbestemte, endelige kunststørrelse. I dette bestemte eksempelet opprettet jeg et 6x6 bilde beregnet på 1: 6 pixel art (600% utvidelse). Deretter startet jeg med en pikselbørste i nederste venstre hjørne og brukte tre piksler svart på 75% opasitet. Da jeg flyttet vekk fra hjørnet, reduserte jeg opassingen til penselen min til 50% og til slutt til 25%. Da speilet jeg den samme teknikken, men med hvit, startet i øvre venstre hjørne.
Mange vanlige verktøy, som for eksempel Photoshop og GIMP, lar deg lage og definere egendefinerte mønstre. Dette er den raskeste og enkleste måten å fylle hele lerretet med et faset overlapp på. For eksemplet ovenfor fjernet jeg den blå bakgrunnen og lagret bevelblokken som et mønster. Nå når jeg vil bruke dette overlegget til min kunst, er alt jeg trenger å gjøre, bruk malingbøtteverktøyet til å slippe mønsteret på det øverste laget.
Når du har definert noen tilpassede skråblokkmønstre, kan du begynne å eksperimentere med forskjellige stiler. Ovenfor har vi fire forskjellige skråstilter som er brukt på det samme bildet. Legg merke til hvordan subtile endringer i konstruksjonen og opaciteten til de forskjellige skråblokkene i stor grad kan endre formen og vibransen til de resulterende sprites. Eksperimenter med forskjellige størrelser og stiler for å finne type skrå som komplimenterer pikselkunst.
De ulike blandingstilstandene som tilbys av de fleste tegneverktøy, kan også resultere i drastisk forskjellige effekter.
I bildet over blir samme skråkonstruksjon brukt ved hjelp av tre forskjellige blandemoduser. Standardoverleggsmodusen skaper et veldig slående og levende bilde, med en intens kontrast mellom de skarpe og mørke områdene. Fargebrytningsmodusen demper gjerne de lette områdene av skråningen, noe som skaper en nesten trekantet og ujevn skråning. Soft Light-modusen er perfekt for dempede farger, noe som gir en mindre markert fasade kant.
I stedet for å sette inn eiendeler i spillet ditt som har denne effekten baket i, kan du i stedet generere den fasade pikseloverlegget på kjøretid. Dette vil resultere i et spill som er langt mer skalerbart og tilpasningsdyktig hvis du noen gang bestemmer deg for å endre eiendeler, gridbevegelse eller spillvinduestørrelse senere.
Selv om jeg ikke kan fortelle deg nøyaktig hvordan du implementerer denne effekten i ditt spesifikke prosjekt, kan jeg definitivt peke deg i riktig retning. De fleste spill-IDE-er har den generelle funksjonaliteten som kreves for denne effekten, så du bør ikke ha noe problem med å integrere et skrått bildeoverlegg i prosjektet ditt. Brukere av Flash og ActionScript kan for eksempel bruke ColorMatrixFilter til å bruke blandingsmodus til skråoverlegget, og Game Maker-brukere kan bruke de innebygde forgrunnsverktøyene, eller til og med lage et dedikert skrå overleggsobjekt som hviler på et bestemt lag over kunst eiendeler.
Først må du bestemme hvordan du skal håndtere den første aktiva utvidelsen. Jeg anbefaler at du bruker 1: 1 pikselkunst og skaler alt før du tegner det på skjermen, og bruker deretter skråoverlegget som en etterbehandlingseffekt.
For det andre bør du tenke på å lage en feilsøkingsmeny som vil tillate deg å teste forskjellige skjermstørrelser og blandemoduser. Du vet aldri hvordan forskjellige farger og bevegelser vil reagere på bestemte skrå overlegg, så spill det trygt og eksperimentere med så mange kombinasjoner som mulig. Du kan oppleve at det er nødvendig å endre opasiteten eller blandingsmodusen under bestemte scener i spillet ditt, slik at det kan være praktisk å kunne teste disse ut i sanntid..
Du bør også planlegge hvordan du skal håndtere HUD eller GUI for spillet ditt. Ønsker du at disse elementene skal sitte over eller under det fasade pikseloverlegget?
Den avfasede pixel-effekten ble brukt på noen kjente eldgammeltspill.Denne effekten er en fantastisk måte å krydre spillkunst uten å kreve noen komplekse algoritmer, shaders eller en sint talentfull artist. Er du rushed for tid i et spill jam? Dette er en rask og enkel måte å legge til litt ekstra visuell polish på arbeidet ditt.
Det mest verdifulle aspektet av denne effekten er imidlertid at det oppfordrer deg til å få hendene skitne og eksperimentere, noe som utvilsomt vil lede deg til en rekke andre funn underveis.
Accentsconagua