Inhoud
- Stap 01. Activa laden
- Stap 02. Animatielus
- Stap 03. Ingangen
- Stap 04. Acteurs verplaatsen
- Stap 05. Geluid
- Stap 06. Het spel schalen
- Stap 07. Conclusie
- Vond dit leuk? Lees deze!
- Kennis nodig: Basis HTML5 en JavaScript
- Vereist: Eenvoudige HTML-editor en HTML5-compatibele browser
- Project tijd: 4-6 uur
- Ondersteuningsbestand
Dit artikel verscheen voor het eerst in nummer 230 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.
HTML5-game-ontwikkeling is geen gewone wetenschap. Om je games op verschillende platforms te laten draaien, heb je een beetje zwarte magie nodig. Verschillende soorten spellen vereisen verschillende sets technieken. Qua ontwikkeling is een op tegels gebaseerd spel compleet anders dan bijvoorbeeld een pinch-and-zoom-game. In deze tutorial gaan we ons echter concentreren op de basiselementen om elk soort 2D JavaScript-spel te ontwikkelen.
We zullen ons concentreren op op JavaScript Canvas gebaseerde games. Dit betekent dat de weergave afhankelijk is van een nieuw HTML5-opmaakobject: het canvas. Een canvas is heel gemakkelijk te definiëren:
/ script>
var canvas = document.createElement ("canvas"); // of document
getElementBy ### om te verwijzen naar een reeds gedefinieerd exemplaar.
canvas.width = 800; // definieer de canvasgrootte in pixels
canvas.height = 600;
document.body.appendChild (canvas);
var ctx = canvas.getContext ("2d"); // verkrijg een tekencontext.
ctx.fillStyle = "# f00’; // stel een rode vulstijl in.
ctx.fillRect (10,10,50,50); // teken een rode rechthoek.
/ script>
Stap 01. Activa laden
JavaScript is een functionele taal met één thread. Dit betekent dat het laden van activa een asynchrone taak zal zijn, die wordt gemeld via callback-functies. Het uitrollen van een complete asset loader is een eenvoudige operatie. Voor één enkele afbeelding kan de procedure zijn:
var afbeelding = nieuwe afbeelding (); // of document.createElement ("img");
image.onload = function () {// aangeroepen wanneer de afbeelding is geladen}
image.src = "a_valid_url / uri waarde";
U kunt deze code generaliseren voor N-afbeeldingen en uw asset-pre-loader werkt als een zonnetje. U kunt hier ook een complete asset-voorlader vinden.
Stap 02. Animatielus
Na het laden van een aantal items / afbeeldingen, hebben we enkele animatieloops nodig die de illusie wekken van continue schermupdates. Binnen beheerde JavaScript-omgevingen, zoals gewone browsers, kunnen we een kant-en-klare ingebouwde functie gebruiken, genaamd setInterval. Deze functie accepteert een callback-functie en het aantal milliseconden dat u verwacht dat die functie wordt aangeroepen. Het volgende is een op canvas gebaseerd voorbeeld dat een zeer simplistische animatie afspeelt, een blauw vierkant dat 50 keer per seconde een lijn doorloopt:
! DOCTYPE html>
html>
hoofd>
title> Eenvoudige animatie / titel>
/ hoofd>
lichaam>
script type = "text / javascript">
var canvas = document.createElement ("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild (canvas);
var ctx = canvas.getContext ("2d");
var x = 0;
var y = 0;
setInterval (
functie () {
ctx.clearRect (x - 1, y - 1, 40, 40);
ctx.fillStyle = "# 33f";
ctx.fillRect (x, y, 35, 35);
x + = 0,5;
y + = 0,5;
},
20 // neem 20 milliseconden, of 50 keer per seconde.
);
/ script>
/ body>
/ html>
Deze manier om animatielussen te definiëren heeft twee grote nadelen. Ten eerste, als de tekenfunctie te lang duurt, zal de animatie botsen en in de wachtrij komen te staan. Ten tweede verbruikt deze functie systeembronnen, zelfs wanneer het tabblad waarop onze game draait verborgen is, of erger nog, wanneer het browservenster geminimaliseerd is. Een betere oplossing zou zijn om te bellen requestAnimationFramework functies, zoals beschreven in dit artikel.
Stap 03. Ingangen
Nu we afbeeldingen en een fatsoenlijke animatielus hebben, hebben we wat in-game-interactie nodig. Afhankelijk van het platform waarop u zich richt, kunt u gebruik maken van verschillende invoersubsystemen. Hoewel toetsen en muis het primaire invoersysteem zijn op desktopsystemen, zijn aanraakgebeurtenissen en versnellingsmeters meestal beperkt tot mobiel.
Ondanks het feit dat moderne browsers de grenzen van gaming verleggen, werden browsers pas gebouwd met gaming in het achterhoofd, tot de nieuwste grote browsers, die nu API's ondersteunen zoals muisvergrendeling, volledig scherm enzovoort.
Op mobiele apparaten is er geen probleem, aangezien we onze game geoptimaliseerd houden voor volledig scherm. Maar in een gewone browser, waar een canvas elke plaats in de DOM-hiërarchie kan zijn, kan het ingewikkelder worden omdat er geen direct crossbrowser-mechanisme is om een muis- / aanraakgebeurteniscoördinaat gerelateerd aan ons canvas-object te krijgen. Het is dus het beste om de opmaak rond ons canvasspel zo eenvoudig mogelijk te houden. Dit is onze procedure in CAAT, onze animatiebibliotheek.
Een ander nadeel van het muisinvoersysteem is dat het een "mouseDrag" -gebeurtenis mist, die je zelf moet simuleren.
De uiteindelijke abstractie van de invoercode zou betekenen dat elke invoerbron wordt geïdentificeerd en deze wordt gekoppeld aan een herbruikbare code, bijvoorbeeld:
accelerometer-lean-left = touch-left-side-of-screen = key-left-ingedrukt.
Stap 04. Acteurs verplaatsen
Acteurs op het scherm verplaatsen betekent in feite invoergebeurtenissen binden aan veranderende positievariabelen op het scherm.
Complexere bewerkingen kunnen complexe paddoorgang vereisen, versoepelingsfuncties toepassen op doorlopende, aaneengeschakelde animaties, hetzij op tijd of externe gebeurtenissen, enzovoort. In dit voorbeeld verbinden we cursortoetsen om een roterende rechthoek op het scherm te verplaatsen.
! DOCTYPE html>
html>
hoofd>
title> Eenvoudige animatie / titel>
/ hoofd>
lichaam>
script type = "text / javascript">
var W = 800;
var H = 600;
var canvas = document.createElement ("canvas");
canvas.width = W;
canvas.height = H;
document.body.appendChild (canvas);
var ctx = canvas.getContext ("2d");
var x = W / 2;
var y = H / 2;
var inc = 1;
var incx = 0;
var incy = 0;
// key press handler die bewegende stappen instelt afhankelijk van
ingedrukte toets.
window.addEventListener (
'toets neer',
functie (evt) {
var key = (evt.which)? evt.which: evt.keyCode;
schakelaar (sleutel) {
case 37: // left
incx = -inc;
breken;
case 39: // right
incx = inc;
breken;
geval 38: // up
incy = -inc;
breken;
case 40: // naar beneden
incy = inc;
breken;
}
},
false
);
// key release handler die bewegende incrementen reset, afhankelijk van
ingedrukte toets.
window.addEventListener (
’Keyup’,
functie (evt) {
var key = (evt.which)? evt.which: evt.keyCode;
schakelaar (sleutel) {
case 37: // left
case 39: // right
incx = 0;
breken;
geval 38: // up
case 40: // naar beneden
incy = 0;
breken;
}
},
false
);
// animatielus. Teken 50 keer per seconde een kader.
setInterval (functie () {
// duidelijk animatiegebied
ctx.clearRect (0,0, W, H);
ctx.fillStyle = "# 33f";
// teken een roterende rechthoek. Draait 360 graden per seconde.
ctx.save ();
ctx.translate (x, y);
ctx.rotate ((nieuwe datum (). getTime ()% 1000) /1000*2*Math.PI); // 360 ° draaien
graden per seconde
ctx.translate (-20, -20);
ctx.fillRect (0, 0, 40, 40);
ctx.restore ();
// stel een nieuwe locatie in op basis van toetsaanslagen.
x + = incx;
y + = incy;
}, 20);
/ script>
/ body>
/ html>
Stap 05. Geluid
Geluid is de belangrijkste feedbackfunctie voor elk spel. Achtergrondmuziek en speciale effecten maken het verschil tussen een gemiddeld spel en een geweldig spel.
Voor ons HTML5-spelontwikkelaars is audio-API geen goed nieuws. De audio-API is een beetje kapot. Allereerst spelen verschillende browsers verschillende audioformaten af, dus het is goed om uw audiobestanden in zoveel mogelijk audioformaten te hebben. Ten tweede is de audiotag een beetje buggy. Loops werken niet in sommige browsers en in bijna alle browsers kun je niet tegelijkertijd hetzelfde geluid afspelen.
Om dit op te lossen, worden de nieuwste grote browserversies geleverd met extreem krachtige audio-API's, zoals Google’s Web Audio API of Mozilla’s Audio Data API. Het slechte nieuws is API-geluidsfragmentatie. Daarom kan een Flash-audio-fallback soms een goed idee zijn. Maar zoals gewoonlijk gebeurt met JavaScript, is deze taal zo krachtig dat u met een klein beetje code de meeste valkuilen op het platform kunt bedenken.
Onze eigen Audio API-oplossing is hier te vinden: netm.ag/audioapi-230. We raden ook aan om SoundManager2 te gebruiken. Kortom, om een geluid programmatisch af te spelen, zijn dit de stappen die kunnen worden uitgevoerd:
1 Maak een audio-object:
var channel = document.createElement (’audio’);
2 Stel de audiogegevens in:
channel.src = "valid_url / uri naar een audiobestand";
channel.preload = "auto"; // laat het audiobestand stil laden
kanaal.volume = 10; // verander het volume
channel.currentTime = 5; // begin met spelen vanaf 5 seconden
channel.load ();
3 Speel het geluid:
channel.play ();
4 Optioneel kunt u callback-functies koppelen aan gebeurtenissen zoals audio einde enzovoorts:
channel.addEventListener (
’Geëindigd’,
// aan het einde van het geluid, zet het kanaal op de lijst met beschikbare kanalen.
functie (audioEvent) {
},
false);
Stap 06. Het spel schalen
Wanneer u zich concentreert op de ontwikkeling van HTML5-games voor meerdere platforms of meerdere browsers, is één ding om speciaal op te letten, vooral bij mobiele apparaten, fragmentatie van de schermresolutie. Er zijn zoveel verschillende schermresoluties om mee om te gaan dat het heel vervelend zou kunnen zijn om al onze in-game middelen aan zulke verschillende resoluties te conformeren.
Gelukkig is de canvas-API, of zelfs de DOM / CSS, flexibel genoeg om ons in staat te stellen affiene transformaties toe te passen, zodat we onze games gracieus kunnen opwaarderen of verkleinen, vrijwel zonder ontwikkelingskosten. Dit betekent dat de relatie tussen één schermpixel en één wereldcoördinaat niet gebonden mag zijn aan een verhouding van 1: 1. De enige beperking voor deze procedure is dat het canvas het hele venstergebied beslaat. Daarom is het goed om deze in te stellen op body style = "margin: 0; padding: 0;" zonder opmaak. De manier om te gaan met het HTML5-canvasobject is vrij eenvoudig:
1 Maak een canvasobject of selecteer het uit de opmaak en stel het gewenste formaat in; deze grootte wordt de grootte van onze game-ruimte.
2 Voeg een window event listener toe voor ‘resize’, waar je een verhoudingswaarde berekent tussen de huidige venstergrootte en de grootte van ons originele canvasobject:
var scaleFactor = 1;
window.addEventListener (’formaat wijzigen’,
functie (evt) {
// bereken een schaalfactor om een correcte aspectverhouding te behouden.
scaleFactor = Math.min (window.innerWidth / W, window.innerHeight / H);
// zorg ervoor dat het canvas overeenkomt met de nieuwe geschaalde grootte.
canvas.width = W * scaleFactor;
canvas.height = H * scaleFactor;
// haal de geschaalde canvascontext op.
ctx = canvas.getContext (’2d’);
},
false);
3 Wijzig de tekenroutine om een schaal toe te passen met de vorige schaal factor:
setInterval (functie () {
// tekenroutine
// …
ctx.save ();
ctx.scale (scaleFactor, scaleFactor);
// reguliere tekencode, zonder je zorgen te maken over nieuwe canvasafmetingen.
// …
ctx.restore ();
}, 20 );
Stap 07. Conclusie
Ondanks wat het lijkt, zijn we er echt van overtuigd dat HTML5 de juiste keuze is als het gaat om de ontwikkeling van webgames. Op dit moment bevindt de technologie zich nog in de kinderschoenen, maar deze verbetert dagelijks en er worden krachtige API's toegevoegd.
We raden iedereen die wil beginnen met het ontwikkelen van HTML5-games aan om te vertrouwen op een van de beschikbare gaming-frameworks die er al zijn. Ze helpen u enkele veelvoorkomende HTML5-valkuilen te vermijden en bieden u verschillende weergavetechnologieën om verschillende implementatieapparaten te targeten. We hebben ons eigen gaming-framework ontwikkeld: CAAT, gratis beschikbaar onder de MIT-licentie.
We hebben ook een game gemaakt als demonstratie van de kracht van minder dan 200 regels code die u hier kunt downloaden. Je kunt een compleet puzzelspel spelen met input-abstractie, animaties, geluid en schermresolutie-onafhankelijkheid.
Door naar andere codeerprojecten te kijken, hebben we veel geleerd en kunnen we eenvoudige oplossingen bieden voor complexe problemen. Kies hier het raamwerk dat het beste bij u past.
Woorden: Iker Jamardo Zugaza en Ibon Tolosana: www.ludei.com
Vond dit leuk? Lees deze!
- Een app bouwen: probeer deze geweldige tutorials
- Nu gratis grafische ontwerpsoftware voor u beschikbaar!
- Onze favoriete weblettertypen - en ze kosten geen cent
- Ontdek wat de toekomst biedt voor Augmented Reality
- Download gratis texturen: hoge resolutie en nu klaar voor gebruik
