Spriters: Uusi toivo.

Viimeisen vuosikymmenen aikana videopelien kasvu on ollut räjähdysmäistä kehittyvän teknologian ansiosta. Alussa peleissä oli vain hienoa pelattavuutta ja pikseleitä. Mutta viimeisten useiden vuosien aikana 3D-peleistä on tullut hallitsevampia, ja nyt HTML5:n nousun myötä spriterit voivat jälleen puskea pikseleitä peleihin!

Kehittäjille houkuttelevin asia HTML5:ssä on se, että se toimii useilla alustoilla – aina interwebistä kämmenlaitteisiin. Tähän liittyy joitakin rajoituksia taiteen osalta. Klassista lähestymistapaa suosivat taiteilijat huomaavat kuitenkin, että tämä alusta tarjoaa heille tavan menestyä. Nimittäin pikselitaiteen kautta.

Taiteilijoille siistein asia HTML5:ssä on mahdollisuus saada lisää pikselitaidepelejä. Tällaisissa peleissä on tietty viehätysvoima. Kun katsot kuvaa pikselipelistä, näet rakennuspalikat – luut, jotka muodostavat kauniin sommitelman.

Kunnioitan suuresti taiteilijoita, jotka osaavat tehdä enemmän vähemmällä. On helppo unohtaa tuhannet kuvan muodostavat pikselit, kun katsoo suurta, korkearesoluutioista peliä. Pikselitaiteilijat rakentavat kuvan alusta alkaen. Sen toteuttaminen vaatii suunnittelua, ennakointia ja erittäin vahvaa väriteoriaa.

Osa pikselien puskemisen hauskuudesta on saavutuksen tunne, jonka saa, kun tausta tai hahmo valmistuu. Se muistuttaa lego-setin kokoamista. Kaikki pienet palaset sopivat oikeille paikoilleen luodakseen jotain suurta ja siistiä. Taiteilijoille, jotka eivät ole kokeilleet pikselitaidetta, suosittelen sitä lämpimästi harjoituksena. Se rakentaa luonnetta.

Joten tässä on osa, joka saa minut innostumaan: mahdollisuus täyden tuotannon pikselitaidepeliin. Foorumit, kuten Pixel Joint, ovat täynnä teoksia, jotka vain huutavat tulla pitkiksi peleiksi.

Aiheeseen liittyvä: Unity Asset Store — Valmiita taidetta, työkaluja ja malleja, jotka putoavat suoraan Unity-projektiisi.

Voisitko kuvitella täyspitkän pelin, joka on luotu sillä ajalla ja huolellisuudella, jota nämä taiteilijat käyttävät YHDEN kuvan tekemiseen?! Se olisi LEGEN (odota hetki) DARY. Ja myös tämä: CanvasCycle. Mielikuvitusta ravitsevaa. Värisykloidut taustat olisivat eeppisiä käytettynä sivuskrollaavassa seikkailussa!

Erinomainen esimerkki äskettäisestä pikselipelistä on Sword & Sworcery. Haluaisin nähdä lisää tällaisia uusia pelejä. HTML5:n alustariippumattomuus tarkoittaa jatkuvaa kasvua pelikehitykselle ja suurempaa kysyntää pikselitaiteilijoille. Totuus on, että HTML5:llä voisi tehdä todella kovan pikselipelin. Jotkut saattavat sanoa, että pikselitaide on matalaresoluutioista paskaa, mutta minä näen digitaalista pointillismia ja kauniin taidemuodon, joka olisi muuten saattanut haalistua.

Keskeiset opit

• HTML5:n monialustaisuus on suurin yksittäinen syy, miksi pikselitaide kukoistaa jälleen – yksi resurssisetti voi toimia selaimessa, puhelimessa ja tabletissa.
• Pikselitaide ei ole rajoitus, johon tyydytään; se on kurinalaisuutta, joka pakottaa vahvaan sommitteluun, väriteoriaan ja suunnitteluun.
• Canvas-elementti ja työkalut, kuten CanvasCycle, avaavat tekniikoita (palettisyklitys, proseduraaliset taustat), joita on todella vaikea toteuttaa 3D-putkistoissa.
• Täyden tuotannon pikselitaidepeli on pienelle tiimille saavutettavissa oleva tavoite, ei utopia – esteenä on käsityö ja aika, ei teknologia.
• Jos olet taiteilija, joka ei ole kokeillut pikselien puskemista, ota se harjoituksena. Se rakentaa luonnetta.

Miksi HTML5 muutti laskukaavan pikselitaiteilijoille

HTML5:n myyntipuhe on yksinkertainen: kirjoita kerran, aja missä vain. Konepellin alla työhevonen on <canvas>-elementti, joka antaa JavaScriptille suoran pääsyn bittikarttaan, johon voit piirtää kuva kerrallaan. Pikselitaiteilijalle se on lahja. Et taistele tekstuuriputkistoa tai shader-kääntäjää vastaan – piirrät värisuorakulmioita ruudukkoon, mikä on täsmälleen se tapa, jolla pikselitaidetta alun perinkin tehdään.

