Battle System Tutorial by Vakinox

This tutorial is an attempt to encourage people, new to this area of coding, to create their own simple turnbased battle systems. It is preferred you have some experience in other areas of sphere and a fair amount in learning the API before you dive off into this tutorial without the proper background. The more you practice, the more you know.

Before You Begin

First, you will need to know a few essentials.

• Good Grasp on Sphere [1]
• How to make TextBoxes
• How to problem solve
• If-Then, For-Loop, and While-Loop conditionals [2]
• An understanding of Global and Local Variables [3]

(Optional:)

• Create full-functional menus [4]
• Knowledge of Color Coding [5]
• Familiarity with Sphere’s API [6]

Order of Importance

Every battle system must meet a list of certain criteria to operate:

1. Stats -(party members, items, enemies, and etc.)

2. Menu System - (to give the player choices)

3. The Battle System - (calculates damage, handles attack routines)

4. Graphics and Animations - (displays progress and visuals)

At the very basic level, the most important two functions are player stats and calculating the damage between the two opposing stats. However to make battle systems more entertaining, we add an interactive component (either menu choices or button smashing) and graphics to peak the player's interests. These are the fundamentals to turnbased battles, most everything else is optional.

Next, having order and structure in your coding process will help make writing scripts an easier exercise. You will always want to know what is the following item you want implement, or how to arrange everything so that it is easy to find. Having a checklist is a proper motivational tool to accomplish these things. Here is my personal order of importance:

• 1st call necessary scripts
• 2nd the game() function
• 3rd the stats
• 4th the battle system
• 5th the battle menu (options)
• 6th the attack routines
• 7th drawing the battle (graphics)
• 8th the health bars

Calling certain functions before others in the script may affect the program differently, this is why I insist the checklist to be in this order. For example, because player stats tend to reference items (equipment) you would want to define the items before you define player stats. Otherwise, defining player stats prematurely will cause the program to fail because it doesn't understand what items you are referencing. Remember: Javascript is read top-to-bottom.

Items and Statistics

After setting up the basics, you want to create statistics for everything with a numerical value attached to it and provides the battle system with some basis for calculations. Things such as weapons, health, or attack values will all have to be grouped into statistics and coded individually into the script. In a more reasonable approach and to be better identify certain types of statistics, I find it best to split and group them under separate functions, each established to identify the certain topic they associate with.

For example, player statistics will have its own function and set of arrays that associate with it.

Constructors

First what we will be doing is creating a function known as a 'Constructor', which will hold variables that we will later define through arrays. 'Arrays' are something we can group multiple values together in for various objectives. In the constructor (stats function) we need to establish variables which will then hold information for necessary things, such as player name or health, for your battle system to reference and use in calculations. The result should be structured similar to this:

 function Stats() { this.blah = value;	}

Here we identify the constructor as "Stats()" and inside the brackets we then create variables. Anything you want to be later defined in an array, you will want to bind to the constructor through the placement of "this." before each variable you create. You will need to replace "blah" as it is simply a placeholder for whatever variable you want to establish and give value to. For example, if you want your stats to include a variable for Health then you will want to edit as so:

 this.health = 0;

Any value you give a variable inside the constructor (stats function) will be the default value. We are currently establishing the default value as 0, however it will be changed in the Array that we create for the constructor. You will need to list more variables for whatever statistics you will want to be used in the battle system, such as attack value or current level.

The end result should look similar to this:

 function Stats (Name, MaxHp)
{
  this.Name   = Name;    // <-- The Character's Name
  this.Hp     = Hp;    	//  <-- The Character's Current Health value
  this.MaxHp  = Hp;  	//  <-- Maximum Health, for calculating percentages
  this.Atk    = 10;  	//  <-- The Character's Attack
  this.Def    = 10;  	//  <-- The Character's Defense
  this.Lvl    = 1;  	//  <-- The Character's Level
  this.Exp    = 0;	//  <-- For calculating the current experience
  this.ExpNL  = 0;	//  <-- The Goal to reach until the next Level Up
  this.Active = 0;      //  <-- Stops inactive members from being included in the Battle System
}

Within the parentheses, you can see where I placed both variables "Name" and "MaxHp" inside of them. This is a shortcut so that when we create the Arrays, we won't have to write out another line for defining both those variables. Instead we can just define both the variable's values inside of the parentheses whenever we are establishing our arrays.

Arrays

Upon when you finish listing the variables and finalizing the constructor (stats function) then you will need to create an array of each individual character or item's stats. Each individual character or item has their own array which defines their own individual names and attack values along with the other variables that were listed inside the constructor. To begin making arrays, you will first and only once need to declare a global variable as an array, like so:

 var blah = new Array();

Once that's established, this will allow you to create arrays branching off the variable "blah". An array will look similar to this:

blah[0] = new Stats ("Name", 10);   
blah[0].Atk = 10;

Within the new Array, we have defined several things. In the parentheses we establish the character's name in quotes, and we also established his MaxHp as a value of 10. And furthermore we also gave his Attack (Atk) a value of 10.

Whenever creating separate stats for a new character, you must again create a new array as similar to the one shown in example above. See the 0 in the brackets next to "blah"? That number is known as the index. Each array is given an index which gives them their own unique identity, separate from the others that may follow. For each new statistic for the other characters that you create, that identifying numerical value (the index) is increased. An example:

blah[0] = new Stats ("Character-01", 10);   
blah[0].Atk = 10; 

blah[1] = new Stats ("Character-02", 10);   
blah[1].Atk = 10;

What separates each instance is the index, the numerical value between the brackets. Remember to always change that number when creating new stats for the next character, or else it would conflict with other arrays that has the same index.

You will want to create several different arrays for Equipment, Items, Characters, and Enemies attaching to them whatever you feel is necessary to be calculated and used in your battle system. You will want to separate them in a way that is easy to identify and reference so that your code won't become illegible or hard to read. After doing so, although this is optional, you may also want to group player characters and enemies into their own individual party -- which is done through another separate array -- so that you can remove characters and reference them more easily in the battle system. This is done like so:

var Party = new Array();
Party[0] = 0;	
Party[1] = 1;
Party[2] = 2;

Each array signifies the order in which characters will be chosen in the battle system. If you want to randomize the character order however, for enemies who you may not want always in the same position for every battle, then you would want to format the array in a different way. First, you would want to create another constructor and inside the properties (brackets) list variables which we will then later assign the index number of the enemies that are randomly chosen for battle.

function EnemysTeam (E1, E2, E3, E4)    
{
  this.E1 = E1;      
  this.E2 = E2;  
  this.E3 = E3;   
  this.E4 = E4;
}
var Team = new Array();
Team[0] = new EnemysTeam(0,1,2,3);

The numbers inside the parentheses of EnemysTeam represents each individual enemy's index which they are assigned when you create arrays for their statistics. You can replace each index with Math.random() and set the range limit from 0 to 3.

The Battle System

First, you want to create the function and then establish a Local Variable that checks for an active battle. You can do this like so:

 IsTheBattleOver = false;