SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
Gamification verso Javascript

Salvatore Laisa

salvatore.laisa@mohole.it – Mohole Lab (Milano)
About me (Interactive Designer?)




2006        2007     2008            2010                            2011




                                                   Salvatore Laisa          2
                            salvatore.laisa@mohole.it – Mohole Lab
A chi mi rivolgo
• Javascript developers che non hanno mai
  realizzato videogiochi
• Flash game developers interessati al
  passaggio JS/HTML5
• Chiunque sia interessato allo sviluppo di
  videogiochi usando linguaggi web

                                                    Salvatore Laisa   3
                             salvatore.laisa@mohole.it – Mohole Lab
Vi ricordate il vostro primo videogame?




                                              Salvatore Laisa   4
                       salvatore.laisa@mohole.it – Mohole Lab
Come creo games Javascript?

con il DOM                   con il Canvas




                                         Salvatore Laisa   5
                  salvatore.laisa@mohole.it – Mohole Lab
Creare games con il DOM
• Soluzione più veloce
• Maggiore compatibilità cross-browser
• Esclusa la possibilità del 3D!
• Maggiori performance
• Non è il metodo più pulito (un po come le tabelle
  non lo erano per i layout)
                                                          Salvatore Laisa   6
                                   salvatore.laisa@mohole.it – Mohole Lab
Esempi games “DOM based”




CSS Panic                  Sumon

                                      Salvatore Laisa   7
               salvatore.laisa@mohole.it – Mohole Lab
Creare games con il Canvas
• Il problema della compatibilità
• Media nativi (audio e video)
• Metodo di sviluppo “alla Flash”
• Molte librerie sono basate sul Canvas



                                                        Salvatore Laisa   8
                                 salvatore.laisa@mohole.it – Mohole Lab
Esempi games “Canvas based”




Pirates Loves Daisies   Magician: Fairy rescue

                                                 Salvatore Laisa
                          salvatore.laisa@mohole.it – Mohole Lab   9
A ogni uscita di una nuova versione dei
browser la situazione continua a migliorare!



                    7




                                                 Salvatore Laisa   10
                          salvatore.laisa@mohole.it – Mohole Lab
What about WebGL?

WebGL (Web Graphics Library)
è una tecnologia che permette di
implementare la grafica 3D
(tramite OpenGL) nel browser,
con la possibilità di settare
texture, luci, shaders, modelli
ecc...


                                                          Salvatore Laisa   11
                                   salvatore.laisa@mohole.it – Mohole Lab
Qual’è il problema?




Attualmente per la Microsoft non ci sono piani di includere la
tecnologia WebGL in qualunque versione di IE e neanche
Windows 8.

                                                            Salvatore Laisa   12
                                     salvatore.laisa@mohole.it – Mohole Lab
Tools per game development con JS




                                           Salvatore Laisa   13
                    salvatore.laisa@mohole.it – Mohole Lab
La “suite” Create JS




E’ un set di librerie create da Grant Skinner che snelliscono il
lavoro Html5/JS con le animazioni, l’audio, i preloader e gli sprite.
Con una sintassi molto simile ad ActionScript 3.

                                                                Salvatore Laisa   14
                                         salvatore.laisa@mohole.it – Mohole Lab
Flash Professional CS6

          La prossima di Flash Pro
          includerà la suite CreateJS con
          uno strumento di esportazione
          dedicato... arriva HTML5 dentro
          Flash!



                                       Salvatore Laisa   15
                salvatore.laisa@mohole.it – Mohole Lab
Lime JS

E’ un framework per la creazione
di giochi Html5, abbastanza
orientato verso i puzzle-game e i
rompicapo.
E’ uno dei più semplici da
imparare.


                                                           Salvatore Laisa   16
                                    salvatore.laisa@mohole.it – Mohole Lab
GameQuery


   E’ un plugin di jQuery che
   aggiunge delle classi dedicate al
   game-development.
   Si creano giochi “DOM based”




                                 Salvatore Laisa   17
          salvatore.laisa@mohole.it – Mohole Lab
Crafty JS

E’ uno dei framework open
source più completi per la
realizzazione di giochi Javascript
& HTML5.
Permette di creare sia giochi
DOM che Canvas.


                                                            Salvatore Laisa   18
                                     salvatore.laisa@mohole.it – Mohole Lab
Three.js

E’ una libreria Javascript che semplifica il setup di una scena 3D
con la tecnologia WebGL, permettendo di concentrarsi sullo
sviluppo del proprio gioco.


Insieme alla libreria ci sono tantissimi file di esempio!



                                                                 Salvatore Laisa   19
                                          salvatore.laisa@mohole.it – Mohole Lab