Jos olet ostoksilla: Construct 3 — Selainpohjainen, kooditon HTML5-moottori, joka viedään verkkoon, mobiililaitteille ja pöytäkoneille.

Vertaa kahta maailmaa:

Asia	Perinteinen 3D-putkisto	HTML5 canvas / pikseliputkisto
Resurssien luonti	Mallintaminen, UV-kartoitus, rigging, teksturointi	Piirtäminen kiinteään pikseliruudukkoon, sprite-arkin vienti
Tiedostokoko	Suuret meshit ja tekstuurit	Pienet PNG-tiedostot ja indeksoidut paletit
Skaalaus	Resoluutiosta riippuvainen, vaatii LOD-tasot	Nearest-neighbor-skaalaus pitää reunat terävinä
Porttaus	Alustakohtaiset buildit ja shaderit	Yksi koodikanta, monet selaimet ja laitteet
Taiteellisen suunnan riski	Helppo näyttää geneeriseltä	Oletusarvoisesti omaleimainen

Kompromissi on kuitenkin todellinen. Canvas-renderöinti on monissa tapauksissa CPU-sidonnainen, ja sinun on oltava tarkka siinä, kuinka monta spriteä pusket per kuva.

Sinun on myös käsiteltävä laitteen pikselisuhteita huolellisesti, muuten tarkasti sijoitetut pikselit sumentuvat puuroksi korkealla DPI-resoluutiolla varustetulla näytöllä. Ratkaisu on renderöidä matalaresoluutioiselle taustakankaalle ja skaalata se ylöspäin kuvan tasoitus (image smoothing) poistettuna – tekniikka, jonka jokainen HTML5-pikselikehittäjä lopulta oppii.

Käsityö “enemmän vähemmällä”

Kun katsot kuvaa pikselipelistä, näet rakennuspalikat – luut, jotka muodostavat kauniin sommitelman. Kunnioitan suuresti taiteilijoita, jotka osaavat tehdä enemmän vähemmällä. On helppo unohtaa tuhannet kuvan muodostavat pikselit, kun katsoo suurta, korkearesoluutioista peliä. Pikselitaiteilijat rakentavat kuvan alusta alkaen.

Sen toteuttaminen vaatii suunnittelua, ennakointia ja erittäin vahvaa väriteorian hallintaa. Muutamia käytännön periaatteita, jotka erottavat hyvän pikselitaiteen kohinasta:

• Rajoita palettiasi. Klassinen laitteisto asetti kovia rajoituksia – esimerkiksi NES toimi pienen samanaikaisten värien joukon rajoissa. Rajoitukset pakottavat valitsemaan värejä, jotka tekevät todellista työtä.
• Käytä valikoivaa ääriviivausta. Täysin musta ääriviiva tasoittaa spriten. Värilliset, katkonaiset ääriviivat viittaavat valoon ja muotoon.
• Hallitse sävyjä. Siristä silmiäsi spritettä katsoessasi. Jos siluetti ei ole selkeä, mikään määrä yksityiskohtia ei pelasta sitä.
• Kunnioita ruudukkoa. Anti-aliasing käsin, yksi pikseli kerrallaan, on taito – mutta niin on myös tietoisuus siitä, milloin sitä ei pidä tehdä.
• Ajattele laattoina. Uudelleenkäytettävistä laatoista rakennetut taustat ovat halvempia valmistaa ja helpompia animoida.

Tästä syystä pikselitaide palkitsee suunnittelun. Heikkoa sommittelua ei voi piilottaa korkean polygonimäärän taakse. Jokainen pikseli on päätös, ja katsoja näkee ne kaikki.

Aiheeseen liittyvä: JetBrains Rider — Monikäyttöinen .NET/C# IDE ensiluokkaisella Unity- ja Unreal Engine -tuella.

Väripyöritys: Unohdettu supervoima

Ja vielä tämä: CanvasCycle. Aivan huikeaa. Väripyörityksellä toteutetut taustat olisivat eeppisiä sivuttain vierittävässä seikkailupelissä!

Niille, jotka eivät ole nähneet sitä: väripyöritys (color cycling) on tekniikka, jossa pikseleitä ei liikuteta lainkaan. Sen sijaan kierrätetään indeksoidun paletin merkintöjä, jolloin kuva näyttää animoituvan – vesi virtaa, soihdut välkkyvät, taivas muuttuu. Se oli 8- ja 16-bittisten aikakausien kulmakivi, ja sen ajaminen on hämmästyttävän halpaa, koska vain pientä palettia kirjoitetaan uudelleen, ei koko kohtausta piirretä uudelleen.

