Projektityö ja pelikehitys Selainohjelmointi (JavaScript) T-111.1100 Digitaalisen median työvälineet (3 op) CS-C1180 Verkkojulkaisemisen perusteet (5 op) Hanna Hämäläinen DI Markku Laine Informaatioverkostot Mediatekniikan laitos 12. huhtikuuta 2016
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
Pelisuunnittelusta
Pelisuunnittelun osa-alueet Pelattavuuden suunnittelu Tarinan suunnittelu Kenttien/pelimaailman suunnittelu Käyttöliittymäsuunnittelu Ansaintamallin suunnittelu (mukailtu Miikka Junnilan VJP-luentokalvoista syksyltä 2014)
Valmiin pelin tunnusmerkit Peli on ymmärrettävä Pelaajan on helppo ymmärtää pelin logiikka Peli on mahdollista pelata alusta loppuun Kannattaa kokeilla testikäyttäjillä! Sisäisesti valmis Ei bugeja, umpikujia jne. Hyvin tasapainotettu Eri pelistrategiat mahdollisia Vaikeusaste ei ole liian helppo/vaikea, mutta progressiivinen Peli on reilu (mukailtu Miikka Junnilan VJP-luentokalvoista syksyltä 2014)
Ideointi Yleisin peli-idean lähde on toinen peli Tämänkin pelin olisi voinut tehdä paremmin... Vanhoja hyviä ideoita voi ja kannattaa käyttää Luo kuitenkin jotain omaa, älä taas uutta Flappy Birdiä Ideoita on itse asiassa helppo keksiä, vaikeampaa on jalostaa niistä jotain toimivaa Synteesi: ideoiden tarkennus, paloittelu, yhdistely Resonanssi: ideoiden väliset synergiat, teema Konvergenssi: arviointi, analyysi, vertailu kilpailijoihin Käsittely: konkretisointi, yksityiskohdat, kirjoitus 7 Timo Kellomäki 2012
Suunnitteluprosessi Varo ylisuunnittelua ja liikoja ominaisuuksia yksinkertainen on kaunista Iterointi ja ideoiden testaus paperiprotot, mock-upit, käsikirjoitukset priorisoi tärkeitä ominaisuuksia Konsepti - pelijärjestelmä - testaus - arviointi 8 Timo Kellomäki 2012
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/
Projektitöitä syksyn kurssilta
Flappy Running Norsu Mayhem, 2015 (http://dime.tml.hut.fi/~hamalaa8/project/)
Cadillac (2012)
21 Eero Helske, 2015 (http://dime.tml.hut.fi/~ehelske/project/game.html)
22
23 Neero Lius & Otso Repo, 2015 (http://dime.tml.hut.fi/~liusv1/harjoitus6/game.html )
Golfpelin rakenne Tehty phaser-pelikirjastolla golf_game.html 1 spritesheet-tiedosto 11 javascript-tiedostoa 1 kpl apuluokkia (player.js) 7 kpl phaser state-tiedostoja 3 kpl plugineita (phaser, box2d, jquery) 12 kuvaa
Golfpelin rakenne - spritesheet https://phaser.io/examples/v2/sprites/spritesheet
Golfpelin rakenne - phaser state-tiedostot Phaser-kirjastolla tehdyt pelit rakentuvat ns. State-tiedostoista, joilla määritellään pelin eri vaiheet. Stateja voi olla esimerkiksi boot (ladataan pelissä käytettävät kuvat yms.), menu (näytetään valikko), game (näytetään peli). Statet ovat itsenäisiä koodin osia, joiden välillä voidaan liikkua helposti. Esimerkiksi state-logiikkaa voisi käyttää seuraavalla tavalla: kun valikossa painetaan play-nappulaa, käynnistä game-state. Kun pelissä pelaajan elämät vähenee nollaan, käynnistä menu-state. 27
Golfpelin rakenne - phaser state-tiedostot state_boot.js Ladataan kaikki pelissä tarvittavat kuvat ja äänet. Määritellään canvaksen koko ja muut perusasetukset. Kun kaikki on valmista, siirrytään menu-stateen. 28
Golfpelin rakenne - päävalikko state_menu.js Näytetään pelaajalle valikko, jossa on play, scores ja how to nappulat. Kun pelaaja painaa nappuloita, siirrytään kutakin nappulaa vastaavaan stateen. 29
Golfpelin rakenne - alavalikot State_howto.js, state_scores.js, state_gameover.js Näytetään pelaajalle ohjeet, highscores-lista ja game over -näkymä. Kukin state sisältää nappulan, jolla voidaan siirtyä takaisin päävalikkoon. 30
Golfpelin rakenne - peli state_game.js, state_level_cleared.js Kaikki itse peliin liittyvä logiikka. Kun pelaaja on kerännyt kaikki tähdet, siirrytään level cleared stateen. Siellä olevaa nappulaa painettaessa käynnistetään game state uudestaan, jossa ladataan seuraava taso. Kun peli loppuu, siirrytään game over stateen. Kartat ladataan.json tiedostoista. Koko pelilogiikka mahtuu 280 riviin koodia. 31
Parinmuodostus
Parinmuodostus Projektityö tehdään pareittain, ja parit muodostetaan Viestintä 2 - kurssin ryhmien sisällä. Neljän hengen ryhmästä tulee siis kaksi paria, viiden hengen ryhmästä yksi kolmen hengen ryhmä ja yksi pari, kolmen hengen ryhmä toteuttaa projektityön yhdessä. Muista ilmoittaa projektityön palautuksen yhteydessä parisi nimi!
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 web-teknologioiden avulla. Projektityö tehdään pareittain tai 3 hengen ryhmissä. Projektityön on liityttävä Viestintä 2 -kurssin ryhmänne teemaan, muuten aihe on vapaa. Projektityön vaatimukset sekä tarkempi tehtävänanto löytyvät kurssin MyCourses-sivuilta Harjoitustyöt-osiosta. Palauttakaa projektityö verkkosivuillenne ja MyCoursesiin viimeistään tiistaina 9.5.2015 klo 23.59 mennessä.
Arvostelu 0-4 pistettä Vaatimukset: Tehtävänannon mukaisuus. 0-4 pistettä Idea: Omaperäisyys ja teemaan sopivuus. 0-4 pistettä Pelattavuus: Tavoite, juoni ja käyttökokemus. 0-4 pistettä Tekninen toteutus: Ohjelmakoodin laatu ja toimivuus. 0-4 pistettä Grafiikka: Visuaalisuus ja taiteellisuus. Läpipääsyn edellytyksenä on, että jokaisesta osa-alueesta saa vähintään yhden pisteen.
Ensi viikon harjoitus: Edistynyt verkkosivujen kehitys Todellisuudessa verkkosivuja kehitetään monien eri asiakaspään kirjastojen avulla, ja niissä hyödynnetään usein myös palvelinpään logiikkaa (tietokantoja, sisäänkirjautumista jne.). Ensi viikon harjoitustyön yhteydessä käydään läpi hieman edistyneempien frontend-tekniikoiden käyttöä, kuten Angular.js ja Scss. Osallistuminen on täysin vapaaehtoista, mutta lyhyt intro edistyneempään web-kehitykseen on varmasti hyödyllinen kurssin aikana web-kehityksestä kiinnostuneille. 38
Linkkejä Resursseja pelien kehitykseen http://letsmakegames.org/resources/art-assets-for-game-develo pers/ http://content.gpwiki.org/index.php/game_content_resources http://www.pixelprospector.com/the-big-list-of-royalty-free-graphi cs/ http://freesound.org/ http://www.soundjay.com/ http://www.mangatutorials.com/forum/showthread.php?742-theultimate-indie-game-developer-resource-list
KIITOS! hanna.hamalainen@aalto.fi