Spriters: Een nieuwe hoop.

De afgelopen tien jaar is de groei van videogames geëxplodeerd als gevolg van opkomende technologie. In het begin hadden alle games enkel geweldige gameplay en pixels. Maar de afgelopen jaren zijn 3D-games dominanter geworden en nu, met de opkomst van HTML5, kunnen spriters opnieuw pixels voor games pushen!

Voor ontwikkelaars is het aantrekkelijkste aan HTML5 dat het op meerdere platforms werkt – van het wereldwijde web tot handheld apparaten. Dat brengt enkele beperkingen met zich mee voor kunst. Toch zullen artiesten die de voorkeur geven aan een klassieke aanpak merken dat dit platform hen een manier biedt om te gedijen. Namelijk door middel van pixelart.

Voor artiesten is het coolste aan HTML5 het potentieel voor meer pixelart-games. Dit soort spellen hebben een bepaalde charme. Als je naar een afbeelding uit een pixelgame kijkt, zie je de bouwstenen – de botten waaruit een prachtige compositie bestaat.

Ik heb veel respect voor kunstenaars die met minder meer kunnen maken. Als je naar een groot spel met hoge resolutie kijkt, vergeet je gemakkelijk de duizenden pixels waaruit een afbeelding bestaat. Pixelkunstenaars bouwen een beeld vanaf de grond op. Om dit voor elkaar te krijgen, zijn planning en vooruitdenken nodig, en een zeer sterk gevoel voor kleurentheorie.

Een deel van het plezier van het ‘pixel-pushen’ is het gevoel van voldoening dat je krijgt als je een achtergrond of een personage hebt voltooid. Het doet denken aan het voltooien van een LEGO-set. Alle kleine stukjes passen op de juiste plaats om iets groots en cools te creëren. Voor kunstenaars die pixelart nog niet hebben geprobeerd, raad ik het ten zeerste aan als oefening. Het bouwt karakter op.

Dus hier is het deel dat mij enthousiast maakt: de mogelijkheid van een pixelart-game met volledige productie. Forums zoals Pixel Joint staan vol met werken die erom smeken om tot volledige games te worden uitgewerkt.

Gerelateerd: Construct 3 — Browsergebaseerde HTML5-engine zonder code die exporteert naar internet, mobiel en desktop.

Kun je je een volledige game voorstellen, gemaakt met de tijd en zorg die deze artiesten nodig hebben om ÉÉN beeld te maken?! Het zou LEGEN (wacht erop) DARY zijn. En ook dit: CanvasCycle. Verbijsterend.

De ‘color cycled’ achtergronden zouden episch zijn in een side-scrolling avontuur!

Een mooi voorbeeld van een recent pixelspel is Sword & Sworcery. Ik zou graag meer nieuwe games zoals deze zien. Het platformonafhankelijke gemak van HTML5 betekent een voortdurende groei voor game-ontwikkeling en een grotere vraag naar pixelartiesten. De waarheid is dat je met HTML5 een echt badass pixelspel zou kunnen maken. Sommigen zeggen misschien dat pixelart lage-resolutie troep is, maar ik zie digitaal pointillisme en een prachtige kunstvorm die anders misschien was verdwenen.

Onze keuze: Udemy Game Development Courses — On-demand cursussen over Unity, Unreal, C++, C# en shader-programmering.

Belangrijkste inzichten

• Het platformonafhankelijke bereik van HTML5 is de belangrijkste reden waarom pixelart weer floreert — één set assets kan in een browser, op een telefoon en op een tablet worden uitgevoerd.
• Pixelart is geen beperking waar je genoegen mee neemt; het is een discipline die sterke compositie, kleurentheorie en planning afdwingt.
• Het canvas-element en tools zoals CanvasCycle maken technieken mogelijk (palette cycling, procedurele achtergronden) die echt moeilijk te realiseren zijn in 3D-pipelines.
• Een pixelart-game met volledige productie is een haalbaar doel voor een klein team, geen utopie — de barrière is vakmanschap en tijd, niet technologie.
• Als je een artiest bent die pixel-pushen nog niet heeft geprobeerd, beschouw het dan als een oefening. Het bouwt karakter op.

