Gå utover Retro Pixel Art med flat skyggelagt 3D i enhet

I denne veiledningen viser jeg deg hvordan du lager flatskjermet 3D-grafikk for ditt Unity-spill, og forklar hvorfor du vil gjøre det i utgangspunktet.

I dag er det en overflod av 3D-verktøy og -motorer som gjør at noen kan lage 3D-spill. Utfordringene til 3D-kunst er imidlertid skremmende og krever ofte stor tid, innsats og ekspertise som solo gamedev eller hobbyist ikke har. Lavpolygonmodeller, i kombinasjon med flat skygge, bringer tilbake stilen til de tidlige 90-tallet, ved hjelp av teknikker som alle kan lære. Og det er ikke bare en nostalgisk throwback; flatskjerming kan enkelt kombineres med moderne teknikker som omgivende okklusjonskart for å gi spillet et slående, avantgarde utseende.

Få eksemplet Unity-prosjektet her

Denne opplæringen forutsetter at du allerede vet hvordan du gjør 3D-modellering, eller kan finne gratis 3D-modeller på internett. Jeg skal trekke eksempelmodeller ut av tynn luft; Det er mange tutorials på internett for hvordan du kommer i gang i 3D-modellering. Hvis du bare har startet, kan jeg anbefale Wings 3D og SketchUp. Begge har ekstremt tilgjengelige grensesnitt i forhold til profesjonelle modelleringsprogrammer, og vil eksportere til formater som Blender og Unity kan bruke.


Hvorfor bruk Flat Shading?

Så du har bestemt deg for å få hendene dine skitne med Unity og begynne å lage et helt 3D-spill. Kanskje du ikke har noen tidligere spillkunst ferdigheter, eller kanskje du har laget noe kunst for 2D-spill; I begge tilfeller vil du raskt lære at 3D-spill krever et veldig stort sett med ferdigheter å skape. Ikke bare trenger du å lære å lage 3D-modeller, du må pakke ut disse modellene for å tegne en tekstur på overflaten av modellen din riktig. Du må også forsiktig lage tekstur, selvfølgelig.

Hva om du bare kunne lage modellen, men har den ferdig og klar for spillet ditt etter noen få ekstra skritt for å farge og skygge det? Du kan ende opp med noe slikt:

Eller dette:

Visst, utseendet er spartansk og lo-fi-men det er poenget! Enten du satser på tidlig 90-års nostalgi, et moderne abstrakt utseende, eller bare vil spare mye tid på å lage eiendeler for et jam-spill, er flatskjerming et utmerket valg for stil for nybegynnere og 3D-eksperter.

Hvis du bare er i gang med spillkunst, kan enkelheten i arbeidsflyten du konsentrere deg om grunnleggende: lære å lage en 3D-modell med en fin silhuett og form, og fargelegge den med et lite sett med håndplukkede farger. Konsentrere seg om disse grunnleggende lærer deg de grunnleggende ferdighetene til kunst uten forstyrrelser.


Hvor flat skygge fungerer

Hver 3D-modell er sammensatt av et sett med vinkler som bestemmer formen på den modellen. For hvert toppunkt er det også en vektor kalt a normal-tenk på dette som en liten pinne som stikker ut av toppunktet.

Rendering-motoren bruker normal for hvert toppunkt og sammenligner retningen til hvilken som helst innkommende lyskilde (r), og retningen som kameraet vender mot, for å bestemme mengden lys som skal gjelde for det vertexet.

Gjenvinningen reduserer sakte mengden lys fra ett toppunkt til det neste, og gir en grunnleggende 3D-modell et "pudder" -utseende. Med mindre du bruker en tekstur (og ofte, selv om du gjør det), ser dette veldig forferdelig ut på noe som egentlig ikke er en svingete, pussete overflate:

Med flat skygging mottar hele overflaten av et polygon en jevn mengde lys, beregnet ut fra en normal stikker utover fra polygonens midtpunkt:

Moderne modelleringsapplikasjoner bruker "harde kanter" eller "utjevningsgrupper" for å justere modellens vertex-normaler for å matche polygonen de grenser til, slik at den blir jevnt og skyggelagt. En dyktig 3D-kunstner vil bruke disse til å gjøre skarpe kanter ser skarpe ut og flate overflater ser flatt ut, men vi er interessert i å gjøre hele modellen skarp og flat. Heldigvis gjør Unity dette veldig enkelt.


Grunnleggende teknikk

Hvis du er tilstrekkelig kjent med modellverktøyet ditt, kan du få modellen til å være flatskygget ved å sette alle kanter som "hard". Men i Unity kan du ganske enkelt velge å la Unity lage hardkanter automatisk:

Trinn 1

Klikk på modellen din i Prosjekt vindu for å ta opp det Importer innstillinger i Inspektør panel.

Steg 2

