Keycap Kevin: un approfondimento sul linguaggio visivo del mio primo gioco per computer
Retroscena

Keycap Kevin: un approfondimento sul linguaggio visivo del mio primo gioco per computer

Kevin Hofer
21/7/2023
Traduzione: tradotto automaticamente

Sto programmando il mio primo videogioco. La storia è finita e ho imparato il codice necessario. Affinché i miei comandi possano evocare immagini sullo schermo, devo prima crearle. Nel mio caso, la grafica consiste in foto.

Metto in palio la tastiera Pixel compatibile con i Lego. Affinché non sia così facile per te partecipare al concorso e sperare di divertirti, voglio che tu giochi ai videogiochi. Un gioco che sto programmando. Lo sto facendo per la prima volta nella mia vita. Oggi ti mostrerò tre esempi di come creo visivamente la mia storia interattiva. Se ti sei perso gli ultimi articoli, puoi leggerli ai seguenti link

  • Retroscena

    Keycap Kevin: volevo solo mettere in palio una tastiera, ora programmo un gioco di fiction interattivo

    di Kevin Hofer

  • Retroscena

    Keycap Kevin: imparo a programmare un videogioco per la mia tastiera

    di Kevin Hofer

Nelle storie interattive, la grafica consiste solitamente in singole immagini statiche sullo sfondo e nei personaggi in primo piano. Affinché il tutto non appaia immobile, posso dare vita al gioco con i miei comandi.

Il personaggio principale Stevie

Nel gioco controlli Stevie. Più precisamente, gli dici cosa fare in determinati momenti per permettergli di rubare la tastiera dei suoi sogni. Nel corso del gioco, il suo umore cambia più volte. Affinché questi non siano rappresentati solo dal testo, devono cambiare anche le sue espressioni facciali e i suoi gesti.

Dal momento che Stevie è un minifig - un omino Lego - posso controllare i gesti regolando i suoi arti e fotografando le diverse posizioni. I minifig non sono famosi per la loro articolazione, ma per i miei scopi è sufficiente. Diventa più difficile con le espressioni facciali.

Personaggio principale Stevie in varie pose. Ho già dipinto il volto qui.
Personaggio principale Stevie in varie pose. Ho già dipinto il volto qui.
Fonte: Kevin Hofer

La testa di Stevie è adornata da una benda e sorride maliziosamente. Questa espressione si adatta bene al suo carattere "neutro", che è quello che di solito si vede in Stevie. È esteriormente sicuro di sé, ma in realtà è il classico perdente. All'inizio ho iniziato a cercare delle teste adatte da mettere a Stevie per poi fotografarlo mentre le indossava. Purtroppo non ho trovato molto con una maschera. Ho quindi optato per il photoshopping - e con il talento di disegno di un pomodoro.

Il mio approccio: Scatto una foto di Stevie con i gesti desiderati. In Photoshop lo ritaglio e rimuovo gli occhi, la bocca e le sopracciglia, cioè tutti i tratti del viso di una minifig che rappresentano le emozioni. Poi disegno i tratti del viso desiderati basandomi su modelli di minifig esistenti. Ho già Stevie in vari stati d'animo.

Dopo aver cancellato il volto di Stevie in Photoshop, ne disegno uno nuovo.
Dopo aver cancellato il volto di Stevie in Photoshop, ne disegno uno nuovo.
Fonte: Kevin Hofer

Il tutto non ha un aspetto molto professionale, ma per il momento soddisfa il suo scopo. Se le mie esigenze dovessero aumentare, posso sovrascrivere le vecchie immagini con altre nuove.

Sfondo animato

Come si addice a una storia interattiva, le decisioni sbagliate fanno sì che la storia finisca prematuramente. Uno di questi "brutti" finali è quando Stevie viene catturato dalla polizia. Questo è ciò che voglio rappresentare con le luci lampeggianti della polizia.

Il Nanlite PavoTube II 6C è il mio. Ha la luce blu della polizia come effetto preimpostato. Dispongo Stevie e la poliziotta come desidero e accendo la luce blu. Poi scatto una serie di foto della scena. Ne seleziono due: Una completamente illuminata e una leggermente più scura. Utilizzo queste due foto per creare il mio sfondo animato, in pratica una gif. Il mio codice è simile a questo:

Il codice per la mia immagine di sfondo animata.
Il codice per la mia immagine di sfondo animata.
Fonte: Kevin Hofer

Questo è l'aspetto del gioco finito. Per rendere ancora più chiaro ciò che sta accadendo, aggiungerò un effetto sonoro.

Sfondo e personaggi insieme

Nel gioco, Stevie ruba la tastiera pixel che sto regalando. La incatena al furgone. In una scena, Stevie sfonda un muro con il suo furgone. In una prima versione il gioco si presenta così:

Allora ho bisogno di varie cose:

  • uno sfondo con un muro intatto
  • uno sfondo con un muro rotto
  • il furgone che sfonda
  • Stevie con una faccia spaventata

Prima di tutto mi occupo dello sfondo. Poiché ho solo pochi mattoncini Lego, cerco in un database di immagini un'immagine di sfondo adatta. Trovo quello che cerco su Shutterstock: Un muro giallo di Lego con un buco al centro. Perfetto. Riempio il buco in Photoshop. In questo modo ho la stessa immagine, una volta con il buco e una volta senza.

Ora devo solo aggiungere le immagini al gioco con il codice. Il muro intatto è la prima immagine di questa scena. La lascio per un secondo. Prima di sovrapporre il muro rotto con un effetto di oscillazione. Sottolineo il tutto con un effetto sonoro.

Ora è il turno dei personaggi. Per questa scena sto lavorando con due Stevies. Una volta è seduto nel suo furgone e un'altra volta lo vedi solo in primo piano. Il furgone e la tastiera sono la sfida più grande. Voglio che sembri che stiano volando attraverso il muro verso lo schermo. Per l'immagine, sollevo il furgone e la tastiera per scattare una foto dal basso. Per farlo, appendo il furgone al soffitto con delle corde e sostengo la tastiera con delle scatole di cartone.

Ho dovuto lavorare molto duramente per questa foto.
Ho dovuto lavorare molto duramente per questa foto.
Fonte: Kevin Hofer

Ora devo solo rimuovere gli elementi superflui come i cavi e le scatole in Photoshop. Questo è più difficile del previsto con le corde nere. Purtroppo non avevo a portata di mano delle corde trasparenti. Tuttavia, dopo un po' di armeggi, tutto è stato ripulito e ritagliato di conseguenza.

Inserisco l'immagine con il furgone direttamente dopo aver cambiato il muro intatto con quello rotto. La ingrandisco per ottenere l'effetto desiderato. In questo modo sembra che il furgone abbia attraversato il buco.

Ora manca solo Stevie. Scatto una foto di lui seduto e gli disegno una faccia spaventata con Photoshop. Per rendere ancora meglio l'effetto della scossa, gli permetto di zoomare sulla foto mentre si gira.

Si tratta di un'immagine che non è ancora stata scattata.

Mi manca ancora qualcosa. Ho alcuni mattoncini Lego a terra di fronte al muro rotto, ma volerebbero in tutte le direzioni con tanta pressione. Quindi cerco un'immagine di mattoncini Lego gialli che volano in avanti. Non è stato così facile. Alla fine trovo solo i Duplo. Ma è sufficiente per il mio scopo. Li libero e li aggiungo al furgone e alla tastiera. Ora l'insieme mi piace molto di più.

Come codice si presenta in questo modo:

Il codice della scena precedente sembra abbastanza semplice.
Il codice della scena precedente sembra abbastanza semplice.
Fonte: Kevin Hofer

Ho ancora del lavoro da fare

Vedi, c'è molto lavoro in ogni dettaglio. Ovviamente il mio progetto non è all'altezza dei giochi realizzati da professionisti. Ma sono soddisfatto per essere la mia prima volta. Soprattutto perché sto facendo buoni progressi. Se tutto va bene, la prossima settimana potrò mostrarti il mio gioco finito e potrai partecipare all'estrazione del premio. <p

A 15 persone piace questo articolo


User Avatar
User Avatar

Tecnologia e società mi affascinano. Combinarle entrambe e osservarle da punti di vista differenti sono la mia passione.


Potrebbero interessarti anche questi articoli

Commenti

Avatar