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...

More Related Content

Viewers also liked

Similar to 2012.05.24 sviluppare videogames...

More from Marco Parenzan

2012.05.24 sviluppare videogames...