Gå til Normaler og tangenter delen og i normaler dropdown, velg Regne ut.

Trinn 3

Sett Smoothing Angle til 0 og klikk Søke om.

Enhet vil lage en kant som er skarpere vinkel enn dette til en hard kant. Vi vil at alle kantene våre skal være vanskelige, så naturligvis sette den på 0 gir denne effekten.

Ta gjerne eksperimenter med forskjellige utjevningsvinkler, avhengig av geometrien på modellen din, kan det være en utrolig enkel måte å gi det et helt annet utseende.

Trinn 4

Nå som vi har vår modell flatt skyggelagt, må vi gi den litt farge! Det er mange måter å gjøre dette på, men noen er bedre enn andre:

  • Velg deler av modellen og sett dem til et annet materiale for hver farge du vil bruke.
  • Tilordne vertexfarger i modelleringsprogrammet ditt.
  • Opprett en "paletttekstur" som inneholder en haug med fargede firkanter og tekstur-kartet din modell ved å bruke dette.

Jeg foretrekker mest den siste metoden, som jeg beskriver for deg nedenfor. Normalt, etter å ha opprettet en 3D-modell, må du omhyggelig pakke ut den for å matche en håndlaget tekstur. Men siden vi bare er interessert i å ha en enkelt farge for hvert polygon, spiller det ingen rolle hva UV-uopppakkingsjobben ser ut - det kan bare være en tilfeldig knurring av poeng, så lenge det er på toppen av det riktige farge!

Det første trinnet i farging er å skape tekstur. For eksempel, la oss si at vi vil ha fire farger:

Deretter laster du ferdig 3D-modell i din valgte modell og laster opp tekstur. Velg alle ansiktene på modellen du ønsker å være en bestemt farge, og automatisk UV-pakke dem ut. Resultatet vil trolig være en forvirrende jumble av polygoner.

Som sagt, skjønt, det spiller ingen rolle. Flytt alle polygonene oppå hverandre og skala dem ned i en liten blomst som passer inn i en av rutene på paletttekstur. Dra deretter dem på toppen av fargen du ønsker.

Ta en titt på modellen din; De teksturerte delene har nå den riktige fargen! Gjenta denne prosessen for resten av ansiktene på modellen din, og velg og pakk dem ut igjen, basert på fargen du vil at de skal være. Hvis du gjør en feil, er det ikke så farlig, bare velg ansiktene igjen, pakk igjen om nødvendig, og legg dem på rett sted på tekstur. Det samme kan ikke sies for "ekte" UV-pakking!

Voilà! Du har en farget, flatskjermet modell som du kan importere inn i spillet ditt.


Hva om de andre metodene?

I tilfelle du lurte på, er det noen grunner til å unngå de to andre metodene:

Flere materialer

Denne metoden skaper mange materialer du må holde styr på i Unity, og enda viktigere, Unity vil ikke dynamisk batch modellene dine og bruke en hel tegneanrop for hvert materiale, som ofte er den minste flaskehalsen på moderne grafikkhardware.

Enkelt sagt, vil du få forferdelig ytelse hvis du bruker denne metoden i stor utstrekning.

Vertex-farger

Dette fungerer egentlig ganske bra, og du kan faktisk bruke dette, avhengig av dine spesifikke behov eller kunstflyt. Men du vil legge merke til noe umiddelbart: Når du importerer modellen din og bruker en grunnleggende Diffus skygger, ser ikke vertex-fargene dine opp!

Dette er fordi de grunnleggende shaders ignorerer dem; du må bruke spesielle shaders som faktisk bruker vertex fargedata. Disse kan lett bli funnet, men ting blir kompliserte hvis du også vil ha andre gjengivelseseffekter fra andre shaders: disse shaders bruker ofte heller ikke vertexfarger, og du må selv endre shader.

Hvis du ikke allerede vet hvordan du skriver shaders, kan dette føre til mye tid og krefter som du hellere vil bruke på resten av spillet ditt. Det kan også være meg, men jeg synes det er mye lettere å endre flere farger på en gang med en tekstur i stedet for å sette dem manuelt i en modell eller i spillet med et skript.


Optimalisering

Nå som du har en teksturpalett og en grunnleggende teknikk fant ut, kan du fortsette å lage resten av modellene for spillet ditt. Som du kanskje mistenker, kan du bare fortsette å legge til farger på paletten din og bruke samme tekstur for hele spillet.

Det er faktisk noen store ytelsesfordeler ved å gjøre dette: Hvis du holder deg til å bruke det samme materialet for hele spillet ditt, vil Unity vanligvis trekke alle objektene dine mer effektivt ved å "batche" dem. Som jeg nevnte før, er "trekk samtaler" en stor flaskehals i datagrafikk, og det er en god ide å holde dem til et minimum.

