(HTML5 Canvas) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op)

Transkriptio

1 Selainohjelmointi 2D-animointi verkkosivuilla (JavaScript) (HTML5 Canvas) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Juuso Lappalainen Mediatekniikan laitos laitos 22. maaliskuuta 2016

2 Demo: HTML5 Pacman

3 Luennon jälkeen osaan toteuttaa yksinkertaisia 2Danimaatioita verkkosivuille HTML5 Canvas:n avulla.

4 Luennon sisältö Kertausta Animointiteknologiat verkossa HTML5 Canvas HTML Canvas 2D Context Animointi Yhteenveto ja tehtävänanto Luennon ajan rakennetaan livekoodauksena pientä peliä:

5 Kertausta

6 Javascriptin liittäminen HTML-sivuille 1) Sisäinen <script> elementti 2) Ulkoinen *.js tiedosto

7 Tapahtumat Yleisimmät tapahtumatyypit Käyttöliittymätapahtumat, esim. load Kohdistustapahtumat, esim. focus Hiiritapahtumat, esim. click, mouseover ja mousemove Näppäimistötapahtumat, esim. keyup ja keydown

8 jquery jquery on JavaScript-kirjasto, joka helpottaa ja nopeuttaa yleisimpien JavaScript-toimintojen toteutusta asiakaspäässä Yksinkertainen ja tiivis syntaksi Tukee yleisimmin käytettäviä toimintoja Ottaa huomioon selainten väliset eroavaisuudet Laajennettavissa liitännäiskoodin avulla

9 Debuggaus Selaimen kehitystyökalut Sisäänrakennettu kaikkiin suosituimpiin verkkoselaimiin Työkaluja DOM-puun tarkastelemiseen ja muokkaamiseen JavaScript-debuggeri console.log(... ) metodi Tulostaa viestit konsolille Huomattavasti parempi vaihtoehto kuin vanha alert(... ) metodin käyttäminen à avaa ponnahdusikkunan

10 Hyvin lyhyesti olio-ohjelmoinnista

11 Olio-ohjelmointi JavaScriptillä JavaScript on oliopohjainen kieli Ei kuitenkaan tarjoa Javan kaltaista tukea olioohjelmoinnille Ei suoranaisesti tue luokkia, perintää, jne. Voidaan simuloida funktioiden ja prototyyppien avulla Luokkien määrittelyyn useita eri tapoja Tarjolla myös erillisiä kirjastoja

12 Köyhän miehen luokka (joka riittää kurssin tarpeisiin mainiosti J )

13 Animointiteknologiat verkossa

14 Animointiteknologioiden vertailu Teknologia Standardi Käyttötarkoitus Grafiikka Ohjelmointi Selain- ja työkalutuki CSS Animations W3C:n työluonnos yksinkertaiset animaatiot, esim. efektit 2D & 3D, pikseli CSS, deklaratiivinen ++ Flash Adoben liitännäinen selaimeen monimutkaiset animaatiot, esim. pelit 2D (& 3D), vektori ActionScript, imperatiivinen ++ HTML Canvas 2D Context + <canvas> W3C:n suositusehdotus monimutkaiset animaatiot, esim. pelit 2D, pikseli JavaScript, imperatiivinen ++ JavaScript-kirjastot useita toteutuksia yksinkertaiset animaatiot, esim. efektit 2D, pikseli JavaScript, imperatiivinen +++ SVG W3C:n suositus yksinkertaiset animaatiot, esim. efektit 2D, vektori XML, deklaratiivinen ++ WebGL + <canvas> Khronos Group:n spesifikaatio monimutkaiset animaatiot, esim. pelit 3D, pikseli JavaScript (OpenGL ES 2.0), imperatiivinen ++

15 HTML5 Canvas

16 Yleiskuvaus Käyttötarkoitus Tarjoaa piirtoalueen, johon voi lennossa piirtää 2D- ja 3D-pikseligrafiikkaa sekä kuvia JavaScript API:n avulla. Selaintuki Toimii kaikissa moderneissa työpöytä- ja mobiiliselaimissa Merkintä

