Spriters: Et nytt håp.

I løpet av det siste tiåret har veksten innen videospill eksplodert på grunn av ny teknologi. I begynnelsen besto alle spill kun av flott gameplay og piksler. Men i løpet av de siste årene har 3D-spill blitt mer dominerende, og nå med fremveksten av HTML5 kan spritere kanskje pushe piksler for spill igjen!

For utviklere er det mest tiltalende med HTML5 at det fungerer på tvers av flere plattformer – hele veien fra “interwebs” til håndholdte enheter. Med det følger noen begrensninger for kunsten. Likevel vil artister som foretrekker en klassisk tilnærming finne at denne plattformen gir dem en måte å blomstre på. Nemlig gjennom pikselkunst.

For artister er det kuleste med HTML5 potensialet for flere pikselkunst-spill. Denne typen spill har en viss sjarm. Når du ser på et bilde fra et pikselspill, ser du byggesteinene – skjelettet som utgjør en vakker komposisjon.

Jeg har stor respekt for artister som kan skape mer med mindre. Det er lett å glemme de tusenvis av piksler som utgjør et bilde når du ser på et stort spill med høy oppløsning. Pikselartister bygger et bilde fra grunnen av. For å få det til kreves det planlegging og forutseenhet, og en veldig sterk sans for fargeteori.

En del av moroa med piksel-pushing er følelsen av mestring du får når du er ferdig med en bakgrunn eller en karakter. Det minner om å fullføre et legosett. Alle de små bitene som faller på plass for å skape noe stort og kult. For artister som ikke har prøvd pikselkunst, anbefaler jeg det på det sterkeste som en øvelse. Det bygger karakter.

Så her er den delen som gjør meg begeistret: muligheten for et fullproduksjons pikselkunst-spill. Forumer som Pixel Joint er fylt med verk som bare ber om å bli gjort til spill i full lengde.

Relatert: Unity Asset Store — Ferdiglaget kunst, verktøy og maler som faller rett inn i Unity-prosjektet ditt.

Kan du forestille deg et spill i full lengde laget med den tiden og omsorgen det tar disse artistene å lage ÉTT bilde?! Det ville vært LEGEN (vent på det) DARY. Og også dette: CanvasCycle. Helt utrolig.

Fargesyklet bakgrunner ville vært episke brukt i et side-scrolling eventyr!

Et godt eksempel på et nyere pikselspill er Sword & Sworcery. Jeg vil gjerne se flere nye spill som dette. HTML5s bekvemmelighet på tvers av plattformer betyr fortsatt vekst for spillutvikling og høyere etterspørsel etter pikselartister. Sannheten er at du kan lage et virkelig rått pikselspill med HTML5. Noen vil kanskje si at pikselkunst er lavoppløst søppel, men jeg ser digital pointillisme og en vakker kunstform som ellers kunne ha forsvunnet.

Vårt valg: Udemy Game Development Courses — On-demand-kurs som dekker Unity, Unreal, C++, C# og shader-programmering.

Viktige takeaways

• HTML5s rekkevidde på tvers av plattformer er den største enkeltårsaken til at pikselkunst blomstrer igjen – ett sett med ressurser kan kjøres i en nettleser, på en telefon og på et nettbrett.
• Pikselkunst er ikke en begrensning du nøyer deg med; det er en disiplin som tvinger frem sterk komposisjon, fargeteori og planlegging.
• Canvas-elementet og verktøy som CanvasCycle åpner for teknikker (palettsykling, prosedyrebakgrunner) som er genuint vanskelige å få til i 3D-pipelines.
• Et fullproduksjons pikselkunst-spill er et oppnåelig mål for et lite team, ikke en uoppnåelig drøm – barrieren er håndverk og tid, ikke teknologi.
• Hvis du er en artist som ikke har prøvd piksel-pushing, behandle det som en øvelse. Det bygger karakter.

Hvorfor HTML5 endret matematikken for pikselartister