CanvasCycle elvyttää tämän verkossa renderöimällä klassista väripyöritystaidetta HTML5-canvas-elementille. Sivuttain vierittävän seikkailupelin kohdalla vetovoima on ilmeinen: elävät, hengittävät taustat, jotka eivät kuluta prosessoria melkein lainkaan verrattuna jokaisen ruudun animointiin käsin. Jos rakennat HTML5-peliä ja haluat tunnelmaa ilman suorituskyvyn laskua, palettipyöritys on yksi työkalupakin alikäytetyimmistä työkaluista.

Lukijan suosikki: Amazon: Game Dev Books & Gear — Peliohjelmointikirjoja, mekaanisia näppäimistöjä, näyttöjä ja dev-desk-laitteita.

Yhdestä kuvasta koko peliin

Ja tässä on osa, joka saa minut innostumaan: mahdollisuus täysimittaisesta pikselitaidepelistä. Foorumit, kuten Pixel Joint, ovat täynnä teoksia, jotka vain huutavat tulla muutetuiksi täyspitkiksi peleiksi. Voisitko kuvitella täyspitkän pelin, joka on luotu sillä ajalla ja huolellisuudella, jota nämä taiteilijat käyttävät YHDEN kuvan tekemiseen?! Se olisi LEGEN (odota vain) DARISTA.

Kuilu upean yksittäisen kuvan ja julkaistun pelin välillä on kohta, johon useimmat projektit kuolevat, ja on syytä olla rehellinen syistä:

• Yksittäisen sankarispriten tekeminen voi kestää tunteja. Täydellinen animaatiosarja kestää päiviä. Idle, walk, attack, hurt, death – jokainen on oma palapelinsä.
• Taustat monistuvat. Sivurullava pelityyli vaatii parallaksikerroksia, siirtymiä ja saumattomasti toistuvia laattoja.
• Käyttöliittymä on myös taidetta. Valikot, fontit ja kuvakkeet vaativat samanlaista huolellisuutta, ja pikselifontit ovat oma kurinalainen oppiensa alueensa.
• Johdonmukaisuus on vaikeinta. Yhtenäisen tyylin säilyttäminen sadoissa resursseissa on yhtä paljon johtamisongelma kuin taiteellinenkin.

Hyvä uutinen on, että HTML5 alentaa julkaisun teknistä kynnystä. Et tarvitse konsolin kehityspakettia tai julkaisijaa. Tarvitset canvaksen, pelisilmukan ja kurinalaisuutta viedä projekti loppuun. Siksi pikselitaideyhteisö ja HTML5-yhteisö sopivat niin luonnollisesti yhteen – molemmat palkitsevat ihmisiä, jotka rakentavat asioita alusta alkaen.

Oppia Sword & Sworcerystä

Erinomainen esimerkki tuoreesta pikselipelistä on Sword & Sworcery. Haluaisin nähdä lisää tämän kaltaisia uusia pelejä. Se, mikä tekee siitä opettavaisen, ei ole vain taide – vaan se, miten taide, musiikki ja tahti toimivat yhdessä. Pikseliestetiikka ei ole koristelua; se on koko tunnelma. Se todistaa, että pieni tiimi, jolla on vahva visuaalinen identiteetti, voi luoda jotain, joka tuntuu budjettiaan suuremmalta.

Jos tutkit sitä, katso, miten se käyttää rajoitettuja paletteja, miten se antaa kohtausten hengittää ja miten se kohtelee näyttöä sommitelmana eikä ikkunana 3D-tilaan. Nämä ovat oppeja, joita voit hyödyntää missä tahansa HTML5-projektissa.

Käytännön neuvoja aloitteleville spritereille

Taiteilijoille, jotka eivät ole kokeilleet pikselitaidetta, suosittelen sitä lämpimästi harjoituksena. Se kasvattaa luonnetta. Muutama tapa aloittaa, jotka todella toimivat:

• Luo jotain pientä uudelleen. Valitse sprite, josta pidät, ja rakenna se uudelleen pikseli kerrallaan. Opit enemmän kopioimalla kuin lukemalla.
• Työskentele kiinteässä koossa. Aloita 16×16 tai 32×32 kankaalla ja kieltäydy huijaamasta skaalaamalla ylöspäin.
• Tutki paletteja. Työkalut, kuten Lospec, isännöivät yhteisöpaletteja, jotka voit ladata suoraan Asepriteen, GraphicsGaleen tai Piskeliin.
• Animoi aikaisin. Jopa kahden ruudun pomppaus opettaa enemmän luettavuudesta kuin staattinen mestariteos.
• Julkaise ja pyydä kritiikkiä. Yhteisöt, kuten Pixel Joint ja pikselitaide-subreddityt, kertovat sinulle totuuden, joka on juuri sitä, mitä tarvitset.

