Spriters: Et nyt håb.

I løbet af det sidste årti er væksten inden for videospil eksploderet på grund af ny teknologi. I begyndelsen havde alle spil blot fantastisk gameplay og pixels. Men i løbet af de sidste mange år er 3D-spil blevet mere dominerende, og nu med fremkomsten af HTML5 kan spriters måske skubbe pixels til spil igen!

For udviklere er det mest tiltalende ved HTML5, at det fungerer på tværs af flere platforme – hele vejen fra “the interwebs” til håndholdte enheder. Med det følger nogle begrænsninger for kunsten. Alligevel vil kunstnere, der foretrækker en klassisk tilgang, opdage, at denne platform giver dem en måde at trives på. Nemlig gennem pixel art.

For kunstnere er det fedeste ved HTML5 potentialet for flere pixel art-spil. Disse typer spil har en vis charme over sig. Når du ser på et billede fra et pixelspil, ser du byggestenene – knoglerne, der udgør en smuk komposition.

Jeg har stor respekt for kunstnere, der kan skabe mere med mindre. Det er nemt at glemme de tusindvis af pixels, der udgør et billede, når man ser på et stort spil i høj opløsning. Pixel-kunstnere bygger et billede helt fra bunden. For at lykkes med det kræver det planlægning, omtanke og en meget stærk sans for farveteori.

En del af det sjove ved at “skubbe pixels” er følelsen af præstation, man får, når man færdiggør en baggrund eller en karakter. Det minder om at færdiggøre et LEGO-sæt. Alle de små stykker, der falder på plads for at skabe noget stort og cool. For kunstnere, der ikke har prøvet pixel art, kan jeg varmt anbefale det som en øvelse. Det bygger karakter.

Så her er den del, der gør mig begejstret: muligheden for et pixel art-spil i fuld produktion. Fora som Pixel Joint er fyldt med værker, der nærmest tigger om at blive lavet om til spil i spillefilmslængde.

Relateret: Unity Asset Store — Færdiglavet kunst, værktøjer og skabeloner, der falder direkte ind i dit Unity-projekt.

Kan du forestille dig et fuldlængde-spil skabt med den tid og omhu, det tager disse kunstnere at lave ÉT billede?! Det ville være LEGEN (vent på det) DARY. Og også dette: CanvasCycle. Helt vildt.

De farvecyklende baggrunde ville være episke i et side-scrolling eventyr!

Et godt eksempel på et nyere pixelspil er Sword & Sworcery. Jeg ville elske at se flere nye spil som dette. HTML5’s bekvemmelighed på tværs af platforme betyder fortsat vækst for spiludvikling og højere efterspørgsel efter pixel-kunstnere. Sandheden er, at man kunne lave et virkelig badass pixelspil med HTML5. Nogle vil måske sige, at pixel art er lavopløsnings-lort, men jeg ser digital pointillisme og en smuk kunstform, som ellers måske var forsvundet.

Vores valg: Udemy Game Development Courses — On-demand kurser, der dækker Unity, Unreal, C++, C# og shader programmering.

Key Takeaways

• HTML5’s rækkevidde på tværs af platforme er den største enkeltstående årsag til, at pixel art trives igen — ét asset-sæt kan køre i en browser, på en telefon og på en tablet.
• Pixel art er ikke en begrænsning, man nøjes med; det er en disciplin, der tvinger én til stærk komposition, farveteori og planlægning.
• Canvas-elementet og værktøjer som CanvasCycle åbner op for teknikker (palette cycling, proceduremæssige baggrunde), der er virkelig svære at udføre i 3D-pipelines.
• Et pixel art-spil i fuld produktion er et opnåeligt mål for et lille team, ikke en utopisk drøm — barrieren er håndværk og tid, ikke teknologi.
• Hvis du er en kunstner, der ikke har prøvet at skubbe pixels, så betragt det som en øvelse. Det bygger karakter.

