2012.05.24 sviluppare videogames...

Windows e i videogames

» Marco Parenzan

Agenda

» L’esperienza dello sviluppo di un videogioco
» La struttura di un gioco e di 730 attack!
» Web Hosting (in ASP.NET MVC)
» L’integrazione con Facebook

L’ESPERIENZA DELLO SVILUPPO DI
UN VIDEOGIOCO

Preludio

» Non sono un programmatore di videogiochi
• Anzi! Questa è la prima volta (ma sognato tante
volte!)
• Sono un programmatore «tradizionale»
» Non è possibile affrontare qualsiasi tipologia di
giochi, anzi, da un certo punto di vista, nessuna!
• C’è bisogno sempre di un team
• Il target è sempre più alto

07/06/2012 www.xedotnet.org 4

Il mercato dei Videogames

» A luglio 2011 vale $74B
• http://www.ilsole24ore.com/art/tecnologie/2011-
07-05/mercato-videogichi-vale-miliardi-
130407.shtml?uuid=AaKs4SlD
• http://www.gartner.com/it/page.jsp?id=1737414
» Report di Gartner Group
• http://www.gartner.com/DisplayDocument?ref=clien
tFriendlyUrl&id=1724014

http://www.film30.de/wp-content/uploads/2008/03/trendone_futureentertainment-final.jpg

Contesto

» Il marketing decide: «scriviamo un gioco per pubblicizzare i
730»
» Target (definito dal marketing)
• …
• Target 35/40 anni
• Videogioco «di quando erano bambini»
• …
• Web, Facebook (creare viralità sul social network)
• …
» Ovviamente:
• Cerchiamo un fornitore…
• …ce ne sono (comunque difficile da trovarli, non sono così diffusi)
• …tipicamente chi fa comunicazione Web…
• …costa parecchio…


Fenomeni

» Mobile gaming
• Giocare ovunque su dispositivi che non sono PC
• …che comunque stanno «recuperando in potenza molto velocemente»
• Diversi controlli, diversa interazione (touch, ora, o accelleratori)
» Casual gaming
• Gioco saltuario, tipicamente fatto da un «adulto»
• Gioco breve, veloce, di soddisfazione immediata
» Retro gaming
• Un giocatore «adulto» tipicamente ha memoria dei giochi di quando era bambino
o adolescente
• Molto sulla giocabilità, piuttosto che sulla storia o sulla grafica o sulla profondità
» Social gaming
• Connesso al Web, connesso a Facebook, invita gli amici
• Virale
» Advertising gaming
• Giochi con fine pubblicitario
• Contestualizzato ad un prodotto/servizio


Tecnologie

» Gioco via Web
• Flash
• Html 5
• Silverlight
• Piattaforme Mobile...
» Non è stato scelto Silverlight per non condivisione delle
competenze nel team
» Non sono state scelte piattaforme mobili per necessità
» È stato scelto Flash per diffusione
• A luglio 2011 (partenza del progetto)
• Penetrazione browser HTML 5 mondo: >80%
• Penetrazione browser HTML 5 Italia (nostri siti): < 50%


Flash vs. Flex

