�ݺ�ߣ

Game Based Learning
Multimediatekniker för webbaserade spel

Simon Johansson
mail@simon-johansson.com

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

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

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

● 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

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)

… 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

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/

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

<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

<img>-taggen för att visa bilder
<body>
...
<img src=/slideshow/f-1-169/36718005/"" alt=/slideshow/f-1-169/36718005/"">
...
</body>
<img src="chrome-logo.jpg" alt="Google Chrome-logo">
<img src="img/browsers/chrome-logo.jpg" alt="...">

CSS3
Version 3 introducerades med HTML5
Rundade hörn Skuggor
Filter (à la Instagram) Animationer
Olika stilar för olika
skärmstorlekar
Opacitet
Gradient Transformera

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

CSS3
● Under kontinuerlig utveckling
-webkit- Google Chrome
Safari
Opera
-moz- Mozilla Firefox
-ms- Internet Expolorer
● Olika implementationer på olika webbläsare

CSS3
CSS Prefixes
http://caniuse.com
-webkit-transform: rotate( 35deg )
-moz-transform: rotate( 35deg )
-ms-transform: rotate( 35deg )

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

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

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

Video med HTML5
Video = Flash
De vanligaste videoformaten
.mp4 .ogg/.ogv .webm
<video>-taggen
Olika film-format i olika webbläsare

<video>
<source src=/slideshow/f-1-169/36718005/"movie.mp4" type="video/mp4">
</video>
<video controls loop>
<source src=/slideshow/f-1-169/36718005/"movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Video med HTML5

Ljud med HTML5
Ljud = Flash
De vanligaste videoformaten
.mp3 .ogg .wav
<audio>-taggen
Olika film-format i olika webbläsare

<audio>
<source src=/slideshow/f-1-169/36718005/"sound.mp3" type="audio/mpeg">
</audio>
<audio controls loop>
<source src=/slideshow/f-1-169/36718005/"sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
</audio>
Ljud med HTML5

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/

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

<canvas>-taggen
<script>
...
...
</script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 150, 200);

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
0
röd
1
grön
2
blå
3
alfa
4
röd
5
grön
6
blå
7
alfa
8
röd
9
grön
10
blå
11
alfa
0-255 0-255 0-255 osv...

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

Bildfil
<canvas>
ctx.drawImage(...)
ctx.clearRect(...)
frameIndex += 1
Vänta 200 ms

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/

<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

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.

Två olika sätt att bygga spel i HTML5
Sammanfattning
DOM-element
(klassisk hemside-uppbyggnad)
<canvas>-taggen
HTML-element (<img>, <div> mm.)
CSS-styling
JavaScript (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.

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

�ݺ�ߣ

Game Based Learning - Multimediatekniker för webbaserade spel

More Related Content

Game Based Learning - Multimediatekniker för webbaserade spel