Ads

Tuesday, 5 August 2014

GAME DEVELOPMENT TUTORIAL: DAY 2-6: Adding Enemies


Hello everyone, and welcome to Day 6 of Unit 2. In today's lesson, we will be adding an enemy to our game, because our main character is getting a bit lonely.

Our first enemy will look like this:
Picture
The Menacing Heliboy
Too add Heliboy to our game, we will first create an Enemy class (which will serve as the superclass for most enemy types), and also a Heliboy class, which will be the subclass of the Enemy class.
Lesson #2-17: Creating the Enemy Class
The Enemy class will be pretty simple. Since this will be a superclass, we will define commonly used variables and methods, so that our subclasses can inherit them.

Here's how we will proceed:

1. Create the Enemy class.
2. Declare variables
3. Create behavior related methods
4. Create helper methods (Getters and Setters)

I. Creating the Enemy Class

Picture
Creating the Enemy class.
1. Right-click on our kiloboltgame package >> New >> Class.
2. Name it "Enemy".
3. Press OK!

II. Declaring Variables

All the enemies that we create will probably have the following:

1. Max Health
2. Current Health
3. Power (damage output)
4. Speed
5. X coordinate
6. Y coordinate

In addition, whenever the background scrolls, the enemy should move in the same direction. So we will create a reference to the bg1 object in StartingClass.

Within the class definition, declare the following:

private int maxHealth, currentHealth, power, speedX, centerX, centerY;private Background bg = StartingClass.getBg1();

III. Creating Behavioral Methods

As with all other game objects, we will need to first create a method that will constantly be running: update(); In addition, we will create a die(); and attack(); method for the enemy.

Add the following code below your variable declarations:

//Behavioral Methods
public void update() {
centerX += speedX;
speedX = bg.getSpeedX();
}

public void die() {
}
public void attack() {
}



TIP: In Eclipse, you can indent multiple lines of code at once by selecting multiple lines and pressing Tab. You can also dedent by pressing Shift + Tab.

TIP #2: You can auto format your code (fix indents and such) by pressing Ctrl + Shift + F.

IV. Generate Getters and Setters

We will need to create methods that will allow us to retrieve and manipulate the variables declared in this class.

1. Right-click on your code >> Source >> Generate Getters and Setters.
2. Select All, and press OK.
3. Eclipse will automatically add the following code:


public int getMaxHealth() {
return maxHealth;
}

public int getCurrentHealth() {
return currentHealth;
}

public int getPower() {
return power;
}

public int getSpeedX() {
return speedX;
}

public int getCenterX() {
return centerX;
}

public int getCenterY() {
return centerY;
}

public Background getBg() {
return bg;
}

public void setMaxHealth(int maxHealth) {
this.maxHealth = maxHealth;
}

public void setCurrentHealth(int currentHealth) {
this.currentHealth = currentHealth;
}

public void setPower(int power) {
this.power = power;
}

public void setSpeedX(int speedX) {
this.speedX = speedX;
}

public void setCenterX(int centerX) {
this.centerX = centerX;
}

public void setCenterY(int centerY) {
this.centerY = centerY;
}

public void setBg(Background bg) {
this.bg = bg;
}

And you are done with the Enemy class for now! It should now look like this:

Figure 2-28: Enemy Class

package kiloboltgame;


public class Enemy {


private int maxHealth, currentHealth, power, speedX, centerX, centerY;
private Background bg = StartingClass.getBg1();


// Behavioral Methods
public void update() {
centerX += speedX;
speedX = bg.getSpeedX();


}


public void die() {


}


public void attack() {


}


public int getMaxHealth() {
return maxHealth;
}


public int getCurrentHealth() {
return currentHealth;
}


public int getPower() {
return power;
}


public int getSpeedX() {
return speedX;
}


public int getCenterX() {
return centerX;
}


public int getCenterY() {
return centerY;
}


public Background getBg() {
return bg;
}


public void setMaxHealth(int maxHealth) {
this.maxHealth = maxHealth;
}


public void setCurrentHealth(int currentHealth) {
this.currentHealth = currentHealth;
}


public void setPower(int power) {
this.power = power;
}


public void setSpeedX(int speedX) {
this.speedX = speedX;
}


public void setCenterX(int centerX) {
this.centerX = centerX;
}


public void setCenterY(int centerY) {
this.centerY = centerY;
}


public void setBg(Background bg) {
this.bg = bg;
}



}
Lesson #2-18: Creating the Heliboy class.
We will now be creating the Heliboy class.
We will be creating this class slightly differently, so even if you know how to make classes in Eclipse, read the instructions below!

