Fondamentali nella Progettazione VideoLudica

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
10
problemi di spazio per la memorizzazione dell’immagine (file).
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
16
milioni di colori, il supporto del canale Alpha e compressione lossless.
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
STEP DI MOVIMENTO
1 METRO
MURO
DI
COLLISIONE
40
COLLISIONI
CONCETTI E TECNICHE
AVATAR IN
MOVIMENTO
DISTANZA
ALL’IMPATTO
0,5 METRI
STEP DI MOVIMENTO
1 METRO
MURO
DI
COLLISIONE
41
COLLISIONI
CONCETTI E TECNICHE
GHOST
MURO
DI
COLLISIONE
TECNICA
2D
STEP DI MOVIMENTO
1 METRO
42
COLLISIONI
CONCETTI E TECNICHE
RAY LIGHT
MURO
DI
COLLISIONE
TECNICA
3D
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