Box 2D JS

E’ una libreria Javascript per
lavorare con effetti fisici come
gravità, moti elastici, traiettorie e
impatti.
Usata anche nel porting
dell’ormai onnipresente Angry
Birds.


                                                               Salvatore Laisa   20
                                        salvatore.laisa@mohole.it – Mohole Lab
E’ un IDE per la realizzazione a 360 di games 3D, permette di
importare modelli da software esterni (come 3D Studio Max),
creare mondi, programmare (anche in Javascript) ed esportare in
vari formati. E’ una piattaforma potente ma abbastanza
complessa.
                                                            Salvatore Laisa   21
                                     salvatore.laisa@mohole.it – Mohole Lab
Gamepad API

Alcune nightly (dedicate) di
Chrome e Firefox stanno
implementando queste API che
permettono di leggere eventi da
un gamepad connesso al
computer.


                                                         Salvatore Laisa   22
                                  salvatore.laisa@mohole.it – Mohole Lab
Brass Monkey SDK

       E’ un innovativo sistema che
       permette di sviluppare games
       che funzionano nel browser e
       saranno poi controllati da device
       mobili (iPhone/Android) che
       simulano il gampad!


                                     Salvatore Laisa   23
              salvatore.laisa@mohole.it – Mohole Lab
Per una cultura del gaming




                                        Salvatore Laisa   24
                 salvatore.laisa@mohole.it – Mohole Lab
Javascript, questo factotum

Una colpa dell’ormai troppa diffusione di Javascript è quella di
fornire i mezzi a tantissimi sviluppatori di arrivare a qualunque
piattaforma...

Ma sviluppiamo games per intrattenere e divertire o tanto per
spesseggiare con il codice?


                                                              Salvatore Laisa   25
                                       salvatore.laisa@mohole.it – Mohole Lab
Alcuni titoli da non perdere




                                         Salvatore Laisa   26
                  salvatore.laisa@mohole.it – Mohole Lab
Distribuire/Vendere Javascript Games




                                             Salvatore Laisa   27
                      salvatore.laisa@mohole.it – Mohole Lab
Google
      Chrome Web Store                       Google+ Games




Entro un anno le varie piattaforme di gaming saranno unificate
                                                            Salvatore Laisa   28
                                     salvatore.laisa@mohole.it – Mohole Lab
Mozilla Marketplace


Da quest’anno anche Mozilla
entra nella mischia degli “app
stores” proponendo un qualcosa
di completamente web-centrico




                                                        Salvatore Laisa   29
                                 salvatore.laisa@mohole.it – Mohole Lab
Intel AppUp

     Un nuovo concorrente che punta
     principalmente a varie
     piattaforme e “adotta” varie
     tecnologie tra cui HTML5 &
     Javascript



                                  Salvatore Laisa   30
           salvatore.laisa@mohole.it – Mohole Lab
Windows 8 Market & Mac App Store




Il modello degli app stores approda anche sui sistemi operativi
            desktop (ma Linux non ce l’aveva già?)
                                                             Salvatore Laisa   31
                                      salvatore.laisa@mohole.it – Mohole Lab
Windows 7 / Mac OSX (senza stores)




Grazie a librerie come Adobe AIR e Appcelerator Titanium è
possibile esportare applicazioni e giochi Javascript come
eseguibili per OS Desktop (anche Linux in alcuni casi)
                                                         Salvatore Laisa   32
                                  salvatore.laisa@mohole.it – Mohole Lab
Google Play & App Store




Insieme alle due precedenti, librerie come Phonegap permettono
di convertire il codice Javascript in applicazioni iOS o Android e
quindi di poterle distribuire tramite i relativi store
                                                              Salvatore Laisa   33
                                       salvatore.laisa@mohole.it – Mohole Lab
ho detto tutto



GRAZIE!
                                   Salvatore Laisa   34
            salvatore.laisa@mohole.it – Mohole Lab
Contatti personali
• Facebook: Salvatore Laisa
• Twitter: @moebiusmania
• Email: moebiusmania@gmail.com
• WoW: Cattivone (server Eonar)



                                                     Salvatore Laisa   35
                              salvatore.laisa@mohole.it – Mohole Lab

Contenu connexe

Similaire à Gamification verso javascript

Soluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeSoluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeGianluca Vaglio
 
Sviluppare plugin per google Chrome
Sviluppare plugin per google ChromeSviluppare plugin per google Chrome
Sviluppare plugin per google ChromeCodemotion
 
Introduzione alla programmazione Java
Introduzione alla programmazione JavaIntroduzione alla programmazione Java
Introduzione alla programmazione JavaMassimiliano Brolli
 
The webdesigner goes mobile
The webdesigner goes mobileThe webdesigner goes mobile
The webdesigner goes mobileCodemotion
 
Responsive Web Design & Single Page Application
Responsive Web Design & Single Page ApplicationResponsive Web Design & Single Page Application
Responsive Web Design & Single Page ApplicationAlessandro Colla
 
Programmatore_hobbysta.pdf
Programmatore_hobbysta.pdfProgrammatore_hobbysta.pdf
Programmatore_hobbysta.pdfJacopo Grimoldi
 
Automation Night (Docker)
Automation Night (Docker)Automation Night (Docker)
Automation Night (Docker)Giuliano Latini
 
Linux, sicurezza & social hacking
Linux, sicurezza & social hackingLinux, sicurezza & social hacking
Linux, sicurezza & social hackingFabio Mora
 
Sviluppo Rapido Di Applicazioni Con Grails
Sviluppo Rapido Di Applicazioni Con GrailsSviluppo Rapido Di Applicazioni Con Grails
Sviluppo Rapido Di Applicazioni Con GrailsAlberto Brandolini
 
Cloud & No-Coding: come fare su Azure?
Cloud & No-Coding: come fare su Azure?Cloud & No-Coding: come fare su Azure?
Cloud & No-Coding: come fare su Azure?Andrea Carratta
 
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2Insegnare a progettare il proprio apprendimento con il coding - Lezione 2
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2Michele Maffucci
 
Introduzione a Ruby On Rails
Introduzione a Ruby On RailsIntroduzione a Ruby On Rails
Introduzione a Ruby On RailsLuca Mearelli
 
Giacomini Microsoft Ses Milano 20070529
Giacomini Microsoft Ses Milano 20070529Giacomini Microsoft Ses Milano 20070529
Giacomini Microsoft Ses Milano 20070529giacomini
 
Augmented Reality For Fun & profit
Augmented Reality For Fun & profitAugmented Reality For Fun & profit
Augmented Reality For Fun & profitLuca Milan
 
Micro corso di scratch - per incominciare ad imparare a programmare
Micro corso di scratch - per incominciare ad imparare a programmareMicro corso di scratch - per incominciare ad imparare a programmare
Micro corso di scratch - per incominciare ad imparare a programmareMichele Maffucci
 

Similaire à Gamification verso javascript (20)

Soluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeSoluzioni per la produzione multimediale
Soluzioni per la produzione multimediale
 
Sviluppare plugin per google Chrome
Sviluppare plugin per google ChromeSviluppare plugin per google Chrome
Sviluppare plugin per google Chrome
 
Introduzione alla programmazione Java
Introduzione alla programmazione JavaIntroduzione alla programmazione Java
Introduzione alla programmazione Java
 
Html5
Html5Html5
Html5
 
The webdesigner goes mobile
The webdesigner goes mobileThe webdesigner goes mobile
The webdesigner goes mobile
 
Responsive Web Design & Single Page Application
Responsive Web Design & Single Page ApplicationResponsive Web Design & Single Page Application
Responsive Web Design & Single Page Application
 
07 - Web apps e CMS
07 - Web apps e CMS07 - Web apps e CMS
07 - Web apps e CMS
 
Programmatore_hobbysta.pdf
Programmatore_hobbysta.pdfProgrammatore_hobbysta.pdf
Programmatore_hobbysta.pdf
 
Automation Night (Docker)
Automation Night (Docker)Automation Night (Docker)
Automation Night (Docker)
 
Linux, sicurezza & social hacking
Linux, sicurezza & social hackingLinux, sicurezza & social hacking
Linux, sicurezza & social hacking
 
Sviluppo Rapido Di Applicazioni Con Grails
Sviluppo Rapido Di Applicazioni Con GrailsSviluppo Rapido Di Applicazioni Con Grails
Sviluppo Rapido Di Applicazioni Con Grails
 
Cloud & No-Coding: come fare su Azure?
Cloud & No-Coding: come fare su Azure?Cloud & No-Coding: come fare su Azure?
Cloud & No-Coding: come fare su Azure?
 
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2Insegnare a progettare il proprio apprendimento con il coding - Lezione 2
Insegnare a progettare il proprio apprendimento con il coding - Lezione 2
 
Studio Labsus v2009
Studio Labsus v2009Studio Labsus v2009
Studio Labsus v2009
 
Scratch 2 0
Scratch 2 0Scratch 2 0
Scratch 2 0
 