» I programmatori tradizionali di applicazioni
trovano impegnativo doversi adattare alla
metafora di animazione su cui la piattaforma
Flash originalmente è stata sviluppata
» Flex cerca di minimizzare questo problema
fornendo un workflow e un modello di
programmazione noto a quegli sviluppatori
• http://www.adobe.com/products/flex.h
tml
» Adobe Flash Builder (ver. 4.6 - $249 -
http://www.adobe.com/products/fla
sh-builder-family.html)
» Flash Develop (4.0.2 – Open Source -
http://www.flashdevelop.org/)
• Scritto in .NET !!!!!!!!!!

Vettoriale Vs. Raster

» Vettoriale
• Pros
• “Semplice”: non si pensa alla composizione dell’immagine e al suo aggiornamento
• Rescaling: le immagini sono riscalabili
• Cons
• Event based…è semplice “inchiodare” il sistema per troppe callback di evento
• Non standard: ogni strumento implementa i vettori a modo suo (es. anche
WPF/Silverlight è vettoriale…totalmente diverso)
» Raster
• Cons
• Si fa tutto a mano
• Pros
• Veloce
• Portabile (le immagini sono png – trasparenze!)
• Nativo per le schede video

Cosa possiamo fare?

» Gioco su Web in Flash
• Backend in ASP.NET MVC 3
» Gioco che si integra con Facebook
• Per dare una classifica
• Per condividere l’esperienza con gli amici
» Un gioco «stile anni ’80»
» Il risultato è all’indirizzo
http://www.730attack.it/


Tecnicamente…cos’è un film?

» Un film è una sequenza di immagini
• Una cinepresa è una macchina fotografica veloce
che scatta 10/25/30/50 foto al secondo
» La “continuità”, la “fluidità” della sequenza di
immagini (animazione) sfrutta un “difetto”
dell’occhio umano: la persistenza

Persistenza delle immagini

» Una immagine rimane impressa sulla retina
dell’occhio al più per 20/30 millisecondi.
» Se una immagine “cambia” in un tempo Δ superiore
ai 20/30 millisecondi, l’occhio percepisce la
“sparizione dell’immagine e vede un “vuoto”

t t+30ms t+Δ t+2x30ms t+2Δ t+2x30ms t+2Δ
» Il “vuoto” che si crea tra due frame causa l’effetto di
una animazione “scattosa”

Persistenza delle immagini (2)

» Una immagine rimane impressa sulla retina
dell’occhio al più per 20/30 millisecondi.
» Se una immagine “cambia” in un tempo Δ NON
SUPERIORE ai 20/30 millisecondi, l’occhio non
percepisce vuoti, ma vede “continuità”

t t+Δ t+2Δ t+3Δ
» La continuità tra due frame permette di ottenere
un’animazione “fluida”

Cos’è un videogioco?

» È un film…quindi una sequenza di immagini (Frames)
» I frames non sono statici, ma sono calcolati un attimo prima di
essere mostrati
» Perché vengono calcolati?
• Perché dipendono direttamente dall’interazione del giocatore (l’input
del giocatore)
• Reazione (indiretta) del gioco dall’interazione del giocatore
(evoluzione)
• Logica applicativa autonoma (IA – Intelligenza Artificiale, semplice o
complicata che sia)

La struttura generale del videogioco

» Prima di tutto c’è un’entità Game
che implementa il meccanismo
fondamentale del Game Loop
» Il metodo Render «scrive» lo
stato attuale sullo schermo con la
tecnica del «double buffer»
» Il metodo Update «legge» l’input
e con esso aggiorna lo stato
» Un timer scandisce il tempo:
Render e Update devono essere
eseguiti 30 volte al secondo!


Tutto è un elemento con Render/Update


I momenti di un gioco

» Ricordando che un gioco è come un film…
• ...ovviamente semplificando molto…
» …è diviso in momenti...
» ...il gioco è un automa a stati finiti
» Ci sono degli stati che selezionano momenti diversi
• Schermata iniziali
• Schermate “parametri”
• Inizio livello
• Gioco
• Fine livello
• Fine gioco

NavigationScreen

» Schermata «statica»
» Prima, dopo, tra i momenti di gioco
» Fatto di immagini, testi e bottoni


NavigationScreen


StartLevelScreen


LevelScreen

» LevelScreen dà la
struttura «fisica»
ai livelli
» In questo caso
• Top view
• Tile map


La TileMap

» Una Tilemap è un
vettore che divide una
immagine in blocchi più
grandi di 1 pixel (1x1)
» Un oggetto non può
essere più piccolo di un
mattone (tile)
» Serve a gestire le
collisioni con lo sfondo


MainLevelScreen

» È la classe che prima di
tutto implementa la
logica del gioco
» Definisce i protagonisti
» Disegna i protagonisti
» Fa interagire tra di loro i
protagonisti

07/06/2012 25

Taratura fine

» I livelli si susseguono a
struttura sostanzialmente fissa
» A difficoltà crescente
» La logica sta nella
MainLevelScreen
» Nella classe specifica esiste la
taratura fine
» Ogni nemico
• Quando esce
• Ogni quanto
• Quanti ce ne sono
• Quanti ce ne sono inizialmente
• ....
» ...e lo stesso per i bonus...


Il ciclo di update

» è un insieme di tanti cicli
» Tanti cicli per tante
combinazioni di test
• Bullet vs enemy
• Main character vs enemy
• Enemy bullet vs main
character
• Bonus vs main character
» Per elaborare
• Danni
• Morte
• Punti
• Bonus
• ....


Sprites

» Sono gli elementi «mobili», «interattivi» del gioco
» Divisi in:
• Character
Oggetti che hanno «intelligenza» propria
• Main Character (quella del giocatore)
• Enemy (quella della «AI», che altro non è che l’Update a livello
dell’nemy)
• Item
Oggetti senza «intelligenza» che si muovono perchè
«spinti»
• Bullets
• Bonus

07/06/2012 28

Sprites


Risorse

» Immagini e suoni (e font!)
sono risorse, ovvero oggetti
che permettono di
«stilizzare» il gioco
» I files sono «Resources» di
Silverlight
» Per praticità, n classi
(Sounds,
LevelScreenImages,
Navigation, ScreenImages,
Texts) disaccoppiano le
risorse con proprietà
statiche che sono già
caricate con le risorse


Perché Facebook

» Motivi Marketing
• Viralità
• Condivisione
» Motivi Tecnologici
• Autenticazione
• Messaggistica
• Punteggi e Classifiche

Interagire con Facebook

» Ciò che vediamo in
Facebook come pagina
è anche semplice dato
» Questi dati sono
interrogabili
• JSON
» I dati interessanti sono
interrogabili SOLO da
una applicazione
• Identità
dell’applicazione

Facebook Application
https://developers.facebook.com/apps/

Apps

Configurazione di una Application

Category

Url Referrer

Configurazione di una Application

» Una applicazione per URL
» Url verrà identificato da Facebook come referrer
• Per cui non interagisce se il Referrer non è noto
» Diverse Applicazioni nel ciclo di vita
• Development
• Testing
• Deployment

Integrarsi con Facebook

» API REST
» Prevalentemente chiamate in GET
• Anche quando nella documentazione chiede POST
(argomento in querystring method=POST)!!!!
• Formmethod=POST&name=value[&name2=value...]*
» Risposte in JSON
• Ma appunto non request in JSON (non essendoci un
body della request)
» Esiste anche il Facebook Query Language (FQL)
• Non provato

Graph Explorer per provare le query

Access Token

Cos’è l’access token?

» Tutte le applicazioni FB funzionano per delega
dell’utente
» L’utente ESPLICITAMENTE permette
all’applicazione di interagire con FB come se
fosse l’utente, definendo un’elenco selezionato
di permessi da concedere….
» L’applicazione richiede certi permessi...
» ...l’utente conferma (o no) se concederli...

Selezione dei permessiAccess Token

public_actions
publish_stream

ABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99
w ABd64iEO9dE99w ABd64iEO9dE99w

Permessi concessi (e revoca!)

» publish_stream

» publish_actions

» Come si revocano i permessi?

elimina.

Un esempio di post

Un access token è ottenibile solo se si è autenticati in FB

Login FB

» Per fare una chiamata REST all’API Graph di FB, è necessario un Access
Token
» Un Access Token lo ottengo se ho un login in FB
» Protocollo Oauth
» Redirezione client-side su
https://www.facebook.com/dialog/oauth?client_id={appId}&scope=e
mail,read_stream,publish_actions,publish_stream&redirect_uri={retur
n_uri}
» ReturnUri: http://www.730attack.it/730attackServices/EndLogin
» Implementazione di EndLogin (Action del controller 730attackServices)
• Chiamata a
https://graph.facebook.com/oauth/access_token?client_id={appId}&clien
t_secret={appSecret}&code={code}&redirect_uri={homepage}
• Code (un codice iniettato nel return uri da reinviare per conferma
• La response a questa chiamata è un data dictionary
(access_token=___[&name=value]*)

Status di una applicazione
autenticata in FB

» Authenticationottengo un access token
» Salvo l’access_token per le richieste successive
• Es. In Sessione (server side)
• Non ho verificato quanto dura un access_token...lo
richiedo sempre
» Uso i cookie (client side) per fare tutto di nascosto
(eventualmente richiedere di nuovo l’accesso token)
» Proprio per questi motivi non mi è piaciuto usare
l’SDK JS di FB
• …e il sito è incompleto perché non gestisco cookies…

Dopo tutto ‘sto casino...

» ...cosa me ne faccio?
» Get

» Post

Facebook SDK

» Due SDK ufficiali
• Javascript (client side)
• PHP (server side)
» Javascipt SDK
• Invadente
• Un sacco di chiamate AJAX
• Frame nascosti...
» PHP SDK
• Ovviamente inutile con ASP.NET MVC
» Ci sono diverse implementazioni di SDK per ASP.NET MVC
• http://csharpsdk.org/ (sito novita!)
• Sovrabbondante...
• Sono chiamate HTTP!
• «rischio» Scores & Achievements

Scores & Achievements FB

» «Esperienza» in FB
• Achievements: Raggiungimento di obiettivi
• Scores: punteggi ottenuti
» Non chiaramente documentati...
» Simulati con post

Requisiti

» Presenza (ovvio!)
» Integrazione con Facebook
• Achievements

Scelte

» Hosting autonomo (proprio sito Web)
• senza vincoli da applicazioni integrata su Facebook
• Semplicità di sviluppo (senza vincoli)
» Genericità
• (quasi) totale indipendenza da Facebook
• Prima implementazione di 730attack comunque legata a FB (per velocità
di implementazione)
• Specifico un provider (es. Integrazione con Google+)
» Autonomia
• «Outage» delle API di Facebook in novembre...
• Utenti classificabili in autonomia (comunque non fatto) anche
senza FB
» Integrazione dell’applet Flash
• API Javascript senza limitazioni

Lista della spesa

» Framework: ASP.NET MVC3
» Data Access: Entity Framework 4.2
» DB: SQL Server 200x
» View: HTML+CSS
» Javascript: jQuery+AJAX
» SDK Facebook?

Organizzazione

» Predisposto per un supporto Multigame
» /
• Contents
• Images
• 730attack
• Images
• 730invaders
• Images
• Jquery
• ...altre librerie...
• Controllers
• BaseController
• FacebookController
• HomeController (inherits BaseController)
• _730attackController (inherits BaseController)
• _730attackServcesController (inherits FacebookController)
• _730invadersController (inherits BaseController)
• _730invadersServicesController (inherits FacebookController)
• Views
• Home
• _730attack
• _730invaders
• Shared

Entità - Game

» Game
» AchievementType
» ScoreType

Entità - User

» User
» Profile
» Role
» Achievement
» Score
» Referrer

Implementazione

» Due controller
» 730attackController
• Vuoto
• Solo per la pagina Web
• La pagina è totalmente dinamica client/side
» 730attackServicesController
• Servizi Ajax verso il client
• Supporto a Facebook (server side)
• Il client non sa che c’è Facebook (a parte il bottone)

«Servizi Flash»

» Flash è una piattaforma “autonoma”
• Può parlare HTTP
• Può parlare XML
• Può parlare Web Services
» Presupposti
• Inesperienza con Flash/Flex
» Idea
• Flash sa di essere in hosting
• Esiste una classe ExternalInterface (in Flash)
• Esiste una classe HtmlPage (in Silverlight)
• http://www.silverlightshow.net/items/Silverlight-and-Flash-
Interoperability-using-HTML-Bridge-and-ExternalInterface-
API.aspx

Dialogare con il browser

» Intanto in Flash
• if (<sprite>.loaderInfo.url.search("http") >= 0)
{
// Allora sono in un browser
}
» In Silverlight
• If (Application.Current.Host.Source.Host.StartsWith(«http»))
{
// Allora sono in un browser (connesso)
}
» A questo punto
if (ExternalInterface.available == true)
{
// allora riesco ad interagire con il browser
}
• Non ho ancora trovato l’equivalente Silverlight (sorry!)

ExternalInterface.Call(<function Name>, args…)

» Chiama una funzione javascript nella pagina
host
» Utile affinchè Flash notifichi l’host che qualcosa
è avvenuto
» Posso anche ottenere un valore di ritorno…
• In questo caso le chiamate devono essere sincrone
• Ma se le chiamate JS fanno chiamate Ajax….

ExternalInterface.addCallback(functionName, closure)

» Serve per “presentare” sull’oggetto Html che
rappresenta il plug-in Flash un metodo
“FunctionName”.
» Diventa invocabile da JS
» Invoca la “closure” in flash
» Alla fine non l’ho usata, ma c’è…
» Utile per non fare le funzioni bloccanti
(sincrone)…

Difficoltà

» Continuità
• 4 mesi di sviluppo (dalle 5 alle 7 di mattina per lo
più)…non continui…
» Meticolosità
• Ad un certo punto è questione di dettagli
• Certe cose devono essere veramente fluide (es.
mouse)
» Da solo è praticamente impossibile (almeno con
i nostri ritmi)
• Un collega faceva grafica e suoni e ci si confrontava

Però…

» Esperienza Esaltante
» Esperienza “Completa”
» Nuovo ambiente usato senza difficoltà
» Modello Ad Oggetti positivo (Domain Driven
Design - approccio più business che gaming)

Porting

» Il porting in Silverlight è andato abbastanza bene
• Conversione del codice non difficoltosa, ma lunghetta
• Differenze tra Flash e Silverlight
• Su certe cose Flash è più avanti (vedi WriteableBitmapEx non uno
standard)
• I suoni....
» Però adesso che il codice è in C#
• Conversione in Windows Phone
• In primis è una questione di controlli e navigazione
• Conversione in XNA
• È una questione di controlli e di sostituzione del Game Loop (XNA ha il
suo!)
» E poi affrontare il porting su HTML5
• Ma lì perdo l’ereditarietà....


Evoluzione dell’host

» Supporto multigame
» Supporto multi-social e identità autonoma
» Cloud Hosting
» Scripting per la parametrazione

» Votare la sessione
• Codice Meeting: U7r10
• Accesso: http://www.xedotnet.org/feedback

• Disponibile agenda meeting

• Funziona con:
• Windows Phone 7.5
• Android
• iPhone, iPad
• Blackberry (non testato)
• Computer

• Reminder via email
• 7 giorni di tempo per i feedback


» Speaker

blog: http://codeisvalue.wordpress.com/

email: marco.parenzan@codeisvalue.onmicrosoft.com

facebook: http://www.facebook.com/parenzan.marco

twitter: marco_parenzan


2012.05.24 sviluppare videogames...

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to 2012.05.24 sviluppare videogames...

Similar to 2012.05.24 sviluppare videogames... (20)

More from Marco Parenzan

More from Marco Parenzan (20)

2012.05.24 sviluppare videogames...