(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) DI Juuso Markku Lappalainen Laine Mediatekniikan Informaatioverkostot laitos / Mediatekniikan laitos 28. lokakuuta 2014

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

5 Kertausta

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

7 Tapahtumat DOM Level 3 Events W3C:n työluonnos, syyskuu 2014 Määrittelee tapahtumat, niiden kuuntelun ja etenemisen, jne. 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 Lista tapahtumatyypeistä

8 Tapahtumarajapinnat ja niiden perintä

9 Tapahtumarajapinnat - esimerkki Hiiripainallusten kuuntelu function addeventlisteners() { canvas.addeventlistener( "mousedown", function( e ) { var x = e.offsetx;; var y = e.offsety;; var enemy = null;; for ( var i = 0;; i < enemies.length;; i++ ) { enemy = enemies[ i ];; if ( enemy.alive === true ) { if ( enemy.x <= x && x <= ( enemy.x + enemy.image.width ) && enemy.y <= y && y <= ( enemy.y + enemy.image.height ) ) { enemy.alive = false;; console.log( "Hit" );; } } } });; }

10 Olio-ohjelmointi JavaScriptillä JavaScript on oliopohjainen kieli JavaScript ei kuitenkaan tarjoa Javan kaltaista tukea olio-ohjelmoinnille Ei suoranaisesti tue luokkia, perintää, jne. Voidaan simuloida funktioiden ja prototyyppien avulla luokat, rakentajat, muuttujat, vakiot, metodit, Luokkien määrittelyyn useita eri tapoja Tarjolla myös erillisiä kirjastoja

11 Olio-ohjelmointi JavaScriptillä

12 Olio-ohjelmointi JavaScriptillä

13 Olio-ohjelmointi JavaScriptillä

14 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

15 Debuggaus Firebug Liitännäinen Firefoxiin sekä JavaScript-pohjainen Lite versio kaikkiin selaimiin Web Developer Tools Sisäänrakennettu työkalu Firefoxiin Developer Tools Sisäänrakennettu työkalu Safariin ja Chromeen console.log(... ) metodi Tulostaa viestit konsolille Huomattavasti parempi vaihtoehto kuin vanha alert(... ) metodin käyttäminen à avaa ponnahdusikkunan

16 Testaus JSHint Validointipalvelu JavaScriptin/JSONin syntaksille BrowserStack Maksullinen testauspalvelu web-sovellusten alustariippumattomuuteen, vuorovaikutteinen Browsershots Ilmainen testauspalvelu web-sovellusten alustariippumattomuuteen, vain kuvakaappauksia

17 Animointiteknologiat verkossa

18 CSS Animations W3C:n työluonnos yksinkertaisille animaatioille, esim. efektit 2D- ja 3D-pikseligrafiikkaa CSS:llä Pystyy hyödyntämään tietokoneen GPU:ta Saatavilla korkeamman tason grafiikkakirjastoja Hyvä selain- ja työkalutuki Esimerkkejä:

19 Flash Adoben oma teknologia (ei avoin standardi) monimutkaisille animaatioille, esim. pelit 2D- (ja 3D-)vektorigrafiikkaa ActionScriptillä 3D pystyy hyödyntämään tietokoneen GPU:ta Saatavilla korkeamman tason grafiikkakirjastoja Hyvä selain- ja työkalutuki Vaatii liitännäisen (Adobe Flash Player) asentamisen selaimeen Ei toimi kaikissa mobiililaitteissa Muita vastaavia teknologioita mm. Microsoft Silverlight ja Oracle JavaFX

20 HTML Canvas 2D Context W3C:n suositusehdotus monimutkaisille animaatioille, esim. pelit Uusi versio työluonnosvaiheessa, 2D-pikseligrafiikkaa JavaScriptillä Käyttää HTML5 <canvas> Pystyy hyödyntämään tietokoneen GPU:ta Saatavilla korkeamman tason grafiikkakirjastoja Hyvä selain- ja työkalutuki

