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=clientFriendlyUrl&id=1724014

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

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



http://www.gartner.com/DisplayDocument?ref=clientFriendlyUrl&id=1724014









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/flash-builder-family.html)

» Flash Develop (4.0.2 – Open Source - http://www.flashdevelop.org/) • Scritto in .NET !!!!!!!!!!

http://www.adobe.com/products/flex.html

http://www.adobe.com/products/flex.html

http://www.adobe.com/products/flash-builder-family.html






http://www.flashdevelop.org/

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/


http://www.730attack.it/

INTRODUZIONE

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”

» Il “vuoto” che si crea tra due frame causa l’effetto di una animazione “scattosa”

t t+Δ t+30ms t+2Δ t+2x30ms t+2Δ t+2x30ms

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à”

» La continuità tra due frame permette di ottenere un’animazione “fluida”

t t+Δ t+2Δ t+3Δ

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)


» 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!

La struttura generale del videogioco

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 dà la struttura «fisica» ai livelli

» In questo caso • Top view

• Tile map

LevelScreen

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


07/06/2012 28

» 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

Sprites

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


L’INTEGRAZIONE CON FACEBOOK

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

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

Configurazione di una Application

Url Referrer

Category

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)!!!!

• 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

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 permessiAccess Token

publish_stream public_actions

ABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99wABd64iEO9dE99w ABd64iEO9dE99w ABd64iEO9dE99w

Query OK!

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=email,read_stream,publish_actions,publish_stream&redirect_uri=return_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&client_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]*)




http://www.730attack.it/730attackServices/EndLogin

https://graph.facebook.com/oauth/access_token?client_id=appId&client_secret=appSecret&code=code&redirect_uri=homepage









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…

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

http://csharpsdk.org/

http://csharpsdk.org/

Scores & Achievements FB

» «Esperienza» in FB

• Achievements: Raggiungimento di obiettivi

• Scores: punteggi ottenuti

» Non chiaramente documentati...

» Simulati con post

WEB HOSTING (IN ASP.NET MVC)

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

Data Model

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

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)…

CONCLUSIONI

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:

• 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

U7r10

http://www.xedotnet.org/feedback

blog:

email:

facebook:

twitter:


» Speaker

http://codeisvalue.wordpress.com/

[email protected]

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

marco_parenzan

http://codeisvalue.wordpress.com/

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

Technology

2012.05.24 sviluppare videogames