Lav spil med html5 Side 12-14
<
04 >
dec 2011
BrĂŚtspil i bladet!
de I T - s t uderendes fagbl ad
side 8-9
stud.prosa.dk
TEMA: Computerspil side 4-14
portrĂŚt af en spildesigner side 4-5
PROSIT – De it-studerendes fagblad • Udgiver: PROSA/STUD, Overgade 54, 5000 Odense C. • Telefon: 33 36 42 73 •E-mail: prosit@prosa.dk • Ansvarshavende: Jesper Kiel Redaktionsudvalg: Simon Shine, Bjarke Walling, Johannes Følsgaard, Chris Darnell, Daniel Neupart Hansen og Selina Frost. • Layout: Palle Skramsø, PROSA • Design: Monsun • Forsidefoto: PROSA • Oplag: 5.500 • Tryk: KLS Grafisk Hus
PROSA/STUD
Ny bestyrelse for PROSA/STUD
Kontakt Har du spørgsmål eller forsl ag til PROSA/STUDs bestyrelse, så skriv til stud@prosa.dk
På generalforsamlingen i PROSA/STUD d. 9. oktober blev der valg en ny bestyrelse med 12 medlemmer. Det blev til otte nye ansigter og fire gamle.
Den nye bestyrelse:
Hovedbestyrelse
Navn
Uddannelse
Uddannelsessted
Ziggie Precht
HA-it
CBS - Copenhagen Business School
Kim Schultz
Datamatiker
Erhvervsakademi Lillebælt, Odense
Philip Grønbech
Datamatiker
Erhvervsakademi Lillebælt, Odense
Søren Farsø
Datatekniker
EUC-Midt, Viborg
Jørgen Rasmussen
Datatekniker
EUC-Syd, Sønderborg
Martin Tästensen
Datatekniker
EUC-Syd, Sønderborg
Søren Sørensen
Digitale medier og design, bachelor
IT-Universitetet
Rune Nielsen
Datamatiker
Københavns Erhvervsakademi
Stani Sztuk
Datamatiker
Københavns Erhvervsakademi
Víðir Valberg Guðmundsson
Datalogi
Københavns Universitet
Christoffer Poulsen
Informatik, cand.scient.
Aalborg Universitet
Daniel Hansen
Informatik, cand.scient.
Aalborg Universitet
Datamatiker
Københavns Erhvervsakademi
Suppleant Martin Thykier
2
På det første bestyrelsesmøde blev der valgt et medlem til PROSAs hovedbestyrelse, hvor PROSAS/STUD på linie med de andre afdelinger har en plads og er med til at træffe de overordnede beslutninger i PROSA. Valgt som STUDs repræsentant i Hovedbestyrelsen blev: Jørgen Rasmussen med Víðir Valberg Guðmundsson og Stani Sztuk som henholdsvis 1. og 2. suppleant
PROSIT
PROSIT takker af Det nummer af PROSIT du nu har i hånden, bliver det sidste. Efter 11 år som PROSA/STUDs selvstændige blad for de it-studerende stopper PROSIT, og indholdet vil fremover blive en del af Prosabladet. Af Jesper Kiel, koordinator for PROSA/STUD
Antallet af medlemmer i PROSA/STUD er de seneste år fordoblet til over 4000, det har givet stigende udgifter til trykning og porto. For at spare har PROSA derfor besluttet at stoppe udgivelsen af PROSIT for til gengæld at sikre, at Prosabladet fortsat vil blive udsendt til medlemmerne af PROSA/STUD. Til gengæld får PROSA/STUD muligheden for at råde over fire sider i Prosabladet fire gange årligt.
30 års historie Det første nummer af PROSIT udkom januar 2001, men inden da havde PROSA udgivet et blad til de it-studerende under navnet PROSA-lytten – med kælenavnet ”Lytten” eller ”Plytten”. Bladet udkom fra 1983 i et oplag på 1000 og et layout i sort/hvid der bar præg af at være skrevet på skrivemaskine, sat op med limstift og trykt på PROSAs egen kontoroffset-maskine. I 1989 bliver PROSAS/STUD dannet som en selvstændig afdeling i PROSA og overtager bladet PROSA-lytten, som så fra 2002 skifter navn til PROSIT og kommer trykt som rigtig avis og endda med billeder i firfarvetryk – på den ene halvdel af siderne vel at mærke.
Flere ansigtsløftninger Efter en retro-periode, hvor bladet igen kun trykkes med sort og rød, får PROSIT nyt look og indhold fra 2004. Bla-
det fortsat trykkes i avisformat, men nu med firfarvetryk på alle 12 sider seks gange årligt. Det bliver nu ikke den sidste makeover, igen i september 2011 skifter PROSIT design og kommer nu i et mere lækkert magasinformat. Men PROSIT med det nye look når kun at udkomme to gange.
Velkommen på forsiden PROSIT har sat en ære i at være de itstuderendes talerør. Som for eksempel da datamatikerne i Ballerup ikke var tilfredse med ledelsen på skolen. Konflikten var gået i hårdknude, og derfor skrev PROSIT naturligvis de it-studerendes historie. Det var dog ikke populært hos ledelsen, som straks efter artiklen indkaldte til stort fællesmøde, hvor de formastelige studerende, som var gået til ”pressen” blev revset. Men PROSA var også inviteret til mødet, så enden blev, at ledelsen lovede at gå i dialog med de studerende om en lang række problemer på skolen.
We’ll meet again… Som udgangspunkt vil PROSITs redaktion, som består af frivillige studerende, fortsætte med at redigere de sider, som vil blive bragt i Prosabladet, men en del af den løbende information vil naturligvis også være at finde på nettet. exit
3
ˇˇ Foto: Filip Lauritzen
PORTRÆT
studieliv
Man skal skabe sit eget job Det er hverken penge eller otte til fire-jobbet, man vinder, hvis man vælger et liv som spildesigner. Det ved Lau Korsgaard alt om. Men det har ikke fået ham til at opgive drømmen. Drømmen om et spilgennembrud, der vil sætte en tyk streg under hans talent.
Af Filip Lauritzen
Man må gå igennem to andre kontorer for at finde frem til Lau Korsgaards lokale. Godt nok siger adressen Pilestræde og i hjertet af København. Men forholdene bærer ikke præg af stor succes, gennembrud eller en skudt papegøje – endnu. For Lau Korsgaard arbejder på sagen med sit firma Knapnok Games. Det sidste halve år har han arbejdet med sit team på et nyt spil til X-boxs
4
Kinect. For som han selv siger: “Vi satser på fysiske sociale spil, fordi vi mener, at spillene kan blive meget bedre.” Men intet er sikkert. Microsoft har kun vist interesse, og snart skal Lau Korsgaard sende dem en prototype af spillet. Foreløbig er der ikke tjent en krone, og udviklingen af spillet har kun kunnet lade sig gøre på grund af et legat på 300.000 kroner fra Nordisk Computerspilprogram. De penge har dækket udgifter til lokale og løn til Lau Korsgaard
og de to andre, der har været med til at udvikle spillet.
CPH Game Collective Alligevel er der sket noget siden 2009, hvor Lau Korsgaard blev færdiguddannet fra Medieteknologi- og spiluddannelsen på ITU. Han har startet sin egen virksomhed, er blevet selvstændig og har vundet priser med Copenhagen Game Collective. Et spilkollektiv, han selv var med til at starte op, da han studerede på ITU. For
med Copenhagen Game Collective får de 10 medlemmer presset hinanden til at udvikle nye ideer og få udgivet spil. “Kollektivet er ikke et firma, men et sted, hvor vi udvikler idéer, som vi kan bringe videre ind i vores firmaer,” fortæller Lau Korsgaard. For eksempel har to medlemmer modtaget priser for deres seneste spil-opfindelse. Et aktivt socialt spil, hvor man spiller med PS3 move-controllers. Kollektivet er et netværk, der har hjulpet Lau Korsgaard og hans venner ud i en umulig branche.
ingen spildesignstillinger Det står sløjt til med spildesignstillinger i Danmark. Derfor så Lau Korsgaard kun én mulighed, da han i 2009 blev færdiguddannet. Han måtte skabe sit eget job. Og i første omgang uden løn. “Først fra januar i år har vi kunnet udbetale løn til os selv. Men det er altid spændende, om vi har penge til løn, når måneden er slut,” siger Lau Korsgaard om firmaets nuværende situation. Det er de sikre opgaver, som internetspil og visuelle spil for museer og lignende, der har givet penge i kassen. Sideløbende med de job har Lau Korsgaard og hans kollegaer kunnet arbejde på drømmeprojekterne. For det er et af de projekter, der én skønne dag skal blive til noget. “For man bliver aldrig millionær på at lave krakspil,” siger Lau Korsgaard med et skævt smil.
Tænk, hvis Microsoft smider millionerne efter os KnapNok Games ved, at det koster kassen og kræver års arbejde at udvikle et ordentligt spil. Lau Korsgaard og hans tre partnerne mangler ikke idéer – men de mangler budgettet: “Den største udfordring er at få finansieret sin idé – man har brug for et stort budget.” Det budget kan Microsoft hjælpe med,
blå bog hvis de forelsker sig i den prototype, som Lau Korsgaard foreløbig har brugt et halvt år af sit liv på. Spillet hedder ”Slowmove Showdown” og er et aktivt socialt spil til X-box. Lau Korsgaard ved, ligesom Microsoft, hvad det kræver, før et sådant spil ender på hylderne i Fona: “Det er et millionkroners budget og flere års arbejde. Derfor skal man lave en prototype, som kan overbevise.” Foreløbig er det et halvt års arbejde, der er på spil. Vender Microsoft tommelfingeren nedad, må Lau Korsgaard og KnapNok Games op på hesten igen. “Vi bliver ved, indtil vi går konkurs.” Det er det svar, man får, når man spørger ind til, hvor længe han vil satse på livet som spildesigner. Indtil videre fortsætter han med at arbejde 10 timer om dagen for en sølle løn. Det hele for at skabe opmærksomhed omkring sig selv, gamekollektivet og firmaet.
1981: Bliver født i Slagelse og lever sine ungdomsår på Vestsjælland. 2001: Får studenterhuen på på Roskilde Amts Gymnasium. 2006: Tre år i Kolding er overstået, og Lau kan skrive ’Humanistisk Informationsvidenskab’ på sit CV. 2008: Uddannelsen fra ITU er klaret på linjen ’Medieteknologi og spil’. 2009: Lau starter CPH Game Collective op med sine studievenner. 2010: Lau starter sit eget firma, KnapNok Games. Lau bor på Amager med sin kæreste, der er uddannet modedesigner. I fritiden rejser Lau rundt til spilkonferencer for at bedømme spil og holde sig opdateret. Laus råd til nye i branchen: ”Der findes job i branchen, men man skal være en af de bedste. Og så skal man vurdere sine egne evner.”
exit
5
Hugo, Hitman og Pixeline Selvom Danmark er et lille land, har vi formået at markere os med spil, der både er blevet internationale hit og sælger godt i nicherne i forskellige genrer af computerspil Af Jakob Schultz
’Hvor skal vi hen, du?’ Sætningen er kendt af de fleste danskere, der hver uge fulgte den lille trold Hugo på direkte tv dengang i Eleva2eren i start-90’erne. Det var dengang, hvor spillet blev styret af en seer via trykknaptelefonen. Forinden havde isbjørnen OsWald gødet isen og banet vej for den populære Hugo, der blev lanceret i 1991 under titlen ”Skærmtrolden Hugo”. Et spil, der ikke var særlig teknisk eller omfattende, men som alligevel satte danske computerspil på verdenskortet. Siden er der kommet utallige ”Hugo”-spil, og den danske spilbranche har udviklet sig massivt.
6
Stor bredde Danmark er, sin størrelse til trods, ikke en ukendt medspiller på spilmarkedet. Det hele begyndte så småt i 1981 med ”Kaptajn Kaper i Kattegat”, men det var først i 1986 med firmaet Kele-Line, der ansatte mange af danske spiltalenter og annoncerede en stribe spil, at der kom noget, der kunne minde om en spilindustri. Det hele var dog mest varm luft, og ”The Vikings” og ”Tiger Mission” var blandt de få spil, der blev udgivet til Commodore 64 og Armstrad, inden firmaet lukkede, og de ansatte rejste til USA og blev ansat i spilfirmaer derovre. Det var nogle af de samme folk, der
vendte hjem til Danmark få år senere og fik sat gang i den danske udvikling igen. Igennem de seneste 25 år har alt fra ”Hugo” og ”Hitman” derfor sat Danmark på det internationale spil-landkort, og netop det brede spektrum af genrer har betydet, at Danmark har opnået mange styrker i spilbranchen. Det er for eksempel læringsspil fra Krea Media som ”Pixeline”, der første gang dukkede op i 1995, og ”Magnus og Myggen”. Spillene, hvor læring til mindre børn er en del af selve spilhistorien, og opgaverne har skaffet de danske spilfirmaer bag international anerkendelse.
Den gode historie Med et kreativt miljø og en evne til at fokusere på de gode historier eller læringsmiljøer har Danmark kunnet udsende flere succesfulde spil – primært til pc. På konsolsiden har Danmark aldrig markeret sig væsentligt, og det er på det område, at der mangler sats-
info-box
Milepæle. Danske spil - tidslinje 1981 - Kaptajn Kaper i Kattegat 1986 - The Vikings og Tiger Mission 1989 - OsWald 1990 - Skærmtrolden Hugo 1990 - Search and Rescue 1995 - Pixeline 1996 - A.M.O.K. og Magnus & Myggen 1997 - Blackout 1999 - Crosstown: Giften
Hitman ændrede alt Der er et spil, der går igen som den helt store succes, nemlig ”Hitman”. Spillene om den klonede og genmanipulere-
Lejemorder satte fokus på Danmark
de Agent 47 udkom til pc i 2000, men blev så stor en succes, at 2’eren ”Silent Assasin” blev solgt til hele verden – og denne gang til alle platforme. ”Der har ikke været andre spil, der har fået samme grad af opmærksomhed eller salgssucces internationalt. IO gjorde det klart, at det er muligt at lave storsælgende gode spil i Danmark, og har på den måde ageret fyrtårn og noget at stræbe efter. Politisk blev der også åbnet øjne for, at det her med spil muligvis kunne være en god ting at investere i rent udannelsesmæssigt,” siger Thomas Berger, der mener, at der sker mange spændende ting på spilfronten i Danmark. ”Der er virkelig grøde i indie-scenen, hvor der i dag både eksperimenteres meget, og som også udmønter sig til nogle gode spil og succeshistorier som ”Limbo” eller ”Max & the Magic Marker”, som viser, at danske spil kan få succes internationalt. Hvis spiludviklerne har nogle gode bærende ideer og har mulighed for at arbejde i et knapt så krævende økonomisk miljø, som de store konsoltitler ofte kræver, for at man får succes, vil det være muligt,” siger Thomas Berger.
Spileventyret for IO Interactive begynder i 1997, hvor Janos Flösser går sammen med Rasmus Kjær, Jesper Vorsholdt Jørgensen, Martin Munk Pollas, Karsten Lemann Hvidberg, Jacob Andersen og David Guldbrandsen. De syv har en ide om at skabe et stort danskudviklet spil og stifter selskabet Reto-Moto. De får 150.000 kroner i startkapital fra Nordisk Film, laver en demo af ”Hitman”, der overbeviser Eidos i England om at skyde flere penge i projektet, og dermed er ”Hitman” født. I 1998 bliver IO Interactive stiftet, og produktionen af det første ”Hitman”-spil, ”Codename 47”, går i gang. Det udkommer i år 2000 og sælger 700.000 eksemplarer. ”Hitman”-navnet er slået fast, og i 2002 udkommer ”Hitman: Silent Assassin”, der sælger tre millioner eksemplarer. I 2004 køber Eidos firmaet IO Interactive, og de syv stiftere deler 103 millioner kroner mellem sig. Siden er der udkommet flere ”Hitman”-spil, ligesom firmaet har udviklet ”Freedom Fighters” og ”Kane & Lynch”. IO Interactive bygger sine spil på Glacier-spilmotoren, der er udviklet af firmaet selv.
<div class=”info_box”>
ning, mener spilekspert og anmelder Thomas Berger. ”I øjeblikket er vi meget små, når det gælder titler til konsol. Det er kun IO, der laver disse titler, og ret beset er IO jo ikke engang dansk længere, men ejet af japanske Square Enix. Så på de store platforme som Ps3 og Xbox halter vi. Det er ikke på butikshylderne, man kan se de danske spil,” siger Thomas Berger, der siden begyndelsen af 1990’erne har skrevet om og anmeldt spil for magasiner som GamePlay, Gear, PC World og PC Player. Han har altid interesseret sig meget for historien i spillene, og netop på det område har de danske spiludviklere altid været et skridt foran. ”Det anderledes blandt danske spilproducenter har i mine øjne altid været tilgangen til mediet, hvor en god historie har betydet meget, og hvor man gerne vil gå en smule skævt til genrekonventioner og klicheer. Til gengæld har det i Danmark i mange år været svært at finde nok kvalificeret arbejdskraft, men det synes jeg, er ved at bedre sig,” siger han.
1999 - Crosstown: Englen 2000 - Globetrotter 2000 - Hitman: Codename 47 2002 - Hitman 2: Silent Assassin 2003 - Freedom Fighters 2003 - Powerbabe 2005 - Total Overdose 2007 - Kane & Lynch Dead Men 2012 - Hitman: Absolution
stud.prosa.dk
exit
7
brætspil
con trolling Julemandens gave-fordelings-mainframe Det er lykkedes dig at hacke dig ind i julemandens gave-fordelings-mainframe, og du kan nu på listig vis få omdirigeret alle julemandens gaver til dig. Desværre opdager du, at du ikke er alene! Så nu er det en kamp om at få programmeret gave-fordelingsmainframet til at levere flest mulige pakker til dig! Bliver det jul i år? Af Johannes Følsgaard
Mål: Den med flest gaver vinder.
Regler: - To spillere, som skiftes til at have tur. - Gaver ligger på cirklerne. - Pile ligger på forbindelserne mellem cirklerne. - Brikkerne kan ikke lægges oven på hinanden. - Pilene ændrer den eksisterende retning for forbindelserne.
En spillers tur: - En ny gave lægges på midterfeltet. Startende med nr. 1, derefter den med lavest nummer, som endnu ikke har været i spil. - Spilleren skal enten lægge eller rykke en pil i sin egen farve. - Spilleren rykker alle gaverne, der er på brættet. De rykkes i numerisk rækkefølge startende med laveste nummer. - En gave kan kun rykkes med pilene. - Den skal rykke, hvis den kan. Hvis ikke bliver den stående. - Hvis en gave kan rykke flere forskellige veje, vælger spilleren, hvilken vej den skal rykke. - Den spiller, der rykker en gave hen til skorstensfeltet, får gaven.
8
Game over: Spillet slutter når alle gaver er kommet i spil, og spillerne bliver enige om at der ikke kan komme flere gaver i skorstenene.
Hint: Hvis det lykkes dig at placere to gaver, så din modstander er tvunget til at rykke en af dem ned på feltet før skorstensfeltet, er du sikret en gave!
9
Glitch:
”Det er aldrig set før”
I det nye online multiplayerspil ”Glitch” er community og samarbejde nøgleord. Spiludviklerne forsøger hele tiden at udvikle spillet efter brugernes behov. Af Christoffer Sandager
Hvis du nogensinde har spekuleret over, hvordan det vil være at leve inde i nogle ældgamle kæmpers fantasier, så har du nu muligheden. Det nye online multiplayerspil Glitch er på mange måder anderledes end de traditionelle massively-multiplayer online spil (MMO). Glitch er ikke-voldeligt og opfordrer brugerne til at bygge, skabe og udvide verden og på den måde udvikle spillet. ”Vi ville lave et sjovt og engagerende MMO, som aldrig var se t før,” siger Kakul Srivastava, der er vicedirektør i produktafdelingen hos Tiny Speck, der står bag spillet. Glitch sender sine brugere billioner af år tilbage i tiden og ind i hovedet på 11 fantasifulde kæmper, for at de kan ud-
10
vikle en optimistisk fremtid, som i dag synes mere og mere usandsynlig. Her skaber brugerne et community, og sammen nyskaber de den kultur, der skal redde verden. Community´et og samarbejde mellem brugerne er derfor altafgørende i Glitch. ”Spillet er designet til at være et grænseløst spil, som både bliver udviklet af os og af brugerne selv. Vi er konstant opmærksom på forbedringer og revaluerer hele tiden gameplayet med brugernes behov in mente,” siger Kakul Srivastava. Glitch er et meget socialt spil. Brugerinteraktioner er det, der gør, at spillet hele tiden vokser og udvikler sig. ”Vi har været overraskede og imponerede af, at en del af spilkulturen går ud på at være søde ved hinanden og vise generøsitet. En Glitch-bruger sagde for nylig, at spillets mål er at lære færdigheder, så man kan udtænke nye og kre-
ative måder at gøre gode ting for hinanden på,” fortæller Kakul Srivastava. I Glitch kan man blandt andet klappe grise, plante træer og give gaver til hinanden. Kakul Srivastava mener, at et godt gameplay skal være engagerende, socialt og sjovt. ”Brugerne skal føle den åbenhed og frihed, der kommer af at blive fjernet fra virkeligheden. Samtidig skal de være i stand til at bringe nogle af de vigtigste elementer fra den virkelige verden ind i spillet.” Ifølge Kakul Srivastava er webbrowseren det eneste sted, man kan bringe sådan en grad af detaljeret, nuanceret og samarbejdende interaktion til live. ”Det sociale aspekt kombineret med den uendelige natur af spillet gør, at det kun ville kunne lade sig gøre ved hjælp af nutidens webteknologier,” siger Kakul Srivastava. exit
studiekonto.dk
Værsgo’: Danmarks bedste Studiekonto Fordi du er medlem af PROSA, kan du få en studiekonto hos Lån & Spar med unikke renter og vilkår. Du får 2,25% i rente på de første 30.000 kr. og 0,25% på resten. Renten på kassekreditten er 5,75% (ÅOP 5,88%). Du får mere ud af at have penge i banken – og hvis du har brug for en kassekredit på op til 50.000 kr., er den billigere i drift end andre steder. Det får du med studiekontoen: Høj rente på dit indestående op til 30.000 kr. Lav rente på kassekreditten. Op til 50.000 kr. Gratis overførsel af penge til andre danske konti, samt betaling af girokort via netbanken Gratis MasterCard og Visa/Dankort – samme pinkode til alle kort Mobilbank Se alle dine fordele og søg online på studiekonto.dk Du kan også sende en mail til prosa@lsb.dk eller ringe på 3378 1974 og booke et møde.
Til din studiekonto kan du vælge en kassekredit på op til 50.000 kr. Debitorrenten er 5,88%, det svarer til ÅOP på 5,88%.(ÅOP er beregnet på samlet kreditbeløb 50.000 kr., 100% udnyttelse og løbetid på 5 år). Alle rentesatser er variable og gældende pr. 15. august 2011. Konkurrencen løber t.o.m. 30.11.2011. Vinderen findes ved uvildig lodtrækning i uge 51 og får direkte besked pr. telefon. Præmiens værdi er 12.299 kr. og kan ikke byttes til kontanter.
V MacBind en ook Søg Air stud o nline iekon konk og delt toen urren ag i cen
HTML5
Lav spil med HTML5 Der er begyndt at dukke en masse spil op baseret på HTML5. Her er en introduktion til, hvordan du kan lave dine egne.
Af Troels Frostholm Mogensen
På det seneste er der dukket en masse spil og game engines op, der er baseret på HTML5. Det lækre ved at lave spil med HTML5 er, at de er umiddelbart tilgængelige i spillerens browser og derfor fungerer (stort set) ens på alle platforme, inklusive mobiler og tablets. Derfor er det et oplagt valg, hvis man gerne vil gøre det let for sine spillere at prøve sin kreation og hverken har tænkt sig at lave en version til hver platform eller betale for en licens til en professionel game engine.
Processen Spiludvikling starter med en idé. Den kan være helt original eller en variation over nogle kendte spil eller genrer. Nu ville det være fristende straks at sætte sig og begynde at kode det. Gør man det, vil der hurtigt dukke ting op, man ikke lige havde overvejet. Det giver lappeløsninger og spildt tid. I stedet kan det anbefales at starte med at lave skitser og teste idéerne løbende med små spilbare prototyper, eksempelvis i form af små brætspil. Når idéen har taget form som noget overskueligt og spilbart, kan det kodes med simpel såkaldt placeholdergrafik, måske bare kasser i forskellige farver. Hvis der er aspekter af spillet, hvor det ikke er lysende klart, hvordan de skal kodes, kan det ofte betale sig at lave en lille, digital prototype af det aspekt. Så kan man lave et lille isoleret program med det. Når man er nået frem til et gameplay, der virker, kan man udskifte placeholdergrafikken med animationer, lyd osv.
Et simpelt spil For at få en idé om, hvor man kan starte med HTML5, så lad os lave et simpelt spil. Det enkleste, jeg kunne komme på, var ”Pong”. Der er en bold. Der er to bander – en i toppen af
12
skærmen og en i bunden. Der er to padler – en i højre side og en i venstre. De to spillere styrer hver en paddel. Hvis bolden passerer en spillers paddel og ryger ud af skærmen bagved, får modspilleren et point. Bolden gives så op igen midt på banen.
Grafik Med HTML5 kom et par nye tags til, som gør grafisk spiludvikling muligt. Det måske vigtigste hedder Canvas og giver en tegneflade, som man kan tegne på ved hjælp af JavaScript. Derudover kom der et Audio-tag, så vi kan få lyd på vores spil. Start med en html-side, med <!doctype html> i toppen, som fortæller browseren, at indholdet er HTML5. Og put en <canvas id=”canvas”> ind på siden. I JavaScript kan du få en drawing context til din Canvas således:
var canvas, context; window.onload = function() { canvas = document.getElementById(”canvas”); context = canvas.getContext(”2d”); }
For at skabe illusionen af bevægelse gentegner vi hele skærmen hurtigere, end øjet kan følge med. Helst et helt tal gange 30 gange i sekundet, fordi det er den typiske frekvens for skærme. Det kan JavaScripts asynkrone timerfunktion, setInterval, hjælpe os med. Indsæt følgende i din window.onload-funktion:
var framesPerSecond = 60; setInterval(render, 1000/framesPerSecod);
Her er render en funktion, som tager sig af at slette indholdet af skærmen og tegne alle spilobjekter. Dem er der tre af, en bold og to padler.
var ballPosition = [100, 100]; var leftPaddle = 50, rightPaddle = 50; function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(ballPosition[0],ballPosition[1],10, 10); context.fillRect(30, leftPaddle, 30, 100); context.fillRect(canvas.width-60, rightPaddle, 30, 100); }
Ja. Bolden er en kasse. Det skyldes udelukkende, at der ikke er en enkelt kommando til at tegne en cirkel, samt den begrænsede spalteplads her. Kig f.eks. på html5canvastutorials.com for alt om at tegne med Canvas.
Animation og kollision Nu vil vi godt have bolden til at flyve rundt efter reglerne i ”Pong”. Vi kunne begynde at skrive videre på vores renderfunktion, men ofte er det en god idé at have rendering og spil-logik i to adskilte loops. Så kan man justere spillets hastighed og framerate (billeder per sekund) uafhængigt af hinanden. Så tilføj rask til window.onload:
var updatesPerSecond = 60; setInterval(update, 1000/updatesPerSecod);
Idéen er at give bolden en hastighed. I hvert update lægges hastigheden til boldens position. Hvis bolden støder ind i top,
13
›
›
bund eller en paddel, vender vi retningen af den komponent af hastigheden, der er vinkelret på forhindringen. Ryger bolden ud i en side, scorer modparten et point. Lad os give venstre spiller nr. 0 og højre nr. 1.
Input Nu bliver spil, der spiller sig selv, ofte kedsommelige i længden. Lad os styre den ene paddel med mus eller touch, afhængig af om vi er på en pc eller mobil/tablet. Tilføj følgende til window.onload:
var ballVelocity = [1, 1]; function update() { //rammer bolden venstre paddel, så send den mod højre if(ballPosition[0] < 60 && ballPosition[0] > 30 && ballPosition[1] < leftPaddle+100 && ballPosition[1] > leftPaddle) { ballVelocity[0] = 1; } //ryger bolden ud til venstre, så scorer højre spiller. if(ballPosition[0] < 0) scoreGoal(1); //læg hastigheden til positionen i begge retninger for(var i= 0; i<2; i++) ballPosition[i] += ballVelocity[i];
context.canvas.onmousemove = move; context.canvas.addEventListener(’touchmove’, move, false);
Derefter kan vi definere funktionen move, som placerer padlen i samme højde som musen:
function move(event) { rightPaddle = event.pageY - canvas.offsetTop - 50; }
Du kan få lidt modstand ved at tilføje følgende til update:
}
Du må selv udfylde hullerne for højre paddel, top, bund og når højre spiller scorer. I scoreGoal kan du give den heldige spiller point, evt. vise dem i en tekstboks, og give bolden op ved at flytte den ind i midten igen.
var sign = function(n) { return n >= 0 ? 1 : -1 } leftPaddle += sign(ballPosition[1] - 50 - leftPaddle)*0.5;
God fornøjelse.
info box
Læs mere Vil du lære mere om Canvas, så kig på html5canvastutorials.com. Eller se på nogle open source game engines på limejs.com (2D) og cubicvr.org (3D). Koden i denne artikel findes på github. com/troelsfrostholm/pong stud.prosa.dk
14
Kulturchok:
”Det var meget uvirkeligt.” Søren Sørensen, som til dagligt studerer på IT-Universitetet, har for nylig været en tur i Japan. Et land, der på mange måder er helt anderledes end Danmark. Af Christoffer Sandager
”Byen var væk. Der var ikke noget tilbage. Den var bare skyllet væk. Fuldstændig smadret.”
Tsunami 26-årige Søren Sørensen fortæller om sin rejse til Japan i sommerferien, hvor han blandt andet besøgte byen Sendai, der i marts 2011 blev ramt af en tsunami. ”Det var meget uvirkeligt pludselig at stå der. Det så ud, som om der var faldet en bombe. Man kunne tydeligt se, at der var ryddet meget op, men det var stadigvæk ren og skær død og ødelæggelse.” Søren Sørensen rejste sammen med 12 kammerater. Til daglig læser han digitale medier og design på IT-Universitetet, hvor han arbejder med interaktionsdesign og sociale medier. Men i august 2011 rejste han rundt i hele Japan for
at lære om en anden kultur. ”Jeg har altid haft en stor interesse for Japan. Men det er et land, du kan læse dig til døde om. Du forstår det ikke, før du kommer derned, fordi det er så anderledes.” Søren Sørensen fortæller, at vi har mange fordomme om japanere. Fordomme, som ikke holder i virkeligheden. Deres forhold til teknologi og den måde, de bruger den på, er meget anderledes fra os. ”Der er faktisk ikke særlig mange mennesker i Japan, der kan finde ud af at bruge en computer. Til gengæld foregår de flestes liv på deres telefon.”
Han oplevede, at mange ting er stik modsat af, hvad de er i Danmark. Og det var både med hensyn til det gode og det dårlige.
Papirbaseret ”Hvis man skal have ordnet noget i det offentlige, så er alt papirbaseret. Det er ikke ligesom i Danmark, hvor man bare kan gå ind på en hjemmeside og klikke fire gange, og så er det ordnet. Man skal hele bureaukratiet igennem,” fortæller Søren Sørensen, der dog ser op til japa-
nernes dybere autoritetstro og respekt for hinanden. Således er der stort set ingen hærværk eller kriminalitet i de japanske gader. ”Du kan lægge din pung på en bænk midt i en park. Når du kommer tilbage tre timer senere, er der ingen, der har rørt den. Og hvis der endelig er, så har de afleveret den på den nærmeste politistation.” Søren Sørensen er lige nu på sit 5. semester. Når han er færdig med bacheloren, kunne han godt tænke sig at tage sin kandidat i Japan. Han mener, den japanske kultur kan give ham en dybere forståelse af samfundet. ”Skolestrukturen i Japan minder næsten om et militært akademi. Det er ikke accepteret at være anderledes. Og det er jo nærmest den diametrale modsætning til Danmark, hvor alle prøver at være anderledes.” Turen til Japan var Søren Sørensens første. Men absolut ikke den sidste. Klarest i erindringen står turen til Sendai. ”Man oplever jo normalt kun naturkatastrofer i dokumentarfilm eller i nyhederne. Jeg tror stadig ikke, den er feset helt ind endnu.” exit
15
SEXBREVKASSEn Skriv til Annette ernst tejlgaard på prosit@prosa.dk
? Jag har träffat en riktigt trevlig flicka på internet, tror jag. Saken är, att vi har bara skrivit till varandra än så länge, och så mycket som jag vill tro det, så vet jag faktiskt inte, om hon verkligen är en flicka.
! Vi är inte riktigt redo att träffas än, så finns det något sätt, som jag kan få reda på det? Varje gång jag tar upp frågan, talar hon om något annat. Basshunter
Fire HURTIGE Webudvikler, 46 år og ninja.JS Alle, der har skrevet en lille smule JavaScript, ved, at sproget er helt ude i hampen – på velvalgte områder selvfølgelig. Se, om du kan regne de her ud, og husk at refaktorisere din kodestil til at benytte principperne, når du vil imponere dine venner. 1. Hvad skal tauto sættes til for at gøre følgende udtryk sandt? tauto = = !tauto && tauto = = tauto a) null b) [] c) NaN d) false 2. Hvad skal kontra sættes til for at gøre følgende udtryk falsk? kontra = = !kontra || kontra = = kontra a) null b) [] c) NaN d) false 3. Hvilken værdi for x gør følgende udtryk sandt? new Date(x) = = new Date(”2011-12-01”) a) 1322694000000 b) ”2011-12-01” c) NaN d) ingen af delene 4. Hvilken værdi har y efter evaluering af y = 9999999999999999 ? a) 9999999999999999 b) -9999999999999999 c) 10000000000000000 d) 1874919423 Åbn din foretrukne JavaScript-konsol i din foretrukne webbrowser og se, om du gættede rigtigt. Hvis du gættede alle rigtigt, så er du værdig til at besøge websiden wtfjs.com. Skriv til prosit@prosa.dk, hvis du har en god idé til en lille skør programmeringsopgave på bagsiden.
Kære Basshunter Det er straks en af de svære situationer, du er havnet i. Et gammelt ordsprog siger, at internettet er stedet, hvor mænd er rigtige mænd, kvinder er rigtige mænd, og små børn er FBIagenter. Det er derfor rimeligt at antage, at hun ikke er pige, men med den indstilling bliver det jo aldrig til noget med onlinedating. Prøv derfor at vikle nogle subtile, men ledende spørgsmål ind i samtalen, såsom: Hader du ikke også at vågne med morgenerektion? Teknologien kan også komme dig til undsætning. Prøv for eksempel at besøge GenderAnalyzer.com, der kan fortælle med nogen overbevisning, om afsenderen er mand eller kvinde, alene på basis af statistik. Men jeg ville nok starte et helt andet sted, for hvis der er én ting, som er lige så sandsynligt, som at du er i gang med at snakke med en mand, så er det, at du er i gang med at snakke med en robot. Her er traditionel kønsforskning en tabt sag. Mit endelige råd er: Tag det roligt. Måske er hun i virkeligheden en 45-årig mand, der hedder Bjarne, og måske er hun en robot. I begge tilfælde kan du sige til dig selv, at du har haft en vild ungdom. Kærlig hilsen Annette