21 JavaScript-kirjastot Useita toteutuksia yksinkertaisille animaatioille, esim. efektit jquery, GSAP12,... 2D-pikseligrafiikkaa JavaScriptillä Eivät käytä (tässä yhteydessä) HTML5 <canvas> Pystyy hyödyntämään tietokoneen GPU:ta WebCL:n kautta, c/latest/index.html Erinomainen selain- ja työkalutuki

22 Scalable Vector Graphics (SVG) W3C:n suositus yksinkertaisille animaatioille, esim. efektit 2D-vektorigrafiikkaa XML:llä Pystyy hyödyntämään tietokoneen GPU:ta Saatavilla korkeamman tason grafiikkakirjastoja Hyvä selain- ja työkalutuki Suora DOM-integraatio <body> <svg height="100" width="500"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> Sorry, your browser does not support inline SVG. </svg> </body>

23 Web-based Graphics Library (WebGL) Khronos Group:n spesifikaatio monimutkaisille animaatioille, esim. pelit 3D-pikseligrafiikkaa JavaScriptillä (OpenGL ES 2.0) Käyttää HTML5 <canvas> Pystyy hyödyntämään tietokoneen GPU:ta Saatavilla korkeamman tason grafiikkakirjastoja Hyvä selain- ja työkalutuki Toimii nyt myös IE:ssä

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

25 HTML5 Canvas

26 Yleiskuvaus Käyttötarkoitus Tarjoaa piirtoalueen, johon voi lennossa piirtää 2D- ja 3D-pikseligrafiikkaa sekä kuvia JavaScript API:n avulla. HTML5 <canvas> W3C:n suositusehdotus, elokuu 2013, 0.html#the-canvas-element Selaintuki Chrome 4.0+, Firefox 2.0+, IE 9.0+, Opera 9.0+, Safari 3.1+

27 Selaintuki

28 Piirtoalueen rajapinta Ominaisuudet Metodit Tapahtumat height getcontext(... ) width toblob(... ) todataurl(... )

29 Ominaisuudet height Määrittelee piirtoalueen korkeuden. Alustuksessa määritelty arvo voidaan määritellä myöhemmin uudelleen CSS:n avulla. Vakioarvo: 150 (px) width Määrittelee piirtoalueen leveyden. Alustuksessa määritelty arvo voidaan määritellä myöhemmin uudelleen CSS:n avulla. Vakioarvo: 300 (px)

30 Metodit getcontext( kontekstiid [,... ] ) Palauttaa kontekstiobjektin (tai null), joka tarjoaa JavaScript API:n piirtoalueelle piirtämistä varten. KontekstiID: 2d tai webgl. Ei vakioarvoa toblob( vastakutsu [, tyyppi,... ] ) Palauttaa piirtoalueen kuvan Blob-objektina (tai null). Tyypin vakioarvo: image/png todataurl( [ tyyppi,... ] ) Palauttaa piirtoalueen kuvan data:url:na (tai data:,). Tyypin vakioarvo: image/png

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

32 Koko näyttöalan käyttöönotto 1) HTML määrittelyt 1) CSS määrittelyt

33 Koko näyttöalan käyttöönotto 3) JavaScript määrittelyt

34 HTML Canvas 2D Context

35 Yleiskuvaus Käyttötarkoitus Tarjoaa JavaScript API:n, joka mahdollistaa 2Dpikseligraafikan ja -kuvien lennossa piirtämisen ja animoinnin piirtoalueelle. HTML Canvas 2D Context W3C:n suositusehdotus, elokuu 2014, Selaintuki Chrome 4.0+, Firefox 2.0+, IE 9.0+, Opera 9.0+, Safari 3.1+

36 Toiminnot Muotojen (esim. suorakulmiot ja ympyrät) piirtäminen Tekstien piirtäminen Gradienttien, kuosien ja varjojen piirtäminen Kuvien piirtäminen ja pikselimanipulaatioiden tekeminen Mukaan lukien liitosoperaatioiden tekeminen Piirtoalueen tilojen tallentaminen ja palauttaminen Piirtoaluemuunnosten (esim. siirto ja kierto) tekeminen Piirtoaluekuvan tallentaminen

37 Yleiset ominaisuudet canvas Palauttaa 2D-konteksti API:iin liitetyn piirtoalueen. Ei vakioarvoa