Waarom HTML5 de rekensom voor pixelartiesten veranderde

De pitch voor HTML5 is simpel: write once, run anywhere. Onder de motorkap is het werkpaard het <canvas> element, dat JavaScript directe toegang geeft tot een bitmap waarin je frame voor frame kunt tekenen. Voor een pixelartiest is dat een geschenk. Je vecht niet tegen een textuur-pipeline of een shader-compiler — je tekent gekleurde rechthoeken op een raster, en dat is precies hoe pixelart in de eerste plaats wordt gemaakt.

Vergelijk de twee werelden:

Aandachtspunt	Traditionele 3D-pipeline	HTML5 canvas / pixel-pipeline
Asset-creatie	Modellering, UV-mapping, rigging, texturering	Tekenen op een vast pixelraster, exporteer een sprite-sheet
Bestandsgrootte	Grote meshes en texturen	Kleine PNG’s en geïndexeerde paletten
Schalen	Resolutie-afhankelijk, heeft LOD’s nodig	Nearest-neighbor schaling houdt randen scherp
Porteren	Builds en shaders per platform	Eén codebase, veel browsers en apparaten
Risico art direction	Makkelijk om generiek te ogen	Standaard onderscheidend

De trade-off is echter reëel. Canvas-rendering is in veel gevallen CPU-gebonden en je moet bewust zijn van hoeveel sprites je per frame pusht. Je moet ook zorgvuldig omgaan met device pixel ratios, anders zullen je zorgvuldig geplaatste pixels vervagen tot brij op een high-DPI scherm. De oplossing is om te renderen naar een low-resolution backing canvas en dit op te schalen met image smoothing uitgeschakeld — een techniek die elke HTML5-pixelontwikkelaar uiteindelijk leert.

Het ambacht achter “Meer maken met minder”

Als je naar een afbeelding uit een pixelgame kijkt, zie je de bouwstenen – de botten waaruit een prachtige compositie bestaat. Ik heb veel respect voor kunstenaars die met minder meer kunnen maken. Als je naar een groot spel met hoge resolutie kijkt, vergeet je gemakkelijk de duizenden pixels waaruit een afbeelding bestaat. Pixelkunstenaars bouwen een beeld vanaf de grond op.

Om dit voor elkaar te krijgen, zijn planning en vooruitdenken nodig, en een zeer sterk gevoel voor kleurentheorie. Een paar praktische principes die goede pixelkunst onderscheiden van ruis:

• Beperk je palet. Klassieke hardware legde harde limieten op — de NES werkte bijvoorbeeld met een kleine set gelijktijdige kleuren. Beperkingen dwingen je om kleuren te kiezen die echt effect hebben.
• Gebruik selectieve omlijning. Een volledig zwarte omtrek maakt een sprite plat. Gekleurde, gebroken contouren suggereren licht en vorm.
• Beheers je waarden. Knijp je ogen samen als je naar je sprite kijkt. Als het silhouet niet leesbaar is, kan geen enkele hoeveelheid detail het redden.
• Respecteer het raster. Anti-aliasing met de hand, pixel voor pixel, is een vaardigheid — maar dat geldt ook voor weten wanneer je dat niet moet doen.
• Denk in tegels. Achtergronden opgebouwd uit herbruikbare tegels zijn goedkoper te produceren en gemakkelijker te animeren.

Dit is de reden waarom pixelkunst planning beloont. Je kunt een zwakke compositie niet verbergen achter een hoog aantal polygonen. Elke pixel is een beslissing, en de kijker ziet ze allemaal.

Gerelateerd: Amazon: Game Dev Books & Gear — Boeken voor het programmeren van games, mechanische toetsenborden, monitoren en hardware voor ontwikkelaars.

Color Cycling: de vergeten superkracht

En ook dit: CanvasCycle. Verbijsterend. De color-cycled achtergronden zouden episch zijn in een side-scrolling avontuur!

Voor iedereen die het nog niet heeft gezien: color cycling is een techniek waarbij je helemaal geen pixels verplaatst. In plaats daarvan roteer je de items in een geïndexeerd palet, en het beeld lijkt te animeren — water stroomt, fakkels flikkeren, de lucht verandert. Het was een hoofdbestanddeel van de 8-bit en 16-bit tijdperken, en het is verbazingwekkend goedkoop in gebruik omdat je slechts een klein palet herschrijft en geen scène opnieuw tekent.

