[TUT] Game development 07 - De empty en grass tile

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 06 - Primaire Level en Tile objecten

    Hallo ICTScripters,

    Het is alweer tijd voor de 7e tutorial van de game development serie. In deze tutorial gaan we de empty tile en grass tile maken en de methoden om deze op het scherm te tonen.

    Om een lege tile te maken moeten we allereerst onze Sprite klasse aanpassen. Wij willen namelijk een sprite kunnen maken met een vaste kleur die gaat dienen voor een lege tile. Open daarom als eerst de Sprite klasse en voeg de volgende code toe, dit is een nieuwe constructor met een simpele methoden die elke pixel voorziet van de opgegeven kleur:

    Source Code

    1. public Sprite(int size, int color) {
    2. this.SIZE = size;
    3. this.pixels = new int[SIZE * SIZE];
    4. setColor(color);
    5. }
    6. private void setColor(int color) {
    7. for (int i = 0; i < SIZE*SIZE; i++) {
    8. pixels[i] = color;
    9. }
    10. }
    Display All

    We zijn nu instaat om een sprite te maken met een vaste kleur. Maak daarom een nieuwe sprite aan zoals we dit in de vorige tutorials hebben gedaan en plaatst deze boven de grass tile (bovenaan in de klasse Sprite):

    Source Code

    1. public static Sprite empty = new Sprite(16, 0x1B87E0);
    2. public static Sprite grass = new Sprite(16, 0, 0, SpriteSheet.testSheet);

    Nu zijn we instaat om een lege tile te maken d.m.v. het uitlezen van deze sprite.

    Maak nu de klasse EmptyTile en GrassTile aan en plaats deze in de tile package. Omdat we in de vorige tutorial een primaire klasse hebben gemaakt kunnen we deze vervolgens extenden en gebruiken in deze 2 klasse. Dit stelt ons in staat om heel snel tiles te maken:

    Source Code

    1. public class GrassTile extends Tile {
    2. public GrassTile(Sprite sprite) {
    3. super(sprite);
    4. }
    5. @Override
    6. public void render(int x, int y, Screen screen) {}
    7. }

    Source Code

    1. public class EmptyTile extends Tile {
    2. public EmptyTile(Sprite sprite) {
    3. super(sprite);
    4. }
    5. @Override
    6. public void render(int x, int y, Screen screen) {}
    7. public boolean solid() {
    8. return true;
    9. }
    10. }
    Display All

    Omdat de lege tile een tile is waar je nooit doorheen mag lopen hebben we de solid() methoden overschreven en op true gezet.

    Nu moeten we er alleen nog ervoor zorgen dat de tile op het scherm getoond kan worden. Ga daarom naar de Screen klasse en plaats de volgende methoden boven de setOffset() methoden. Deze methoden is lastig uit te leggen dus ik hoop dat dit voldoende is:

    Source Code

    1. public void renderTile(int xp, int yp, Tile tile) {
    2. // Omdat de camera positie/view port steeds veranderd gaan we eerst een offset
    3. // van de x en y-positie afhalen. (-- wordt + etc.)
    4. xp -= xOffset;
    5. yp -= yOffset;
    6. // Dit is een loop met de y coordinaten van de tile in pixels.
    7. for (int y = 0; y < tile.sprite.SIZE; y++) {
    8. // Hier wordt de y-positie in pixels opgeteld/afgetrokken van
    9. // de y-positie van het scherm
    10. int ya = y + yp;
    11. // Dit is een loop met de x coordinaten van de tile in pixels.
    12. for (int x = 0; x < tile.sprite.SIZE; x++) {
    13. // Hier wordt de x-positie in pixels opgeteld/afgetrokken van
    14. // de x-positie van het scherm
    15. int xa = x + xp;
    16. // Omdat we alleen de tiles willen renderen die in het scherm passen
    17. // zorgen we met deze simpele if else constructie dat een tile niet
    18. // wordt gerenderd zodra de tile buiten beeld valt.
    19. if (xa < 0 || xa >= width || ya < 0 || ya >= height) {
    20. break;
    21. }
    22. // Hier word de tile daadwerkelijk op het beeld gezet.
    23. // Omdat de positie op het scherm veranderd MAAR de pixels van de tile niet
    24. // Gebruiken we xa en ya voor de positie in het scherm en x en y om de tiles te renderen.
    25. pixels[xa + ya * width] = tile.sprite.pixels[x + y * tile.sprite.SIZE];
    26. }
    27. }
    28. }
    Display All

    We zijn nu instaat om de render() methoden van de 2 Tile klasse in te vullen. Vul daarom deze 2 klasse aan met de volgende methoden (kan vervangen worden):

    Source Code

    1. @Override
    2. public void render(int x, int y, Screen screen) {
    3. screen.renderTile(x, y, this);
    4. }


    Tot slot kunnen we net als in de SpriteSheet en Sprite klasse de Tile klasse aanvullen met de 2 tiles die we zojuist gemaakt hebben:

    Source Code

    1. public int x, y;
    2. public Sprite sprite;
    3. public static Tile empty = new EmptyTile(Sprite.empty);
    4. public static Tile grass = new GrassTile(Sprite.grass);


    Met deze code zijn we dan ook ten einde gekomen van deze tutorial. In de volgende tutorial gaan we een random level genereren en daadwerkelijk het level renderen! Hierbij zal ik op verzoek meer afbeeldingen gebruiken omdat dit ook weer kan, maar zal er ook weer een hoop theorie bij komen kijken. Natuurlijk zal ik daarna ook weer de Github repository updaten zodat iedereen deze kan gebruiken ter controle.

    I hope you enjoy!


    Met vriendelijke groet,

    Michael Beers
    Dit was mijn spreekbeurt, zijn er nog vragen?

    1,178 times read

Comments 0