C# Development

Windows 7 Phone Game Development: GameComponents Tutorial 2 Part 1

 

Introductie

In deze tutorial gaan we verder met de code waar we met de Hello World tutorial zijn gestopt.

Ik zou zeggen open het project en mocht je de vorige tutorial gemist hebben kijk dan nog even terug.

We gaan het in deze tutorial hebben over DrawableGameComponents en hierin gaan we iets doen met de mogelijkheid tekst op beeld te zetten.

We gaan namelijk een FPS counter maken.

...

Wat zijn DrawableGameComponents?

DrawableGameComponents zijn los staande componenten die je zo aan iedere game zou kunnen toevoegen en daarmee functionalliteit toevoegen aan je game. Ze zijn dus makkelijk herbruikbaar.

De naam zegt het eigenlijk al ze hebben ook de mogelijkheid iets op het scherm te zetten.

Een GameComponent is min of meer fire and forget.

Je maakt er een aan in de Game class constructor, voegt hem toe aan de components list en de game handeld zelf de LoadContent, update en draw methods aan en je hoeft er dus zelf eigenlijk niet meer op te letten.(Er kan nog meer maar hier hebben we het in een later stadium nog over)

 

Let's get started!

Ok open het Hello Wolrd project en als het goed is ziet dat er dan ongeveer zo uit:

 

(Ik heb stiekum natuurlijk wel de code in een nieuwe project gecopied)

We beginnen wederom met het toevoegen van een folder genaamd: GameComponents

 

Hierna voegen we de class genaamd FPSCounter toe:

 

We passen dan de class definitie aan zodat hij er zo uitziet:

 

 

En dan houden we de muis boven het woord DrawableGameComponent en kiezen voor: Resolve en dan Microsoft.Xna.Framework.

Wat we nu hebben gedaan is dat we functionalliteit overerven van de DrawableGameComponent class die in XNA zit.

We hebben nu dus Standaard al de functionalliteit van die class ook in onze FPSCounter class.

 

Constructors en overloaded constructors

We willen graag zelf bepalen wat we doen als onze FPSCounter wordt aangemaakt en ook bepalen hoe en met welke parameters.

Hiervoor hebben we dus een constructor nodig.

De basis constructor voor onze FPSCounter zou er zo uit kunnen zien:

 

Een constructor heeft altijd een bepaalde opbouw waardoor het wordt gezien als constructor.

In tegenstelling tot een method is de opbouw ervan als volgt.

Een constructor heeft altijd alleen een return type en geen naam.

LET OP: Het zal je vast opgevallen zijn als je nog niet zo bekend bent met C# dat er in de constructor ineens iets extra's staat.

Namelijk: base(game).

Dit is omdat onze base class(de class die we overerven: DrawableGameComponent) dat nodig heeft in zijn constructor en op deze manier geven we die door aan die base class.

Door base. te typen krijg je ook een lijst te zien met alle mogelijke methods, fields, events etc.

 

Soms zie je dat een class meerdere constructors heeft en daarmee verschillende mogelijkheden om hem aan te maken.

Vaak worden ze steeds gedetaileerder en heb je meer controle over hoe de class wordt aangemaakt.

Meer settings zullen we maar zeggen.

We gaan dit ook doen in onze FPSCounter door er simpelweg meer te maken.

Ik heb ondertussen de FPSCounter class die ik voorbereid had in het project gestopt dus er is ineens een heleboel meer te zien maar we zullen stukje voor stukje gaan bespreken.

 

Fields en Properties

Als eerste voegen we een aantal private fields toe, die we nodig hebben voor interne logica en of resources.

 

 

TIP: Je ziet me hier gebruik maken van regions wat handig is om je code een beetje duidelijk te houden tijdens het programeren.

Als eerste zien we: timercount.

Hier gaan we de tijd in optellen die tussen frames is verstreken zodat we kunnen bepalen wanneer er een seconden verlopen is.

Dan hebben we: tempFPS

De naam zegt het eigenlijk al een beetje hierin gaan we de frames in optellen om te zien hoeveel frames er in een seconden zijn getekend.

Hierna zien we nog spriteBatch, drawfont en fontstring die we al eerder hebben gezien in de Hello World tutorial(nouja fonstring niet echt maar die is om de naame van het te gebruiken font in vast te houden).

 

Dan hebben we nog een aantal properties:

 

De meeste zullen wel duidelijk zijn behalve dan misschien de Font property.

Als het font namelijk veranderd wordt moeten we wel zorgen dat het ook geladen wordt en dat doen we dus op deze manier zodat het ook tijdens het werken van de FPSCounter nog kan worden aangepast.

 

Eindelijk alle constructors

Vervolgens voegen we al onze mogelijke constructors toe:

 

Wederom legt de code zichzelf wel weer een beetje uit.

Nagelang welke constructor gebruikt is vullen we onze variabelen met default values die al dan niet zijn aangeleverd of door ons bepaald als dat niet zo is.

 

Het overriden van methods in de base class

De base class DrawableGameComponent bevat al een heleboel methods die automatisch door de game worden aangeroepen.

Maar... sommige willen we nu juist aanpassen omdat we onze eigen code eraan willen toevoegen, dit heet overriden.

Wij zijn met name geinterreseerd in de methods: LoadContent, Update en Draw.

En dat lossen we dus op de volgende manier op:

 

En met code en in onze class ziet het er dan zo uit:

 

 

Maar we zullen de methods nog een voor een even snel bekijken.

 

LoadContent

De loadContent method ziet er als volgt uit:

 

Hierin zien we eigenlijk hetzelfde als in de eerste tutorial dus ik zal hier verder ook niet op ingaan.

 

Update

De update method ziet er als volgt uit:

 

Hierin zien we redelijk wat gebeuren.

Als eerste tellen we de elapsed time tussen frames op in de variabele timercount.

Vervolgens kijken we of hij hoger is dan 1000 milliseconden(1 seconden) en als dat zo is voeren we uit wat in de if body staat.

We geven FPS de waarde die is vastgehouden in tempFPS( de opgetelde frames in 1 seconden).

En dan resetten we beide tempFPS en timercount weer naar 0.

 

Draw

De Draw method ziet er als volgt uit:

 

Hierin zien we wederom hetzelfde gebeuren als in tutorial 1.

 

Aanpassen van de Game class

Wat nog overblijft is het aanpassen van onze Game class zodat die gebruik gaat maken van ons nieuwe component.

 

We defineren dus de variabele en vervolgens roepen we de constructor aan en voegen hem toe aan de components list van de Game.

En dan...

 

Het resultaat

Vervolgens run je de game en zou je het volgende moeten zien: