Videogames y aprendizaje - Gincana virtual moviliza conocimientos curriculares
2012.05.24 sviluppare videogames...
-
Upload
marco-parenzan -
Category
Technology
-
view
712 -
download
0
description
Transcript of 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
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
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
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
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 !!!!!!!!!!
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/
07/06/2012 www.xedotnet.org 11
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)
07/06/2012 www.xedotnet.org 17
» 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
07/06/2012 www.xedotnet.org 18
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
07/06/2012 www.xedotnet.org 20
NavigationScreen
07/06/2012 www.xedotnet.org 21
StartLevelScreen
07/06/2012 www.xedotnet.org 22
07/06/2012 www.xedotnet.org 23
» 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
07/06/2012 www.xedotnet.org 24
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...
07/06/2012 www.xedotnet.org 26
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
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
07/06/2012 www.xedotnet.org 29
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
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
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]*)
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
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
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à....
07/06/2012 www.xedotnet.org 65
Evoluzione dell’host
» Supporto multigame
» Supporto multi-social e identità autonoma
» Cloud Hosting
» Scripting per la parametrazione
07/06/2012 www.xedotnet.org 67
» 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
blog:
email:
facebook:
twitter:
07/06/2012 www.xedotnet.org 68
» Speaker
http://codeisvalue.wordpress.com/
http://www.facebook.com/parenzan.marco
marco_parenzan