Spriters: Una nuova speranza.

Negli ultimi dieci anni la crescita dei videogiochi è esplosa a causa della tecnologia emergente. All’inizio, tutti i giochi avevano solo un ottimo gameplay e i pixel. Ma negli ultimi anni i giochi 3D sono diventati più dominanti e ora, con l’ascesa di HTML5, gli spriter possono spingere ancora una volta i pixel per i giochi!

Per gli sviluppatori, la cosa più interessante di HTML5 è che funziona su più piattaforme, dal web ai dispositivi portatili. Ciò comporta alcune limitazioni per l’arte. Eppure gli artisti che preferiscono un approccio classico troveranno in questa piattaforma un modo per prosperare. Vale a dire attraverso la pixel art.

Per gli artisti, la cosa più interessante di HTML5 è il potenziale per più giochi in pixel art. Questi tipi di giochi hanno un certo fascino. Quando guardi un’immagine di un gioco in pixel, vedi i mattoni – le ossa che compongono una bella composizione.

Ho molto rispetto per gli artisti che sanno fare di più con meno. È facile dimenticare le migliaia di pixel che compongono un’immagine quando si guarda un gioco di grandi dimensioni e ad alta risoluzione. I pixel artist costruiscono un’immagine da zero. Per riuscirci, ci vuole pianificazione, previdenza e un senso molto forte della teoria del colore.

Parte del divertimento del “pixel pushing” è il senso di realizzazione che ottieni quando finisci uno sfondo o un personaggio. Ricorda il completamento di un set Lego. Tutti i piccoli pezzi che si inseriscono nel posto giusto per creare qualcosa di grande e figo. Per gli artisti che non hanno provato la pixel art, lo consiglio vivamente come esercizio. Tempra il carattere.

Quindi ecco la parte che mi entusiasma: la possibilità di un gioco in pixel art a produzione completa. Forum come Pixel Joint sono pieni di opere che chiedono solo di essere trasformate in giochi a lunghezza naturale.

Correlato: Unity Asset Store — Grafica, strumenti e modelli già pronti che vengono inseriti direttamente nel tuo progetto Unity.

Riuscite a immaginare un gioco completo realizzato con il tempo e la cura che questi artisti impiegano per creare UN’immagine?! Sarebbe LEGEN (attendete) DARIO. E anche questo: CanvasCycle. Strabiliante.

Gli sfondi con ciclo di colori sarebbero epici se usati in un’avventura a scorrimento laterale!

Un ottimo esempio di un recente gioco in pixel è Sword & Sworcery. Mi piacerebbe vedere altri nuovi giochi come questo. La convenienza multipiattaforma di HTML5 significa una crescita continua per lo sviluppo di giochi e una maggiore domanda di pixel artist.

La nostra scelta: Udemy Game Development Courses — Corsi su richiesta riguardanti Unity, Unreal, C++, C# e programmazione shader.

La verità è che potresti creare un gioco in pixel davvero cazzuto con HTML5. Alcuni potrebbero dire che la pixel art è spazzatura a bassa risoluzione, ma io ci vedo il puntinismo digitale e una bella forma d’arte che altrimenti sarebbe svanita.

Key Takeaways

• La portata multipiattaforma di HTML5 è il principale motivo per cui la pixel art sta prosperando di nuovo: un unico set di asset può essere eseguito in un browser, su un telefono e su un tablet.
• La pixel art non è una limitazione a cui accontentarsi; è una disciplina che impone una forte composizione, teoria del colore e pianificazione.
• L’elemento canvas e strumenti come CanvasCycle aprono a tecniche (palette cycling, sfondi procedurali) che sono davvero difficili da realizzare nelle pipeline 3D.
• Un gioco in pixel art a produzione completa è un obiettivo raggiungibile per un piccolo team, non un sogno irrealizzabile: la barriera è l’abilità tecnica e il tempo, non la tecnologia.
• Se sei un artista che non ha provato il pixel pushing, trattalo come un esercizio. Tempra il carattere.

Perché HTML5 ha cambiato la matematica per i Pixel Artist

