Spriters: Ett nytt hopp.

Under det senaste decenniet har tillväxten av videospel exploderat på grund av ny teknik. I början hade alla spel bara bra gameplay och pixlar. Men under de senaste åren har 3D-spel blivit mer dominerande, och nu med uppkomsten av HTML5 kan spriters återigen pusha pixlar för spel!

För utvecklare är det mest tilltalande med HTML5 att det fungerar över flera plattformar – hela vägen från “interwebs” till handhållna enheter. Med det följer vissa begränsningar för konsten. Ändå kommer artister som föredrar ett klassiskt tillvägagångssätt att finna att denna plattform ger dem ett sätt att frodas. Nämligen genom pixelkonst.

För artister är det coolaste med HTML5 potentialen för fler pixelkonstspel. Dessa typer av spel har en viss charm över sig. När du tittar på en bild från ett pixelspel ser du byggstenarna – benen som utgör en vacker komposition.

Jag har stor respekt för artister som kan göra mer med mindre. Det är lätt att glömma bort de tusentals pixlar som utgör en bild när du tittar på ett stort, högupplöst spel. Pixelartister bygger en bild från grunden. För att lyckas med det krävs planering och eftertanke, samt en mycket stark känsla för färglära.

En del av det roliga med pixel pushing är känslan av prestation du får när du färdigställer en bakgrund eller en karaktär. Det påminner om att färdigställa ett legoset. Alla de små bitarna passar in på sin rätta plats för att skapa något stort och coolt. För artister som inte har provat pixelkonst rekommenderar jag det starkt som en övning. Det bygger karaktär.

Så här är den del som gör mig entusiastisk: möjligheten till ett pixelkonstspel i full produktion. Forum som Pixel Joint är fyllda med verk som bara ber om att bli fullängdsspel.

Relaterat: Unity Asset Store — Färdiggjord konst, verktyg och mallar som faller direkt in i ditt Unity-projekt.

Kan du föreställa dig ett fullängdsspel skapat med den tid och omsorg det tar för dessa artister att göra EN bild?! Det skulle vara LEGEN (vänta på det) DARY. Och även detta: CanvasCycle. Helt otroligt.

De färgcyklade bakgrunderna skulle vara episka i ett sidoscrollande äventyr!

Ett bra exempel på ett nyligen släppt pixelspel är Sword & Sworcery. Jag skulle älska att se fler nya spel som detta. HTML5:s plattformsoberoende bekvämlighet innebär fortsatt tillväxt för spelutveckling och högre efterfrågan på pixelartister. Sanningen är att du kan göra ett riktigt badass pixelspel med HTML5. Vissa kanske säger att pixelkonst är lågupplöst skit, men jag ser digital pointillism och en vacker konstform som annars hade kunnat försvinna.

Vårt val: Udemy Game Development Courses — On-demand-kurser som täcker Unity, Unreal, C++, C# och shader-programmering.

Key Takeaways

• HTML5:s räckvidd över flera plattformar är den enskilt största anledningen till att pixelkonst frodas igen – en tillgångsuppsättning kan köras i en webbläsare, på en telefon och på en surfplatta.
• Pixelkonst är inte en begränsning man nöjer sig med; det är en disciplin som tvingar fram stark komposition, färglära och planering.
• Canvaselementet och verktyg som CanvasCycle öppnar upp tekniker (palettcykling, procedurella bakgrunder) som är genuint svåra att genomföra i 3D-pipelines.
• Ett pixelkonstspel i full produktion är ett uppnåeligt mål för ett litit team, inte en utopi – barriären är hantverk och tid, inte teknik.
• Om du är en artist som inte har provat pixel pushing, se det som en övning. Det bygger karaktär.

Varför HTML5 ändrade matematiken för pixelartister

Pitchen för HTML5 är enkel: skriv en gång, kör var som helst. Under huven är arbetshästen <canvas>-elementet, som ger JavaScript direktåtkomst till en bitmapp som du kan rita i, bildruta för bildruta. För en pixelartist är det en gåva. Du slåss inte mot en texturpipeline eller en shader-kompilator – du ritar rektanglar av färg på ett rutnät, vilket är exakt hur pixelkonst skapas från början.

Jämför de två världarna:

Aspekt	Traditionell 3D-pipeline	HTML5 canvas / pixel-pipeline
Skapande av tillgångar	Modellering, UV-mappning, riggning, texturering	Rita på ett fast pixelrutnät, exportera ett sprite-ark
Filstorlek	Stora mesh-filer och texturer	Små PNG-filer och indexerade paletter
Skalning	Upplösningsberoende, behöver LODs	Nearest-neighbor-skalning behåller skarpa kanter
Portering	Byggen och shaders per plattform	En kodbas, många webbläsare och enheter
Risk med art direction	Lätt att se generisk ut	Distinkt som standard

Avvägningen är dock verklig. Canvas-rendering är i många fall CPU-bunden, och du måste vara medveten om hur många sprites du pushar per bildruta. Du måste också hantera enhetens pixelkvoter (device pixel ratios) noggrant, annars kommer dina noggrant placerade pixlar att suddas ut till gröt på en skärm med hög DPI.