Introduzione a Ruby On Rails
Introduzione a Ruby On RailsIntroduzione a Ruby On Rails
Introduzione a Ruby On Rails
 
Giacomini Microsoft Ses Milano 20070529
Giacomini Microsoft Ses Milano 20070529Giacomini Microsoft Ses Milano 20070529
Giacomini Microsoft Ses Milano 20070529
 
Augmented Reality For Fun & profit
Augmented Reality For Fun & profitAugmented Reality For Fun & profit
Augmented Reality For Fun & profit
 
HTML 5 e browser legacy
HTML 5 e browser legacyHTML 5 e browser legacy
HTML 5 e browser legacy
 
Micro corso di scratch - per incominciare ad imparare a programmare
Micro corso di scratch - per incominciare ad imparare a programmareMicro corso di scratch - per incominciare ad imparare a programmare
Micro corso di scratch - per incominciare ad imparare a programmare
 

Gamification verso javascript

  • 1. Gamification verso Javascript Salvatore Laisa salvatore.laisa@mohole.it – Mohole Lab (Milano)
  • 2. About me (Interactive Designer?) 2006 2007 2008 2010 2011 Salvatore Laisa 2 salvatore.laisa@mohole.it – Mohole Lab
  • 3. A chi mi rivolgo • Javascript developers che non hanno mai realizzato videogiochi • Flash game developers interessati al passaggio JS/HTML5 • Chiunque sia interessato allo sviluppo di videogiochi usando linguaggi web Salvatore Laisa 3 salvatore.laisa@mohole.it – Mohole Lab
  • 4. Vi ricordate il vostro primo videogame? Salvatore Laisa 4 salvatore.laisa@mohole.it – Mohole Lab
  • 5. Come creo games Javascript? con il DOM con il Canvas Salvatore Laisa 5 salvatore.laisa@mohole.it – Mohole Lab
  • 6. Creare games con il DOM • Soluzione più veloce • Maggiore compatibilità cross-browser • Esclusa la possibilità del 3D! • Maggiori performance • Non è il metodo più pulito (un po come le tabelle non lo erano per i layout) Salvatore Laisa 6 salvatore.laisa@mohole.it – Mohole Lab
  • 7. Esempi games “DOM based” CSS Panic Sumon Salvatore Laisa 7 salvatore.laisa@mohole.it – Mohole Lab
  • 8. Creare games con il Canvas • Il problema della compatibilità • Media nativi (audio e video) • Metodo di sviluppo “alla Flash” • Molte librerie sono basate sul Canvas Salvatore Laisa 8 salvatore.laisa@mohole.it – Mohole Lab
  • 9. Esempi games “Canvas based” Pirates Loves Daisies Magician: Fairy rescue Salvatore Laisa salvatore.laisa@mohole.it – Mohole Lab 9
  • 10. A ogni uscita di una nuova versione dei browser la situazione continua a migliorare! 7 Salvatore Laisa 10 salvatore.laisa@mohole.it – Mohole Lab
  • 11. What about WebGL? WebGL (Web Graphics Library) è una tecnologia che permette di implementare la grafica 3D (tramite OpenGL) nel browser, con la possibilità di settare texture, luci, shaders, modelli ecc... Salvatore Laisa 11 salvatore.laisa@mohole.it – Mohole Lab
  • 12. Qual’è il problema? Attualmente per la Microsoft non ci sono piani di includere la tecnologia WebGL in qualunque versione di IE e neanche Windows 8. Salvatore Laisa 12 salvatore.laisa@mohole.it – Mohole Lab
  • 13. Tools per game development con JS Salvatore Laisa 13 salvatore.laisa@mohole.it – Mohole Lab
  • 14. La “suite” Create JS E’ un set di librerie create da Grant Skinner che snelliscono il lavoro Html5/JS con le animazioni, l’audio, i preloader e gli sprite. Con una sintassi molto simile ad ActionScript 3. Salvatore Laisa 14 salvatore.laisa@mohole.it – Mohole Lab
  • 15. Flash Professional CS6 La prossima di Flash Pro includerà la suite CreateJS con uno strumento di esportazione dedicato... arriva HTML5 dentro Flash! Salvatore Laisa 15 salvatore.laisa@mohole.it – Mohole Lab
  • 16. Lime JS E’ un framework per la creazione di giochi Html5, abbastanza orientato verso i puzzle-game e i rompicapo. E’ uno dei più semplici da imparare. Salvatore Laisa 16 salvatore.laisa@mohole.it – Mohole Lab
  • 17. GameQuery E’ un plugin di jQuery che aggiunge delle classi dedicate al game-development. Si creano giochi “DOM based” Salvatore Laisa 17 salvatore.laisa@mohole.it – Mohole Lab
  • 18. Crafty JS E’ uno dei framework open source più completi per la realizzazione di giochi Javascript & HTML5. Permette di creare sia giochi DOM che Canvas. Salvatore Laisa 18 salvatore.laisa@mohole.it – Mohole Lab
  • 19. Three.js E’ una libreria Javascript che semplifica il setup di una scena 3D con la tecnologia WebGL, permettendo di concentrarsi sullo sviluppo del proprio gioco. Insieme alla libreria ci sono tantissimi file di esempio! Salvatore Laisa 19 salvatore.laisa@mohole.it – Mohole Lab
  • 20. Box 2D JS E’ una libreria Javascript per lavorare con effetti fisici come gravità, moti elastici, traiettorie e impatti. Usata anche nel porting dell’ormai onnipresente Angry Birds. Salvatore Laisa 20 salvatore.laisa@mohole.it – Mohole Lab
  • 21. E’ un IDE per la realizzazione a 360 di games 3D, permette di importare modelli da software esterni (come 3D Studio Max), creare mondi, programmare (anche in Javascript) ed esportare in vari formati. E’ una piattaforma potente ma abbastanza complessa. Salvatore Laisa 21 salvatore.laisa@mohole.it – Mohole Lab
  • 22. Gamepad API Alcune nightly (dedicate) di Chrome e Firefox stanno implementando queste API che permettono di leggere eventi da un gamepad connesso al computer. Salvatore Laisa 22 salvatore.laisa@mohole.it – Mohole Lab
  • 23. Brass Monkey SDK E’ un innovativo sistema che permette di sviluppare games che funzionano nel browser e saranno poi controllati da device mobili (iPhone/Android) che simulano il gampad! Salvatore Laisa 23 salvatore.laisa@mohole.it – Mohole Lab
  • 24. Per una cultura del gaming Salvatore Laisa 24 salvatore.laisa@mohole.it – Mohole Lab
  • 25. Javascript, questo factotum Una colpa dell’ormai troppa diffusione di Javascript è quella di fornire i mezzi a tantissimi sviluppatori di arrivare a qualunque piattaforma... Ma sviluppiamo games per intrattenere e divertire o tanto per spesseggiare con il codice? Salvatore Laisa 25 salvatore.laisa@mohole.it – Mohole Lab
  • 26. Alcuni titoli da non perdere Salvatore Laisa 26 salvatore.laisa@mohole.it – Mohole Lab
  • 27. Distribuire/Vendere Javascript Games Salvatore Laisa 27 salvatore.laisa@mohole.it – Mohole Lab
  • 28. Google Chrome Web Store Google+ Games Entro un anno le varie piattaforme di gaming saranno unificate Salvatore Laisa 28 salvatore.laisa@mohole.it – Mohole Lab
  • 29. Mozilla Marketplace Da quest’anno anche Mozilla entra nella mischia degli “app stores” proponendo un qualcosa di completamente web-centrico Salvatore Laisa 29 salvatore.laisa@mohole.it – Mohole Lab
  • 30. Intel AppUp Un nuovo concorrente che punta principalmente a varie piattaforme e “adotta” varie tecnologie tra cui HTML5 & Javascript Salvatore Laisa 30 salvatore.laisa@mohole.it – Mohole Lab
  • 31. Windows 8 Market & Mac App Store Il modello degli app stores approda anche sui sistemi operativi desktop (ma Linux non ce l’aveva già?) Salvatore Laisa 31 salvatore.laisa@mohole.it – Mohole Lab
  • 32. Windows 7 / Mac OSX (senza stores) Grazie a librerie come Adobe AIR e Appcelerator Titanium è possibile esportare applicazioni e giochi Javascript come eseguibili per OS Desktop (anche Linux in alcuni casi) Salvatore Laisa 32 salvatore.laisa@mohole.it – Mohole Lab
  • 33. Google Play & App Store Insieme alle due precedenti, librerie come Phonegap permettono di convertire il codice Javascript in applicazioni iOS o Android e quindi di poterle distribuire tramite i relativi store Salvatore Laisa 33 salvatore.laisa@mohole.it – Mohole Lab
  • 34. ho detto tutto GRAZIE! Salvatore Laisa 34 salvatore.laisa@mohole.it – Mohole Lab
  • 35. Contatti personali • Facebook: Salvatore Laisa • Twitter: @moebiusmania • Email: moebiusmania@gmail.com • WoW: Cattivone (server Eonar) Salvatore Laisa 35 salvatore.laisa@mohole.it – Mohole Lab