1.3-Object-Georienteerd-Programmeren

ChillyGame - Part 1: Walking around

In this assignment you are going to create a game using the SaxionApp GameLoop feature.

Please setup your project first using the setup guide

You end up with a class with 5 methods (An explanation for this methods can be found in the videos and setup guide):

• public static void main(String [] args)
• void init()
• void loop()
• void keyboardEvent(KeyboardEvent keyboardEvent)
• void mouseEvent(MouseEvent mouseEvent)

Step 1: Draw a background

Let’s pimp that ugly black screen by adding drawing a nice background image every time the loop runs.

• Add a folder to your project named resources
• Download the background image file here
• Add it to the resources folder.
• Add code to clear the screen everytime the loop runs and add the background

    public void loop() {
        // Clear the screen and add the background
        SaxionApp.clear();
        SaxionApp.drawImage("resources/background.png", 0,0, 1024,768);
    }
  

Step 2: Create a class for the player (a.k.a Chilly the penguin)

First, download the images for chilly the penguin here. Add them to a subfolder named player in your resources folder.

Our gameworld will consist of objects. At first there is one type of object: The player. A player will have the following properties:

• int x. The X-coordinate of the player
• int y. The Y-coordinate of the player
• int width. The width of the player character, which is always 65.
• int height. The height of the player character, which is always 100.
• String image with a reference to the file that must be used to draw chilly, which initially is "resources/player/penguin-down.png".

Besides these properties the Player also has some methods:

• A constructor, where you can specify the x and y coordinates to place the player.

• A getter for the X-coordinate: int getX().
• A getter for the Y-coordinate: int getY().
• A draw() method. The player will be responsible to draw itself and initially the code of this method should look like this:

    public void draw() {
        SaxionApp.drawImage("resources/player/penguin-down.png", x, y, width, height);
    }

Step 3: Add Chilly to the game

Now we want to see Chilly in our game. You can do that using the following steps:

• Create an instance variable for the player (private Player player).
• Create an instance of the Player in the init() method.
• Update your loop() method so it looks like this:

    public void loop() {
        // Clear the screen and add the background
        SaxionApp.clear();
        SaxionApp.drawImage("resources/background.png", 0,0, 1024,768);
  
        //Draw the player
        player.draw();
    }
  

Run the game. You should see Chilly on your screen

Step 4: Let Chilly move around!

• First add 4 methods to the player. It’s up to you to think about the contents of these methods. We want to move Chilly 2 pixels in the according direction every time the method is called.
  • public void moveLeft()
  • public void moveRight()
  • public void moveUp()
  • public void moveDown()
• Now update the keyboardEvent(KeyboardEvent keyboardEvent) method in the ChillyGame class so that the correct method will be called. For more information about this, watch this video.

You should end up with something like this (Make sure that in your version Chilly can move to all directions):

    public void keyboardEvent(KeyboardEvent keyboardEvent) {
        if (keyboardEvent.isKeyPressed()) {
            if (keyboardEvent.getKeyCode() == KeyboardEvent.VK_RIGHT) {
                player.moveRight();
            }
            ...
        }
    }

Step 5: Update Chilly’s image according to the direction he is moving

Quite a simple step, but makes it look a bit better. Please update Chilly’s image based on the direction he is moving in. There are four images: penguin-left.png, penguin-right.png, penguin-up.png and penguin-down.png

Advanced suggestion 1: Slippery ice!

If you think this was to easy. Try the following thing:

As you know ice is slippery. You can also update the Player class in a way that Chily has a speed for both directions (so an int speedx and an int speedy).

• Update the draw methods so that speedx is added to the x coordinate and speedy to the y coordinate.

• Then update the move...() methods so that they change the speedx and speedy variables instead of the x and y coordinate.

Please note: Chilly probably slips out of the screen very quick! Find a way to make these controls a bit easier. For example by setting both speedx and speedy to zero when pressing the spacebar or another key. Or set variable back to zero if you move in the opposite direction. So, if moveLeft() is called when speedx is greater then 0 then move set it to zero first.

Advanced suggestion 2: Make sure Chilly does not walk away!

If you think this was still to easy, try the following:

Make sure Chilly is kept between the bounds of the screen. You can do that by checking and updating Chilly’s coordinates in the loop() method before we draw him.

• If his X coordinate is smaller then 0, reset it to 0 (and set the speedx to 0 if you did advanced suggestion 1).
• The maximum X-coordiate can be determined by taking the width of the screen (1024) minus chilly’s width (65) and check for the value. So, if Chilly’s X is bigger then 959 reset it to 959.

Do the same for the Y coordinate!