Lösningen är att rendera till en lågupplöst bakomliggande canvas och skala upp den med bildutjämning (image smoothing) inaktiverad – en teknik som varje HTML5-pixelutvecklare förr eller senare lär sig.

Hantverket bakom “Making More With Less”

När du tittar på en bild från ett pixelspel ser du byggstenarna – benen som utgör en vacker komposition. Jag har stor respekt för artister som kan göra mer med mindre. Det är lätt att glömma bort de tusentals pixlar som utgör en bild när du tittar på ett stort, högupplöst spel. Pixelartister bygger en bild från grunden.

För att lyckas med det krävs planering och eftertanke, och en mycket stark känsla för färglära. Några praktiska principer som skiljer bra pixelkonst från brus:

Relaterat: Amazon: Game Dev Books & Gear — Spelprogrammeringsböcker, mekaniska tangentbord, bildskärmar och dev-desk hårdvara.

• Begränsa din palett. Klassisk hårdvara satte hårda gränser – NES, till exempel, arbetade med en liten uppsättning samtidiga färger. Begränsningar tvingar dig att välja färger som gör ett verkligt jobb.
• Använd selektiva konturer. En helt svart kontur plattar ut en sprite. Färgade, brutna konturer antyder ljus och form.
• Kontrollera dina valörer. Kisa mot din sprite. Om siluetten inte går att tyda, kommer ingen mängd detaljer att rädda den.
• Respektera rutnätet. Kantutjämning för hand, en pixel i taget, är en färdighet – men det är det också att veta när man inte ska göra det.
• Tänk i tiles. Bakgrunder byggda av återanvändbara tiles är billigare att producera och lättare att animera.

Det är därför pixelkonst belönar planering. Du kan inte gömma en svag komposition bakom ett högt polygonantal. Varje pixel är ett beslut, och betraktaren ser dem alla.

Color Cycling: The Forgotten Superpower

Och även detta: CanvasCycle. Helt otroligt. De färgcyklade bakgrunderna skulle vara episka i ett sidoscrollande äventyr!

För alla som inte har sett det: färgcykling är en teknik där du inte flyttar några pixlar alls. Istället roterar du posterna i en indexerad palett, och bilden ser ut att animera – vatten rinner, facklor flimrar, himlar skiftar. Det var en stapelvara under 8-bitars- och 16-bitars-erorna, och det är förvånansvärt billigt att köra eftersom du bara skriver om en liten palett, inte ritar om en hel scen.

Om du handlar: Construct 3 — Webbläsarbaserad HTML5-motor utan kod som exporterar till webb, mobil och dator.

CanvasCycle återupplivar detta på webben genom att rendera klassiska färgcyklade konstverk till en HTML5-canvas. För ett sidoscrollande äventyr är lockelsen uppenbar: levande, andas bakgrunder som kostar nästan ingenting i CPU jämfört med att animera varje bildruta för hand. Om du bygger ett HTML5-spel och vill ha atmosfär utan att det påverkar prestandan, är palettcykling ett av de mest underutnyttjade verktygen i lådan.

Från en bild till ett helt spel

Så här är den del som gör mig entusiastisk: möjligheten till ett fullproduktionsspel i pixelkonst. Forum som Pixel Joint är fyllda med verk som bara ber om att bli till långa spel. Kan du föreställa dig ett fullängdsspel skapat med den tid och omsorg det tar för dessa artister att göra EN bild?! Det skulle vara LEGEN (vänta på det) DARY.

Gapet mellan en underbar stillbild och ett utgivet spel är där de flesta projekt dör, och det är värt att vara ärlig om varför:

• En enda hjältesprite kan ta timmar. En komplett animationsuppsättning tar dagar. Idle, walk, attack, hurt, death – var och en är sitt eget pussel.
• Bakgrunder multipliceras. En sidoscroller behöver parallaxlager, övergångar och tiles som kan repeteras sömlöst.
• UI är också konst. Menyer, typsnitt och ikoner behöver alla samma omsorg, och pixeltypsnitt är en egen disciplin.
• Konsekvens är den svåra delen. Att hålla en sammanhängande stil över hundratals tillgångar är ett ledningsproblem lika mycket som ett konstnärligt.

Den goda nyheten är att HTML5 sänker den tekniska barriären för utgivning. Du behöver inte ett konsol-devkit eller en utgivare. Du behöver en canvas, en spelslinga och disciplinen att göra klart. Det är därför pixelkonst-communityt och HTML5-communityt passar så naturligt ihop – båda belönar människor som gillar att bygga saker från grunden.

Att lära sig av Sword & Sworcery

Ett bra exempel på ett nyare pixelspel är Sword & Sworcery. Jag skulle älska att se fler nya spel som detta. Det som gör det lärorikt är inte bara konsten – det är hur konsten, musiken och tempot samverkar. Pixelestetiken är inte dekoration; den är hela stämningen. Det bevisar att ett litet team med en stark visuell identitet kan skapa något som känns större än sin budget.

