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

Selainohjelmointi 2D-animointi verkkosivuilla (JavaScript) (HTML5 Canvas) T-111.1100 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

Demo: HTML5 Pacman http://arandomurl.com/2010/07/25/html5-pacman.html

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

Luennon sisältö Kertausta Animointiteknologiat verkossa HTML5 Canvas HTML Canvas 2D Context Animointi Yhteenveto ja tehtävänanto

Kertausta

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

Tapahtumat DOM Level 3 Events W3C:n työluonnos, syyskuu 2014 Määrittelee tapahtumat, niiden kuuntelun ja etenemisen, jne. http://www.w3.org/tr/dom-level-3-events/ 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ä http://www.w3.org/tr/dom-level-3-events/#event-types-list

Tapahtumarajapinnat ja niiden perintä

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

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 http://www.phpied.com/3-ways-to-define-a-javascript-class/ Tarjolla myös erillisiä kirjastoja

Olio-ohjelmointi JavaScriptillä

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

Debuggaus Firebug Liitännäinen Firefoxiin sekä JavaScript-pohjainen Lite versio kaikkiin selaimiin http://getfirebug.com/ 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

Testaus JSHint Validointipalvelu JavaScriptin/JSONin syntaksille http://www.jshint.com/ BrowserStack Maksullinen testauspalvelu web-sovellusten alustariippumattomuuteen, vuorovaikutteinen http://www.browserstack.com/ Browsershots Ilmainen testauspalvelu web-sovellusten alustariippumattomuuteen, vain kuvakaappauksia http://browsershots.org/

Animointiteknologiat verkossa

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ä: http://www.creativebloq.com/css3/animation-with-css3-712437 http://www.w3.org/tr/css3-animations/

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 http://www.adobe.com/products/flash.html

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

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, https://cvs.khronos.org/svn/repos/registry/trunk/public/webcl/spe c/latest/index.html Erinomainen selain- ja työkalutuki

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> http://www.w3.org/tr/svg/

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ä https://www.khronos.org/registry/webgl/specs/1.0/

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

HTML5 Canvas

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, http://www.w3.org/tr/html5/embedded-content- 0.html#the-canvas-element Selaintuki Chrome 4.0+, Firefox 2.0+, IE 9.0+, Opera 9.0+, Safari 3.1+

Selaintuki http://caniuse.com/#search=canvas

Piirtoalueen rajapinta Ominaisuudet Metodit Tapahtumat height getcontext(... ) width toblob(... ) todataurl(... ) http://www.w3.org/tr/html5/embedded-content-0.html#the-canvas-element

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)

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

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

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

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

HTML Canvas 2D Context

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, http://www.w3.org/tr/2dcontext/ Selaintuki Chrome 4.0+, Firefox 2.0+, IE 9.0+, Opera 9.0+, Safari 3.1+

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

Yleiset ominaisuudet canvas Palauttaa 2D-konteksti API:iin liitetyn piirtoalueen. Ei vakioarvoa http://www.w3schools.com/tags/ref_canvas.asp

Muotojen piirtäminen

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

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) http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Muotojen piirtäminen

Ympyröiden kulmat http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-advanced-drawing/

Tekstien piirtäminen

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

Rajapinta tekstin piirtämiseen Ominaisuudet Metodit font filltext(... ) textalign stroketext(... ) textbaseline measuretext(... ) width (TextMetrics) http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Tekstien piirtäminen

Gradienttien, kuosien ja varjojen piirtäminen

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

Rajapinta gradienttien, kuosien ja varjojen piirtämiseen Ominaisuudet Metodit shadowoffsetx createlineargradient(... ) shadowoffsety createradialgradient(... ) shadowblur shadowcolor createpattern(... ) addcolorstop(... ) (CanvasGradient) http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Gradienttien piirtäminen

Kuosien piirtäminen

Varjojen piirtäminen

Kuvien piirtäminen ja pikselimanipulaatioiden tekeminen

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