Il pitch per HTML5 è semplice: scrivi una volta, esegui ovunque. Sotto il cofano, il cavallo di battaglia è l’elemento <canvas>, che dà a JavaScript l’accesso diretto a una bitmap in cui puoi disegnare, fotogramma per fotogramma.

Per un pixel artist, è un regalo. Non stai combattendo contro una pipeline di texture o un compilatore di shader: stai disegnando rettangoli di colore su una griglia, che è esattamente il modo in cui viene creata la pixel art in primo luogo.

Confronta i due mondi:

Preoccupazione	Pipeline 3D tradizionale	Pipeline HTML5 canvas / pixel
Creazione di asset	Modellazione, mappatura UV, rigging, texturing	Disegno su una griglia di pixel fissa, esportazione di uno sprite sheet
Dimensione del file	Mesh e texture di grandi dimensioni	PNG minuscoli e tavolozze indicizzate
Ridimensionamento	Dipendente dalla risoluzione, necessita di LOD	Il ridimensionamento nearest-neighbor mantiene i bordi nitidi
Porting	Build e shader per singola piattaforma	Un unico codebase, molti browser e dispositivi
Rischio direzione artistica	Facile sembrare generico	Distintivo per impostazione predefinita

Il compromesso è reale, però. Il rendering del canvas è legato alla CPU in molti casi, e devi essere deliberato su quanti sprite spingi per fotogramma. Devi anche gestire attentamente i pixel ratio dei dispositivi, altrimenti i tuoi pixel posizionati con cura si sfoceranno in una poltiglia su uno schermo ad alto DPI.

La soluzione consiste nel renderizzare su un canvas di supporto a bassa risoluzione e scalarlo disabilitando il smoothing dell’immagine: una tecnica che ogni sviluppatore di pixel HTML5 alla fine impara.

Correlato: Amazon: Game Dev Books & Gear — Libri di programmazione di giochi, tastiere meccaniche, monitor e hardware per sviluppatori.

Il mestiere dietro il “Fare di più con meno”

Quando guardi un’immagine di un gioco in pixel, vedi i mattoni – le ossa che compongono una bella composizione. Ho molto rispetto per gli artisti che sanno fare di più con meno. È facile dimenticare le migliaia di pixel che compongono un’immagine quando si guarda un gioco di grandi dimensioni e ad alta risoluzione. I pixel artist costruiscono un’immagine da zero.

Per farcela, sono necessarie pianificazione, lungimiranza e un forte senso della teoria dei colori. Alcuni principi pratici che separano la buona pixel art dal rumore:

• Limita la tua tavolozza. L’hardware classico imponeva limiti rigidi: il NES, ad esempio, funzionava con un piccolo set di colori simultanei. I vincoli ti costringono a scegliere colori che svolgano un lavoro concreto.
• Utilizza contorni selettivi. Un contorno completamente nero appiattisce uno sprite. I contorni colorati e spezzati suggeriscono luce e forma.
• Controlla i tuoi valori. Strizza gli occhi guardando il tuo sprite. Se la silhouette non è leggibile, nessun dettaglio potrà salvarla.
• Rispetta la griglia. L’anti-aliasing manuale, un pixel alla volta, è un’abilità, ma lo è anche sapere quando non farlo.
• Pensa in tile. Gli sfondi realizzati con tile riutilizzabili sono più economici da produrre e più facili da animare.

Ecco perché la pixel art premia la pianificazione. Non puoi nascondere una composizione debole dietro un numero elevato di poligoni. Ogni pixel è una decisione e lo spettatore le vede tutte.

Se stai facendo acquisti: Construct 3 — Motore HTML5 senza codice basato su browser che esporta su Web, dispositivi mobili e desktop.

Color Cycling: il superpotere dimenticato

E anche questo: CanvasCycle. Strabiliante. Gli sfondi con color cycling sarebbero epici in un’avventura a scorrimento laterale!

