Selainohjelmointi Edistynyt verkkosivujen (JavaScript) kehitys T-111.1100 Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) DI Mari Markku HirviLaine Mediatekniikan laitos / Informaatioverkostot 24. marraskuuta 2015
http://code.google.com/p/quake2- gwt- port/
Luennon jälkeen tiedän enemmän projektityöhön käytettävistä teknologioista ja olen valmis aloittamaan sen tekemisen
2D-pelikehitys verkkosivuilla
Grafiikkakirjastot ja HTML5- pelimoottorit (engl. graphics libraries and HTML5 game engines)
Motivaatio Tarjoavat muun muassa Korkeantason 2D ja/tai 3D piirto API:n Animointisilmukan / pelisilmukan Spritet ja niiden liikemekaniikan Fysiikkamoottorin Törmäystestit Resurssien (esim. kuvat ja äänet) esilatauksen ja hallinnan Monikanavaäänet Tapahtumien (esim. hiiri ja näppäimistö) kuuntelun Ohjelmointimallin (entiteetti/komponentti ja/tai olio) Tekoälyn Moniselaintuen
http://www.phaser.io
http://www.createjs.com/#!/easeljs
http://melonjs.org/
http://mrdoob.github.io/three.js/
http://html5gameengine.com/
Suorituskyvyn optimointi (engl. performance optimization)
http://www.html5rocks.com/en/tutorials/canvas/performance/
Linkkejä Grafiikkakirjastojen vertailu https://docs.google.com/spreadsheet/ccc?key=0aqj_mvmuz3y 8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 http://coding.smashingmagazine.com/2012/02/22/web-drawingthrowdown-paper-processing-raphael/ HTML5-pelimoottoreiden vertailu https://docs.google.com/spreadsheet/ccc?key=0an0lrxe9p3um dghxzku3uehcb3u1sjvrouh0awryoue#gid=0 http://buildnewgames.com/game-engine-comparison/
Projektityöesimerkkejä
Robiner for Life (2013), Jutta Kalli ja Essi Jukkala
Cadillac (2012)
Flat Memory (2013), Mika Aalto ja Kati Penttinen
Avaruuspeli (2012), Toni Orpana ja Chao Feng
Avaruuspelin rakenne project.html css/*.css (1 kpl) 1 kpl tyylitiedostoja (styles.css) scripts/*.js (15 kpl) 9 kpl objekteja (player, battleship, jne.) 4 kpl managereita (audiomanager, inputmanager, jne.) 1 kpl apuluokkia (enemyformation) 1 kpl pääohjelma (game) sounds/*.wav (7 kpl) 6 kpl ääniefektejä (laser, explosion, jne.) 1 kpl taustamusiikkia (background)
Avaruuspelin rakenne sprites/*.png (17 kpl) 1 kpl taustakuvia (background_tiled) 3 kpl asteroideja (sprites) 5 kpl vihollisia (battleship_1, destroyer_1, jne.) 1 kpl räjähdyksiä (sprite) 1 kpl pelaajia (sprite) 4 kpl powerupseja (power_bar, shield_bar, jne.) 2 kpl ammuksia (projectile_laser_green, jne.)
Avaruuspelin animointi Perusvaiheet 1. Määrittele yleiset muuttujat (esim. fps) 2. Määrittele muuttujat objekteille (JavaScript-luokat) 3. Lisää tapahtumakuuntelijat 4. Lataa resurssit (äänet ja spritet) 5. Alusta objektit 6. Päivitä pelin ja objektien tilat 7. Tarkista objektien törmäykset 8. Tyhjennä piirtoalue 9. Piirrä objektit à Toista vaiheita 6-9, kunnes animaatio/peli loppuu
Parinmuodostus
Parinmuodostus Projektityö tehdään pareittain (lisäksi muodostetaan mahdollisesti yksi kolmen hengen ryhmä, jos tekijöitä on pariton määrä). Etsi itsellesi mahdollisimman pian pari ja käy ilmoittautumassa kurssin mycourses-sivuilta löytyvään Parit projektityö kyselyyn Voit myös ilmoittautua yksin, jolloin joku muu pariton opiskelija voi suoraan ilmoittautua pariksesi kyselyn kautta tai lopulta kurssin henkilökunta voi muodostaa parit yksin jääneistä opiskelijoista.
Yhteenveto ja tehtävänanto
Yhteenveto Verkkosivujen rakenteen, ulkoasun ja toiminnallisuuden toteuttamiseen on olemassa vaihtoehtoisia ja/tai täydentäviä tapoja HTML:n, CSS:n ja JavaScript:n rinnalle. JavaScript API:t pyrkivät tuomaan natiivisovellusten toiminnallisuudet Webiin. Uusia API:ja ilmestyy jatkuvasti. Selaintuki on vielä osittain puutteellista. Grafiikkakirjastot ja HTML5-pelimoottorit helpottavat pelien toteuttamista ja HTML5 <canvas>:n kanssa työskentelyä. Toteutuksien suhteen on runsaasti valinnanvaraa.
Tehtävänanto Toteuttakaa verkkosivustolle peli (projektityö), joka tehdään kurssilla opetettujen asiakaspään webteknologioiden avulla. Projektityö tehdään pareittain. Projektityön on liityttävä ainakin toisen ryhmän jäsenen kurssin alussa valitsemaan teemaan, muuten aihe on vapaa. Projektityön vaatimukset sekä tarkempi tehtävänanto löytyvät kurssin MyCourses-sivuilta Harjoitustyöt-osiosta. Palauttakaa projektityö kurssin Dime-verkkopalvelimelle viimeistään torstaina 31.12.2015 klo 23.59 mennessä.
Linkkejä Resursseja pelien kehitykseen http://letsmakegames.org/resources/art-assets-for-gamedevelopers/ http://content.gpwiki.org/index.php/game_content_resources http://www.pixelprospector.com/the-big-list-of-royalty-freegraphics/ http://freesound.org/ http://www.soundjay.com/ http://www.mangatutorials.com/forum/showthread.php?742-the- Ultimate-Indie-Game-Developer-Resource-List
KIITOS! Mari.hirvi@aalto.fi