Hvorfor HTML5 ændrede matematikken for pixel-kunstnere

Salgstalen for HTML5 er enkel: skriv én gang, kør overalt. Under motorhjelmen er arbejdshesten <canvas>-elementet, som giver JavaScript direkte adgang til en bitmap, man kan tegne i, frame for frame. For en pixel-kunstner er det en gave. Man kæmper ikke mod en tekstur-pipeline eller en shader-compiler — man tegner farverektangler på et gitter, hvilket er præcis, hvordan pixel art bliver til i første omgang.

Sammenlign de to verdener:

Overvejelse	Traditionel 3D-pipeline	HTML5 canvas / pixel-pipeline
Asset-oprettelse	Modellering, UV-mapping, rigging, teksturering	Tegn på et fast pixelgitter, eksporter et sprite-ark
Filstørrelse	Store meshes og teksturer	Små PNG’er og indekserede paletter
Skalering	Opløsningsafhængig, kræver LODs	Nearest-neighbor skalering holder skarpe kanter
Portering	Platform-specifikke builds og shaders	Én kodebase, mange browsere og enheder
Risiko for art direction	Let at se generisk ud	Karakteristisk som standard

Afvejningen er dog reel. Canvas-rendering er i mange tilfælde CPU-bundet, og man skal være bevidst om, hvor mange sprites man skubber pr. frame. Man skal også håndtere enhedens pixel-ratio omhyggeligt, ellers vil ens omhyggeligt placerede pixels flyde sammen til grød på en høj-DPI-skærm. Løsningen er at rendere til et lavopløsnings-backing canvas og skalere det op med image smoothing deaktiveret — en teknik, som enhver HTML5-pixeludvikler før eller siden lærer.

Håndværket bag “at skabe mere med mindre”

Når du ser på et billede fra et pixelspil, ser du byggestenene – knoglerne, der udgør en smuk komposition. Jeg har stor respekt for kunstnere, der kan skabe mere med mindre. Det er nemt at glemme de tusindvis af pixels, der udgør et billede, når man ser på et stort spil i høj opløsning. Pixel-kunstnere bygger et billede helt fra bunden.

For at få det til at lykkes kræver det planlægning, fremsyn og en meget stærk sans for farveteori. Her er et par praktiske principper, der adskiller god pixelkunst fra støj:

• Begræns din palet. Klassisk hardware pålagde hårde grænser — NES fungerede for eksempel inden for et lille sæt samtidige farver. Begrænsninger tvinger dig til at vælge farver, der gør et reelt stykke arbejde.
• Brug selektiv kontur. En fuld sort kontur gør en sprite flad. Farvede, brudte konturer antyder lys og form.
• Kontroller dine værdier. Knib øjnene sammen, når du ser på din sprite. Hvis silhuetten ikke er læsbar, kan ingen mængde detaljer redde den.
• Respekter gitteret. Anti-aliasing i hånden, én pixel ad gangen, er en færdighed — men det er det også at vide, hvornår man ikke skal.
• Tænk i tiles. Baggrunde bygget af genanvendelige tiles er billigere at producere og nemmere at animere.

Det er derfor, pixel art belønner planlægning. Du kan ikke skjule en svag komposition bag et højt polygonantal. Hver pixel er en beslutning, og seeren ser dem alle.

Relateret: Amazon: Game Dev Books & Gear — Spilprogrammeringsbøger, mekaniske tastaturer, skærme og dev-desk hardware.

Color Cycling: The Forgotten Superpower

Og også dette: CanvasCycle. Helt vildt. De farvecyklede baggrunde ville være episke i et side-scrolling eventyr!

For alle, der ikke har set det: farvecykling er en teknik, hvor du slet ikke flytter nogen pixels. I stedet roterer du posterne i en indekseret palet, og billedet ser ud til at animere — vand flyder, fakler flimrer, himlen skifter. Det var en fast bestanddel af 8-bit og 16-bit æraerne, og det er forbløffende billigt at køre, fordi du kun omskriver en lille palet i stedet for at omtegne en hel scene.

