T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mediatekniikan laitos / Informaatioverkostot

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mediatekniikan laitos / Informaatioverkostot"

Akseli Kähkönen
8 vuotta sitten
Katselukertoja:

1 Selainohjelmointi Edistynyt verkkosivujen (JavaScript) kehitys T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) DI Mari Markku HirviLaine Mediatekniikan laitos / Informaatioverkostot 24. marraskuuta 2015

2 gwt- port/

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

4 2D-pelikehitys verkkosivuilla

5 Grafiikkakirjastot ja HTML5- pelimoottorit (engl. graphics libraries and HTML5 game engines)

6 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

12 Suorituskyvyn optimointi (engl. performance optimization)

14 Linkkejä Grafiikkakirjastojen vertailu 8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 HTML5-pelimoottoreiden vertailu dghxzku3uehcb3u1sjvrouh0awryoue#gid=0

15 Projektityöesimerkkejä

16 Robiner for Life (2013), Jutta Kalli ja Essi Jukkala

17 Cadillac (2012)

18 Flat Memory (2013), Mika Aalto ja Kati Penttinen

19 Avaruuspeli (2012), Toni Orpana ja Chao Feng

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

21 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.)

22 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

23 Parinmuodostus

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

25 Yhteenveto ja tehtävänanto

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

27 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 klo mennessä.

28 Linkkejä Resursseja pelien kehitykseen Ultimate-Indie-Game-Developer-Resource-List

29 KIITOS!

Samankaltaiset tiedostot

Projektityö ja pelikehitys

Projektityö ja pelikehitys Selainohjelmointi (JavaScript) T-111.1100 Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Pinja Hokkanen DI Markku Laine Mediatekniikanlaitos