38 Muotojen piirtäminen

39 Toiminnot Ominaisuudet Tyylit suorille viivoille, ääriviivoille, täytöille ja osittain teksteille Esim. väri ja paksuus Metodit Muotojen piirtäminen mukaan lukien ääriviivat ja täytöt Esim. suorat viivat, käyrät, polut, suorakulmiot, monikulmiot ja ympyrät

40 Rajapinta muotojen piirtämiseen Ominaisuudet Metodit Metodit fillstyle rect(... ) beginpath() strokestyle fill() & (... ) closepath() linewidth stroke() & (... ) moveto(... ) linecap fillrect(... ) lineto(... ) linejoin strokerect(... ) clip() & (... ) miterlimit clearrect(... ) ispointinpath(... ) & (... ) arc(... ) scrollpathintoview() & (... ) arcto(... ) drawsystemfocusring(... ) & (... ) quadraticcurveto(... ) drawcustomfocusring(... ) & (... ) beziercurveto(... ) addpath(... ) (Path)

41 Muotojen piirtäminen

42 Ympyröiden kulmat

43 Ympyröiden kulmat

44 Tekstien piirtäminen

45 Toiminnot Ominaisuudet Fontti, tasaus,... Metodit Tekstien piirtäminen mukaan lukien ääriviivat ja täytöt Tekstin ominaisuuksien mittaaminen

46 Rajapinta tekstin piirtämiseen Ominaisuudet Metodit font filltext(... ) textalign stroketext(... ) textbaseline measuretext(... ) width (TextMetrics)

47 Tekstien piirtäminen

48 Gradienttien, kuosien ja varjojen piirtäminen

49 Toiminnot Ominaisuudet Varjojen väri, sumentuvuus ja etäisyys Metodit Erilaisten gradienttien piirtäminen Kuosien piirtäminen Varjojen piirtäminen

50 Rajapinta gradienttien, kuosien ja varjojen piirtämiseen Ominaisuudet Metodit shadowoffsetx createlineargradient(... ) shadowoffsety createradialgradient(... ) shadowblur shadowcolor createpattern(... ) addcolorstop(... ) (CanvasGradient)

51 Gradienttien piirtäminen

52 Kuosien piirtäminen

53 Varjojen piirtäminen

54 Kuvien piirtäminen ja pikselimanipulaatioiden tekeminen

55 Toiminnot Ominaisuudet Kuvaolio ja sen tiedot Esim. leveys ja korkeus Läpinäkyvyys Liitosoperaatiomenetelmä Metodit Kuvien piirtäminen Pikselimanipulaatioiden tekeminen

56 Rajapinta kuvien piirtämiseen ja pikselimanipulaatioiden tekemiseen Ominaisuudet Metodit data (ImageData) createimagedata(... ) & (... ) height (ImageData) getimagedata(... ) width (ImageData) putimagedata(... ) & (... ) globalalpha drawimage(... ) & (... ) & (... ) globalcompositeoperation

57 Kuvamanipulaatioiden tekeminen

58 Pikselimanipulaatioiden tekeminen

59 Pikselitaulukko

60 Liitosoperaatioiden tekeminen

61 Piirtoalueen tilojen tallentaminen ja palauttaminen

62 Toiminnot Metodit Piirtoalueen tilojen tallentaminen ja palauttaminen Käteviä piirtoaluemuunnosten kanssa Käyttävät pinoa (FILO = First In, Last Out) Käsittää muunnokset, leikkausalueen sekä muotojen ja tekstien ominaisuudet (globalalpha, globalcompositeoperation, strokestyle, fillstyle, linewidth, linecap, linejoin, miterlimit, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, font, textalign ja textbaseline)

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

64 Piirtoaluemuunnosten tekeminen

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

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

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

68 Skaalauksien tekeminen

69 Kiertojen tekeminen

70 Siirtojen tekeminen

71 Absoluuttisten (tai suhteellisten) muunnosten tekeminen

72 Animointi

73 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. Timing control for script-based animations W3C:n työluonnos, lokakuu 2013, Selaintuki Chrome 10.0+, Firefox 4.0+, IE 10.0+, Opera 15.0+, Safari 6.0+