Osa pikselien hionnan hauskuudesta on saavutuksen tunne, jonka saat, kun saat taustan tai hahmon valmiiksi. Se muistuttaa legosetin kokoamista. Kaikki pienet palaset loksahtavat oikeille paikoilleen luoden jotain suurta ja hienoa.

Tie edessä

HTML5:n alustariippumaton kätevyys tarkoittaa pelikehityksen jatkuvaa kasvua ja pikselitaiteilijoiden kysynnän kasvua. Totuus on, että voit tehdä todella upean pikselipelin HTML5:llä. Jotkut saattavat sanoa, että pikselitaide on matalaresoluutioista paskaa, mutta minä näen siinä digitaalista pointillismia ja kauniin taidemuodon, joka olisi muuten voinut kadota.

Tekniikka ei ole enää pullonkaula. Selaimet ovat nopeita, canvas on kyvykäs ja työkalut – Asepritesta Tilediin ja niiden päälle rakennettuihin pelimoottoreihin – ovat kypsiä. Jäljelle jää sama asia, jolla on aina ollut merkitystä: taito, kärsivällisyys ja halu sijoittaa yksi pikseli kerrallaan, kunnes jotain kaunista ilmestyy.

Kippis!

Jacob Weberg on digitaalitaiteilija Massively Funissa. Hän pitää pelien rakentamisesta, pelaamisesta ja Easy Cheesestä.

Usein kysyttyjä kysymyksiä

Mikä on “spriter”?

Spriter on taiteilija, joka luo spritejä – pieniä, ruudukkoon kohdistettuja 2D-kuvia, joita käytetään hahmoihin, esineisiin ja tehosteisiin peleissä. Termi tulee pelikehityksen klassiselta aikakaudelta, jolloin spritet olivat laitteistokohteita, joita konsoli saattoi liikuttaa näytöllä itsenäisesti. Nykyään sitä käytetään laajasti kenestä tahansa, joka työskentelee pelien pikselitaiteen parissa.

Miksi HTML5 sopii niin hyvin pikselitaidepeleihin?

HTML5:n canvas-elementti mahdollistaa JavaScriptin piirtämisen suoraan bittikarttaan, mikä vastaa luonnollisesti sitä, miten pikselitaidetta tehdään. Yhdessä sen tosiasian kanssa, että yksi koodikanta toimii selaimissa, puhelimissa ja tableteissa, se tarkoittaa, että pieni tiimi voi julkaista pikselipelin kaikkialle rakentamatta sitä uudelleen alustakohtaisesti. Pienet tiedostokoot tarkoittavat myös nopeita latausaikoja verkossa.

Mitä värikierto (color cycling) on ja miksi sillä on merkitystä?

Värikierto animoi kuvan kiertämällä indeksoidun väripaletin merkintöjä pikselien siirtämisen sijaan. Se oli yleistä 8- ja 16-bittisissä peleissä veden, tulen ja taivaiden kohdalla, ja se on erittäin kevyt suorittaa. CanvasCycle esittelee tekniikan HTML5-kankaalla, ja se on loistava temppu tunnelmallisiin sivuttain vierittäviin taustoihin.

Tarvitsenko kalliita ohjelmistoja pikselitaiteen tekemiseen?

Ei. Ilmaiset ja edulliset työkalut, kuten Piskel, GraphicsGale ja Aseprite (maksullinen mutta edullinen), kattavat kaiken, mitä useimmat spriterit tarvitsevat. Paljon tärkeämpää kuin työkalu on väritajusi, sommittelusi ja maltillisuutesi. Monet arvostetut pikselipelit tehtiin työkaluilla, jotka olivat paljon yksinkertaisempia kuin nykyaikaiset 3D-ohjelmistot.

Kuinka pidän pikselitaiteen terävänä korkearesoluutioisilla näytöillä?

Renderöi pelisi matalaresoluutioiselle taustakankaalle ja skaalaa se sitten näyttöön sopivaksi kuvan tasoitus (image smoothing) pois päältä. Tämä säilyttää terävät pikselireunat sen sijaan, että ne sumennettaisiin. Laitteen pikselisuhteen (device pixel ratio) oikea käsittely on yksi ensimmäisistä teknisistä haasteista, joihin jokainen HTML5-pikselikehittäjä törmää.

Onko pikselitaide vain nostalgiajuttu?

Ei ollenkaan. Pikselitaide on tietoinen esteettinen valinta, jolla on todellisia etuja: se on luettavissa pienissä koossa, halpa tuottaa ja julkaista sekä erottuva markkinoilla, jotka ovat täynnä samannäköisiä 3D-pelejä. Monet nykyaikaiset pelit valitsevat sen taiteellisista syistä, eivät siksi, että ne olisivat rajoittuneet siihen. Kuten olen aiemmin sanonut, se on digitaalista pointillismia.