Salgsargumentet for HTML5 er enkelt: skriv én gang, kjør hvor som helst. Under panseret er arbeidshesten <canvas>-elementet, som gir JavaScript direkte tilgang til en bitmap du kan tegne i, ramme for ramme. For en pikselartist er det en gave. Du kjemper ikke mot en tekstur-pipeline eller en shader-kompilator – du tegner fargerektangler i et rutenett, som er nøyaktig slik pikselkunst blir laget i utgangspunktet.

Sammenlign de to verdenene:

Bekymring	Tradisjonell 3D-pipeline	HTML5 canvas / piksel-pipeline
Oppretting av ressurser	Modellering, UV-mapping, rigging, teksturering	Tegn på et fast pikselrutenett, eksporter et sprite-ark
Filstørrelse	Store mesher og teksturer	Små PNG-er og indekserte paletter
Skalering	Oppløsningsavhengig, trenger LOD-er	Nearest-neighbor-skalering holder kantene skarpe
Portering	Bygg og shadere per plattform	Én kodebase, mange nettlesere og enheter
Risiko for kunstnerisk retning	Lett å se generisk ut	Distinkt som standard

Avveiningen er imidlertid reell. Canvas-gjengivelse er CPU-bundet i mange tilfeller, og du må være bevisst på hvor mange sprites du pusher per ramme. Du må også håndtere enhetens pikselforhold nøye, ellers vil de nøye plasserte pikslene flyte ut i grøt på en skjerm med høy DPI. Løsningen er å gjengi til et lavoppløselig støttelerret og skalere det opp med bildeutjevning deaktivert – en teknikk enhver HTML5-pikselutvikler til slutt lærer.

Håndverket bak “å skape mer med mindre”

Når du ser på et bilde fra et pikselspill, ser du byggesteinene – skjelettet som utgjør en vakker komposisjon. Jeg har stor respekt for artister som kan skape mer med mindre. Det er lett å glemme de tusenvis av piksler som utgjør et bilde når du ser på et stort spill med høy oppløsning. Pikselartister bygger et bilde fra grunnen av.

For å få det til kreves det planlegging og forutseenhet, og en veldig sterk sans for fargeteori. Noen få praktiske prinsipper som skiller god pikselkunst fra støy:

• Begrens paletten din. Klassisk maskinvare satte harde grenser – NES, for eksempel, fungerte innenfor et lite sett med samtidige farger. Begrensninger tvinger deg til å velge farger som faktisk gjør en jobb.
• Bruk selektiv kontur. En helsvart kontur flater ut en sprite. Fargede, brutte konturer antyder lys og form.
• Kontroller verdiene dine. Mys på spriten din. Hvis silhuetten ikke er tydelig, vil ingen mengde detaljer redde den.
• Respekter rutenettet. Kantutjevning for hånd, én piksel om gangen, er en ferdighet – men det er det også å vite når man ikke skal gjøre det.
• Tenk i fliser. Bakgrunner bygget av gjenbrukbare fliser er billigere å produsere og lettere å animere.

Det er derfor pikselkunst belønner planlegging. Du kan ikke skjule en svak komposisjon bak et høyt polygonantall. Hver piksel er en beslutning, og seeren ser dem alle.

Relatert: Amazon: Game Dev Books & Gear — Spillprogrammeringsbøker, mekaniske tastaturer, skjermer og dev-desk maskinvare.

Color Cycling: The Forgotten Superpower

Og også dette: CanvasCycle. Helt utrolig. Bakgrunner med fargesykling ville vært episke i et side-scrolling eventyr!

For alle som ikke har sett det: fargesykling er en teknikk der du ikke flytter på noen piksler i det hele tatt. I stedet roterer du oppføringene i en indeksert palett, og bildet ser ut til å animere – vann renner, fakler flimrer, himmelen skifter. Det var en grunnpilar i 8-bit- og 16-bit-æraene, og det er forbløffende billig å kjøre fordi du bare skriver om en liten palett, ikke tegner scenen på nytt.