Per chi non l’ha visto: il color cycling è una tecnica in cui non si sposta alcun pixel. Invece, si ruotano le voci in una tavolozza indicizzata e l’immagine sembra animarsi: l’acqua scorre, le torce tremolano, i cieli cambiano. Era un elemento fondamentale delle ere a 8 e 16 bit, ed è sorprendentemente economico da gestire perché si riscrive solo una piccola tavolozza, senza ridisegnare l’intera scena.

CanvasCycle lo fa rivivere sul web rendendo opere d’arte classiche con color cycling in un canvas HTML5. Per un’avventura a scorrimento laterale, il fascino è ovvio: sfondi vivi e vibranti che non costano quasi nulla in termini di CPU rispetto all’animazione manuale di ogni fotogramma. Se stai creando un gioco HTML5 e desideri atmosfera senza compromettere le prestazioni, il palette cycling è uno degli strumenti più sottoutilizzati nella cassetta degli attrezzi.

Da un’immagine a un gioco completo

Quindi ecco la parte che mi entusiasma: la possibilità di un gioco in pixel art a produzione completa. Forum come Pixel Joint sono pieni di opere che chiedono solo di essere trasformate in giochi a lunghezza naturale. Potreste immaginare un gioco completo realizzato con il tempo e la cura che questi artisti impiegano per fare UNA sola immagine?! Sarebbe LEGEN (attendete) DARIO.

Il divario tra un’immagine meravigliosa e un gioco pubblicato è il punto in cui la maggior parte dei progetti muore, ed è opportuno essere onesti sul perché:

• Un singolo sprite del protagonista potrebbe richiedere ore. Un set completo di animazioni richiede giorni. Idle, camminata, attacco, danno, morte: ognuna è un puzzle a sé.
• Gli sfondi si moltiplicano. Un side-scroller ha bisogno di livelli di parallasse, transizioni e tile che si ripetano senza soluzione di continuità.
• Anche l’UI è arte. Menu, font e icone richiedono tutti la stessa cura, e i pixel font sono una disciplina a sé stante.
• La coerenza è la parte difficile. Mantenere uno stile coerente tra centinaia di asset è un problema di gestione tanto quanto artistico.

La buona notizia è che HTML5 abbassa la barriera tecnica alla pubblicazione. Non hai bisogno di un dev kit per console o di un editore. Hai bisogno di un canvas, di un game loop e della disciplina per finire. Ecco perché la community della pixel art e quella di HTML5 si adattano così naturalmente: entrambe premiano chi ama costruire le cose da zero.

Imparare da Sword & Sworcery

Un ottimo esempio di gioco in pixel art recente è Sword & Sworcery. Mi piacerebbe vedere altri nuovi giochi come questo. Ciò che lo rende istruttivo non è solo l’arte, ma il modo in cui l’arte, la musica e il ritmo lavorano insieme. L’estetica pixel non è una decorazione; è l’intera atmosfera. Dimostra che un piccolo team con una forte identità visiva può realizzare qualcosa che sembra più grande del suo budget.

Se lo state studiando, osservate come utilizza tavolozze limitate, come lascia respirare le scene e come tratta lo schermo come una composizione piuttosto che come una finestra su uno spazio 3D. Queste sono lezioni che potete portare in qualsiasi progetto HTML5.

Consigli pratici per aspiranti spriter

Per gli artisti che non hanno mai provato la pixel art, la consiglio vivamente come esercizio. Tempra il carattere. Alcuni modi per iniziare che funzionano davvero:

• Ricrea qualcosa di piccolo. Scegli uno sprite che ami e ricostruiscilo pixel per pixel. Imparerai più copiando che leggendo.
• Lavora a dimensioni fisse. Inizia con un canvas 16×16 o 32×32 e rifiuta di imbrogliare scalando verso l’alto.
• Studia le tavolozze. Strumenti come Lospec ospitano tavolozze della community che puoi caricare direttamente in Aseprite, GraphicsGale o Piskel.
• Anima presto. Anche un rimbalzo di due fotogrammi ti insegna più sulla leggibilità di un capolavoro statico.
• Pubblica e accetta critiche. Community come Pixel Joint e i subreddit di pixel art ti diranno la verità, che è esattamente ciò di cui hai bisogno.

