Harjoitustyö 5: 2D-animointi verkkosivuilla (HTML5 Canvas)

Transkriptio

1 Harjoitustyö 5: 2D-animointi verkkosivuilla (HTML5 Canvas) Kurssin viidennessä harjoitustyössä tutustutaan 2D-animoinnin toteuttamiseen verkkosivuille HTML5 Canvas -elementin ja JavaScriptin (HTML Canvas 2D Context JavaScript API) avulla. Harjoitustyö koostuu tehtävistä, jotka yhdessä muodostavat yksinkertaisen pelin rungon. Peliin tulee liikkuvia vihollisia ja pelaaja, jota käyttäjä voi liikuttaa. Viholliset ja pelaajat kimpoavat pelissä toisistaan. Toteutettavien tehtävien on liityttävä annettuun teemaan. Harjoitustyö tehdään itsenäisesti. Harjoitustyötä varten on kurssille määritelty yksi luento ( ) sekä yksi ohjattu viikkoharjoitus ( ). Yleisesti ottaen luennot tarjoavat kattavan tietopaketin harjoitustyöaiheeseen. Viikkoharjoituksissa puolestaan opiskelijat voivat tehdä harjoitustöitä sekä tarvittaessa kysyä neuvoa assistenteilta ( Hanna Hämäläinen, Ville Kumpulainen, Aleksi O Connor ), mikäli harjoitustöiden kanssa ilmenee ongelmia. Voit myös lähettää sähköpostia assistenteille (tämän harjoitustyön tapauksessa ensisijaisesti Ville Kumpulainen ). Perustehtävien vaatimukset (0-3 pistettä) Tehtävä 1: JavaScript-luokat Ensimmäisessä tehtävässä toteutetaan pelin runkoon tarvittavien JavaScriptluokkien luonnokset. Tehtävässä ei tarvitse tehdä varsinaisia JavaScript-luokkia (Prototype), tehtävän tekeminen onnistuu helpommin simuloimalla luokkia JavaScript-olioiden avulla. Alla vaatimuslista: Valitse verkkosivustostasi sivu, johon haluat toteuttaa pelin rungon. Tätä sivua kutsutaan tässä tehtävänannossa jatkossa pelisivuksi. Voit käyttää joko olemassa olevaa sivua tai luoda uuden sivun (esim. animation.html) Luo JavaScript-tiedosto ( player.js ), johon toteutetaan pelaaja -olio sekä siihen liittyvä ohjelmakoodi. Tässä vaiheessa ei tarvitse toteuttaa vielä varsinaisia metodeita, mutta kannattaa toteuttaa luokan runko ja hahmotella sen tarkoitusta. Voit toteuttaa luokan haluamallasi tavalla, mutta luokka voi esimerkiksi koostua seuraavista palasista: Pelaaja-olio, jolle annetaan tietyt alkuarvot sijainnille (x ja y), nopeudelle (mielivaltainen luku), sekä muita ominaisuuksia joita pelaajalla mahdollisesti on. Metodit, joilla muokataan pelaajan ominaisuuksia. Näitä voi olla esimerkiksi: move(), jolle annetaan parametriksi liikesuunta (muuttaa pelaajan x- tai y-sijaintia nopeuden verran) changespeed(), kasvattaa tai pienentää pelaajan nopeutta reset(), palautttaa pelaajan alkuarvoihin Linkitä ko. tiedosto pelisivulle.

