game based learning - multimediatekniker för webbaserade spel
DESCRIPTION
Slides from the course Game Based Learning, lecture held at The Department of Computer and Systems Sciences at Stockholm University 2013TRANSCRIPT
![Page 1: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/1.jpg)
Game Based Learning
Multimediatekniker för webbaserade spel
![Page 2: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/2.jpg)
Simon [email protected]
![Page 3: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/3.jpg)
● Vilka tekniker som finns, hur de skiljer sig åt och hur vi kan använda dem
Upplägget för föreläsningen
Tips:● Koncentrera er på “det stora hela”
● Praktisk
● Idéer och uppslag för era projekt
● Behöver inte använda er av alla tekniker
● Experimentera med exemplena efter föreläsningen (ligger uppe i iLearn)
![Page 4: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/4.jpg)
Ett spel som körs i webbläsaren
Webbaserade spel?
● Vilken genre som helst
● Singleplayer / multiplayer
● Olika enheter och operativsystem
Exempel på webbaserade spel:
● Facebook-spel
![Page 5: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/5.jpg)
HTML5 vs Flash (Silverlight, Java mm.)
Ingen användning av Flash i denna kurs!
För att...
● HTML5 är hett och “inne”.
● Finns inte stöd för Flash på alla plattformar.
● Behöver inte installera någon utöver webbläsaren.
● JavaScript och ActionScript bygger på ECMAScript
● Inga riktigt bra WYSIWYG-program till HTML5 än för att skapa spel och interaktivitet
![Page 6: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/6.jpg)
● Använd en bra webbläsare och dess senaste version!
Rekommenderar Google Chrome
HTML5
● Levande standard som hela tiden utvecklas
● All kod tolkas och körs av webbläsaren
![Page 7: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/7.jpg)
Fördelar med att bygga spel i HTML5
● Processen är relativt snabb
● Kan köras på alla plattformar
● Lätt att exportera och publicera
● Möjligheterna förbättras hela tiden
● Kan ta tillvara på datorns GPU (Graphics Processing Unit)
![Page 8: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/8.jpg)
… och nackdelarna
● Går inte att göra “superavancerade” saker än
● Går inte att gömma koden
● Måste köras i webbläsaren
● Finns inte så många spelmotorer eller hjälpmedel än
![Page 9: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/9.jpg)
HTML5 exempel
Rome - 3 Dreams Of Black: http://www.ro.me/
HexGL: http://hexgl.bkcore.com/
CSS3 Memory: http://media.miekd.com/css3memory/
Sinuous: http://www.sinuousgame.com/
Convergence: http://www.currantcat.com/convergence/
Sumon: http://www.ludei.com/sumon
Angry Birds: http://chrome.angrybirds.com/
![Page 10: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/10.jpg)
Tekniker vi skall gå igenom
1. <img>-taggen för att visa bilder
2. CSS3
3. SVG
4. Video och Ljud med HTML5
5. <canvas>-taggen
6. Sammanfattning
!! Alla exempel är anpassade för Google Chrome !!
![Page 11: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/11.jpg)
<img>-taggen för att visa bilder
Använd JPG för fotografier och PNG för allt annat.
JPG
PNG
GIF
* Bra för fotografier
* lossy-komprimering
* Bör för illustrationer och text.
* Har alpha-kanal (går att skapa transparens)
* lossless-komprimering
* Relativt dålig kvalitet* Går att skapa animationer
![Page 12: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/12.jpg)
<img>-taggen för att visa bilder
<body>
...
<img src="" alt="">
...
</body>
<img src="chrome-logo.jpg" alt="Google Chrome-logo">
<img src="img/browsers/chrome-logo.jpg" alt="...">
![Page 13: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/13.jpg)
CSS3
Version 3 introducerades med HTML5
Rundade hörn Skuggor
Filter (à la Instagram) Animationer
Olika stilar för olika skärmstorlekar
Opacitet
Gradient Transformera
![Page 14: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/14.jpg)
CSS3
Tidigare utfördes animationer och dynamisk styling med JavaScript (& Flash)
Sträva efter att:
HTML - struktur av element
CSS - styling och layout
JavaScript - data och logik
![Page 15: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/15.jpg)
CSS3
● Under kontinuerlig utveckling
-webkit- Google Chrome SafariOpera
-moz- Mozilla Firefox
-ms- Internet Expolorer
● Olika implementationer på olika webbläsare
![Page 16: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/16.jpg)
CSS3
CSS Prefixes
http://caniuse.com
-webkit-transform: rotate( 35deg )
-moz-transform: rotate( 35deg )
-ms-transform: rotate( 35deg )
![Page 17: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/17.jpg)
CSS3
Fördelar Nackdelar
Bra om CSS:en gör allt som har
med styling att göra
Behöva inte använda bilder för att skapa tex. skuggor och rundade hörn
Tar hjälp av datorns GPU
Svårt att göra “avancerade” saker
Svårt att organisera koden på ett bra sätt
Går inte att styla innehåll i canvas-elementet
![Page 18: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/18.jpg)
SVG (Scalable Vector Graphics)
● Vektorgrafik (skalbar)
● Illustrationerna skapas med hjälp av XML-kod
● Ändra illustrationerna dynamiska (XML eller JavaScript)
● Skriva XML-kod direkt i HTML-dokumentet
![Page 19: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/19.jpg)
SVG (Scalable Vector Graphics)
<svg width="500" height="150">
<rect x="0" y="0" width="500" height="200" fill="salmon" />
<ellipse cx="250" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="250" cy="70" rx="190" ry="20" fill="lime" />
<ellipse cx="250" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
![Page 20: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/20.jpg)
SVG (Scalable Vector Graphics)
Fördelar Nackdelar
Ser bra ut i alla storlekar
Går att animera
Går att skapa bara genom att skriva kod
Fungerar inte för fotografier
Svårt att bygga avancerad interaktivitet / spel
![Page 21: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/21.jpg)
Video med HTML5
Video = Flash
De vanligaste videoformaten
.mp4 .ogg/.ogv .webm
<video>-taggen
Olika film-format i olika webbläsare
![Page 22: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/22.jpg)
<video>
<source src="movie.mp4" type="video/mp4">
</video>
<video controls loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Video med HTML5
![Page 23: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/23.jpg)
Ljud med HTML5
Ljud = Flash
De vanligaste videoformaten
.mp3 .ogg .wav
<audio>-taggen
Olika film-format i olika webbläsare
![Page 24: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/24.jpg)
<audio>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<audio controls loop>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
</audio>
Ljud med HTML5
![Page 25: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/25.jpg)
<script>
...
var sound = new Audio("gun.mp3");
sound.play();
...
</script>
Ljud med HTML5
![Page 26: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/26.jpg)
Web Audio
Skapa och manipulera ljud direkt i webbläsaren
http://labs.dinahmoe.com/plink/
http://www.jamwithchrome.com/
Mer info här:http://www.html5rocks.com/en/tutorials/webaudio/intro/
http://creativejs.com/resources/web-audio-api-getting-started/
![Page 27: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/27.jpg)
<canvas>-taggen
● Ge utvecklare ett sätt att skapa avancerad grafik utan att behöva förlita sig på Flash (eller andra plug-ins).
<canvas id="myCanvas" width="300" height="300"></canvas>
● En rityta vars innehåll inte påverkas av andra HTML-taggar.
● Innehållet styrs av JavaScript.
![Page 28: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/28.jpg)
<canvas>-taggen
<script>
...
...
</script>
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 150, 200);
![Page 29: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/29.jpg)
X
Y
(0, 0)
(10, 10)
(2, 5)
![Page 30: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/30.jpg)
0 1 2 3 4 5 6 7 8 9 10 11 ... …
Pixel Pixel Pixel
i + 0 i + 1 i + 2 i + 3
i = 0
i + 0 i + 1 i + 2 i + 3
i = 8i = 4
i + 0 i + 1 i + 2 i + 3
0röd
1grön
2blå
3alfa
4röd
5grön
6blå
7alfa
8röd
9grön
10blå
11alfa
0-255 0-255 0-255 osv...
![Page 31: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/31.jpg)
Definiera variabel för bollens X-värde och sätter den till noll.
function updateCanvas(){
}
1. Rensa canvasen
2. Rita ut bakgrunden
4. Rita ut bollen med det nya X-värdet
3. Inkrementera bollens X-värde
(nollställ värdet om bollen är utanför canvasen)
Kalla på updateCanvas-funktionen 60 ggr per sekund
![Page 32: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/32.jpg)
Bildfil
<canvas>
ctx.drawImage(...)
ctx.clearRect(...)
frameIndex += 1
Vänta 200 ms
![Page 33: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/33.jpg)
Bildfil
<canvas>
ctx.drawImage(...)
ctx.clearRect(...)
frameIndex += 1
Vänta 200 ms
![Page 34: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/34.jpg)
WebGL med <canvas>
Skapa interaktiv 3D-grafik i webbläsaren utan användning av någon plug-in
Epic Citadel: http://www.unrealengine.com/html5/
Mer info här:http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/
http://www.html5rocks.com/en/tutorials/webgl/webgl_orthographic_3d/
![Page 35: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/35.jpg)
<canvas>-taggen
Fördelar Nackdelar
Kraftfullt API som låter oss rita upp figurer, läsa in bilder mm.
Möjlighet att manipulera enskilda pixlar
Tar hjälp av datorns GPU
Grafiken är inte skalbar per automatik
Man måste uppfinna hjulet varje gång
Inte bra på att rendera text
![Page 36: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/36.jpg)
Sammanfattning<img>
CSS3
SVG
<audio> & <video>
<canvas>
Enklaste sättet att visa statiska bilder.
Styla & layouta HTML-taggar. Nu även möjligt att skapa animationer,
filter och 3D-effekter.
Vektorgrafik i webbläsaren. Skapas genom XML-språk och går att
ändra dynamiskt med hjälp av CSS / JavaScript
Det nya sättet att visa film och spela upp ljud. Ger utvecklaren full
kontroll över uppspelningen hur ljuden/filmerna.
Skapar en “rityta” där det är möjligt, med hjälp av JavaScript, att rita
och animera komplex grafik som tex. spel.
![Page 37: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/37.jpg)
Två olika sätt att bygga spel i HTML5
Sammanfattning
DOM-element (klassisk hemside-uppbyggnad)
<canvas>-taggen
HTML-element (<img>, <div> mm.)CSS-stylingJavaScript (jQuery)
JavaScript för att rita upp objekt, spela upp ljud mm.
Går det att utföra med hjälp av DOM-element så gör det, använd <canvas>-taggen i annat fall.
![Page 38: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/38.jpg)
Tips
Experimentera med exemplen från denna föreläsning.
Använd en bra webbläsare (Google Chrome).
Skicka in era förslag på projekt i iLearn2, Presentera & diskutera projektidén. Deadline är 2013-10-04.
Börja med labb 3 & 5 så fort som möjligt. Deadline är 2013-11-02.
Ställ en massa frågor på handledningen eller i forumet i iLearn2
![Page 39: Game Based Learning - Multimediatekniker för webbaserade spel](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a6751d8b42a484a8b4731/html5/thumbnails/39.jpg)
Frågor?!