2. 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
4. 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
5. 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
6. 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…
07/06/2012 www.xedotnet.org 6
7. 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
07/06/2012 www.xedotnet.org 7
8. 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%
07/06/2012 www.xedotnet.org 8
9. 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 !!!!!!!!!!
10. 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
11. 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/
07/06/2012 www.xedotnet.org 11
13. 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
14. 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”
15. 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”
16. 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)
17. 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!
07/06/2012 www.xedotnet.org 17
18. Tutto è un elemento con Render/Update
07/06/2012 www.xedotnet.org 18
19. 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
23. LevelScreen
» LevelScreen dà la
struttura «fisica»
ai livelli
» In questo caso
• Top view
• Tile map
07/06/2012 www.xedotnet.org 23
24. 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
07/06/2012 www.xedotnet.org 24
25. 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
26. 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...
07/06/2012 www.xedotnet.org 26
27. 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
• ....
07/06/2012 www.xedotnet.org 27
28. 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
30. 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
07/06/2012 www.xedotnet.org 30
33. 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
36. 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
37. Integrarsi con Facebook
» API REST
» Prevalentemente chiamate in GET
• Anche quando nella documentazione chiede POST
(argomento in querystring method=POST)!!!!
• Formmethod=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
39. 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...
40. Selezione dei permessiAccess Token
public_actions
publish_stream
ABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99
w ABd64iEO9dE99w ABd64iEO9dE99w
42. Permessi concessi (e revoca!)
» publish_stream
» publish_actions
» Come si revocano i permessi?
elimina.
43. Un esempio di post
Un access token è ottenibile solo se si è autenticati in FB
44. 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]*)
45. Status di una applicazione
autenticata in FB
» Authenticationottengo 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…
46. Dopo tutto ‘sto casino...
» ...cosa me ne faccio?
» Get
» Post
47. 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
48. Scores & Achievements FB
» «Esperienza» in FB
• Achievements: Raggiungimento di obiettivi
• Scores: punteggi ottenuti
» Non chiaramente documentati...
» Simulati con post
51. 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
52. 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?
56. Entità - User
» User
» Profile
» Role
» Achievement
» Score
» Referrer
57. 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)
58. «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
59. 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!)
60. 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….
61. 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)…
63. 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
64. Però…
» Esperienza Esaltante
» Esperienza “Completa”
» Nuovo ambiente usato senza difficoltà
» Modello Ad Oggetti positivo (Domain Driven
Design - approccio più business che gaming)
65. 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à....
07/06/2012 www.xedotnet.org 65
66. Evoluzione dell’host
» Supporto multigame
» Supporto multi-social e identità autonoma
» Cloud Hosting
» Scripting per la parametrazione
67. » 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
07/06/2012 www.xedotnet.org 67