CanvasCycle brengt dit op het web nieuw leven in door klassieke color-cycled artwork weer te geven in een HTML5-canvas. Voor een side-scrolling avontuur is de aantrekkingskracht duidelijk: levendige, ademende achtergronden die bijna niets kosten aan CPU vergeleken met het handmatig animeren van elk frame. Als je een HTML5-game bouwt en sfeer wilt zonder prestatieverlies, dan is palette cycling een van de meest onderbenutte tools in de gereedschapskist.

Onze keuze: Unity Asset Store — Kant-en-klare kunst, tools en sjablonen die rechtstreeks in uw Unity-project terechtkomen.

Van één afbeelding naar een volledig spel

Dus hier is het deel dat mij enthousiast maakt: de mogelijkheid van een pixelart-game met volledige productie. Forums zoals Pixel Joint staan vol met werken die erom smeken om tot volledige games te worden uitgewerkt. Kun je je een volledige game voorstellen, gemaakt met de tijd en zorg die deze artiesten nodig hebben om ÉÉN beeld te maken?! Het zou LEGEN (wacht erop) DARY zijn.

De kloof tussen een prachtige still en een uitgebrachte game is waar de meeste projecten sterven, en het is de moeite waard om eerlijk te zijn over waarom:

• Een enkele hero-sprite kan uren duren. Een volledige animatieset duurt dagen. Idle, lopen, aanvallen, geraakt, dood — elk is zijn eigen puzzel.
• Achtergronden vermenigvuldigen zich. Een side-scroller heeft parallax-lagen, overgangen en tegels nodig die naadloos aansluiten.
• UI is ook kunst. Menu’s, lettertypen en pictogrammen hebben allemaal dezelfde zorg nodig, en pixel-fonts zijn hun eigen discipline.
• Consistentie is het moeilijkste deel. Het behouden van een coherente stijl over honderden assets is zoveel een managementprobleem als een artistiek probleem.

Het goede nieuws is dat HTML5 de technische barrière voor het uitbrengen van een spel verlaagt. Je hebt geen console-devkit of uitgever nodig. Je hebt een canvas, een game loop en de discipline nodig om het af te maken. Daarom passen de pixelart-gemeenschap en de HTML5-gemeenschap zo goed bij elkaar — beide belonen mensen die graag dingen vanaf de grond opbouwen.

Leren van Sword & Sworcery

Een mooi voorbeeld van een recent pixel-spel is Sword & Sworcery. Ik zou graag meer nieuwe games zoals deze zien. Wat het leerzaam maakt, is niet alleen de kunst — het is hoe de kunst, muziek en pacing samenwerken. De pixel-esthetiek is geen decoratie; het is de hele sfeer. Het bewijst dat een klein team met een sterke visuele identiteit iets kan maken dat groter aanvoelt dan het budget.

Als je het bestudeert, kijk dan hoe het beperkte paletten gebruikt, hoe het scènes laat ademen en hoe het het scherm behandelt als een compositie in plaats van als een venster naar een 3D-ruimte. Dat zijn lessen die je in elk HTML5-project kunt meenemen.

Praktisch advies voor aspirant-spriters

Voor kunstenaars die pixelart nog niet hebben geprobeerd, raad ik het ten zeerste aan als oefening. Het bouwt karakter op. Een paar manieren om te beginnen die echt werken:

• Recreëer iets kleins. Kies een sprite die je leuk vindt en bouw deze pixel voor pixel opnieuw op. Je leert meer van kopiëren dan van lezen.
• Werk op een vast formaat. Begin met een canvas van 16×16 of 32×32 en weiger vals te spelen door op te schalen.
• Bestudeer paletten. Tools zoals Lospec hosten community-paletten die je rechtstreeks in Aseprite, GraphicsGale of Piskel kunt laden.
• Animeer vroeg. Zelfs een bounce van twee frames leert je meer over leesbaarheid dan een statisch meesterwerk.
• Post je werk en vraag om kritiek. Communities zoals Pixel Joint en de pixelart-subreddits zullen je de waarheid vertellen, en dat is precies wat je nodig hebt.

