Det roligaste mina barn vet är att spela TV-spel. De kan sitta i timmar framför en iPad eller dator och spela. När de inte spelar själva tittar de gärna på när andra spelar på YouTube.
Härom dagen frågade jag barnen om de ville att jag skulle visa dem hur man gör ett spel? De blev eld och lågor och ville att vi skulle börja med detsamma! Jag var inte riktigt redo för deras entusiasm, så jag hade inte förberett någonting. Men nu blir det ändring på det!
Här är del ett i Tomas Heeds spelskola. Nu ska vi lära oss att programmera spel barn i HTML5 och JavaScript.
HTML5 och JavaScript
HTML är ett slags programspråk som man använder för att skriva hemsidor. Förkortningen står för Hypertext Markup Language och språket innehåller olika byggklossar för att bygga upp en hemsida. Varje byggkloss består av en start-tag och en slut-tag. En start-tag ser ut såhär: <h1> – och en slut-tag ser ut såhär: </h1>. Om man lägger andra taggar innanför dessa taggar så handlar dessa byggklossar innanför denna byggkloss. Tänk en lego-bit i en annan legobit. (Med hjälp av styling kan man flytta runt prylar, men det kommer i ett senare avsnitt).
JavaScript är ett kodspråk som används för att få saker att hända på en hemsida. När man trycker på en knapp och någonting händer är det oftast JavaScript som styr det. HTML och JavaScript är lite som Gin och Tonic. De fungerar väldigt bra ihop.
Ibland pratar man om HTML5 också. HTML är ett språk som ständigt utvecklas, och den senaste versionen som kom i Oktober 2014 är just version 5. Denna senaste version innehåller en hel del bra nya komponenter som vi kommer att använda oss av i denna serie.
Animationer med Sprites
Det vi ska göra idag är att få saker och ting att röra sig. Det mänskliga ögat och hjärnan har en vilja att få saker och ting att se ut som människor. Det är ganska lätt att hitta ansikten och figurer i en slät bergssida eller på hus. Ett vanligt mänskligt öga har förmågan att ta in ungefär 24 bilder per sekund. Om man visar olika bilder i snabb takt kan man lura ögat att saker rör sig. Det är det som händer i en TV där olika bilder visas i snabb följd.
Vi ska använda oss av samma trick för att animera en liten gubbe. För att göra detta behöver vi fyra olika bilder där gubben har flyttat sig till olika positioner. Sedan visar vi dessa bilder i serie om och om igen så att det ser ut som gubben går. Vi lägger de fyra bilderna sida vid sida i en enda bild så blir de lätta att rita ut. Denna sammanslagna bild kallas för en Sprite.
Använd gärna denna mall som jag har förberett till ungarna. Rita på en gubbe och skanna sedan in den så kan vi animera den sedan.
Canvas
För att kunna rita upp våran gubbe någonstans så behöver vi ett ritblock – en duk, eller canvas som det heter på engelska. Det finns ett HTML5-block som heter Canvas. Man kan skriva såhär för att få en bra grund att stå på.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="ritblock" width="500" height="500"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
Här har vi skapat upp ett HTML-dokument, vilket vi tydliggör för webbläsaren genom att ange DOCTYPE. Ett html-dokument behöver en html-tag och en body-tag. Så är det bara. Lite som att en bok behöver ett försättsblad och en pärm. Det ligger även med en head-tag där vi sedan ska lägga våra JavaScript. Head-tagen innehåller en massa information om sidan som egentligen inte hör till HTML’en.
Inne i body-tagen, som ligger inuti body-tagen, lägger vi vår canvas-tag. Vi ger den ett id, som i detta fall är ”ritblock” så att vi kan peka ut den från vår JavaScript-fil senare. Vi ger den även en höjd och en bredd och till sist en ram – en border. Ramen är en pixel bred och har färgen svart.
Script
Nästa steg är att lägga till ett JavaScript i filen. Det prydligaste är att lägga JavaScriptet i en egen fil, men det sparar vi till en annan gång. Nu trycker vi in det rätt in i HTML-en. Det finns många verktyg som gör livet lättare för en Javascript-programmerare. Ett av dem är jQuery som används för att manipulera HTML-element på ett smidigt sätt.
Man kan ladda hem jQuery i en fil och lägga upp det på sin hemsida om man vill, men det smidigaste är att hämta filen från Google. Det gör man genom att lägga följande stycke i sin head-tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Nu återstår bara att skapa ett litet utrymme för vårat program. Det gör man genom att skapa upp ytterligare en script-tag. Lägg in följande snutt under script-tagen med jquery.
<script>
$(function(){
alert("hello world");
});
</script>
$(function) är ett sätt att få jQuery att köra ett kommando direkt när sidan startas. $-tecknet är en förkortning för jQuery och används för alla jQuery-anrop. alert visar upp en meddelanderuta med den text du angivit.
Kom igen nu, prova själv! Skapa upp en tom textfil på din dator. Klistra in texten nedan och spara filen. Döp sedan om den till test.html. Dubbelklicka på den för att öppna den och titta hur fint det blev. Notera dock att Internet Explorer inte låter dig köra lokala filer hur som helst. Ta detta tillfälle och byt till en vettig webbläsare, till exempel Google Chrome.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(function(){
alert('hello world!!');
});
</script>
</head>
<body>
<canvas id="ritblock" width="500" height="500"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
Bilden
Nästa steg är att få bilden som vi har scannat in att hamna på canvasen. Ta och lägg upp din sprite på sidan. Vi kan sedan använda oss av följande kod för att måla på canvasen.
var canvas=document.getElementById("ritblock");
var context=canvas.getContext("2d");
var image=document.getElementById("sprite");
context.drawImage(image,10,10);
Första raden pekar ut våran canvas och sparar undan vart vi har den till en variabel. Från vår canvas-variabel hämtar vi sedan ett context som vi kan använda för att rita på canvasen. Det kanske låter konstigt att man gör så, men mycket med programmering är konstigt. Man måste följa vissa regler. Canvas har en context som man använder för att rita på canvasen.
I den tredje raden hämtar vi en kopia av bilden så att vi kan rita upp den, och i fjärde raden ritar vi upp bilden på de givna koordinaterna 10, 10.
När man ritar på datorn pratar man nästan alltid om x, y-koordinater. Den första siffran är det horisontella planet, där 0 är längst till vänster och till exempel 1920 är längst till höger beroende på upplösningen på din skärm. Den andra siffran är y-koordinaten som är höjden. 0 är längst upp och 1080 är längst ner. Genom dessa koordinater kan man peka ut vilken som helst av pixlarna på skärmen.
Om man vill kan man skicka in flera parametrar i context.drawImage. På så sätt kan man rita ut bara en del av bilden. Det är precis vad vi vill göra med vår sprite-karta. Man använder följande sätt:
drawImage(image, x-på-bilden, y-på-bilden, bredd-att-rita, höjd-att-rita,
x-på-skärmen, y-på-skärmen, bredd-på-duken, höjd-på-duken);
Genom att ändra bredd-på-duken kan man få gubben att bli större och mindre.
Vi ritar ut en del av bilden genom följande kod:
context.drawImage(img1,window.bild * 150,0, 150 , 330, 25, 30 , 150, 330);
Timer
Det sista vi behöver göra för att få animationen att rulla är att sätta en timer. En timer använder man för att regelbundet köra kod. Vi vill rita ut vår bild fyra gånger per sekund, alltså var 250 millisekund. Då kan man använda följande kod:
window.setInterval(function, milliseconds);
Vi använder oss av följande kod:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
window.setInterval(animera, 250);
});
function animera(){
var canvas=document.getElementById("ritblock");
var context=canvas.getContext("2d");
var image=document.getElementById("sprite");
context.drawImage(image,0,0, 300, 500, 10, 10, 300, 500);
};
</script>
</head>
<body>
<canvas id="ritblock" width="500" height="500"
style="border:1px solid #000000;"></canvas>
<image id="sprite" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Sprite_20oz_v2.png"></image>
</body>
</html>
Animationen
Nu ritar vi ju ut samma bild om och om igen. Vi vill ju att vår sprite ska ändra på sig. Då får vi använda oss av en variabel som håller koll på vilken bild som ska ritas. Man kan göra det på olika sätt, men ett av sätten som är fel men enkelt är att lägga det under window.
Lägger man en variabel under window så hamnar det åtkomligt för alla funktioner. Å andra sidan kan alla funktioner skriva över variabeln så man vet inte att variabeln är det man förväntar sig. Nu i vårt enkla system så struntar vi i det.
Vi börjar med att tilldela vår räknare ett värde i början.
window.bild = 0;
Sedan ändrar vi denna variabel varje gång våran timer kör vår funktion.
window.bild = window.bild + 1;
Vi vill aldrig att bild ska ha ett värde över 4, då ska vi börja om från början.
if(window.bild > 4) window.bild = 0;
Programmera spel barn!
Det sista vi gör är att skjuta in bilden med context.drawImage genom att lägga till vår variabel i en uträkning av vad som ska ritas. Vi börjar också med att tömma ritblocket inför varje omgång.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
window.setInterval(animera, 150);
window.bild = 0;
});
function animera(){
var canvas=document.getElementById("ritblock");
var context=canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
var image=document.getElementById("sprite");
context.drawImage(image, 0 + (window.bild * 150), 0, 150, 290,
10, 10, 150, 290);
window.bild = window.bild + 1;
if(window.bild > 3) window.bild = 0;
};
</script>
</head>
<body>
<canvas id="ritblock" width="500" height="500"
style="border:1px solid #000000;"></canvas>
<image id="sprite"
src="https://tomasheed.se/wp-content/uploads/2017/04/sprite2.jpg">
</image>
</body>
</html>
Se där! En animerad liten man!
Sprites
Här är mina och ungarnas sprites som används i spelet ovan. Använd dem gärna.
Grymt, nu väntar jag bara för en snabb guide så att jag snabbt & enkelt kan programmera Battlefield 10. 🙂
Visst vettu! Om den är planerad till 2025 så… 😀