Battle System Tutorial by Radnen

From Spheriki

So you want to create a battle system, but lack the skills? Well, to be frank, if you do not have the skills, then you probably shouldn't be reading this tutorial. This tutorial is only designed for those who do have the skills but don't know where to start or what needs doing first.

This battle system tutorial aims to create a modular structure so that battle systems are easier to make. We won't be tackling just the how, but the better and easier how-to. To smash on other peoples battle systems: My old Feeks battle system is a very procedure-like way, and thus annoyingly complicated to handle. This is the same style used by MetalMac. And NeologiX only gives you the general idea, and doesn't actually tell you how unless you are good at analyzing pseudocode.

I am also not done with this tut, but never fear, it'll get done soon.

Note: I start each code segment with the filename of the script file. When following this tutorial you should save your code into files named after these. Also, do not assume each code segment in this tutorial builds after each other, sometimes I go back and revise an already written section. If I use game() twice this does not mean you define it twice, but you go back and make whatever change that I had made. This is a reflexive article.

Entities

Every battle system has entities; whether they are enemy or player.

Here is our Entity code:

// entity.js
 
function Entity(name, hp, mp, atk, def) {
  this.name = name;
  this.hp = hp;
  this.maxhp = hp;
  this.mp = mp;
  this.maxmp = mp;
  this.atk = atk;
  this.def = def;
 
  this.weapon = null;
  this.image = null;
}
 
// these scripts come after the entity definition:
RequireScript("player.js");
RequireScript("enemy.js");

We will use this to construct both players and enemies.

Player

To make a player object, we can build off of the entity object by inheriting its prototype. In JS we can do a basic inheritance call in the constructor function of your object to dynamically create the properties that define your player object:

// player.js
 
function Player() {
  this.inherit = Entity;
  this.inherit(name, hp, mp, atk, def);
 
  this.level = 1;
  this.exp = 0;
  this.next_exp = 100;
}

Your game will need to have a hero. Someone with courage who can brave the foul and slay the evil. We will name this hero... bob. We can also inherit here, but this time from the player object.

// player.js
 
function Player_Bob() {
  this.inherit = Player;
  this.inherit("Bob", 20, 10, 4, 2);
 
  this.image = LoadImage("bob.png");
}

I have added in a portrait image, remember, you may want to change it to a file you have, copying this won't help you any unless you actually do have a bob.png in your graphics sub-folder.

Enemy

Also using inheritance, what we did for the player we can do for enemies; they are all entities.

// enemy.js
 
function Enemy(name, hp, mp, atk, def, xp, gp) {
  this.inherit = Entity;
  this.inherit(name, hp, mp, atk, def);
 
  this.exp_amt  = xp; // for exp award
  this.gold_amt = gp; // for gold award 
}

Now, we can have an enemy. Since we have already made a stat object, we can use that in our enemy. Let's make a slime.

function Slime() {
  this.inherit = Enemy;
  this.inherit("Slime", 5, 5, 5, 2, 10, 2);
 
  this.image = LoadImage("slime.png");
}

There, I added in an exp and gold drop for when you have won the battle. Each enemy will have their own values, so that's the reason why I included those in the slime enemy object. I have also made the enemy considerably weaker than the play so you can at least finish the fight, but if you want more of a challenge, you can always modify these values. I also added in an enemy image, which you must acquire on your own.

The Battle System

The initial layout of the field.

Now, we have a player and an enemy. Oh, and a stat object too. Now we just need to draw our images and display battle information. The battle should contain:

• A single enemy positioned at the middle width and 1/3 the height.
• A menu at the bottom left side of the screen.
  • attack
  • defend
  • item
  • spell
  • run/escape options.
• the menu shall spawn a sub-menu for items and spells to the right.
• you can see the players stats at the right side of the screen.
• you can see the players portrait next to the menu.
• you can see the enemies health above their head.

TIP: It may also help you to draw a sketch of the menu on paper or in a painting program.