CanvasCycle genopliver dette på nettet ved at gengive klassisk farvecyklet kunst i et HTML5-canvas. Til et side-scrolling eventyr er appellen indlysende: levende, åndende baggrunde, der næsten ikke koster noget i CPU sammenlignet med at animere hver frame i hånden. Hvis du bygger et HTML5-spil og ønsker atmosfære uden et præstationshit, er paletcykling et af de mest underudnyttede værktøjer i kassen.

Hvis du handler: Construct 3 — Browserbaseret HTML5-motor uden kode, der eksporterer til web, mobil og desktop.

Fra ét billede til et helt spil

Så her er den del, der gør mig begejstret: muligheden for et pixelkunstspil i fuld produktion. Fora som Pixel Joint er fyldt med værker, der nærmest tigger om at blive til spil i fuld længde. Kan du forestille dig et fuldlængde spil skabt med den tid og omhu, det tager disse kunstnere at lave ÉT billede?! Det ville være LEGEN (vent på det) DARY.

Gabet mellem et smukt stillbillede og et udgivet spil er der, hvor de fleste projekter dør, og det er værd at være ærlig om hvorfor:

• En enkelt helte-sprite kan tage timer. Et komplet animationssæt tager dage. Idle, walk, attack, hurt, death — hver er sit eget puslespil.
• Baggrunde multipliceres. En side-scroller har brug for parallakselag, overgange og tiles, der kan tiles problemfrit.
• UI er også kunst. Menuer, skrifttyper og ikoner kræver alle den samme omhu, og pixel-skrifttyper er deres egen disciplin.
• Konsistens er den svære del. At holde en sammenhængende stil på tværs af hundredvis af assets er lige så meget et ledelsesproblem, som det er et kunstnerisk.

Den gode nyhed er, at HTML5 sænker den tekniske barriere for udgivelse. Du behøver ikke et konsol-devkit eller en udgiver. Du har brug for et canvas, et game loop og disciplinen til at gøre det færdigt. Det er derfor, pixel art-fællesskabet og HTML5-fællesskabet er et så naturligt match — begge belønner folk, der kan lide at bygge ting helt fra bunden.

Lær af Sword & Sworcery

Et godt eksempel på et nyere pixelspil er Sword & Sworcery. Jeg ville elske at se flere nye spil som dette. Det, der gør det lærerigt, er ikke kun kunsten — det er, hvordan kunsten, musikken og tempoet arbejder sammen. Pixel-æstetikken er ikke dekoration; det er hele stemningen. Det beviser, at et lille team med en stærk visuel identitet kan lave noget, der føles større end dets budget.

Hvis du studerer det, så se på, hvordan det bruger begrænsede paletter, hvordan det lader scenerne ånde, og hvordan det behandler skærmen som en komposition snarere end et vindue ind i et 3D-rum. Det er lektioner, du kan tage med dig ind i ethvert HTML5-projekt.

Praktiske råd til aspirerende spriters

For kunstnere, der ikke har prøvet pixel art, kan jeg varmt anbefale det som en øvelse. Det bygger karakter. Her er et par måder at komme i gang på, som faktisk virker:

• Genskab noget lille. Vælg en sprite, du elsker, og genopbyg den pixel for pixel. Du lærer mere af at kopiere end af at læse.
• Arbejd med en fast størrelse. Start med et 16×16 eller 32×32 canvas og nægt at snyde ved at skalere op.
• Studér paletter. Værktøjer som Lospec hoster community-paletter, som du kan indlæse direkte i Aseprite, GraphicsGale eller Piskel.
• Animer tidligt. Selv et bounce på to frames lærer dig mere om læsbarhed end et statisk mesterværk.
• Post og modtag kritik. Fællesskaber som Pixel Joint og pixel art-subreddits vil fortælle dig sandheden, hvilket er præcis, hvad du har brug for.