1. Right-click on kiloboltgame >> New >> Class
2. Name it "Heliboy"
3. Now, in the Superclass: option, press Browse.
4. Type "enemy" in Choose a type:
Picture
Choosing the Enemy Superclass
5. Press OK.
6. Check "Constructors from superclass:"
7. Press Finish.

Voila! The following code generates:

Figure 2-28: Heliboy Class

package kiloboltgame;

public class Heliboy extends Enemy {

public Heliboy() {
// TODO Auto-generated constructor stub
}


}
By taking steps 4 and 6 : choosing Enemy as a superclass and adding a constructor, Eclipse automatically generated the code in bold above. No other changes are made. It is just a shortcut.

Replace the //TODO message with the following code:

setCenterX(centerX);
setCenterY(centerY);


And add the following parameters to the constructor so that we can use centerX and centerY:

public Heliboy(int centerX, int centerY) {
And now you have the completed Heliboy class. Whenever you create a new Heliboy object, you will pass in two parameters, which will define the central coordinate of your enemy.
Lesson #2-19: Displaying Heliboy
To display Heliboy in our game, we must do the following.

1. Create an Image object for Heliboy.
2. Define hb variables that will be objects created using the Heliboy constructor.
3. Call the update() method for these objects.
4. Paint hb objects with the Image object created in step 1.

I. Create Image Object - Heliboy

heliboy.png
Download File

1. Download the above image, place it in your data folder, and rebuild the project by going to Project >> Clean >> Clean All Projects >> OK.

2. Open StatingClass.java, and add heliboy to the Image declarations.

private Image image, currentSprite, character, characterDown, characterJumped, background, heliboy;

3. In the // Image Setups section, define the heliboy Image object:
 heliboy = getImage(base, "data/heliboy.png");

II. Create HB Variables

1. Below the private Robot robot; declaration, add the following:
private Heliboy hb, hb2;

We will be creating two Heliboy objects.

2. Within the start() method, add the two bolded lines BELOW the Background creation (the Enemy superclass looks for these backgrounds, so if they are not defined, your game will crash).

bg1 = new Background(0, 0);
...
hb = new Heliboy(340, 360);
hb2 = new Heliboy(700, 360);

...

Thread thread = new Thread(this);
...

This will create two Heliboy objects centered at (340, 360) and (700, 360).

III. Call the Update Method

Scroll down to the run() method, and add:

hb.update();
hb2.update();

Like so:

 @Override
public void run() {
while (true) {
robot.update();
if (robot.isJumped()){
currentSprite = characterJumped;
}else if (robot.isJumped() == false && robot.isDucked() == false){
currentSprite = character;
}
hb.update();
hb2.update();
bg1.update();
bg2.update();
repaint();
try {
Thread.sleep(17);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}

You might notice that we never defined update() in the Heliboy class; however, since the Heliboy class inherited the Enemy class, calling update() here will automatically call the update() method in the Enemy class. This is inheritance in action. :)

IV. Paint the HB objects

Finally, we have to make the newly created Heliboy objects appear on the screen.
1. Go to the paint() method and add the following at the end:

g.drawImage(heliboy, hb.getCenterX() - 48, hb.getCenterY() - 48, this);
g.drawImage(heliboy, hb2.getCenterX() - 48, hb2.getCenterY() - 48, this);


The Heliboy.png image you downloaded has dimensions 96 x 96. So, if we paint 48 pixels lower in both X and Y (by subtracting 48), then whatever numbers that we input in the constructor (e.g. hb = new Heliboy(340, 360);) will represent the centerX and centerY coordinates of the newly drawn images.

And that's it for Day 6! I hope you guys are beginning to pick up on the patterns, so you can add your own ideas to the game as they pop up! We will be adding a shooting mechanic in the next lesson. :)

Thank you for supporting Kilobolt and tell your friends about us! :)

No comments:

Post a Comment