Parte del divertimento del “pixel pushing” è il senso di realizzazione che provi quando finisci uno sfondo o un personaggio. Ricorda il completamento di un set LEGO. Tutti i piccoli pezzi che si incastrano al posto giusto per creare qualcosa di grande e fantastico.

La strada da percorrere

La comodità multipiattaforma di HTML5 significa una crescita continua per lo sviluppo di giochi e una maggiore domanda di pixel artist. La verità è che potresti creare un gioco in pixel art davvero tosto con HTML5. Alcuni potrebbero dire che la pixel art sia schifezza a bassa risoluzione, ma io ci vedo del puntinismo digitale e una bellissima forma d’arte che altrimenti sarebbe svanita.

La tecnologia non è più il collo di bottiglia. I browser sono veloci, il canvas è capace e gli strumenti — da Aseprite a Tiled, fino ai motori di gioco costruiti su di essi — sono maturi. Ciò che resta è la stessa cosa che ha sempre contato: maestria, pazienza e la volontà di posizionare un pixel alla volta finché non appare qualcosa di bello.

Saluti!

Jacob Weberg è un Digital Artist presso Massively Fun. Gli piace creare giochi, giocare e Easy Cheese.

Domande frequenti

Cos’è uno “spriter”?

Uno spriter è un artista che crea sprite: le piccole immagini 2D allineate a una griglia utilizzate per personaggi, oggetti ed effetti nei giochi. Il termine deriva dall’era classica dello sviluppo di giochi, quando gli sprite erano oggetti hardware che la console poteva muovere sullo schermo in modo indipendente. Oggi è usato genericamente per chiunque lavori nella pixel art per i giochi.

Perché HTML5 è così adatto ai giochi in pixel art?

L’elemento canvas di HTML5 consente a JavaScript di disegnare direttamente su una bitmap, il che si sposa naturalmente con il modo in cui viene realizzata la pixel art. In combinazione con il fatto che un unico codebase giri su browser, telefoni e tablet, ciò significa che un piccolo team può distribuire un gioco in pixel ovunque senza doverlo ricostruire per ogni piattaforma. Le dimensioni ridotte degli asset significano inoltre tempi di caricamento rapidi sul web.

Cos’è il color cycling e perché è importante?

Il color cycling anima un’immagine ruotando le voci in una tavolozza di colori indicizzata anziché spostare i pixel. Era comune nei giochi a 8 e 16 bit per l’acqua, il fuoco e i cieli, ed è estremamente leggero da eseguire. CanvasCycle dimostra la tecnica in un canvas HTML5, ed è un ottimo trucco per sfondi atmosferici a scorrimento laterale.

Ho bisogno di software costosi per realizzare pixel art?

No. Strumenti gratuiti e a basso costo come Piskel, GraphicsGale e Aseprite (a pagamento ma economico) coprono tutto ciò di cui la maggior parte degli spriter ha bisogno. Ciò che conta molto più dello strumento è il tuo senso del colore, della composizione e della moderazione. Molti celebri giochi in pixel art sono stati realizzati con strumenti molto più semplici di una moderna suite 3D.

Come faccio a mantenere nitida la pixel art sugli schermi ad alta risoluzione?

Esegui il rendering del tuo gioco su un backing canvas a bassa risoluzione, quindi ridimensiona quel canvas per adattarlo al display disattivando lo smoothing dell’immagine. Ciò preserva i bordi netti dei pixel invece di sfocarli. Gestire correttamente il device pixel ratio è uno dei primi ostacoli tecnici che incontra ogni sviluppatore di pixel art in HTML5.

La pixel art è solo una questione di nostalgia?

Affatto. La pixel art è un’estetica deliberata con vantaggi reali: è leggibile in piccole dimensioni, economica da produrre e distribuire, e distintiva in un mercato pieno di giochi 3D dall’aspetto simile. Molti giochi moderni la scelgono per ragioni artistiche, non perché ne siano limitati. Come ho già detto, è puntinismo digitale.