17 Koordinaatisto (0, 0) x y (6, 2)

18 Koko näyttöalan käyttöönotto 1) HTML määrittelyt 2) CSS määrittelyt 3) JavaScript määrittelyt

19 Googleen codecademy canvas

20 HTML Canvas 2D Context

21 Yleiskuvaus Käyttötarkoitus Tarjoaa JavaScript-rajapinnan, joka mahdollistaa 2Dpikseligrafiikan ja -kuvien lennossa piirtämisen ja animoinnin piirtoalueelle. Toiminnot Muotojen (esim. suorakulmiot ja ympyrät) piirtäminen Tekstien piirtäminen Kuvien piirtäminen ja pikselimanipulaatioiden tekeminen Sekä paljon muuta!

22 Muotojen piirtäminen

23 Muotojen piirtäminen

24 Trigonometriaa: Ympyröiden kulmat

25 Tekstien piirtäminen

26 Tekstien piirtäminen

27 Gradienttien, kuosien ja varjojen piirtäminen

28 Gradienttien piirtäminen

29 Kuosien piirtäminen

30 Varjojen piirtäminen

31 Kuvien piirtäminen ja pikselimanipulaatioiden tekeminen

32 Kuvan piirtäminen, rajaus ja skaalaus

33 Pikselimanipulaatioiden tekeminen

34 Piirtoaluemuunnosten tekeminen

35 Toiminnot Metodit Erilaisten piirtoaluemuunnosten tekeminen Esim. kiertäminen ja siirtäminen Muunnokset koskevat koko koordinaatistoa

36 Muunnettu koordinaatisto (0, 0) context.translate( 2, 1); (0, 0) y x (6, 2) (6, 2)

37 Rajapinta piirtoaluemuunnosten tekemiseen scale(... ) rotate(... ) translate(... ) Metodit transform(... ), suhteellinen muunnos edellisiin nähden settransform(... ), absoluuttinen muunnos edellisiin nähden

38 Skaalauksien tekeminen

39 Kiertojen tekeminen

40 Siirtojen tekeminen

41 Absoluuttisten (tai suhteellisten) muunnosten tekeminen

42 Piirtoalueen tilojen tallentaminen ja palauttaminen

43 Rajapinta piirtoalueen tilojen tallentamiseen ja palauttamiseen save() restore() Metodit

44 Animointi

45 Timing control for script-based animations (requestanimationframe) Käyttötarkoitus Tarjoaa JavaScript API:n animointiin, jonka ansiosta optimaalisen animointinopeuden määritys voidaan siirtää ohjelmoijalta selaimelle. Selaintuki Chrome 10.0+, Firefox 4.0+, IE 10.0+, Opera 15.0+, Safari 6.0+

46 Huono tapa animoida setinterval function animate(){ } // update objects // animate at 30 fps setinterval(animate, 1000 / 30);

47 Rajapinta animointiin Oikea tapa requestanimationframe( ) cancelanimationframe( ) Metodit Selain valitsee parhaan ajan animoinnille Animointi pysähtyy kun ikkuna ei ole aktiivisena Ei mahdollisuutta asettaa aikaa itse

