[TUT] Game development 05 - Keyboard events

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 04 - SpriteSheets en Sprites

    Hallo ICTScripters,

    Het is alweer tijd voor de 5e tutorial van deze serie. In deze tutorial gaan we de keyboard events behandelen, want we willen natuurlijk ons toetsenbord gaan gebruiken om uiteindelijk je karakter te laten bewegen.

    Om te beginnen maken we daarom een nieuwe klasse aan Keyboard en plaats deze in een nieuwe package input. Het is nu zaak dat wij hier een event aan gaan koppelen. Gelukkig heeft Java hier een hele makkelijke interface voor geschreven namelijk de KeyListener. Implementeer deze daarom in de Keyboard Class:

    Source Code

    1. public class Keyboard implements KeyListener {
    2. }


    Druk vervolgens op CTRL+SHIRT+O om je imports te fixen en je zult zien dat er nogsteeds errors in de code aanwezig zijn. Dit komt doordat de KeyListener interface 3 methodes nodig heeft om te kunnen werken namelijk de: keyPressed(), keyReleased() en keyTyped() methoden. Deze methoden hebben elk 1 verplichte parameter met hierin een KeyEvent.

    Source Code

    1. public class Keyboard implements KeyListener {
    2. /**
    3. * Invoked when a key has been pressed. See the class description for
    4. * KeyEvent for a definition of a key pressed event.
    5. */
    6. @Override
    7. public void keyPressed(KeyEvent e) {
    8. }
    9. /**
    10. * Invoked when a key has been released. See the class description for
    11. * KeyEvent for a definition of a key released event
    12. */
    13. @Override
    14. public void keyReleased(KeyEvent e) {
    15. }
    16. /**
    17. * Invoked when a key has been typed. See the class description for KeyEvent
    18. * for a definition of a key typed event.
    19. */
    20. @Override
    21. public void keyTyped(KeyEvent e) {
    22. }
    23. }
    Display All


    De keyPressed() methoden wordt aangeroepen wanneer je een toets op je toetsenbord indrukt.

    De keyReleased() methoden wordt aangeroepen wanneer je een toest op je toetsenbord loslaat.

    De keyTyped() methoden wordt aangeroepen wanneer je een unicode-karakter toets op je toetsenbord indrukt, deze methoden is dus hetzelfde als de keyPressed() methoden echter wordt het bij deze methoden niet toegestaan om bijvoorbeeld de F5 toets te gebruiken omdat dit geen unicode-karakter toets is.

    Omdat wij niet omslachtig willen doen om te kijken of een toets wel of niet is ingedrukt gaan wij met de keyPressed() en keyReleased() methoden ervoor zorgen dat er alleen bij wordt gehouden of een toets wel of niet is ingedrukt.

    Source Code

    1. public class Keyboard implements KeyListener {
    2. // Een array waarin wordt opgeslagen of een toets wel of niet is ingedrukt!
    3. // Omdat we ervanuit kunnen gaan dat een toetsenbord niet meer dan 120 toetsen heeft,
    4. // en dus geen hogere codes heeft kunnen we deze Array deze waarde geven.
    5. private boolean[] keys = new boolean[120];
    6. @Override
    7. public void keyPressed(KeyEvent e) {
    8. // Een toets is ingedrukt dus wordt de boolean op TRUE gezet.
    9. // e.getKeyCode() staat voor een code van jouw toetsenbord waarbij
    10. // bijvoorbeeld de W voor code: 87 staat
    11. keys[e.getKeyCode()] = true;
    12. }
    13. @Override
    14. public void keyReleased(KeyEvent e) {
    15. // Een toets is niet ingedrukt dus wordt de boolean op FALSE gezet.
    16. // e.getKeyCode() staat voor een code van jouw toetsenbord waarbij
    17. // bijvoorbeeld de W voor code: 87 staat
    18. keys[e.getKeyCode()] = false;
    19. }
    20. @Override
    21. public void keyTyped(KeyEvent e) {
    22. // This method does nothing...
    23. }
    24. }
    Display All


    Nu rest ons alleen nog het implementeren van de code en het toevoegen van de game logica zoals in tutorial 2 is uitgelegd. Om dit te doen gaan we tot slot eerst een update() methoden aanmaken met hierin de toetsen die gebruikt worden in de de game.

    Source Code

    1. public class Keyboard implements KeyListener {
    2. private boolean[] keys = new boolean[120];
    3. // Hier worden de toetsen gespecificeerd.
    4. public boolean up, down, left, right;
    5. public void update() {
    6. // Hier wordt de waarde van de toets(en) geplaatst in de variabelen
    7. // up, down, left, right. De KeyEvent.VK_* optie vervangt de toets
    8. // voor de code van de toets.
    9. //
    10. // KeyEvent.VK_W == 87 == e.getKeyCode() (wanneer de W wordt ingedrukt)
    11. up = keys[KeyEvent.VK_UP] || keys[KeyEvent.VK_W];
    12. down = keys[KeyEvent.VK_DOWN] || keys[KeyEvent.VK_S];
    13. left = keys[KeyEvent.VK_LEFT] || keys[KeyEvent.VK_A];
    14. right = keys[KeyEvent.VK_RIGHT] || keys[KeyEvent.VK_D];
    15. }
    16. @Override
    17. public void keyPressed(KeyEvent e) {
    18. keys[e.getKeyCode()] = true;
    19. }
    20. @Override
    21. public void keyReleased(KeyEvent e) {
    22. keys[e.getKeyCode()] = false;
    23. }
    24. @Override
    25. public void keyTyped(KeyEvent e) {
    26. // This method does nothing...
    27. }
    28. }
    Display All


    De Keyboard klasse is nu klaar... we moeten deze nu alleen nog koppelen aan de client. Open daarom de Game klasse en voeg daarom de volgende variabelen toe: Keyboard key, int x, int y.

    Source Code

    1. private static final long serialVersionUID = 1L;
    2. public static String title = "Elysium Client";
    3. public static int width = 300;
    4. public static int height = width / 16 * 9;
    5. public static int scale = 3;
    6. private Thread thread;
    7. private JFrame frame;
    8. private Keyboard key;
    9. private boolean running = false;
    10. private Screen screen;
    11. private BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    12. private int[] pixels = ((DataBufferInt) image.getRaster().getDataBuffer()).getData();
    13. private int x = 0;
    14. private int y = 0;
    Display All


    Waarom een X en Y variabel?
    Omdat wij hiermee de positie van onze camera / karakter gaan bedienen. Hoe ik dit ga doen is nog niet zeker maar hiervoor hebben we 2 keuzes:
    • De camera beweegt waarbij je karakter gecentreerd blijft.
    • Je karakter beweegt en de camera beweegt pas zodra je karakter de rand raakt, waarbij de camera vervolgens weer gecentreerd wordt aan je karakter.

    Verder met de tutorial...
    We gaan nu de Keyboard klasse initializeren. Dit doen we net de Screen en JFrame klasse in de constructor van Game. Verder is het ook zaak om de events te koppelen, dit doen we doormiddel van de addKeyListener() functie die standaard in het Canvas object zit.

    Source Code

    1. public Game() {
    2. Dimension size = new Dimension(width * scale, height * scale);
    3. setPreferredSize(size);
    4. // Initialize all the client components.
    5. this.screen = new Screen(width, height);
    6. this.frame = new JFrame();
    7. this.key = new Keyboard();
    8. // Initialize all the client events.
    9. addKeyListener(key);
    10. }
    Display All



    Tot slot gaan we de update() methoden aanroepen van de Keyboard klasse in de update() methoden van Game, en de juiste wijzigingen doorvoeren wanneer de pijltjes of WASD toetsen worden ingedrukt.

    Source Code

    1. public void update() {
    2. key.update();
    3. if (key.up) y--;
    4. if (key.down) y++;
    5. if (key.left) x--;
    6. if (key.right) x++;
    7. }


    Ik heb alles aangepast maar de client doet nog niks!
    Dit klopt, we hebben namelijk nog 2 kleine problemen die we moeten oplossen. In de vorige tutorial hebben wij een xOffset en yOffset toegevoegd aan de render methoden van Screen deze hebben wij echter nog op 0, 0 staan. Vervang daarom render(0,0) voor render(x,y). Wanneer je de applicatie nu start zal de map bewegen, alleen zal dit niet de eerste keer gebeuren maar pas wanneer je op de client klikt. Dit komt omdat er nog niet gefocust word op de client wanneer je de applicatie start. Roep daarom in de run() methoden de requestFocus() methoden aan voordat de game loop start.

    Source Code

    1. public void run() {
    2. long lastTime = System.nanoTime();
    3. long timer = System.currentTimeMillis();
    4. final double ns = 1000000000D / 60D;
    5. double delta = 0;
    6. int updates = 0;
    7. int frames = 0;
    8. requestFocus();
    9. while (running) {
    10. //...
    11. }
    12. // ...
    13. }
    Display All



    Wanneer je nu de applicatie start zal je zien dat je gelijk de toetsen kan indrukken en dat de map met sprites beweegt. Hiermee is dan ook het einde gekomen aan deze tutorial. Zoals beloofd heb ik ook de Github repository weer geupdate zodat je eventueel het project kan downloaden voor naslag werk.

    Github EP 05 - Keyboard events

    Met vriendelijke groet,

    Michael Beers

    Edit: In de volgende tutorial gaan we beginnen met het genereren van levels en tiles!
    Dit was mijn spreekbeurt, zijn er nog vragen?

    1,035 times read

Comments 1

  • R.Haentjens -

    Hartelijk bedankt!
    Weer verder in de tutorial, en zoals altijd, wachtend op de volgende :)