2 Luo JavaScript-tiedosto ( enemy.js ), johon toteutetaan vihollinen -luokka. Luokkaan kirjoitetaan tästä eteenpäin kaikki viholliseen liittyvä ohjelmakoodi. Enemy-luokkaa kannattaa lähteä tekemään pääosin samalla tavalla kuin pelaaja-luokkaa. Erona on se, että vihollisia voidaan luoda enemmän kuin yksi. Siis: Taulukko, johon tallennetaan enemy-olioita. Metodi create(), joka luo enemy-olion tietyillä alkuarvoilla. Voi olla, että pelisi kannalta on mielekästä arpoa viholliselle satunnainen sijainti ja nopeus. Metodi move(), joka käy läpi enemy-taulukon ja siirtää kaikkia sen sisältämiä enemy-olioita...sekä muita pelisi vihollisen kannalta mahdollisesti oleellisia metodeja. Linkitä ko. tiedosto pelisivulle. Luokkia on tarkoitus parannella ja täydentää tarpeen mukaan harjoitustyön myöhemmissä tehtävissä. Tehtävä 2: Canvas ja piirtäminen Toisessa tehtävässä opetellaan piirtämään staattisia kuvia HTML5 Canvas - elementille (piirtoalue). Alla vaatimuslista: Luo pelisivulle HTML5 Canvas elementti ( <canvas> ). Luo JavaScript-tiedosto ( animation.js ), johon tästä eteenpäin kirjoitetaan kaikki 2D-animaatioon liittyvä ohjelmakoodi. Linkitä ko. tiedosto pelisivulle, jossa 2D-animaatio on tarkoitus näyttää. (Vinkki: laita kaikki animation.js tiedoston koodi window.onload() tai jquery:n $(document).ready() -funktion sisään) Hae aluksi viittaus canvas-elementtiisi: var canvas = document.getelementbyid var ctx = canvas.getcontext("2d"); Piirrä piirtoalueelle yksi kappale pelaajia ja sijoita se piirtoalueen keskelle. Muokkaa tehtävässä 1 määrittelemääsi pelaaja -luokkaa tarpeen mukaan. Toimi tarvittaessa vastaavasti myös seuraavissa tehtävissä, vaikka sitä ei ole erikseen mainittu. Pelaajan ulkoasu on esitettävä staattisen pikseligrafiikkakuvan avulla. Etsi tätä varten itsellesi sopiva kuva tai piirrä se itse. Pääset jatkossa helpoimmalla kun laajennat pelaaja-luokkaasi lisäämällä siihen draw()-metodin, joka ottaa parametriksi viittauksen canvakseen (ctx), ja piirtää siihen pelaaja-oliossa määriteltyjen parametrien mukaan pelaajan. Voit myös lisätä pelaajan esittämiseen käytettävän kuvan suoraan player.js tiedostoon. Piirrä piirtoalueelle vähintään neljä kappaletta vihollisia siten, että ne eivät sijoitu toistensa tai pelaajan päälle. Muokkaa tehtävässä 1 määrittelemääsi vihollinen -luokkaa tarpeen mukaan.

3 Jälleen on suositeltavaa muokata enemy-luokkaasi kuten player-luokkaa yllä, ja ulkoistaa kaikki mahdollinen koodi sinne. Tehtävä 3: Spritet ja animaatiosilmukka Kolmannessa tehtävässä opetellaan spritejen käyttöä ja animaatiosilmukan tekemistä. Jos jäät jumiin, voit katsoa mallia tästä tutoriaalista, jossa on tehty hyvin samanlainen peli: Alla vaatimuslista: Tehtävässä 2 käytetyt staattiset kuvat vaihdetaan spriteiksi. Etsi tätä varten itsellesi sopivat spritet (engl. sprite sheet) sekä pelaajaa että vihollisia varten tai piirrä ne itse. Valmiita spritejä löytyy esimerkiksi täältä: Pelaajan ja vihollisten spriteiltä pitää löytyä erilliset tilat (engl. frame) sekä lepo- että liikeanimointiin. Löydät apua spriten toteuttamiseen esimerkiksi täältä: -sprite-animation/ Määrittele animointia varten tarvittavat muuttujat, kuten kokonaislukuindeksi, joka kertoo, mikä spriten tila on tällä hetkellä aktiivinen. Määrittele animaatiosilmukan oma funktio ja sille erilliset apufunktiot, kuten piirtoalueen tyhjennys (esim. clear() ) ja piirtoalueelle piirto (esim. render() ). Käynnistä animaatiosilmukka ( requestanimationframe ) ja piirrä tehtävän 2 tapaan piirtoalueelle sekä pelaaja että viholliset spritejä käyttäen. Pelaajan ja vihollisten on tarkoitus tässä vaiheessa pysyä sijaintinsa puolesta paikallaan piirtoalueella. Toisin sanoen, ne eivät vielä liiku ylös tai alas, mutta niiden paikallaoloa animoidaan lepoanimaatiota käyttäen. Animoinnin voit tehdä esimerkiksi siten, että spriten tilaa vaihdetaan aina silloin, kun animaatiosilmukan funktiota on kutsuttu tietty määrä kertoja. Voit vaihtaa tilaa vaikka joka 30. funktiokutsun kohdalla, jolloin spriten tila vaihtuu noin puolen sekunnin välein. Tehtävä 4: Vuorovaikutus Neljännessä tehtävässä toteutetaan näppäimistö- ja hiiritapahtumiin pohjautuva pelinohjaus. Alla vaatimuslista: Pelaajaa pitää pystyä liikuttamaan piirtoalueella nuolinäppäimiä käyttäen. Täältä löytyy ohjeita, miten estää nuolinäppäinten oletustoiminta selaimissa: event-it.html. Vihollisia pitää pystyä poistamaan piirtoalueelta painamalla hiiren vasenta nappia ( mousedown -tapahtuma) niiden päällä. Vinkki: Muunna ikkunan hiirikoordinaatit HTML5 Canvas -elementin koordinaateiksi.

