CORSO PROGETTAZIONE VIDEOGIOCHI E SIMULAZIONI Fondamentali nella Progettazione VideoLudica Dispensa a cura di Roberto Zanoni ad uso esclusivo degli studenti 1
Entertainment & Interactivity Grafica Vettoriale e Grafica Raster 2 Dispensa Corso Game Design a cura di Roberto Zanoni
Grafica Raster/Vettoriale Grafica Raster/Bitmap La grafica Raster (o grafica BitMap) è una tecnica utilizzata in computer grafica per descrivere un'immagine come un insieme di Pixel Colorati definiti da una mappa di riferimento. La bitmap è caratterizzata da due proprietà: Risoluzione (Larghezza x Altezza) Profondità di colore (bit Colore) 3
Grafica Raster/Vettoriale Grafica Raster o Bitmap Profondità di colore BIT = Binary Digit (0/1 = 2 combinazioni) BYTE = 8 BIT (256 combinazioni 2^8) 2 BYTE = 16 BIT (65536 Combinazioni) 3 BYTE = 24 BIT (16 milioni di colori) 4 BYTE = 32 BIT (16 milioni di colori + Alpha Channel) 4
Grafica Raster/Vettoriale Grafica Vettoriale La grafica vettoriale è una tecnica utilizzata in computer grafica per descrivere un'immagine mediante un insieme di primitive geometriche (punti, linee, curve e poligoni) alle quali possono essere attribuiti colori e anche sfumature. I principali vantaggi della grafica vettoriale rispetto alla grafica raster sono la qualità, l indipendenza dalla risoluzione, la maggiore compressione dei dati e la più facile gestione delle eventuali modifiche. 5
Grafica Raster/Vettoriale Quando Raster e quando Vettoriale? RASTER - Immagini fotografiche o grafica con presenza di molteplici sfumature - Risoluzioni fisse VETTORIALE - Immagini Cartoon senza sfumature - Risoluzione variabile 6
Grafica Raster/Vettoriale RASTER VETTORIALE 7
Entertainment & Interactivity I FORMATI DELLE IMMAGINI UN FORMATO PER OGNI PIATTAFORMA LOSSEY or LOSSLESS 8
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI BMP JPG GIF PNG TIFF TGA 9
I FORMATI DELLE IMMAGINI LOSSY (JPG, PNG) Immagini con perdita di qualità rispetto all originale. Si utilizzano quando è più importante rendere l immagine (file) più leggera (meno byte su disco) a discapito della qualità. LOSSLESS (BMP, GIF, TGA, TIF, EPS) Immagini senza perdita di qualità rispetto all originale. Si utilizzano quando è più importante mantenere la qualità alta e non si hanno problemi di spazio per la memorizzazione dell immagine (file). 10
I FORMATI DELLE IMMAGINI MODALITA DI SALVATAGGIO E PROFONDITA DEL COLORE Qualità Bassa, Media e Alta -> Più la qualità è alta più il file diventa grande, impostare qualità bassa vuol dire far lavorare più profondamente gli algoritmi di compressione delle immagini. Profondità Colore 8 bit = 256 Colori 16 bit = 65.536 Colori 24 bit = 16 Milioni di Colori 32 bit = 16 Milioni di Colori + 8 bit di Alpha 11
I FORMATI DELLE IMMAGINI MODALITA DI SALVATAGGIO E PROFONDITA DEL COLORE Trasparenza Trasparent Color = Uno dei colori presenti all interno dell immagine viene definito come trasparente, l immagine presenta una tavolozza dei colori (definita) e all interno del file viene memorizzato l indice del colore che non dovrà essere disegnato/visualizzato. Alpha Channel = Un intero set di 8 bit (alpha byte) definiranno quali pixel dovranno essere disegnati/visualizzati nonché il grado di opacità/presenza sullo schermo. 12
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI JPG Joint Photographic Experts Group JPEG usa una compressione di tipo "lossy. In pratica viene usato un algoritmo per l approssimazione dei pixel colorati per la ricostruzione dell immagine che non sarà mai esattamente uguale all originale. Il formato JPG è in assoluto il migliore per comprimere immagini fotografiche con molteplici sfumature e colori. 13
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI GIF Graphics Interchange Format GIF (pron. "gif" o "ghif") è un formato standard di memorizzazione di file Bitmap. GIF è probabilmente il formato grafico più usato al mondo, e uno dei primi ad essere usato su WEB. Il formato GIF non elimina pixel, come fa il JPEG, ma anzi li riproduce. Il formato GIF funziona bene su grafica disegnata e supporta al massimo 256 colori per questo motivo non è il massimo con le fotografie e le immagini sfumate. Il formato Gif permette l animazione e la trasparenza. 14
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI PNG Portable Network Graphics E un formato utilizzato per la produzioni di immagini molto compresse ma di buona qualità. E' l'alternativa al GIF e supporta immagini a 24 bit ed è utile per l'utilizzo di sfondi trasparenti senza contorni dentellati e quindi di migliore qualità. E utilizzato su Web, su IPTV per le applicazioni su STB, su Digitale Terrestre su applicazioni MHP e su Mobile nelle applicazioni J2ME. 15
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI TIFF Tag Image File Format E il più usato, più flessibile ed affidabile metodo per memorizzare immagini bitmap in bianco e nero, a scala di grigio, a scala di colore, a colori RGB. Un file TIFF può essere di ogni dimensione (in pixel) e di ogni profondità di bit. Può essere salvato con o senza compressione; Photoshop utilizza la compressione LZW, che è di tipo lossless. E il formato più usato per la stampa di qualità. Può infatti supportare salvataggi a milioni di colori, il supporto del canale Alpha e compressione lossless. 16
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI EPS (Encapsulated PostScript) EPS: è un formato utilizzabile da tutti i programmi di grafica, di illustrazione e impaginazione sia raster che vettoriali. Questo formato può contenere sia immagini bitmap che vettoriali. Non supporta il canale Alpha (il canale della trasparenza). 17
I FORMATI DELLE IMMAGINI I FORMATI PIU DIFFUSI TGA (Targa) Formato di immagine di tipo Raster. Il formato Tga può gestire immagini con profondità cromatiche diverse, 16 bit per pixel, 24, 32. L'ambiente di utilizzo ideale per questo formato è quello del video digitale data l'altissima qualità dei file TGA che però si paga soprattutto in termini di spazio su disco. 18
MOBILE PIXEL ART Tecnica per costruire immagini colorando pixel per pixel tramite un programma di Editing di grafica raster. Usata moltissimo negli 80 per la realizzazione dei videogiochi, nei quali i pixel risultavano molto grandi e le immagini poco definite. Lavorando pixel per pixel i disegnatori avevano il compito di esplicitare (in termini di visibilità) un oggetto anche complesso, avendo a disposizione pochi punti per realizzarlo. In questi ultimi anni la Pixel Art è tornata un po di moda, non per necessità ma semplicemente per passione di molti affezionati e nostalgici di questa tecnica di disegno. 19
20
21
PIXEL ART Utilizzo della Pixel Art La Pixel Art ancora oggi viene usata per videogiochi su varie piattaforme, a volte per necessità a volte per scelta, diciamo per vezzo. L utilizzo più marcato negli ultimi anni (per necessità) è stato quello su piattaforma mobile. Gli schermi dei telefonini, in alcuni casi abbastanza piccoli fanno un po tornare indietro nel tempo quando lo schermo FullScreen di un Home-PC in modalità grafica non superava i 300 pixel di larghezza. Un videogioco su PC oltre ad avere la necessità di avere la grafica in pochi pixel, ha inoltre la necessità di limitare lo spazio al minimo indispensabile. Nelle slide successive vedremo alcuni esempi di utilizzo di pixel art per la creazione di sprite. 22
SPRITE LO SPRITE In grafica informatica lo sprite è una figura bidimensionale che può essere spostata rispetto allo sfondo, è composta da una serie di fotogrammi (frame) base che ne determinano l animazione durante lo spostamento sullo schermo. SPRITE = FOLLETTO L idea iniziale di un oggetto animato che poteva muoversi nello schermo assumeva una connotazione magica. 23
SPRITE ASTEROIDS Sprite dell asteroide 24
SPRITE Sprite Platform SuperMario 25
SPRITE Sprite Platform SuperMario 26
ESEMPI DI SPRITE Applicazioni su Terminali Mobili PAROLA D ORDINE: RISPARMIARE SPAZIO! 27
ESEMPI DI SPRITE Wrestling Heroes Esempi di Sprite 28
ESEMPI DI SPRITE Wrestling Heroes Esempi di Sprite Dimensione reali in pixel per una singola immagine 29x29 29
ESEMPI DI SPRITE Beach Volley Babes Esempi di Sprite 30
ESEMPI DI SPRITE Beach Volley Babes Cosa Conviene di più? La 1 o la 2? 1 2 31
ESEMPI DI SPRITE Beach Volley Babes DIMENSIONE IN RAM MAGGIORE DIMENSIONE SU DISCO MAGGIORE Facility di programmazione DIMENSIONE IN RAM MINORE DIMENSIONE SU DISCO MINORE 32
ESEMPI DI SPRITE Beach Volley Babes Cosa Conviene di più? La 1 o la 2? 1 2 33
ESEMPI DI SPRITE Beach Volley Babes DIMENSIONE IN RAM IDENTICA DIMENSIONE SU DISCO MAGGIORE DIMENSIONE IN RAM IDENTICA DIMENSIONE SU DISCO MINORE 34
COLLISIONI CONCETTI E TECNICHE COLLISIONE CONCETTO: Scontro tra 2 oggetti dove almeno uno di essi e in movimento FONDAMENTALI: Controllo su uno dei 2 oggetti (generalmente l avatar) Ottimizzazione del calcolo Previsione di contatto 35
COLLISIONI CONCETTI E TECNICHE METAFORA: IL VOSTRO AVATAR NON VEDE E COME SE FOSSE IN UNA STANZA BUIA, SENZA LUCE DOVETE AIUTARLO A NON SBATTERE DOVETE AIUTARLO A PREVEDERE l IMPATTO 36
COLLISIONI CONCETTI E TECNICHE A UN UMANO VERREBBE DA METTERE LE BRACCIA AVANTI PER PREVEDERE L IMPATTO. 37
COLLISIONI CONCETTI E TECNICHE ONDE SONORE UN PIPISTRELLO LANCIA DELLE ONDE SONORE E DA COME GLI RITORNANO INDIETRO SA COME EVITARE GLI OSTACOLI. 38
COLLISIONI CONCETTI E TECNICHE AVATAR IN MOVIMENTO MURO DI COLLISIONE 39
COLLISIONI CONCETTI E TECNICHE AVATAR IN MOVIMENTO DISTANZA ALL IMPATTO 2,5 METRI MURO DI COLLISIONE STEP DI MOVIMENTO 1 METRO 40
COLLISIONI CONCETTI E TECNICHE AVATAR IN MOVIMENTO DISTANZA ALL IMPATTO 0,5 METRI MURO DI COLLISIONE STEP DI MOVIMENTO 1 METRO 41
COLLISIONI CONCETTI E TECNICHE GHOST TECNICA 2D MURO DI COLLISIONE STEP DI MOVIMENTO 1 METRO 42
COLLISIONI CONCETTI E TECNICHE RAY LIGHT TECNICA 3D MURO DI COLLISIONE STEP DI MOVIMENTO 1 METRO 43
COLLISIONI CONCETTI E TECNICHE BOUNDING BOX PIÙ OTTIMIZZATO MENO PERFORMANTE 44
COLLISIONI CONCETTI E TECNICHE PIXEL PRECISION MENO OTTIMIZZATO PIÙ PERFORMANTE 45
COLLISIONI CONCETTI E TECNICHE NECESSARIA TECNICA GHOST NECESSARIA PIXEL PRECISION COLLISION DETECTION 46
COLLISIONI CONCETTI E TECNICHE NON UTILIZZATA TECNICA GHOST PER MOTIVI DI OTTIMIZZAZIONE NON NECESSARIA PIXEL PRECISION SUFFICIENTE BOUNDING BOX 47
IL CICLO DI RENDERING InvalidateRect / ValidateRect SetClipRegion BeginPaint DrawItem 1 DrawItem N EndPaint 48
IL CICLO DI RENDERING Nei più diffusi linguaggi di programmazione è possibile gestire il quantitativo di refresh da far eseguire al ciclo di rendering grafico, impostando opportunamente i parametri di InvalidateRect o SetClipRegion. InvalidateRect e SetClipRegion permettono di decidere quale porzione di area di gioco dovrà subire un refresh al successivo ciclo di rendering. A volte il meccanismo di ottimizzazione non è gestibile direttamente, quindi è necessario comprendere bene come il ciclo di rendering tende a interpretare gli oggetti/sprite che immettiamo all interno dell interfaccia di gioco. Di seguito alcuni esempi: 49
IL CICLO DI RENDERING Ad ogni ciclo di rendering vanno cancellati pixel degli invaders, dell istante precedente. Sfondo neutro quindi soluzione più leggera possibile. 50
IL CICLO DI RENDERING 51
IL CICLO DI RENDERING Se le animazioni di Background (es. le nuvole che si muovono orizzontalmente e il sole che brilla) occupano tutta l area del gioco, ad ogni ciclo di rendering viene forzato un refresh fullscreen, che appesantisce notevolmente la fluidità 52 del gioco.
I FORMATI AUDIO LOSSY O NON LOSSY CAMPIONI O SINTETIZZATI I formati Audio musicali si dividono principalmente in 2 categorie: I formati senza perdita di qualità (non lossy) es. WAV I formati compressi con perdità di qualità variabile (lossy) es. MP3 I file musicali possono anche essere di una terza categoria, ovvero file audio descrittivi è il caso del formato MIDI che non è altro che un protocollo di comandi che viene di volta in volta interpretato dalla macchina che lo accoglie/legge. 53
I FORMATI AUDIO FORMATO WAV IL RASTER DELL AUDIO La memorizzazione di un file Wav è caratterizzata da diversi parametri, che ne determinano la qualità e di conseguenza la dimensione su disco: BITSAMPLE: ovvero la quantità di bit utilizzata per la memorizzazione di ogni campionatura audio, ovvero la più piccola e unitaria informazione sonora memorizzabile, generalmente si utilizzano questi parametri: 8bit, 16bit o 24bit. FREQUENZA DI CAMPIONAMENTO: ovvero il numero di volte al secondo in cui il segnale analogico (originale) è stato misurato e memorizzato in forma digitale può assumere molteplici valori ma i più utilizzati sono: 11kHz, 22kHz e 44kHz. CANALI: Mono/Stereo (1/2) in pratica nel caso dello stereo è come avere 2 campionature diverse, una per il canale sinistro e una per il destro, di conseguenza un file Stereo avrà dimensione esattamente doppia di quello Mono. 54
I FORMATI AUDIO FORMATO WAV IL RASTER DELL AUDIO BIT RATE: ovvero la quantità di byte utilizzata per la memorizzazione del file digitale su memoria di massa. Come calcolare la dimensione del file: BIT RATE= (FREQUENZA DI CAMPIONAMENTO) x (BIT SAMPLE) x (NUMERO DI CANALI) Esempio per un audio con Frequenza di campionamento = 44.1 khz Bit Sample = 16 bit Canali = Stereo (2) 44100 x 16 x 2 = 1.411.200 bit per secondo = 1 Mb/s 55
I FORMATI AUDIO FORMATO MP3 LO ZIP LOSSY DEL WAV Il formato MP3 è il formato compresso più utilizzato per la compressione di file audio. In pratica serve per ridurre drasticamente la dimensione dei file audio con conseguente perdita (variabile) della qualità del sonoro. I parametri dove normalmente si va ad agire sono 2 BitRate e Frequenza di campionamento, che in nei moderni programmi di Audio Edit possono assumere innumerevoli valori. 56
I FORMATI AUDIO FORMATO MIDI IL PORTABILE Il formato di memorizzazione del formato MIDI è un file ASCII quindi leggerissimo, comprende la memorizzazione delle note, la loro durata, gli strumenti musicali (anche divisi per tracce) che le devono suonare e informazioni accessorie legate ad ogni singola battuta (es. Testi per karaoke). I player di File Midi leggono la sequenza di informazioni sonore contenute nel file e demandano alla scheda audio del sistema ove sta girando il MIDI, la riproduzione dei suoni, quindi la qualità audio non è legata al contenuto del file MIDI ma alla qualità del sistema dove questo viene letto. 57
I FORMATI VIDEO FORMATI VIDEO & CODEC Un file Video può essere realizzato in numerosissimi formati, ogni formato può essere scelto per una specifica esigenza. Esaminiamo 2 concetti fondamentali: - Il formato Video - Il codec Video Utilizziamo la metafora di una automobile da corsa: La carrozzeria è il formato Video e Il motore è il codec. Quindi una macchina con carrozzeria Renault può avere il motore Ferrari piuttosto che un motore Mercedes. Un file AVI può essere codificato con il codec X o Y. Un file MOV può essere codificato con il codec X o Y. 58
I FORMATI VIDEO I FORMATI VIDEO PIÙ DIFFUSI AVI (Audio Video Interleave) Utilizzato maggiormente per codifica di file Video con alte compressioni. MOV (Formato di Apple QuickTime) Utilizzato per codifiche di file con basse comprensioni e rese qualitative altissime. FLV (Flash Video) E diventato ormai lo standard per lo streaming, è il formato utilizzato da YouTube MPG (Moving Pictures Experts Group) Il formato più standard in assoluto, MPG-1 (All Platform), MPG2 (DVD Video), MPG2 TS (TS = Transport Stream, utilizzato per streaming IPTV) MPG3 (Audio File), MPG4 (Video Alta qualità evoluzione del formato base di QuickTime, ios, ecc...). 59
I FORMATI VIDEO I CODEC VIDEO PIÙ DIFFUSI DivX ;-) = Il codec derivante dall MPG4, il primo che ha permesso lo sblocco del formato AVI trasformandolo in un vero e proprio contenitore multimediale, utilizzato per lo scambio file su Internet. H.264 = Compressione con algoritmo potentissimo, mantine la qualità altissima e supporta l opzione senza pedita di qualità. Motion Jpg A/B = Codec di compressione utilizzato quando la qualità deve rimanere molto alta, la decompressione è molto pesante per i Player, quindi si utilizza molto spesso come semplice tramite per successive compressioni. Sorenson = Oltre che un Codec è anche una delle più potenti Suite di Compressione Video. On2 = Codec utilizzato inizialmente nei File FLV, adesso è proprietà di Google. 3GP = Standard per la diffusione di formati Video su Telefonia mobile. 60
I.A. INTELLIGENZA ARTIFICIALE IL PRIMO PROGRAMMA DI INTELLIGENZA ARTIFICIALE: PSEUDO CODIFICA A = ROBERTO >CHI E IL PIU FESSO? B = <INPUT RISP> IF A = B THEN >BRAVO!!!! HAI INDOVINATO! ELSE >RIPROVA! NON E <B> IL PIU FESSO 61
I.A. INTELLIGENZA ARTIFICIALE 1) Normalmente si parla di I.A. debole quando una macchina/software esibisce un comportamento intelligente. 2) Si parla di I.A. forte quando una macchina/software esibisce (o tende ad avere) una coscienza del sé Il secondo caso descrive una situazione assolutamente ideale, ancora irrealizzata e verso la quale si può solo tendere, la prima si può raggiungere a volte con estrema facilità. 62
I.A. INTELLIGENZA ARTIFICIALE L INTELLIGENZA ARTIFICIALE COME UN DB DI ESPERIENZA COGNITIVA Il comportamento della macchina diventa più intelligente se circostanziato ad un sottoinsieme di elementi per i quali è chiamato a confrontarsi con il mondo esterno. MENO INFORMAZIONI POSSIBILI IN INPUT, MENO INFORMAZIONI NECESSARIE NEL DB DI I.A.. Il machine Learning come mezzo per far imparare la macchina dalle scelte/azioni dell uomo (es. Google, Deep Blu PC/Bot Scacchi Vs Kasparov). 63
I.A. INTELLIGENZA ARTIFICIALE Una delle applicazioni più interessanti IL RICONOSCIMENTO VOCALE La tecnologia ha fatto passi da gigante in questi ultimi anni arrivando a realizzare engine di riconoscimento vocale molto potenti solo nei casi in cui almeno 1 delle seguenti condizioni sia verificata: 1) si conosca il timbro vocale dell interlocutore (Pre Vocal Training); 2) il sistema di risposta abbia un DB di esperienza cognitiva limitato (es. Rubrica contatti del telefonino, elenco voci di prodotto a catalogo). A oggi non esistono sistemi perfetti che possano essere identificati come SPEAKER INDIPENDENT. 64
FINE 65