En del af det sjove ved at skubbe pixels er følelsen af præstation, man får, når man færdiggør en baggrund eller en karakter. Det minder om at færdiggøre et LEGO-sæt. Alle de små dele, der falder på plads for at skabe noget stort og cool.

Vejen videre

HTML5’s bekvemmelighed på tværs af platforme betyder fortsat vækst for spiludvikling og højere efterspørgsel efter pixelkunstnere. Sandheden er, at du kunne lave et virkelig badass pixelspil med HTML5. Nogle vil måske sige, at pixelkunst er lort i lav opløsning, men jeg ser digital pointillisme og en smuk kunstform, som ellers måske var forsvundet.

Teknologien er ikke længere flaskehalsen. Browsere er hurtige, canvas er kapabel, og værktøjerne — fra Aseprite til Tiled til spilmotorerne bygget oven på dem — er modne. Det, der er tilbage, er det samme, som altid har betydet noget: håndværk, tålmodighed og viljen til at placere én pixel ad gangen, indtil noget smukt dukker op.

Cheers!

Jacob Weberg er Digital Artist hos Massively Fun. Han nyder at bygge spil, spille spil og Easy Cheese.

Ofte stillede spørgsmål

Hvad er en “spriter”?

En spriter er en kunstner, der skaber sprites — de små, gitterjusterede 2D-billeder, der bruges til karakterer, objekter og effekter i spil. Udtrykket kommer fra den klassiske æra af spiludvikling, hvor sprites var hardwareobjekter, som konsollen kunne flytte rundt på skærmen uafhængigt. I dag bruges det bredt om alle, der arbejder med pixelkunst til spil.

Hvorfor passer HTML5 så godt til pixel art-spil?

HTML5’s canvas-element lader JavaScript tegne direkte til en bitmap, hvilket naturligt afspejler, hvordan pixelkunst bliver til. Kombineret med det faktum, at én kodebase kører på tværs af browsere, telefoner og tablets, betyder det, at et lille team kan udgive et pixelspil overalt uden at skulle genopbygge det per platform. De lave filstørrelser betyder også hurtige indlæsningstider på nettet.

Hvad er farvecykling, og hvorfor betyder det noget?

Farvecykling animerer et billede ved at rotere indgange i en indekseret farvepalet i stedet for at flytte pixels. Det var almindeligt i 8-bit og 16-bit spil til vand, ild og himmel, og det er ekstremt billigt at køre. CanvasCycle demonstrerer teknikken i et HTML5-canvas, og det er et fantastisk trick til atmosfæriske side-scrolling baggrunde.

Har jeg brug for dyr software for at lave pixelkunst?

Nej. Gratis og billige værktøjer som Piskel, GraphicsGale og Aseprite (betalt, men billigt) dækker alt, hvad de fleste spritere har brug for. Det, der betyder langt mere end værktøjet, er din sans for farve, komposition og tilbageholdenhed. Mange hyldede pixelspil blev lavet med værktøjer, der var langt enklere end en moderne 3D-suite.

Hvordan holder jeg pixelkunst skarpt på skærme med høj opløsning?

Render dit spil til et backing-canvas i lav opløsning, og skaler derefter dette canvas op, så det passer til skærmen, med image smoothing slået fra. Dette bevarer de hårde pixelkanter i stedet for at sløre dem. Korrekt håndtering af device pixel ratio er en af de første tekniske forhindringer, enhver HTML5-pixeludvikler løber ind i.

Er pixelkunst bare en nostalgiting?

Slet ikke. Pixelkunst er en bevidst æstetik med reelle fordele: det er læsbart i små størrelser, billigt at producere og udgive, og distinkt på et marked fyldt med 3D-spil, der ligner hinanden. Masser af moderne spil vælger det af kunstneriske årsager, ikke fordi de er begrænset til det. Som jeg har sagt før, er det digital pointillisme.