CanvasCycle gjenoppliver dette på nettet ved å gjengi klassiske fargesyklede kunstverk i et HTML5-canvas. For et side-scrolling eventyr er appellen åpenbar: levende, pustende bakgrunner som nesten ikke koster noe i CPU sammenlignet med å animere hver ramme for hånd. Hvis du bygger et HTML5-spill og ønsker atmosfære uten at det går ut over ytelsen, er palettsykling et av de mest underbrukte verktøyene i verktøykassen.

Hvis du handler: Construct 3 — Nettleserbasert HTML5-motor uten kode som eksporterer til nett, mobil og skrivebord.

Fra ett bilde til et fullstendig spill

Så her er delen som gjør meg begeistret: muligheten for et pikselkunstspill i full produksjon. Forumer som Pixel Joint er fylt med verk som bare ber om å bli gjort om til spill i full lengde. Kan du forestille deg et fullverdig spill laget med den tiden og omsorgen disse artistene bruker på å lage ÉTT bilde?! Det ville vært LEGEN (vent på det) DARY.

Gapet mellom et nydelig stillbilde og et ferdigstilt spill er der de fleste prosjekter dør, og det er verdt å være ærlig om hvorfor:

• En enkelt heltesprite kan ta timer. Et komplett animasjonssett tar dager. Idle, walk, attack, hurt, death – hver av dem er sitt eget puslespill.
• Bakgrunner multipliseres. En side-scroller trenger parallakslag, overganger og fliser som går sømløst over i hverandre.
• UI er også kunst. Menyer, fonter og ikoner trenger alle samme omsorg, og pikselfonter er sin egen disiplin.
• Konsistens er den vanskelige delen. Å holde en sammenhengende stil på tvers av hundrevis av assets er et ledelsesproblem like mye som et kunstnerisk.

Den gode nyheten er at HTML5 senker den tekniske barrieren for utgivelse. Du trenger ikke et konsoll-utviklersett eller en utgiver. Du trenger et canvas, en spill-loop og disiplinen til å fullføre. Det er derfor pikselkunst-miljøet og HTML5-miljøet passer så naturlig sammen – begge belønner folk som liker å bygge ting fra grunnen av.

Lær av Sword & Sworcery

Et flott eksempel på et nyere pikselspill er Sword & Sworcery. Jeg skulle gjerne sett flere nye spill som dette. Det som gjør det lærerikt er ikke bare kunsten – det er hvordan kunsten, musikken og tempoet fungerer sammen. Pikselestetikken er ikke dekorasjon; den er hele stemningen. Det beviser at et lite team med en sterk visuell identitet kan lage noe som føles større enn budsjettet.

Hvis du studerer det, se på hvordan det bruker begrensede paletter, hvordan det lar scenene puste, og hvordan det behandler skjermen som en komposisjon snarere enn et vindu inn i et 3D-rom. Dette er leksjoner du kan ta med deg inn i ethvert HTML5-prosjekt.

Praktiske råd for aspirerende spriters

For artister som ikke har prøvd pikselkunst, anbefaler jeg det på det sterkeste som en øvelse. Det bygger karakter. Noen måter å starte på som faktisk fungerer:

• Gjenskap noe lite. Velg en sprite du elsker og bygg den opp piksel for piksel. Du lærer mer av å kopiere enn av å lese.
• Jobb med en fast størrelse. Start med et 16×16 eller 32×32 canvas og nekt å jukse ved å skalere opp.
• Studer paletter. Verktøy som Lospec huser fellesskapspaletter du kan laste direkte inn i Aseprite, GraphicsGale eller Piskel.
• Animer tidlig. Selv en sprett på to rammer lærer deg mer om lesbarhet enn et statisk mesterverk.
• Legg ut og ta imot kritikk. Fellesskap som Pixel Joint og pikselkunst-subreddits vil fortelle deg sannheten, og det er akkurat det du trenger.