48 requestanimationframe() function animate(time){ //update objects } framehandle = requestanimationframe(animate); var framehandle = requestanimationframe(animate); FrameHandle on tarpeellinen, jos jossain tilanteessa haluaa pysäyttää animaation. RequestAnimationFrame komennon voi tällöin peruuttaa komennolla: cancelrequestanimationframe(framehandle);

49 Animaatioiden tekeminen Perusvaiheet 1. Määrittele yleiset muuttujat (esim. velocityx ja velocityy) 2. Määrittele objektit (JavaScript-luokat) 3. Alusta objektit 4. Tyhjennä piirtoalue (koko tai muuttunut osa) 5. Piirrä objektit 6. Muuta objektien tiloja 7. Tarkista törmäykset, vuorovaikutus, yms. ehdot à Toista vaiheita 4-7, kunnes animaatio/peli loppuu (tutoriaali: Animaatiosilmukka

50 Animaatioesimerkki

51 Frames per second (FPS) Kuinka monta kuvaa piirretään sekunnissa (kuvia sekuntia kohden) Vaihtelee tietokoneen suorituskyvystä ja kuormituksesta riippuen

52 Frame-based motion Nopeus muodossa pixels/frame Voidaan ajatella animoinnissa, että jokin objekti liikkuu tietyn matkan jokaisella uudella kuvalla Ohjelmoijan helpompi ymmärtää Mutta: Vaihteleva FPS aiheuttaa sen, että välillä objektit liikkuvat nopeammin ja välillä hitaammin, jos objektin nopeus on määritelty esim. 150 pikseliä x-suunnassa / frame 120 pikseliä y-suunnassa / frame

53 Frame-based motion pixels / frame = (pixels / second) / fps tai pixels / frame = (pixels / second) * (second / frame) Jos objektin on määrä liikkua 200 pikseliä sekunnissa, ja FPS on 50, silloin sen pitää liikkua tässä framessa 4 pikseliä. (delta on 4) 200/50 = 4

54 Time-based motion Nopeus muodossa pixels/second Time-based motion = pixels/second on vakio Tällöin nopeus pysyy ajansuhteen vakiona riippumatta kuinka monta kuvaa tietokone pystyy piirtämään sekunnissa (eli riippumatta fps:stä)

55 Time-based motion var velocityx = 50; // 50 pixels per second var velocityy = 100; // 100 pixels per second animate(time){ // epoch time var elapsedtime = time - lasttime; deltax = velocityx * (elapsedtime / 1000); deltay = velocityy * (elapsedtime / 1000); obj.x = obj.x + deltax; obj.y = obj.y + deltay; } lasttime = time;

56 Time-based motion vs. Frame-based motion var velocityx = 50; // 50 pixels per second var velocityy = 100; // 100 pixels per second var velocityx = 50; // 1 pixel per second var velocityy = 100; // 2 pixels per second animate(time){ var elapsedtime = time - lasttime; animate(time){ deltax = velocityx * (elapsedtime / 1000); deltay = velocityy * (elapsedtime / 1000); obj.x = obj.x + deltax; obj.y = obj.y + deltay; deltax = velocityx; deltay = velocityy; obj.x = obj.x + deltax; obj.y = obj.y + deltay; } lasttime = time; }

57 Spritet Pikseligrafiikkana toteutettuja pelihahmoja Usein osittain läpinäkyviä (kuvassa musta) Yleisiä jo hyvin vanhoissa, esim. Commodore 64 ja Amiga:n peleissä Aiemmin toteutettu laitteistotasolla, PC:ssä ohjelmoitavia

58 Ilmaisia spritejä esim.

59 Sprite kuvien lataaminen // Load Sprite Sheet var marioimage = new Image(); marioimage.src = "img/smb_sprites.png"; // Document ready -> Load sprite sheet image (jquery syntax) $( document ).ready(imageloader); // Image loaded -> start animation function imageloader(){ marioimage.onload = function() { animationframe = requestanimationframe(animate); }; }

60 Spriten piirto ja päivitys function sprite (options) { var that = {}; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; // Draw current sprite image that.render = function () { // Draw sprite }; that.context.drawimage( ); // Load Sprite Sheet var playerimage = new Image(); playerimage.src = player_sprite_sheet.png"; // Create sprite var player = sprite({ context: cnv.getcontext("2d"), width: 26, height: 35, image: playerimage }); } // Update sprite frame index that.update = function () { }; return that; frameindex based image crop (x) frameindex

61 Näppäinkomennot ja liikutus event.preventdefault() estää komentoja valumasta eteenpäin (estää esim. sen, että nuolinäppäimet liikuttavat sivua ylös tai alas) Lisätietoa: var KEYCODE_LEFT = 37; var KEYCODE_UP = 38; var KEYCODE_RIGHT = 39; var KEYCODE_DOWN = 40; $(document).keydown(function(e) { }); if (e.keycode == KEYCODE_ESC) { cancelanimationframe(aniframe); } if (e.keycode == KEYCODE_LEFT) { e.preventdefault(); } // do something if (e.keycode == KEYCODE_RIGHT) { e.preventdefault(); // do something } if (e.keycode == KEYCODE_UP) { e.preventdefault(); } // do something if (e.keycode == KEYCODE_DOWN) { e.preventdefault(); // do something }

62 Hiirikoordinaattien muuntaminen canvas-koordinaatistoon Perustapaus - canvas.getboundingclientrect() function getmousepos(canvas, evt) { var rect = canvas.getboundingclientrect(); return { x: evt.clientx - rect.left, y: evt.clienty - rect.top }; }

63 Hiirikoordinaattien muuntaminen canvas-koordinaatistoon Jos canvaksen kokoa skaalattu CSS:llä function getmousepos(canvas, evt) { var rect = canvas.getboundingclientrect(); } return { }; x: evt.clientx - rect.left * (canvas.width / rect.width), y: evt.clienty - rect.top * (canvas.height / rect.height)

64 Törmäystarkistus Useita eri tapoja toteuttaa Yksinkertaisin on käyttää tarkistukseen neliskulmaisia objektien reunoja rajaavia laatikoita (bounding box) * *Image from Starling Framework the Open Source Game Engine for Flash

65 Törmäystarkistus seinistä kimpoaminen update: function(){ this.left += this.velocityx; // Update X position this.top += this.velocityy; // Update Y position if((this.left+this.width)>canvasw this.left<0){ // X-axis collision } this.velocityx = -this.velocityx; // Invert velocity direction if((this.left+this.width)>canvasw){ // Relocate based on bounce this.left -= (this.left+this.width)-canvasw; } if(this.left<0){ } this.left = -this.left; // Relocate based on bounce } if((this.top+this.height)>canvash this.top<0){ // Y-axis collision this.velocityy = -this.velocityy; // Invert velocity direction } if((this.top+this.height)>canvash){ // Relocate based on bounce this.top -= (this.top+this.height)-canvash; } if(this.top<0){ // Relocate based on bounce } this.top = -this.top;

66 Törmäystarkistus Pyöreä rajaus

67 Eräs grafiikkakirjasto: Pixi.js

68 Eräs grafiikkakirjasto: Pixi.js Tarjoaa kehittyneen rajapinnan Canvasille Kuvien, äänien ym. esilataus on sisäänrakennettuna Monissa tilanteissa helpompi käyttää kuin pelkkää Canvasta Huonona puolena, että kirjaston opetteluun ei ole kattavia oppimateriaaleja

69 Yhteenveto ja tehtävänanto

70 Yhteenveto Animointiin verkossa on useita eri teknologioita Sopivan teknologian valinta riippuu usein vaatimuksista 2D vs. 3D Pikseligrafiikka vs. vektorigrafiikka Efekti vs. peli Saavutettavuus vs. teknologiademo HTML5 <canvas> tarjoaa standardoidun piirtoalueen 2D- ja 3D-pikseligrafiikan piirtämiseen HTML Canvas 2D Context tarjoaa standardoidun JavaScript-rajapinnan monimutkaisten 2Dpikseligrafiikka-animaatioiden piirtämiseen piirtoalueelle

71 Tehtävänanto Jatkakaa aiemmissa harjoituksissa tekemiänne kotisivuja Upottakaa haluamallenne sivulle <canvas> ja toteuttakaa siihen 2D-animaatio HTML Canvas 2D Context JavaScript API:n avulla Tehtävät on rakennettava annetun teeman ympärille Harjoitus tehdään itsenäisesti Harjoituksen vaatimukset sekä tarkempi tehtävänanto löytyvät kurssin MyCourses-sivuilta Harjoitustyöt-osiosta Palauttakaa harjoitus kurssin DIME-palvelimelle viimeistään maanantaina klo mennessä Työ tarjoaa erittäin hyvän pohjan projektityölle!

72 Tästä on varmasti paljon iloa!

73 O Reilly Media 2013 (2nd Ed.) # of pages 750 ISBN

74 Linkkejä