Projektityö ja pelikehitys

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "Projektityö ja pelikehitys"

Maija-Liisa Lattu
8 vuotta sitten
Katselukertoja:

1 Projektityö ja pelikehitys Selainohjelmointi (JavaScript) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Pinja Hokkanen DI Markku Laine Mediatekniikanlaitos laitos / Informaatioverkostot Mediatekniikan 12. huhtikuuta 2016

3 Luennon jälkeen tiedän enemmän projektityöhön käytettävistä teknologioista ja olen valmis aloittamaan sen tekemisen

4 Pelisuunnittelusta

5 Pelisuunnittelun osa-alueet Pelattavuuden suunnittelu Tarinan suunnittelu Kenttien/pelimaailman suunnittelu Käyttöliittymäsuunnittelu Ansaintamallin suunnittelu (mukailtu Miikka Junnilan VJP-luentokalvoista syksyltä 2014)

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

7 2D-pelikehitys verkkosivuilla

8 Grafiikkakirjastot ja HTML5pelimoottorit (engl. graphics libraries and HTML5 game engines)

9 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

15 Projektitöitä syksyn kurssilta

16 Flappy Running Norsu Mayhem, 2015 (

17 Cadillac (2012)

19 19 Eero Helske, 2015 (

20 20

21 21 Neero Lius & Otso Repo, 2015 ( )

23 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

24 Golfpelin rakenne - spritesheet

25 Golfpelin rakenne - phaser statetiedostot 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 statelogiikkaa voisi käyttää seuraavalla tavalla: kun valikossa painetaan play-nappulaa, käynnistä gamestate. Kun pelissä pelaajan elämät vähenee nollaan, käynnistä menu-state. 25

26 Golfpelin rakenne - phaser statetiedostot 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. 26

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

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

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

30 Parinmuodostus

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

32 Yhteenveto ja tehtävänanto

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

34 Tehtävänanto Toteuttakaa verkkosivustolle peli (projektityö), joka tehdään kurssilla opetettujen asiakaspään webteknologioiden 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ö kurssin Dime-verkkopalvelimelle viimeistään torstaina klo mennessä.

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

36 Linkkejä Resursseja pelien kehitykseen

37 KIITOS!

Samankaltaiset tiedostot

Projektityö ja pelikehitys

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