Om du studerar det, titta på hur det använder begränsade paletter, hur det låter scener andas och hur det behandlar skärmen som en komposition snarare än ett fönster in i ett 3D-utrymme. Det är lärdomar du kan ta med dig in i vilket HTML5-projekt som helst.

Praktiska råd för blivande spriters

För artister som inte har provat pixelkonst rekommenderar jag det starkt som en övning. Det bygger karaktär. Några sätt att börja som faktiskt fungerar:

• Återskapa något litet. Välj en sprite du älskar och bygg om den pixel för pixel. Du lär dig mer av att kopiera än av att läsa.
• Arbeta med en fast storlek. Börja med en 16×16 eller 32×32 canvas och vägra att fuska genom att skala upp.
• Studera paletter. Verktyg som Lospec hostar community-paletter som du kan ladda direkt in i Aseprite, GraphicsGale eller Piskel.
• Animera tidigt. Även en studs på två bildrutor lär dig mer om läsbarhet än ett statiskt mästerverk.
• Posta och ta emot kritik. Communities som Pixel Joint och pixelkonst-subreddits kommer att berätta sanningen för dig, vilket är precis vad du behöver.

En del av det roliga med att putta pixlar är känslan av prestation man får när man färdigställer en bakgrund eller en karaktär. Det påminner om att bygga klart ett legoset. Alla de små bitarna som faller på rätt plats för att skapa något stort och coolt.

Vägen framåt

HTML5:s plattformsoberoende bekvämlighet innebär fortsatt tillväxt för spelutveckling och högre efterfrågan på pixelartister. Sanningen är att du kan göra ett riktigt grymt pixelspel med HTML5. Vissa kanske säger att pixelkonst är lågupplöst skit, men jag ser digital pointillism och en vacker konstform som annars hade kunnat försvinna.

Tekniken är inte längre flaskhalsen. Webbläsare är snabba, canvas är kapabel och verktygen — från Aseprite till Tiled till spelmotorerna som byggs ovanpå dem — är mogna. Det som återstår är samma sak som alltid har betytt något: hantverk, tålamod och viljan att placera en pixel i taget tills något vackert dyker upp.

Cheers!

Jacob Weberg är Digital Artist på Massively Fun. Han tycker om att bygga spel, spela spel och Easy Cheese.

Vanliga frågor

Vad är en “spriter”?

En spriter är en konstnär som skapar sprites — de små, rutnätsjusterade 2D-bilderna som används för karaktärer, objekt och effekter i spel. Termen kommer från den klassiska eran av spelutveckling, när sprites var hårdvaruobjekt som konsolen kunde flytta runt på skärmen självständigt. Idag används termen brett för alla som arbetar med pixelkonst för spel.

Varför passar HTML5 så bra för pixelkonstspel?

HTML5:s canvas-element låter JavaScript rita direkt till en bitmapp, vilket mappar naturligt mot hur pixelkonst skapas. I kombination med det faktum att en kodbas körs i webbläsare, telefoner och surfplattor, betyder det att ett litet team kan släppa ett pixelspel överallt utan att bygga om det per plattform. De små filstorlekarna innebär också snabba laddningstider på webben.

Vad är färgcykling och varför spelar det någon roll?

Färgcykling animerar en bild genom att rotera poster i en indexerad färgpalett istället för att flytta pixlar. Det var vanligt i 8-bitars och 16-bitars spel för vatten, eld och himlar, och det är extremt billigt att köra. CanvasCycle demonstrerar tekniken i en HTML5-canvas, och det är ett bra trick för atmosfäriska sidscrollande bakgrunder.

Behöver jag dyr programvara för att göra pixelkonst?

Nej. Gratis och billiga verktyg som Piskel, GraphicsGale och Aseprite (betald men prisvärd) täcker allt de flesta spriters behöver. Det som betyder mycket mer än verktyget är din känsla för färg, komposition och återhållsamhet. Många hyllade pixelspel skapades med verktyg som var betydligt enklare än en modern 3D-svit.

Hur håller jag pixelkonsten skarp på högupplösta skärmar?

Rendera ditt spel till en lågupplöst bakgrunds-canvas, och skala sedan upp den för att passa skärmen med bildutjämning (image smoothing) avstängd. Detta bevarar skarpa pixelkanter istället för att sudda ut dem. Att hantera enhetens pixelkvot (device pixel ratio) korrekt är ett av de första tekniska hindren varje HTML5-pixelutvecklare stöter på.

Är pixelkonst bara en nostalgigrej?

Inte alls. Pixelkonst är en medveten estetik med verkliga fördelar: den är läsbar i små storlekar, billig att producera och distribuera, och utmärkande på en marknad full av liknande 3D-spel. Många moderna spel väljer det av konstnärliga skäl, inte för att de är begränsade till det. Som jag har sagt tidigare, det är digital pointillism.