game based learning - multimediatekniker för webbaserade spel

Game Based Learning

Multimediatekniker för webbaserade spel

Simon [email protected]

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

http://www.ro.me/

http://hexgl.bkcore.com/

http://media.miekd.com/css3memory/

http://www.sinuousgame.com/

http://www.currantcat.com/convergence/

http://www.ludei.com/sumon

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="" alt="">

...

</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 SafariOpera

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

http://caniuse.com/

http://caniuse.com/

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="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

Ljud med HTML5

Ljud = Flash

De vanligaste videoformaten

.mp3 .ogg .wav

<audio>-taggen

Olika film-format i olika webbläsare

<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

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/





http://www.html5rocks.com/en/tutorials/webaudio/intro/

http://www.html5rocks.com/en/tutorials/webaudio/intro/



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

X

Y

(0, 0)

(10, 10)

(2, 5)

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

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/

http://www.unrealengine.com/html5/

http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/

http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/



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

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

Frågor?!

game based learning - multimediatekniker för webbaserade spel

Education