[TUT] Game development 02 - Beginnen met renderen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Dit is een vervolg op [TUT] Game development 01 - Introductie

    Hallo ICTScripters,

    Bij de introductie hebben we een leeg scherm gemaakt en hebben we ervoor gezorgd dat onze Thread werkt. Vandaag in de tweede tutorial game development gaan we beginnen met het renderen van het scherm, en gaan we daadwerkelijk ook iets tonen op het scherm!

    Bij een game hebben we binnen een Thread altijd twee stappen die we moeten doorlopen namelijk: de logica van een game gevolgd door het renderen van de game. Maar wat houden deze twee dingen in?

    De logica: Dit zijn alle berekeningen van de game hierbij kun je denken aan wat de positie is van de camera, wat is de positie van jouw karakter of is het dag of nacht binnen jouw map.
    Het renderen: De naam zegt genoeg, hierbij wordt alle informatie van de game verwerkt naar het scherm.

    Om dit te bereiken gaan we eerst twee methoden aanmaken en uitvoeren in de game loop namelijk: update() en render().

    Source Code

    1. @Override
    2. public void run() {
    3. while (running) {
    4. update();
    5. render();
    6. }
    7. stop();
    8. }
    9. public void update() {
    10. }
    11. public void render() {
    12. }
    Display All


    Momenteel gaan we alleen nog met de render methoden werken. De render methoden wordt ook wel gezien als de functie die een oneindig aantal keer wordt uitgevoerd binnen een game om het scherm te verversen. De meest bekende term hiervoor is de FPS (Frames per second), alleen wordt dit in een later stadium nog berekend ;)

    Om daadwerkelijk iets op het scherm te tonen hebben we een buffer strategie nodig. Gelukkig hoeven we deze niet zelf te schrijven en heeft Java hier zijn eigen functie voor geschreven.

    Source Code

    1. public void render() {
    2. // Hier wordt de BufferStrategy uit het canvas object gehaald.
    3. BufferStrategy bs = getBufferStrategy();
    4. // Wanneer de BufferStrategy nog niet bestaat uit het canvas object.
    5. // Word er een nieuwe aangemaakt met in ons geval 3 buffers.
    6. if (bs == null) {
    7. createBufferStrategy(3);
    8. return;
    9. }
    10. }
    Display All


    Waarom zou ik 3 buffers gebruiken?
    De makkelijkste manier om dit uit te leggen is om dit te koppele aan de echte wereld. Je wilt bijvoorbeeld een zwembad vullen alleen kan je de tuinslang niet vinden. Je zal nu het zwembad moeten vullen met een emmer (de buffer). Je moet hiermee dus naar de kraan lopen, de emmer vullen, en lopen naar het zwembad om het water in het zwembad te gooien. Dit proces moet zich herhalen totdat het zwembad vol is.

    Nu zou je kunnen overwegen om 2 emmers te pakken (2 buffers) zodat je één emmer tijdens het lopen alvast kan laten vullen bij de kraan. Met dit voorbeeld is het duidelijk dat doormiddel van deze techniek het zwembad sneller gevuld zal worden en er minder tijd besteed wordt aan het wachten terwijl de emmers gevuld worden. Dit wordt ook wel dubbel buffering genoemd.

    Triple buffering is vergelijkbaar met double buffering. Bij tripple buffering heeft het programma twee buffers extra en kan direct beginnen met het printen van de frames. Door wat extra algoritmes hoeft de grafische kaart dus nooit meer te wachten totdat de software klaar is met het verwerken.

    Verder met de tutorial...
    Nu rest ons alleen nog om de graphics van de BufferStrategy op te halen en deze te tonen op het scherm. Hiervoor heeft Java het Graphics object ontwikkeld.

    Source Code

    1. public void render() {
    2. // Hier wordt de BufferStrategy uit het canvas object gehaald.
    3. BufferStrategy bs = getBufferStrategy();
    4. // Wanneer de BufferStrategy nog niet bestaat uit het canvas object.
    5. // Word er een nieuwe aangemaakt met in ons geval 3 buffers.
    6. if (bs == null) {
    7. createBufferStrategy(3);
    8. return;
    9. }
    10. // Haalt de graphics op van de buffer
    11. Graphics g = bs.getDrawGraphics();
    12. // Geef de rectangle een kleur in dit geval mooi magenta.
    13. g.setColor(new Color(0xff00ff));
    14. // Tekent een rectangle op het scherm.
    15. g.fillRect(0, 0, getWidth(), getHeight());
    16. // Zorgt ervoor dat de graphics geprint worden binnen het Canvas.
    17. g.dispose();
    18. // Laat de geprinte graphics zien.
    19. bs.show();
    20. }
    Display All


    Nu hebben we de basis van het renderen opgezet en kunnen we in de volgende tutorial beginnen met de Screen klasse. In deze tutorial gaan we starten met de theorie van tiles, en misschien het corrigeren/berekenen van de UPS en FPS. Na de volgende tutorial zal ik ook de Github repository updaten zodat jullie de gehele code van deze twee tutorials kunnen inkijken waarbij er weinig code wordt gegeven maar veel theorie.

    Met vriendelijke groet,

    Michael Beers

    Vervolg: ictscripters.com/index.php?pag…=27245&entryID=93#entry93
    Dit was mijn spreekbeurt, zijn er nog vragen?

    750 times read

Comments 2

  • R.Haentjens -

    Wachtend op 3e tutorial ^^

  • K.Rens -

    Bedankt, dit is nu eens een goede handleiding! :)

    Daarvoor moet je anders dikke boeken gelezen hebben om dit allemaal te weten.