Enhet vil automatisk prøve å tegne scenen din i så få ringer som mulig hvis du bruker et enkelt materiale til alt, men hver modell må skaleres på samme måte og har mindre enn 300 punkter. Det vil informere deg hvor godt det er gjort i Statistikk vindu:

Tips: Hvis du vil vite mer om batching, må du sjekke ut Unity docs på emnet. Dette bør være nødvendig å lese for alle som er interessert i utførelsen av spillet sitt!


Endre farger på fly

Du har et sett med modeller som er flate skyggefulle og farget, og alt virker på plass, men hva om du vil bytte farger mens spillet blir spilt?

For eksempel, la oss si at du har et skript som vil gyte flyet ditt, men etterpå vil du fargelegge det blå hvis det er vennlig eller rødt hvis det er en fiende. Du kan sikkert bare lage egne paletter og separate materialer, men det betyr at du mister ytelsesforhøyelsen ved å batching disse to typer fly.

Det er ikke en stor sak hvis det bare er noen få av dem på en gang. Imidlertid ta eksempel på et prosedyrisk generert terreng bestående av tonn og tonn fliser eller terninger, av mange forskjellige terrengtyper, som et bestemt populært sandkassespill. Dette ville bety massevis av trekksamtaler - men frykt ikke, det er en måte å fortsette å bruke bare ett materiale på!

Husk hvordan du fargede modellen ved å skyve UV-koordinatene inn i fargede bokser? Enhet lar deg modifisere toppunktene til modellen din i fly, inkludert UV-koordinatene, slik at du kan flytte UV-koordinatene til riktig fargeboks via script for hver annen terrengtype..

Opprett et nytt C # -skript i Unity called PaletteColorizer og lim inn denne koden i den:

bruker UnityEngine; bruker System.Collections; offentlig klasse PaletteColorizer: MonoBehaviour public int colorsPerRow = 4; offentlig int colorIndex = 0; offentlig bool overrideUVs = false; void Awake () if (! enabled) return;  SetUVsToColor (colorIndex);  ugyldig oppdatering ()  offentlig tomgang SetUVsToColor (int colorIndex) if (overrideUVs) SetUVs (gameObject, GetColorOffset (colorIndex));  ellers TranslateUVs (gameObject, GetColorOffset (colorIndex));  Vector2 GetColorOffset (int colorIndex) Vector2 offset = ny Vector2 (); float row = Mathf.Floor (colorIndex / colorsPerRow); float step = 1.0f / colorsPerRow; offset.x = (colorIndex - (rad * colorsPerRow)) * trinn; offset.y = (1.0f - (rad / colorsPerRow)); returnere offset;  statisk offentlig tomt TranslateUVs (GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent (); Mesh mesh = meshFilter.mesh; var newUVs = ny Vector2 [mesh.uv.Length]; for (int i = 0; i < mesh.uv.Length; i++)  newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y);  mesh.uv = newUVs;  static public void SetUVs(GameObject obj, Vector2 offset)  var meshFilter = obj.GetComponent(); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2[mesh.uv.Length]; for(int i=0; i < mesh.uv.Length; i++)  newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f);  mesh.uv = newUVs;  

For å bruke dette skriptet må du bare legge det til som en komponent til et hvilket som helst spillobjekt med et materiale som bruker en paletttekstur, angi antall farger per rad, og angi fargerindeksen (starter med 0 i øvre venstre hjørne og teller til høyre og ned).

Hvis modellens UV-koordinater ikke er satt opp for å passe inn i palettboksene (for eksempel ved "vann" quad rundt heksene), kontroller du Overstyr UVs boksen; som du kan se over, vil dette gjøre skriptet skrive helt nye koordinater i stedet for å skifte eksisterende.

En ting å huske på om denne metoden er at når man endrer noe nett, vil Unity stille stille et nytt nett i minnet. Hvis du gjør dette spesielt ofte på et stort antall masker, kan det føre til minneproblemer, og du vil se på et middel for caching og deling av masker som har blitt fargelagt på samme måte. For et rimelig antall lav-poly-modeller, skjønner du sannsynligvis aldri å bekymre deg for det.


Bakt Ambient Occlusion

Flat skygge trenger ikke nødvendigvis alltid å være sammenkoblet med ensartede fargeklosser. En måte du kan legge til litt subtil detalj og et realistisk "støvete" utseende til overflaten, er å legge til omgivende okklusjon til den. Unity Pro gir måter å legge til omgivende okklusjon som et etterbehandlingsfilter, men jeg vil vise deg en måte du kan legge til den ekstra biten av polsk uten at du trenger Pro-versjonen, og uten at du trenger noen spesielle shaders.