Rajapinta kuvien piirtämiseen ja pikselimanipulaatioiden tekemiseen Ominaisuudet Metodit data (ImageData) createimagedata(... ) & (... ) height (ImageData) getimagedata(... ) width (ImageData) putimagedata(... ) & (... ) globalalpha drawimage(... ) & (... ) & (... ) globalcompositeoperation http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Kuvamanipulaatioiden tekeminen

Pikselimanipulaatioiden tekeminen

Pikselitaulukko http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/

Liitosoperaatioiden tekeminen http://html5.komplett.cc/code/chap_canvas/screenshots/compositing_operations.jpg

Piirtoalueen tilojen tallentaminen ja palauttaminen

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)

Rajapinta piirtoalueen tilojen tallentamiseen ja palauttamiseen save() restore() Metodit http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Piirtoaluemuunnosten tekeminen

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

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

Rajapinta piirtoaluemuunnosten tekemiseen scale(... ) rotate(... ) translate(... ) Metodit transform(... ), suhteellinen muunnos edellisiin nähden settransform(... ), absoluuttinen muunnos edellisiin nähden http://www.w3.org/tr/2dcontext/#canvasrenderingcontext2d

Skaalauksien tekeminen

Kiertojen tekeminen

Siirtojen tekeminen

Absoluuttisten (tai suhteellisten) muunnosten tekeminen

Animointi

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, http://www.w3.org/tr/animation-timing/ Selaintuki Chrome 10.0+, Firefox 4.0+, IE 10.0+, Opera 15.0+, Safari 6.0+

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

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

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

Rajapinta animointiin Oikea tapa requestanimationframe( ) cancelanimationframe( ) Metodit http://www.w3.org/tr/animation-timing/

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)

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

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: http://billmill.org/static/canvastutorial/) Animaatiosilmukka

Animaatioesimerkki

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

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

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

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

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

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

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

Ilmaisia spritejä esim. http://content.gpwiki.org/index.php/game_content_resources#sprites

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

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

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 0 1 2 3 4 5 6 7 8 9 10 11

Näppäinkomennot ja liikutus event.preventdefault() estää komentoja valumasta eteenpäin (esim. selaimelle) Lisätietoa:http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html 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

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

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

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 http://wiki.starling-framework.org/tutorials/basic_collision_detection

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

Törmäystarkistus Pyöreä rajaus

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

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 http://indiegamr.com/easeljs-pixel-perfect-collision-detection-for-bitmaps-with-alpha-threshold/ https://github.com/olsn/collision-detection-for-easeljs

Canvas kirjastoja - EaselJS

Canvas kirjastoja - KineticJS

Canvas kirjastoja Fabric.js

Canvas kirjastoja muita.. Comparison of 2D canvas libraries - https://docs.google.com/spreadsheet/ccc?key=0aqj_mvmuz3y8dh NhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 http://www.softr.li/blog/2012/06/20/which-html5-canvas-javascriptlibrary-should-i-use http://medleyweb.com/web-dev/top-7-javascript-canvas-librariesand-tutorials https://github.com/claydotio/canvas-input

Debuggaus Developer Tools (Canvas inspection) Sisäänrakennettu työkalu Chromeen http://www.html5rocks.com/en/tutorials/canvas/inspection/ FPS meter in Chrome Developer Tools

https://developers.google.com/chrome-developer-tools/

Yhteenveto ja tehtävänanto

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

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 9.11.2015 klo 18.00 mennessä Työ tarjoaa erittäin hyvän pohjan projektityölle!

http://www.nihilogic.dk/labs/canvas_sheet/html5_canvas_cheat_sheet.pdf

O Reilly Media 2013 (2nd Ed.) # of pages 750 ISBN 978-1449334987 http://corehtml5canvas.com/

Prentice Hall 2012 (1st Ed.) # of pages 752 ISBN 978-0132761611 http://corehtml5canvas.com/

Linkkejä http://www.html5canvastutorials.com/ http://net.tutsplus.com/sessions/canvas-from-scratch/ http://corehtml5canvas.com/ http://diveintohtml5.info/canvas.html http://billmill.org/static/canvastutorial/ http://www.canvasdemos.com/ http://www.w3schools.com/tags/ref_canvas.asp

KIITOS! Juuso.lappalainen@aalto.fi