Een deel van het plezier van ‘pixel pushing’ is het gevoel van voldoening dat je krijgt als je een achtergrond of een personage hebt voltooid. Het doet denken aan het voltooien van een LEGO-set. Alle kleine stukjes die op de juiste plaats vallen om iets groots en cools te creëren.

De weg vooruit

Het platformonafhankelijke gemak van HTML5 betekent een voortdurende groei voor game-ontwikkeling en een grotere vraag naar pixelartiesten. De waarheid is dat je met HTML5 een echt badass pixelgame zou kunnen maken. Sommigen zullen zeggen dat pixelart lage-resolutie troep is, maar ik zie digitaal pointillisme en een prachtige kunstvorm die anders misschien zou zijn verdwenen.

De technologie is niet langer de bottleneck. Browsers zijn snel, canvas is capabel en de tooling – van Aseprite tot Tiled tot de game-engines die daarop zijn gebouwd – is volwassen. Wat overblijft is hetzelfde dat er altijd al toe deed: vakmanschap, geduld en de bereidheid om één pixel per keer te plaatsen totdat er iets moois verschijnt.

Cheers!

Jacob Weberg is een Digital Artist bij Massively Fun. Hij houdt van het bouwen van games, het spelen van games en Easy Cheese.

Veelgestelde vragen

Wat is een “spriter”?

Een spriter is een artiest die sprites maakt: de kleine, op het raster uitgelijnde 2D-afbeeldingen die worden gebruikt voor personages, objecten en effecten in games. De term komt uit het klassieke tijdperk van game-ontwikkeling, toen sprites hardware-objecten waren die de console onafhankelijk over het scherm kon bewegen. Tegenwoordig wordt het breed gebruikt voor iedereen die aan pixelart voor games werkt.

Waarom is HTML5 zo geschikt voor pixelart-games?

Het canvas-element van HTML5 stelt JavaScript in staat om rechtstreeks naar een bitmap te tekenen, wat natuurlijk aansluit bij de manier waarop pixelart wordt gemaakt. Gecombineerd met het feit dat één codebase draait op browsers, telefoons en tablets, betekent dit dat een klein team een pixelgame overal kan uitbrengen zonder deze per platform opnieuw op te bouwen. De kleine bestandsgrootte van de assets betekent ook snelle laadtijden op het web.

Wat is color cycling en waarom is het belangrijk?

Color cycling animeert een afbeelding door items in een geïndexeerd kleurenpalet te roteren in plaats van pixels te verplaatsen. Het was gebruikelijk in 8-bit en 16-bit games voor water, vuur en luchten, en het is extreem goedkoop om uit te voeren. CanvasCycle demonstreert de techniek in een HTML5-canvas, en het is een geweldige truc voor sfeervolle side-scrolling achtergronden.

Heb ik dure software nodig om pixelart te maken?

Nee. Gratis en goedkope tools zoals Piskel, GraphicsGale en Aseprite (betaald maar goedkoop) dekken alles wat de meeste spriters nodig hebben. Wat veel belangrijker is dan de tool, is je gevoel voor kleur, compositie en terughoudendheid. Veel geprezen pixelgames zijn gemaakt met tools die veel eenvoudiger zijn dan een moderne 3D-suite.

Hoe houd ik pixelart scherp op schermen met een hoge resolutie?

Render je game naar een backing canvas met een lage resolutie en schaal dat canvas vervolgens op om op het scherm te passen, met image smoothing uitgeschakeld. Dit behoudt de harde pixelranden in plaats van ze te vervagen. Het correct afhandelen van de device pixel ratio is een van de eerste technische hindernissen waar elke HTML5-pixelontwikkelaar tegenaan loopt.

Is pixelart alleen maar een nostalgisch ding?

Helemaal niet. Pixelart is een bewuste esthetiek met echte voordelen: het is leesbaar op kleine formaten, goedkoop om te produceren en te distribueren, en onderscheidend in een markt vol vergelijkbaar uitziende 3D-games. Veel moderne games kiezen ervoor om artistieke redenen, niet omdat ze daartoe beperkt zijn. Zoals ik al eerder heb gezegd: het is digitaal pointillisme.