Alt du trenger å gjøre er å pakke ut modellen din og "bake" den omgivende okklusjonseffekten på en tekstur. Dette krever at du faktisk bruker litt tid og krefter på å pakke ut modellen på riktig måte, men etter det er det et spørsmål om noen få klikk og litt fiddling i malingsprogrammet ditt for å gi modellen en litt mer ekte, avantgarde utseende.

Trinn 1

Først vil du starte opp Blender med en tom scene: Trykk EN For å velge alle objekter i oppstartscenen, trykk Slett, trykk deretter på D å bekrefte. Du vil ikke ha noen lamper eller kameraer fordi disse vil bli importert som tomme søppelobjekter i Unity.

Steg 2

Deretter importerer du modellen din inn i den. (Fil> Import> Wavefront (.obj)). For dette eksempelet, la oss starte med en stein.

Trinn 3

Åpne UV-editoren og opprett en tekstur som kan inneholde omtrent hvor mange detaljer du vil ha. Jeg er ganske gjerrig, så jeg holder meg til 256x256px for alt om størrelsen på spilleren (en stein eller et tre), og bare større for svært store gjenstander (som fjellet de går på).

Trinn 4

Nå pakker du ut modellen din. Det er mange måter å gå om dette, som er dekket i mye mer detalj enn jeg noensinne kunne håpe på, så vær så snill å konsultere Blender-dokumentasjonen eller andre online opplæringsprogrammer om hvordan du på riktig måte kan pakke ut modellen.

Trinn 5

Nå som du har en uåpnet modell, er du klar til å bake den omgivende okklusjonen på tekstur. Blender vil gjengi den omgivende okklusjonen direkte på teksturen din, og respekterer UV-koordinatene du nettopp har sluppet ut. Følg bare disse trinnene:

  1. Klikk på Render knappen (kameraikonet) på Egenskaper-panelet på høyre side av skjermen.
  2. Rull ned til Bake underpunktet (nederst) og utvide det.
  3. Endre Bake Mode fra Full Render til Ambient okklusjon.
  4. Klikk på Bake knappen rett over det.

Trinn 6

Nå har du den bakte AO tekstur og en modell som har de riktige UV koordinatene for å bruke den. Lagre tekstur til en bildefil og eksporter modellen i Blender til et format Enhet kan bruke (for eksempel .FBX).

Trinn 7

Avhengig av dine behov, kan du kanskje bruke tekstur som-er. Bare opprett et nytt diffus materiale som bruker den nye bakte AO-teksten, og sett fargen på noe som ser fint ut.

Du vil imidlertid sannsynligvis ha modeller med flere farger, for eksempel et tre. Du trenger bare å følge noen ekstra trinn. Følg instruksjonene ovenfor for å lage en baket AO-tekstur for din tremodell. Denne gangen vil du imidlertid holde styr på hvor du setter UV-koordinatene dine, fordi du må farge disse stedene på tekstur manuelt.

Det ville være lurt å gruppere dine UV-øyer etter farge. I dette eksemplet setter jeg koffertdelene på toppen av tekstur og bladdelene på bunnen.

Trinn 8

Åpne din bakte AO-tekstur med ditt valgfri malingsprogram (alt som støtter lagene vil gjøre, for eksempel GIMP). Lag et nytt lag og legg det over ditt AO-lag, ved hjelp av AO-laget som en veiledning for å fargelegge det nye laget i henhold til farger du vil se i modellen.

Bruke Lasso verktøy eller annet valgverktøy du ønsker, for å velge delene av teksten du vil farge, fyll deretter de med riktig farge.

Trinn 9

Du har nå fargene satt opp, så det er på tide for den endelige oppgaven: å blande AO på toppen av fargene. Flytt AO-laget øverst på det fargede laget, og endre blandemodus til Multiplisere.

Sett lagets opasitet til det som ser fint ut. Bruk din egen vurdering, men vær sikker på å skrive ned denne prosentandelen, siden du vil ha en jevn effekt på alle dine teksturer, vil du bruke den samme blandingsmetoden og mengden.

Lagre denne tekstur til en fil og importer den i Unity ved siden av tremodellen. Lag et materiale akkurat som du gjorde for boulderen, ved hjelp av teksten du nettopp har laget.

Det er ganske mye det! Bruk denne teknikken på alle modellene for å gi hele scenen en mer polert, konkret utseende enn du kunne få med grunnleggende flatskjerming.

Du kan legge merke til at materialene dine bruker bare grunnleggende diffuse shaders. En av de vakre tingene ved å bruke bakt AO blandet direkte på toppen av fargeteksturen, er at du kan bruke denne teksturen med en hvilken som helst annen skygge som tar en diffus tekstur ... uten AO-spesifikk kode som kreves!


Konklusjon

Nå har du en praktisk verktøykasse med grafikk teknikker du kan bruke til å lage et helt flatskjermet spill. Med nok trening kan du lage fantastiske visuals som er raske å produsere og som gir effektivitet.