74 Väärä tapa animoida setinterval function animate(){ } // update objects // animate at 30 fps setinterval(animate, 1000 / 30);;

75 Väärä tapa animoida settimeout function animate(){ //update objects } // animate at ~30 fps settimeout(animate, 1000 / 30);;

76 Väärä tapa animoida settimeout function animate(){ var starttime = +new Date();; // in milliseconds //update objects var finishtime = +new Date();; // in milliseconds // animate at 30 fps settimeout(animate, (1000 / 30) - (finishtime - starttime));; }

77 Rajapinta animointiin Oikea tapa requestanimationframe( ) cancelanimationframe( ) Metodit

78 requestanimationframe() Selain valitsee parhaan ajan animoinnille Animointi pysähtyy kun ikkuna ei ole aktiivisena Ei mahdollisuutta asettaa aikaa itse Kuitenkin välittää ajan (millisekunteina 1970 luvun alusta) kutsutulle funktiolle (epoch time)

79 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);;

80 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

81 Animaatioesimerkki

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

83 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

84 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

85 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ä)

86 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;;

87 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;; }

88 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

89 Ilmaisia spritejä esim.

90 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);; };; }

91 Sprite kuvien lataaminen // Notify Loader object that an image was loaded succesfully Loader.notifyImageLoad = function() { spritesloaded++;; // When all sprites loaded, notify Loader to continue if (spritesloaded === totalnumberofsprites) { } Loader.allSpritesLoaded();; }

92 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

93 Näppäinkomennot ja liikutus event.preventdefault() estää komentoja valumasta eteenpäin (esim. selaimelle) 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

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

95 Hiirikoordinaattien muuntaminen canvaskoordinaatistoon 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) };; }

96 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

97 Törmäystarkistus seinistä kimpoaminen update: function(){ this.left += this.velocityx;; this.top += this.velocityy;; } // Update X position // 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;; } } if((this.top+this.height)>canvash this.top<0){ this.velocityy = -this.velocityy;; } // Relocate based on bounce // Y-axis collision // 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;;

98 Törmäystarkistus Pyöreä rajaus

99 Törmäystarkistus Pixel perfect 1. Aluksi neliskulmainen bounding box tarkistus 2. Jos törmäys, tarkista pikseleiden tarkkuudella 3. Suhteuta spritekoordinaatit toisiinsa 4. Käy samanaikaisesti pikseleittäin läpi, kunnes jonkin pikselin kohdalla molemmissa alpha>0 5. Jos löytyi -> törmäys

100 Törmäystarkistus EaselJS Pixel Perfect Collision Detection for Bitmaps with Alpha Threshold // Rect Collision var intersection = ndgmr.checkrectcollision(bitmap1,bitmap2);; // intersection is null if no collision, otherwise a {x,y,width,height}-object is returned // Pixel Perfect Collision var collision = ndgmr.checkpixelcollision(bitmap1,bitmap2,alphathreshold);; // true or false // alphathreshold default is 0, set to higher value to ignore collisions with semi transparent pixels

101 Canvas kirjastoja - EaselJS

102 Canvas kirjastoja - KineticJS

103 Canvas kirjastoja Fabric.js

104 Canvas kirjastoja muita.. Comparison of 2D canvas libraries - NhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=

105 Debuggaus Developer Tools (Canvas inspection) Sisäänrakennettu työkalu Chromeen FPS meter in Chrome Developer Tools

106

107 Yhteenveto ja tehtävänanto

108 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 API:n monimutkaisten 2D-pikseligrafiikkaanimaatioiden piirtämiseen piirtoalueelle

109 Tehtävänanto Jatkakaa aiemmissa harjoituksissa tekemiänne kotisivuja Upottakaa Harjoitukset-sivulle HTML5 <canvas> ja toteuttakaa siihen 2D-animaatio HTML Canvas 2D Context JavaScript API:n avulla Tehtävät on rakennettava itse valitun 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!

110

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

112 Prentice Hall 2012 (1st Ed.) # of pages 752 ISBN

113 Linkkejä

114 KIITOS!