Games Maken in HTML5 , les 1
Voor wie?
Deze lessen zijn specifiek gemaakt met vragen die gesteld werden door leerlingen die ik een gameworkshop gaf. Ik heb de afgelopen vijf jaar regelmatig game-workshops gegeven.Ik vermoed dat deze lessen geschikt zijn voor iedereen die nog nooit iets met games heeft gedaan, maar dat wel graag wil. Het is ook een goeie bron om voor het eerst te leren programmeren.
Wat heb je nodig?
Een computer met internet. Verder NIKS! Je kunt dit in een internetcafé huren voor de prijs van een kop koffie..We gebruiken alleen software die gratis (op het web) toegankelijk is en je hoeft niks te installeren.
Wat gaan we doen?
We gaan een eigen game maken.Games maken bestaat uit een aantal onderdelen:
- GameDesign (de regels van je spel)
- GameDevelopment (programmeren van je spel)
- Game Artwork (beeld en geluid in je game)
Natuurlijk kun je deze onderdelen verder uitsplitsen, hetgeen we zullen zien als we deze onderwerpen behandelen. Je zult zien dat je sommige onderdelen leuker vindt dan andere, maar iemand die aan een spel werkt, hoort op zijn minst een beetje te begrijpen hoe alle onderdelen werken.
Je zult ook al een idee hebben over hoe moeilijk dingen zijn. Laten we afspreken, dat we kijken hoe moelijk dingen waren, als we ze gedaan hebben. Daarvoor heeft het toch geen zin.
Om je te helpen daarme,e beginnen we direct met datgene, wat de meeste mensen zien als het moeilijkste:
Je zult ook al een idee hebben over hoe moeilijk dingen zijn. Laten we afspreken, dat we kijken hoe moelijk dingen waren, als we ze gedaan hebben. Daarvoor heeft het toch geen zin.
Om je te helpen daarme,e beginnen we direct met datgene, wat de meeste mensen zien als het moeilijkste:
We beginnen met development, programmeren:
We maken ons spel in HTML, HTML is de taal waarin alle internetpagina's (ook deze) geschreven zijn. HTML-pagina's kun je maken met een tekst-editor, die op iedere computer bijgeleverd zit.
Experimenteren is dan wat minder makkelijk en van experimenteren leer je het snelst.
Daarom zijn er diverse web-services onstaan, die dit experimenteren makkelijker maken. Een goed voorbeeld is JSfiddle. Met JS fiddle maak je dynamische HTML-pagina's. Maar je kunt ook dingen veranderen, die je nog niet goed begrijpt. Ideaal voor experimenten die lijden tot meer begrip!
EXPERIMENT 1: Ga naar JSfiddle, door te klikken op bovenstaande link.. Open de link in een apart window of kijk even rond en kom dan weer terug hier.. (Druk op <= bovenaan..)
Experimenteren is dan wat minder makkelijk en van experimenteren leer je het snelst.
Daarom zijn er diverse web-services onstaan, die dit experimenteren makkelijker maken. Een goed voorbeeld is JSfiddle. Met JS fiddle maak je dynamische HTML-pagina's. Maar je kunt ook dingen veranderen, die je nog niet goed begrijpt. Ideaal voor experimenten die lijden tot meer begrip!
EXPERIMENT 1: Ga naar JSfiddle, door te klikken op bovenstaande link.. Open de link in een apart window of kijk even rond en kom dan weer terug hier.. (Druk op <= bovenaan..)
Je ziet hier overzichtelijk de splitsing tussen HTML (inhoud pagina) , CSS (grafische opmaak pagina) en Javascript (interactiviteit op de pagina).
Bijvoorbeeld: schrijf je in het vak HTML:
Hallo wereld.en druk je op "run", dan zie je in het vak RESULT de woorden "hallo wereld" verschijnen.
Klik je hier, dan zie je wat ik bedoel: http://jsfiddle.net/4US2Z/
Verander de tekst in html, druk op run en kijk wat er gebeurd.
EXPERIMENT 2:
Nu vullen we bij CSS in:
body{
font-family: sans-serif;
}
We geven hiermee aan, dat de tekst in een schreefloos lettertype moet.
Drukken we op RUN, dan zien we de tekst veranderen.
Je zult misschien zien, dat als je iets fout typt, dat het niet werkt. Daarom laat ik ook alle stappen in jsfiddle zien, hoe simpel ze ook zijn.: http://jsfiddle.net/gXHFK/
Verander "sans-serif" in een lettertype dat op je computer staat, bijvoorbeeld "courier", druk op run, kijk wat er gebeurd.
We weten nu al half hoe JSfiddle werkt.
We hebben een pagina gemaakt en iets bepaald van het uiterlijk van de pagina.
EXPERIMENT 3:
Drukken we op RUN, dan zien we de tekst veranderen.
Je zult misschien zien, dat als je iets fout typt, dat het niet werkt. Daarom laat ik ook alle stappen in jsfiddle zien, hoe simpel ze ook zijn.: http://jsfiddle.net/gXHFK/
Verander "sans-serif" in een lettertype dat op je computer staat, bijvoorbeeld "courier", druk op run, kijk wat er gebeurd.
We weten nu al half hoe JSfiddle werkt.
We hebben een pagina gemaakt en iets bepaald van het uiterlijk van de pagina.
EXPERIMENT 3:
Klik je met rechts op result in JSfiddle en dan op "FRAMEBRON WEERGEVEN", dan krijg je de volledige code voor de pagina die je hebt gemaakt:
<html>
<head>
<title> - jsFiddle demo
<script src="/js/lib/dummy.js" type="text/javascript">
<link href="/css/result-light.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{
font-family: sans-serif;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
Hallo Wereld.
</body>
</html>
Als je deze pagina op internet zou publiceren, zou hij "hallo wereld" weergeven in het juiste font/lettertype.
Dit blijft zo binnen deze hele les. Je kunt telkens de volledige code bekijken en kopiëren met deze oersimpele tool.
Toch gaan we een volledige game maken.
Je hebt nu ALLE tools die je nodig hebt om internetpagina's te maken EN om een game te maken.
Aan de slag: Gebieden aangeven in HTML
In het vak HTML schrijf je:
<div id="tekst1">Hallo Wereld.</div>
EXPERIMENT4: En je drukt op run.. Geen verschil, toch?
Toch heb je iets wezenlijks gedaan, je hebt een gebied gedefinieerd met een tag. In HTML beginnen tags altijd met <tag> en eindigen met </tag>. De tag in dit geval is "div" (Div staat voor division, engels voor afdeling) Er zijn veel verschillende tags, ik behandel alleen die die we nu nodig hebben.
We hebben het gebied een 'id' gegeven. Een identificatie-code. De code waarmee we dit gebied aangeven is: "tekst1"
Als je in het CSS gebied nu tikt:
#tekst1{
background-color: rgb(255,0,0);
}
en op run drukt, krijg je het volgende:http://jsfiddle.net/yhRNq/
Je maakt in het HTML gebied "div"s, die je kan besturen, door eigenschappen ervan te zetten in het CSS gebied. Ook zien we in het resultaat welk gebied een 'div' beslaat: een hele regel. Als je meer tekst in het vak zet: meer regels.
EXPERIMENT5: Kleur op de computer.. Speel met de cijfertjes achter rgb en kijk welke kleuren dat oplevert als je op run drukt.
In dit geval heb ik de achtergrond-kleur (background-color) veranderd naar een rgb-waarde (Rood=255, groen=0, blauw=0). Maar kleuren mengen met een computer is niet hetzelfde als op papier.
Misschien heb je wel eens gehoord van het feit dat wit licht eigenlijk bestaat uit alle kleuren licht?
Het makkelijkste is om deze waarden te zien als rode, groene en blauwe lampen. 255 is vol aan, 0 is uit. 128 is half aan. 255,0,0 betekent dus: we zetten de rode lamp vol aan en de groene en blauwe uit.
De resulterende kleur is rood. Om geel te maken, zet je de groene lamp ook aan!
Dit is het einde van de eerste les. Als je alle experimenten hebt gedaan, alle links hebt bekeken en stappen hebt gevolgd, weet ik vrij zeker dat je nu een idee hebt wat HTML is en wat je met CSS kunt. Veel meer dan dit heb je niet nodig om je eerste spel te maken.
In de volgende les gaan we dingen laten bewegen. We gaan kijken naar het javascript vak!
NAAR LES 2 (hij is al beschikbaar!)
CSS (opmaak pagina's): http://www.w3schools.com/css/DEFAULT.asp
Kleur in HTML: http://www.w3schools.com/tags/ref_colorpicker.asp
Basis cursus HTML: http://www.homepage-maken.nl/htmlcursus/lessenoverzicht.php
HTML-escape characters: http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php
heel erg leuk en leerzaanm
BeantwoordenVerwijderenSTOM
BeantwoordenVerwijderen