En del av moroa med å pushe piksler er følelsen av mestring du får når du fullfører en bakgrunn eller en karakter. Det minner om å fullføre et legosett. Alle de små bitene som faller på plass for å skape noe stort og kult.

Veien videre

HTML5s bekvemmelighet på tvers av plattformer betyr fortsatt vekst for spillutvikling og høyere etterspørsel etter pikselartister. Sannheten er at du kan lage et virkelig rått pikselspill med HTML5. Noen vil kanskje si at pikselkunst er lavoppløst dritt, men jeg ser digital pointillisme og en vakker kunstform som ellers kunne ha forsvunnet.

Teknologien er ikke lenger flaskehalsen. Nettlesere er raske, canvas er kapabel, og verktøyene – fra Aseprite til Tiled til spillmotorene bygget på toppen av dem – er modne. Det som gjenstår er det samme som alltid har betydd noe: håndverk, tålmodighet og viljen til å plassere én piksel om gangen til noe vakkert dukker opp.

Cheers!

Jacob Weberg er digital artist hos Massively Fun. Han liker å bygge spill, spille spill og Easy Cheese.

Vanlige spørsmål

Hva er en “spriter”?

En spriter er en kunstner som lager sprites – de små, rutenettjusterte 2D-bildene som brukes for karakterer, objekter og effekter i spill. Begrepet kommer fra den klassiske epoken av spillutvikling, da sprites var maskinvareobjekter som konsollen kunne flytte rundt på skjermen uavhengig. I dag brukes det bredt om alle som jobber med pikselkunst for spill.

Hvorfor passer HTML5 så godt for pikselkunst-spill?

HTML5s canvas-element lar JavaScript tegne direkte til en bitmap, noe som samsvarer naturlig med hvordan pikselkunst lages. Kombinert med det faktum at én kodebase kjører på tvers av nettlesere, telefoner og nettbrett, betyr det at et lite team kan lansere et pikselspill overalt uten å måtte bygge det på nytt for hver plattform. De små filstørrelsene betyr også raske lastetider på nettet.

Hva er fargesykling, og hvorfor er det viktig?

Fargesykling animerer et bilde ved å rotere oppføringer i en indeksert fargepalett i stedet for å flytte piksler. Det var vanlig i 8-biters og 16-biters spill for vann, ild og himmel, og det er ekstremt billig å kjøre. CanvasCycle demonstrerer teknikken i et HTML5-canvas, og det er et flott triks for atmosfæriske side-scrolling-bakgrunner.

Trenger jeg dyr programvare for å lage pikselkunst?

Nei. Gratis og rimelige verktøy som Piskel, GraphicsGale og Aseprite (betalt, men rimelig) dekker alt de fleste spritere trenger. Det som betyr langt mer enn verktøyet, er din følelse for farger, komposisjon og tilbakeholdenhet. Mange hyllede pikselspill ble laget med verktøy som er langt enklere enn en moderne 3D-suite.

Hvordan holder jeg pikselkunst skarpt på skjermer med høy oppløsning?

Render spillet ditt til et bakgrunns-canvas med lav oppløsning, og skaler deretter dette canvaset opp for å passe til skjermen med bildeutjevning (image smoothing) slått av. Dette bevarer harde pikselkanter i stedet for å gjøre dem uskarpe. Å håndtere enhetens pikselforhold (device pixel ratio) riktig er en av de første tekniske hindringene enhver HTML5-pikselutvikler støter på.

Er pikselkunst bare en nostalgigreie?

Ikke i det hele tatt. Pikselkunst er en bevisst estetikk med reelle fordeler: den er lettlest i små størrelser, billig å produsere og distribuere, og særegen i et marked fullt av 3D-spill som ser like ut. Mange moderne spill velger det av kunstneriske årsaker, ikke fordi de er begrenset til det. Som jeg har sagt før, er det digital pointillisme.