TkJ.se – Teknik, antivirus & säkerhet, Windows och datorer

Prenumerera gratis!

Utkommer en gång i veckan! Mer information.


Meny 

Guider

Windows 8 för nybörjare

Ad: Antivirus

Norton Det mest populära säkerhetspaketet. Komplett, enkelt att använda, resurssnålt - rekommenderas!
Pris: 799 kr.

Panda Kraftfullt säkerhetspaket, tar väldigt lite minne i datorn.
Pris: 539 kr.

ESET Smart Security Väldigt resurssnålt och mycket omtyckt säkerhetspaket, också känt som NOD32.
Pris: 594 kr.

Kaspersky Bra val för alla användare, massor av inställningar och utmärkt skydd.
Pris: 589 kr.

F-Secure Stabilt och tystlåtet skydd mot allt, håller sig bakgrunden, rekommenderas! Prova gratis 30 dar!
Pris: 645 kr.

McAfee Lättskött och snabba uppdateringar för effektivt skydd.
Pris: 324 kr.

Bullguard Väldigt snabbt och resurssnålt, lätt att använda. Testa gratis 60 dagar!
Pris: 299 kr.

Gratisprogram

Här hittar du mängder av gratisprogram för Windows att ladda ner lagligt!

Feedburner

TkJ RSS

Follow on Bloglovin

Annons

Contre Jour, så byggde man coolt spel i HTML5 [Sponsor]

Skribent: Tommy k Johansson
Publicerad: 2012-11-18, 17:13
Respons: Skriv en kommentar!

Contre Jour i Internet Explorer 10Contre Jour är ursprungligen ett spel för iOS som fått riktigt höga betyg på grund av den speciella designen – både grafik och ljud men även speldesignen. Contre Jour är en slags blandning mellan plattformsspel och pussel. Som utvecklaren själv beskriver det, handlar spelmotorn helt och hållet om matematik, vilket bland annat märks tydligt på de realistiska rörelsemönstren.

Microsoft har tillsammans med spelets utvecklare Max Hryniv och företaget Clarity Consulting portat Contre Jour till webb och Internet Explorer 10. Eftersom man arbetar med webbstandarder fungerar det även i andra webbläsare. För oss tekniskt intresserade är det klart imponerande att se vad man lyckats göra bara med hjälp av HTML5 och Javascript.

Spelet Contre Jour

I Contre Jour styr du en varelse genom att utnyttja bland annat gravitation, för att ta dig igenom banorna, plocka upp de blåa poängen och slutligen klara banan genom att styra in i den stora blå portalen. Du drar i markytan för att skapa backar, för att bestämma hur varelsen ska rulla. Det finns också andra saker, som en slags levande lianer du använder för att svinga dig mellan olika plattformar.

Contre Jour i webb-version

Det som gör Contre Jour så annorlunda är att designen är så gott som helt svartvit. Bortsett från vissa objekt, är allting i svart, vitt och gråskalor. Även ljudet kallas för svartvitt – musiken består av ett enkelt stämningsfullt piano.

För att styra spelet använder du musen, alternativt din pekskärm om du till exempel spelar på en Windows 8-dator med Internet Explorer 10. Nya IE10 har nämligen ett avancerat stöd för pekskärmar, något jag skrev om när Internet Explorer 10 Preview släpptes för Windows 7.

Bakom kulisserna – så byggde man Contre Jour

Idag jobbar Microsoft aktivt med att få utvecklare att ta fram applikationer baserade på webbstandarder. Appar för Windows 8 utgår ofta från webbstandarder och det är många utvecklare som är överens om att HTML5 och Javascript är framtidens plattform.

HTML5Genom att utveckla med dessa tekniker blir applikationer inte plattformsberoende. Det enda som krävs är att du har en webbläsare som har stöd för standarder. Utöver det spelar det ingen roll om du använder en dator, surfplatta, TV eller smartphone. IE10 är extra intressant på grund av det speciella stödet för multitouch på pekskärmar.

Målet med att ta fram en webbversion av Contre Jour är att visa hur Internet Explorer 10 gör det möjligt att bygga avancerade spel i HTML5 och Javascript. Det största jobbet med portningen var att gå från Objective-C till Javascript. Koden för originalspelet till iOS, är ojektorienterad på ett sätt som i Javascript lämnar en del att önska.

På sajten Behind the Scenes Contre Jour går man igenom de olika metoder som använts för att bygga spelet. Man listar ett antal tekniker:

Javascript

Originalversionen av Contre Jour utvecklades som sagt i objektorienterad C för iOS. För att göra om det till webbstandarder behövde man porta koden till Javascript. Jämförelsevis har Javascript en del begränsningar, så det är imponerande att se vad man faktiskt kan göra.

E av de svåraste detaljerna är att bygga kod som kräver så lite prestanda som möjligt. Ditt spel ska gå att köra i webbläsare på alla plattformar, men det ska inte gå långsammare om användaren saknar kraftig processor och omfattande internminne. Det lyckades tack vare John Resigs ”Simple Javascript Inheritance”.

Canvas

Canvas och HTML5För att hålla uppe prestandan använder man sig av flera så kallade canvas i HTML5. Det är en metod för att dela upp grafik i olika områden, som kan placeras ovanpå varandra. Genom att använda flera canvas räcker det att uppdatera grafiken på de områden där rörelser sker, vilket i praktiken ger bättre prestanda. Alternativet att kontinuerligt rita om hela bilden, och det hade gjort appen väldigt slö.