4 Piirrä piirtoalueelle napit pelaajan liikenopeuden hidastamista ja kasvattamista varten. Vinkki: tässä voi olla hyödyllistä käyttää pelaaja-luokkasi changespeed-metodia. Tehtävä 5: Törmäystestit Viidennessä tehtävässä toteutetaan törmäystestit JavaScript-luokille. Alla vaatimuslista: Pelaaja ei voi mennä piirtoalueen ulkopuolelle, eli sen pitää törmätä seiniin. Vihollisten pitää liikkua itsestään piirtoalueella. Liikerata on vapaavalintainen. Mikäli vihollinen törmää seinään, toiseen viholliseen tai pelaajaan, niin sen pitää vaihtaa kulkusuuntaa. Jos olet toteuttanut luokkiisi move-metodit, törmäystestit kannattaa tehdä niiden sisällä (jos edessä on este, sijainti ei muutu) Yleistä Riittää, että harjoitustyö on testattu ja se toimii jollain seuraavista selaimista: (1) Google Chrome, (2) Mozilla Firefox tai (3) Apple Safari. Mikäli tehtävänannon suhteen on epäselvyyksiä, niin ota yhteyttä kurssin henkilökuntaan joko postituslistan kautta tai viikkoharjoituksissa. Bonustehtävän vaatimukset (0-1 pistettä) Bonustehtävä on astetta haastavampi ja sen voi suorittaa vain, jos on tehnyt/yrittänyt tosissaan tehdä kaikki perustehtävät. Tehtävä 6: Pelilliset elementit Jatka edellisissä tehtävissä toteutettua 2D-animaatiota siten, että lopputuloksena on yksinkertainen peli. Laajennusesimerkkejä (toki myös muutkin mahdollisia): Pelissä on jokin tavoite/maali Pelissä kerätään pisteitä & TOP-10 -lista Pelissä voi tuhota vihollisia Mahdollisuus aloittaa uusi peli Pelaajalla on monta elämää Ohjelmistot Harjoitustyö tehdään asiakaspään web-teknologioita käyttäen, tarkemmin sanottuna HTML5 Canvas -elementin ja JavaScript-kielen (HTML Canvas 2D Context JavaScript API) avulla. Muitakin HTML5 Canvas -elementtiä hyödyntäviä teknologioita/grafiikkakirjastoja/api:ja (kuten saa käyttää, mutta ei tarvitse, koska nämä käydään perusteellisemmin läpi kurssin viimeisellä luennolla. Harjoitustyön tekemiseen ei saa käyttää palvelinpään ohjelmointikieliä (esim. PHP), sillä Github pages ei tue näitä. Lisäksi harjoitustyön tekeminen vaatii vapaavalintaisen ohjelmointiympäristön tai tekstieditorin (esim. Sublime Text, Brackets, Atom, Webstorm tai GNU Emacs ) käyttämistä. Harjoitustyön tekemiseen ei saa käyttää visuaalista editoria vaan ohjelmakoodi on kirjoitettava käsin.

5 Arvostelu Harjoitustyö arvostellaan asteikolla hyväksytty (1-4 pistettä) tai hylätty (merkittäviä puutteita). Arvostelussa huomioidaan ensisijaisesti vaatimusten täyttyminen sekä panostuksen määrä. Tämän lisäksi harjoitustyön arvosteluun vaikuttavat sen idea ts. kuinka vahvasti harjoitustyö liittyy Viestintä 2 -kurssilla annettuun teemaan sekä sen tekninen ja taiteellinen toteutus. Myöhässä palautetut harjoitustyöt arvostellaan samoin perustein, paitsi että jokaiselta alkavalta myöhästymisvuorokaudelta vähennetään 1 piste. Myöhästynyt työ voidaan päästää läpi hyväksyttynä, vaikka myöhästymissakot tiputtaisivat pisteet nollille, mikäli työ muuten täyttää 1 pisteen mukaiset vaatimukset. Hylätyt harjoitustyöt puolestaan uusitaan assistenttien kanssa erikseen sovitun aikataulun mukaisesti tai kurssin lopussa järjestettävän rästikierroksen yhteydessä. Uusintapalautetuista harjoitustöistä voi saada hyväksyttynä vain 0 pistettä. Palautus Harjoitustyö palautetaan Github Pagesiin viimeistään maanantaina klo mennessä. Palautettujen tehtävien tulisi olla tarkasteltavissa osoitteessa Harjoitustyöstä on kirjoitettava lyhyt kuvaus ennen palautuksen määräaikaa MyCoursesiin Harjoitustyö 5:n alle Harjoitustyöt-sivulle. Kuvauksessa voit kertoa mm. harjoitustyön hienouksista/puutteista tai mitkä osiot siitä on toteutettu kolmannen osapuolen komponentein. Kerro myös, mitkä tehtävät teit sekä millä selaimella (+versio) ja käyttöjärjestelmällä (+versio) harjoitustyön pitäisi toimia virheettömästi.