Du sparar en hel del datorkraft på att placera bakgrunden på en annan canvas än aktiva objekt i spelet. Syftet är att man bara uppdaterar de bitar av spelytan där förändringar faktiskt sker. Ta en titt på Canvas Pad för att förstå hur canvas i HTML5 fungerar.

CSS3

I Contre Jour utnyttjar man CSS-animationer och -transitions för en del av den icke spelbara grafiken; alltså menyer, övergångar mellan banor och så vidare. Transitions (övergångseffekter) används för att enkel rendera en effekt när du ändrar utseendet på ett objekt på webbsidan. På sidan Hands on: transitions kan du testa.

CSS3 Transitions

Om du till exempel ska ändra storleken på en ruta när användare drar muspekaren över den, kan du använda en övergångseffekt som gör att rutan skalas till den nya storleken. Effekten kan bli snygg utan att man behöver använda sig av Flash eller andra tillägg. Med CSS3-animationer kan du göra rätt avancerade lösningar för att animera objekt från ett läge till ett annat.

Man använde även tekniken CSS3 Media Queries för att kunna skala webbapplikationen till att passa olika skärmstorlekar. Det är väsentligt när du vill att din webbapp ska fungera fint på både vanliga datorer och smartphones. Läs mer om CSS3 Media Queries.

Multi-touch

Eftersom vi använder surfplattor och smartphones för att köra webbapplikationer behöver man kunna läsa av pekskärmen. Internet Explorer 10 har inbyggt stöd för att göra det här enkelt, och på Behind the Scenes-sajten demonstrerar man hur Javascript-koden kan se ut för att hantera det här.

Mer om utveckling

Microsoft har tidigare haft samarbeten med andra spelutvecklare för att ta fram versioner baserade på webbstandarder. Ett exempel är Atari Arcade, där du hittar flera klassiska Atari-spel portade till webb.

Atari Arcade: Missile Command

Även för Atari Arcade la man upp en sajt för utvecklare som vill lära sig mer om teknikerna. Du kan börja med att besöka Atari Arcade Developer Center. Här hittar du videos, artiklar och länkar. Vill du bygga egna Arcade-spel kan du använda dig av Atari Arcade SDK, som går under öppen källkod och kan laddas ner från Github.

Ytterligare ett paket som är värt att ta en titt på, finns hos Contre Jours sajt för utvecklare; HTML5 Game Kit. Det går också att ladda ner gratis för dig som vill komma igång med att utveckla spel i HTML5.

Vill du ha mer, ta en titt på webbplatsen Internet Explorer Test Drive. Här har Microsoft samlat ihop en rad exempel på olika typer av webbapplikationer. Microsoft har mycket information för dig som vill komma igång med att utveckla i HTML5, Javascript och CSS3. En bra start är Internet Explorer 10 Guide for Developers.

Gillade du artikeln? Dela den gärna – eller skriv en kommentar!

Detta är ett sponsrat blogginlägg.
För mer information om sponsrade bloggposter läs här.
 

Om TkJ.se

TkJ.se är en av Sveriges ledande bloggar för entusiaster om datorer och Internet. Den startades 2007 av Tommy k Johansson, som arbetat som IT-skribent sedan 1996. Utgivare: TkJ Media AB.

Sponsorer

Mina e-böcker

Läs min nya e-bok Skriva för Bloggar! Lär dig hur du hittar nya uppslag varje dag, skriver briljanta bloggposter, skapar ditt personliga språk, engagerar dina läsare och lockar nya besökare och behåller dem på sajten.
Läs mer om e-boken!
Lär dig hur du tjänar pengar på din blogg. E-boken riktar sig till såväl nybörjare som bloggproffs. 65 sidor indelade i 12 kapitel som går igenom många olika sätt att börja tjäna pengar på din blogg - antingen som en liten extrainkomst eller som heltidsjobb.
Läs mer om e-boken!

Följ oss på Facebook

Arkiv

oktober 2014
m ti o to f l s
« Sep    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Ad: Affiliatenätverk

Commission Junction Världens största affiliate-företag! Bra system, lätt att tjäna pengar!

Affelix Svenskt affiliatenätverk som dels har mycket lead-kampanjer men även säljer CPM.

EuroAds Affiliatenätverk med bland annat program inom hälsa.

Affiliator Affiliatenätverk: du får 70 kr direkt!

Double Tjäna pengar på din hemsida!

Tradedoubler Sveriges största affiliatenätverk

Zanox Tjäna pengar genom att länka till företag

Ad: Bra webbhotell

City Network 1000 GB trafik! Förberett för WordPress, lätt att komma igång med egen domän, rekommenderas!

FS-Data Mycket kompetent och stabilt webbhotell för professionella användare. Har funnits sedan 1997!

Surftown Storfavorit bland billiga webbhotell

Loopia Stort webbhotell, fritt antal domäner, installera WordPress med ett klick

Naturhotellet Sveriges miljövänliga webbhotell

iPhone-applikationer

Letar du efter tuffa iPhone-applikationer kan du hitta dem här! iPhone-apps ». Missa inte heller gratis iPhone-bakgrunder.

iPad-appar

Vill du veta mer om Apple iPad, läs här:

Android -applikationer

Det finns gott om Android-applikationer, och här finns de bästa app-sajterna! Android-apps »