SpawnHero RPG:
Programming Documentation

Programming Setup

All game code will all be contained within the game.js file. Open this file in SublimeText.

In order to be successful building a game, you will need to understand basic variables, functions, methods, and properties. You can look up the patterns for basic Javascript code online, or by simply building the beginner level, you should be able to recognize and modify the parts of code.

game.js

// GAME STORY

Settings.introText = "Intro Text\n\nTwo Lines Long.";
Settings.gameWinText = "Win Text";
Settings.gameOverText = "Game Over Text";

// SKIP THE INTRO?
// Settings.skipIntro = true;

// HERO
Settings.hero.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.hero.default_speed =  ;
Settings.hero.default_life =  ;

// ENEMY
Settings.enemy.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.enemy.default_speed =  ;
Settings.enemy.default_health =  ;

// COIN
Settings.coin.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.coin.default_value =  ;

// POWERUPS
Settings.freeze.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.freeze.default_duration =  ;
Settings.speed.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.speed.default_duration =  ;
Settings.slow.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.slow.default_duration =  ;

// WORLD SIZE
Settings.worldSize.width =  ;
Settings.worldSize.height =  ;

// GAME CODE
Spawn.game = function(){
  // Your game code goes here.


}

Game Story

Write intro, win, and lose text to your game. These values must be strings. If you want to insert a line break, you need to add \n\n to represent a new line.

Game Settings

By default, all the settings will be inactive. Uncomment the lines you want to turn on to override the defaults.

Game Level

You can place many different types of things in SpawnHero RPG. The entire level map will be written inside the Spawn.game function. Don't misplace the closing } at the very end!

Everything Goes in Spawn.game

Besides the settings that are described in the next section, all code goes inside the Spawn.game function.

Hero

The Hero is the character that the player controls in the game. The hero graphic default looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use.

Hero Settings

These are all optional settings that affect the hero. Remember that these settings all go at the top of your document, after the Game Win and Game End text, and before the Spawn.game function.

Hero Default Skin

Be sure that the hero skin value is a string. Here is an example:

Settings.hero.default_skin = "assets/images/SOME-GRAPHIC.png";

Default Hero Speed

The optional code to set the hero's walking speed is below. The value will be in the hundreds range. Be sure that the hero skin value is an integer. Here is an example:

Settings.hero.default_speed = 300;

Default Hero Life

The optional code to set the hero's default life is below. Be sure that the life value is an integer. Here is an example with a value:

Settings.hero.default_life = 3;

Spawning the Hero

Spawn Hero

The required code to set the hero's start position is below. You need to spawn 1 hero in the game for it to be playable. Be sure that the hero's x and y position are integers. Here is an example with values:

Spawn.hero( x , y );

// setting the tile size to 40 first to make it easy to see the grid.
var tile = 40;

Spawn.hero(2*tile, 3*tile);

Spawning the Hero, and doing stuff

Spawning the hero alone doesn't let you do very much. It is much more useful to give your hero a variable, so you can do more stuff with your hero.

// create a new variable named player, that is created when the hero spawns
var player = Spawn.hero(2*tile, 3*tile);

Now that player exists, you can affect the methods and properties that the hero has. Note that player is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

player.coins

// set the amount of coins the player has
player.coins = 3 ;

// add 4 coins to the player's coins
// put this in a function
player.coins += 4 ;

player.life

// set the amount of lives the player has
player.life = 10 ;

// add 2 life to player
// put this in a function
player.life += 2 ;

// increase life by 1
// put this in a function
player.life ++ ;

// subtract a life by 1
// put this in a function
player.life -- ;

player.hit(number)

// hurts the player by the amount of points defined in the argument
// put this in a function
player.hit(3) ;

player.die()

// forces the player to die
// possibly when some kind of trap is sprung
// put this in a function
player.die() ;

Objects

Objects are impassable barriers in the game, such as Walls, Trees, Bushes, or Stumps. See the Game Art page to choose any art asset to set for your object. The arguments that must be set for an object are the x and y position, and the graphic. Be sure that the x and y values are set to integers and the graphic is set to a string. The notated code to spawn an object is below:

Spawning an Object

Spawn.object( x , y , "assets/images/SOME-GRAPHIC.png" );

Here is an example with values:

Spawn.object(5*tile, 10*tile, "/assets/images/SOME-GRAPHIC.png");

Spawning an Object, and doing stuff

Spawning the object alone is OK for defining boundaries and walls. The only thing you can do to an object is spawn or despawn it. If you want to be able to despawn the object later, give the object a variable name. If you want to do anything else to the object besides despawn, you might want a weapon, collectable, or interactable item instead.

// create a new variable named whatever you want, that is created when the object spawns
var greatWall = Spawn.object(2*tile, 3*tile, "/assets/images/SOME-GRAPHIC.png");

Now that greatWall exists, you can do the following method. Note that greatWall is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

greatWall.despawn( )

// make the object go away
// put this in a function
greatWall.despawn();

That's it. Not much exciting to do with objects. Let's add other things that are more interesting.

Coins

Coins are items that when touched, instantly add points to the player's total coin count. The coin graphic default looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use.

Coin Settings

These are all optional settings that affect coins. Remember that these settings all go at the top of your document, after the Game Win and Game End text, and before the Spawn.game function.

Coin Default Skin

The optional code to set the default coin appearance is below. Be sure that the value is a string. Here is an example:

Settings.coin.default_skin = "/assets/images/SOME-GRAPHIC.png";

Coin Default Value

The optional code to set the default coin value is below. Be sure that the value is an integer. Here is an example:

Settings.coin.default_value = 1;

Spawning a Coin

The code to place a coin on the screen is below. The arguments that must be set for a coin are the x and y position. The point value and an override coin graphic are optional. A good use of a different graphic is a treasure chest (it is a hidden coin, until you touch it). Be sure that the x and y values are set to integers, the point value is set to an integer, and the graphic is set to a string. The notated code to spawn a coin is below:

Spawn.coin( x , y , points, "/assets/images/SOME-GRAPHIC.png");

Here are some examples with values:

// Spawns a coin worth 50 points that uses the crown graphic.
Spawn.coin(200, 400, 50, "/assets/images/SOME-GRAPHIC.png");

// Spawns a coin worth 10 points that uses the default graphic.
Spawn.coin(200, 400, 10);

// Spawns a coin worth the default points an uses the default graphic.
Spawn.coin(200, 400);

Spawning a Coin, and doing stuff?

Coins are instantly picked up the moment you touch it. In other words, they are instantly despawned the moment you touch them. Since they disappear instantly, you can't really do anything else to a coin.

Powerups: Freeze, Slow, & Speed

When touched Spawn.freeze instantly freezes the player. The default graphic looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use.

When touched Spawn.slow instantly slows the player. The default graphic looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use.

When touched Spawn.speed instantly speeds up the player. The default graphic looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use. Unlike Freeze and Slow, Speed is usually provides positive effects to the player.

Powerup Settings

The optional code to set the default appearance for these items is below. Remember that these settings all go at the top of your document, after the Game Win and Game End text, and before the Spawn.game function. Be sure that the value for any of these items is a string.

Powerup Default Skins

Settings.speed.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.slow.default_skin = "assets/images/SOME-GRAPHIC.png";
Settings.freeze.default_skin = "assets/images/SOME-GRAPHIC.png";

Powerup Default Durations

The optional code to set the default duration of these items is below. Be sure that the value for any of these items is an integer. Here are examples:

Settings.freeze.default_duration = 3;
Settings.slow.default_duration = 3;
Settings.speed.default_duration = 3;

Spawning a Freeze, Slow, or Speed Item

The code to place a freeze, slow, or speed item on the screen is below. The arguments that must be set for any of these items are the x and y position. The duration and an override graphic are optional. A good use of a different graphic is a trap (it looks like a treasure chest though it's really a item that has an effect on the player when touched). Be sure that the x and y values are set to integers, the point value is set to an integer, and the graphic is set to a string. The notated code to spawn a one of these items is below:

Spawn.freeze( x , y , duration , "assets/images/SOME-GRAPHIC.png");

Spawn.slow( x , y , duration , "assets/images/SOME-GRAPHIC.png");

Spawn.speed( x , y , duration , "assets/images/SOME-GRAPHIC.png");

Here are some examples with values:

// Spawns a Freeze item that uses the default duration and graphic
Spawn.freeze(200, 400);

// Spawns a Slow item that lasts for a duration of 12 and uses the default graphic.
Spawn.slow(200, 400, 12);

// Spawns a Speed item that lasts for a duration of 5 and uses the wand graphic.
Spawn.speed(200, 400, 5, "assets/images/SOME-GRAPHIC.png");

Spawning a Powerup, and doing stuff to it?

Powerups are instantly picked up the moment you touch it. In other words, they are instantly despawned the moment you touch them. Since they disappear instantly, you can't really do anything else to a powerup.

Enemies

An enemy deducts life when it touches the Hero.The hero can fight off an enemy by attacking with [ SPACEBAR ]. The enemy graphic default looks like this, however, you can set it to look like any asset in the assets directory. See the Game Art page for all the assets you can use.

Enemy Settings

These are all optional settings that affect enemies. Remember that these settings all go at the top of your document, after the Game Win and Game End text, and before the Spawn.game function.

Enemy Default Skin

The optional code to set the default enemy appearance is below. Be sure that the value is a string. Here is an example:

Settings.enemy.default_skin = "assets/images/SOME-GRAPHIC.png";

Enemy Default Speed

The optional code to set the default enemy speed is below. Be sure that the value is an integer. Here is an example:

Settings.enemy.default_speed = 100;

Enemy Default Health

The optional code to set the default enemy health is below. Be sure that the value is an integer. Here is an example:

Settings.enemy.default_speed = 100;

Spawning an Enemy

The first 2 arguments x and y are integers that spawn an enemy at ( x , y ) position. The first 2 arguments are required.

The third argument is a string that sets the enemy graphic (optional). If it is not set, the default graphic will be used.

The fourth argument is an integer that sets the enemy health (optional). If it is not set, the default health will be used.

The fifth argument is a string that is either "up", "down", "left", or "right". The enemy will initially start walking in the direction defined and will continue walking until it bumps into an object (then it will walk in the opposite direction). If no direction is set, the enemy will not move until something hits it.

The sixth argument is an integer that sets the enemy speed (optional). If it is not set, the default speed will be used.

The notated code to spawn an enemy is below:

Spawn.enemy( x , y , "assets/images/SOME-GRAPHIC.png" , health , "direction" , speed );

Here are some examples of enemies with values:

// Spawns an enemy with the robot skin, that does not move.
// The direction is set though doesn't do anything.
Spawn.enemy(200, 400, "assets/images/SOME-GRAPHIC.png");

// Spawns an enemy that moves "up"
// at the default speed.
Spawn.enemy(200, 400, "assets/images/SOME-GRAPHIC.png", 1, "up");

// Spawns an enemy with 5 health that moves right at 800 speed.
Spawn.enemy(200, 400, "assets/images/SOME-GRAPHIC.png", 5, "right", 800);

Spawning an Enemy, and doing stuff

Spawning a wandering enemy doesn't let you do very much. If you want to control when the enemy spawns, give it a variable.

// create a new variable for your enemy, that is created when the enemy spawns
var bossMonster = Spawn.enemy(2*tile, 3*tile);

Now that bossMonster exists, you can affect the methods and properties that the enemy has. Note that bossMonster is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

enemy.hit(number)

// hurts the enemy by the amount of points defined in the argument
// put this in a function
enemy.hit(3) ;

bossMonster.kill( )

// kill the enemy
// put this in a function
bossMonster.kill() ;

bossMonster.onDeath = function( ){ }

bossMonster.onDeath = function(){
  // WHEN kill is initiated, this happens
}

bossMonster.onDeath = function(){
  if( something-here-is-true ){
    // Then trigger this.
  }else{
    // Otherwise, this happens.
  }
}

bossMonster.despawn()

// makes the object go away though doesn't trigger "onDeath"
// put this in a function
bossMonster.despawn();

Collectable Sprites

Collectable Sprites are things that can be "picked up" in the game and added to your inventory when [ ENTER ] is pressed. Collectables include things like Packages, Scrolls, Potions, and Keys. Collectable sprites can be walked through so they do not block the player's path. See the Game Art page to choose any art asset to set for your collectable sprite. The arguments that must be set for a collectable sprite are the x and y position, and the graphic. Be sure that the x and y values are set to integers and the graphic is set to a string.

Spawning a Collectable

The notated code to spawn an collectable sprite is below:

Spawn.collectableSprite( x , y , "assets/images/SOME-GRAPHIC.png" );

Here is an example with values:

Spawn.collectableSprite(200, 400, "assets/images/SOME-GRAPHIC.png");

Spawning a Collectable, and doing stuff

Spawning a collectable alone is okay, though the objects won't do anything once they are in the hero's inventory. Create a variable, so you can do stuff with the item.

// create a new variable
var goldenKey = Spawn.collectableSprite(2*tile, 3*tile);

Now that goldenKey exists, you can do the following methods. Note that goldenKey is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

goldenKey.despawn( )

// make the collectable go away
// put this in a function
goldenKey.despawn();

goldenKey.onCollect = function( ){ }

// WHEN the key is collected, run this function
goldenKey.onCollect() = function(){
  if(player.coins >= 10){
    // this happens...
  }else{
    // otherwise this default happens...
  }
}

Weapons

Weapons are collectables that can be "picked up" in the game, added to your inventory, and used to attack enemies when [ ENTER ] is pressed. Weapons can be walked through so they do not block the player's path. See the Game Art page to choose any art asset to set for your weapon. The arguments that must be set for a weapon are the x and y position, and the graphic. Be sure that the x and y values are set to integers and the graphic is set to a string. The last argument that can be set is the weapon's power, which by default is 1, and can be set to a number.

Spawning a Weapon

The notated code to spawn an weapon is below:

Spawn.weapon( x , y , "assets/images/SOME-GRAPHIC.png" , power );

Here is an example with values:

Spawn.weapon(200, 400, "assets/images/item-sword-yellow.png");

Spawning a Weapon, and doing stuff

Once a weapon is picked up by the hero, it is automatically equipped, and allows the player to attack enemies. If you want to do more than this, create a variable, so you can do more stuff with the item.

// create a new variable
var greatSword = Spawn.weapon(2*tile, 3*tile);

Now that greatSword exists, you can do the following methods. Note that greatSword is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

greatSword.power

// set the power of the weapon
greatSword.power = 10 ;

// increase the power of the weapon
// put this in a function
greatSword.power += 2 ;

greatSword.equip( )

Typically, the sword would automatically be equipped when picked up. If you want to equip a weapon that exists, though is not being touched by the hero, you can call the equip() function.

// equip weapon
// put this in a function
greatSword.equip();

greatSword.despawn( )

// make the weapon go away
// put this in a function
greatSword.despawn();

greatSword.onCollect = function( ){ }

// WHEN the key is collected, run this function
greatSword.onCollect() = function(){
  if(player.coins >= 10){
    // this happens...
  }else{
    // otherwise this default happens...
  }
}

Ranged Weapons

Ranged Weapons are weapons that can be "picked up" in the game, added to your inventory, and used to attack enemies when [ ENTER ] is pressed. Unlike a weapon, ranged weapons shoot a projectile. Ranged weapons can be walked through so they do not block the player's path. See the Game Art page to choose any art asset to set for your weapon. The arguments that must be set for a weapon are the x and y position, and the graphic. Be sure that the x and y values are set to integers, the next two arguments are set to graphics for the main weapon and the projectile, which are strings. The next argument that can be set is the weapon's power, which by default is 1, and can be set to a number. The next 2 arguments are the range of the weapon, and the cooldown of the item, which are both numbers.

Spawning a Ranged Weapon

The notated code to spawn a ranged weapon is below:

Spawn.rangedWeapon( x , y , "assets/images/SOME-GRAPHIC.png" , "assets/images/SOME-GRAPHIC.png" , power , range , cooldown );

Here is an example with values:

Spawn.rangedWeapon(200, 400, "assets/images/item-sword-yellow.png", 2, 100, 100);

Spawning a Weapon, and doing stuff

You can do the same things you do to regular weapons, to ranged weapons.

Interactable Sprites

Interactable Sprites are impassable barriers that can be "talked to" in the game by pressing [ ENTER ], such as Shop Owners, Villagers, or Sign Posts. See the Game Art page to choose any art asset to set for your interactable sprite. The arguments that must be set for an interactable sprite are the x and y position, and the graphic. Be sure that the x and y values are set to integers and the graphic is set to a string. The notated code to spawn an interactable sprite is below:

Spawn.interactableSprite(x, y, "assets/images/SOME-GRAPHIC.png");

Here is an example with values:

Spawn.interactableSprite(200, 400, "assets/images/SOME-GRAPHIC.png");

An interactable sprite on its own isn't very useful until we define what happens when the player interacts with the item. We will get to that when we go over some useful functions.

Spawning an Interactable, and doing stuff

Spawning an interactable alone doesn't let you do very much. It is much more useful to give your interactable a variable, so you can do more stuff with it.

// create a new variable named villager, that is created when the interactable spawns
var villager = Spawn.interactableSprite(2*tile, 3*tile);

Now that villager exists, you can affect the methods and properties that the interactable has. Note that villager is an example variable, and you can make it whatever you want, as long as it has proper variable syntax.

villager.interact = function( ){ }


villager.interact = function( ){
  // define what happens when the hero interacts with it
}

villager.talk("string")

// the interactable says this, when interacted with
// usually in a function
villager.talk("string");

villager.receiveItem(itemVariableName)

// put a defined item in the villager's inventory
// usually in a function
villager.receiveItem(goldenSword);

villager.hasItem(itemVariableName)

// checks if the villager has an item
// put this in a function
// as a conditional check
villager.hasItem(itemVariableName)

villager.despawn( )

// make the interactable go away
// put this in a function
villager.despawn();

Messages

A message is a text popup that displays in the middle of the screen. A message can display when an interactable item is touched, or when some other condition is set. The message must be written as a string. The notated code to spawn a message is below:

Spawn.message("A message string.");

// something
villager.interact = function(){
  Spawn.message("You did it!.");
}

// something
villager.interact = function(){
  if(player.coins >= 10){
    Spawn.message("You did it!");
  }else{
    Spawn.message("You still need to collect some coins.");
  }
}

A message on its own isn't very useful until it is combined with conditions for when it is triggered. We will get to that when we go over some useful functions.

Examples

Placing Objects Easily

Placing a Bunch of Walls

Placing a bunch of walls can be very redundant especially if only a single thing in each of them is being changed:


// Placing some walls in a line on the game map.
// Notice only the "x" has changed.

Spawn.object(0, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(40, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(80, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(120, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(160, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(200, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(240, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(280, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(320, 0, "assets/images/SOME-GRAPHIC.png");
Spawn.object(360, 0, "assets/images/SOME-GRAPHIC.png");

Set a variable representing the grid cell size to make it easier to place objects on the map. Also set a variable for the image that you are using. This way, you can focus on placing items at grid points, instead of pixel positions.

// Set a variable for the tile size.
var tile = 40;

// Set a variable we will use for all walls.
var wall = "assets/images/SOME-GRAPHIC.png";

// Place some walls on the game map.
Spawn.object(0*tile, 0, wall);
Spawn.object(1*tile, 0, wall);
Spawn.object(2*tile, 0, wall);
Spawn.object(3*tile, 0, wall);
Spawn.object(4*tile, 0, wall);
Spawn.object(5*tile, 0, wall);
Spawn.object(6*tile, 0, wall);
Spawn.object(7*tile, 0, wall);
Spawn.object(8*tile, 0, wall);
Spawn.object(9*tile, 0, wall);

Great! Now you have reduced the need for having to type the whole file name of the image every time by using a shorter variable name to remember it by. Now you can make it even less redundant by using a for loop:

// Set a variable for the tile size.
var tile = 40;

// Set a variable to use for all walls.
var wall = "assets/images/SOME-GRAPHIC.png";

// Place some walls on the game map with a for loop.
// Note: This loop starts counting at 0 until 9. 10 total.
// 1. Starts a variable at 0.
// 2. If 'i' is less than 10.
// 3. Do whatever is in the loop body.
// 4. Add +1 to it.
// 5. Repeat until 'i' is not less than 10.

for (i = 0; i < 10; i++){
  Spawn.object( i * tile, 0, wall);
}

The new code we have shortened to does exactly the same thing as the original code we started off with. Let the code do the work for you.

Interaction with a Message

In order for an interactable sprite to do something, you will need the interact function.

First, define a new variable and set its value to an interactable sprite. In this example, the variable is called messageFlag.

var messageFlag = Spawn.interactableSprite( 100, 50, "assets/images/item-flag-red.png");

Next, use the interact function to create a new code block where we can set what happens when the item is interacted with:

var messageFlag = Spawn.interactableSprite( 100, 50, "assets/images/item-flag-red.png");
messageFlag.interact = function(){
  // Something will happen when the player interacts with "messageFlag".

}

What can you define in here? Maybe...

var messageFlag = Spawn.interactableSprite( 100, 50, "assets/images/item-flag-red.png");
messageFlag.interact = function(){
  Spawn.message('Finish 2 quests to win the game.');
}

This will display the message pop up with a short message. We can use this to simulate things like talking characters when you interact with them. Let's make this a bit fancier and add a message depending on your current health.

var messageFlag = Spawn.interactableSprite( 100, 50, "assets/images/item-flag-red.png");
messageFlag.interact = function(){
  // A new conditional statement is added!
  if( player.life < 5 ){
    Spawn.message('Are you sure you are ok?');
  }
  Spawn.message('Finish 3 quests to win the game.');
}

This adds an extra message if your health goes below 5 then continues to display the original message. If your health is 5 and above, only the normal message will display.

Tracking Progress

In order for things to happen in a certain way, we need a way to track things or let the code know something now can be done. We can do this in a lot of different ways, but one of the simplest ways are booleans! This are values that only store a true or false value. So we need a way to track 3 quests:

// Set to false, since they aren't supposed to be done.
var quest1Complete = false;
var quest2Complete = false;
var quest3Complete = false;

Now we just need to set them to true when the player does something we want. We can do that in the next example.

Triggering an Event by Collection an Item.

Let's create a quick retrieval quest using the collectableSprite:

var potion = Spawn.collectableSprite(280,280, "assets/images/item-potion-red.png");
potion.onCollect = function(){
  quest1Complete = true;
  Spawn.message("Quest 1 Complete!");
}

When we pick up the potion, the .onCollect method will execute, which sets one of boolean we set earlier to true. It then also adds a little message telling the player that quest 1 is complete.

Turning in an Item to an Interactable.

Now that we have a potion in our inventory we can use it as a boolean to check with all sorts of things. Let's create a character that wants a potion.

var potionPerson = Spawn.interactableSprite(360,280,"assets/images/person-female-2.png");

// This uses the interact method from an interactableSprite.
potionPerson.interact = function(){
  // Conditional statement used here to check!
  if( player.hasItem( potion ) === true ){
    quest2Complete = true;
    potionPerson.talk("Thanks! Just what I needed!");
    Spawn.message("Quest 2 Complete!");
    potionPerson.despawn();
  } else {
    potionPerson.talk("I could use a potion right now.");
  }
}

We use a handy method belonging to interactableSprites called hasItem( some_collectable_variable_name ). This returns a boolean if you pass in the collectable's variable name inside it. If the player picked up the potion earlier, the code will check for it in the inventory when the player talks to the character and tells them they have passed Quest 2 and mark the quest boolean as complete (true). Also, we despawn the potion person so they go away once the quest is complete as well. If they talked to the person before picking up the potion, they will give a different message.

Using Counters

Now let's create a different type of quest. This quest will use a counter to count a goal. We will create an integer variable and start it at '0' and a small function that will add '1' everytime it is called:

var counter = 0;
function addToCounter(){
  // This is the same as 'counter = counter + 1;'
  counter++;
}

You may have seen the ++ before and all it does is set the value of the variable 'counter' to its old value + 1. So if we run addToCounter() 10 times, our counter variable should have the value of 10. Let's trigger the function by using the next example.

Using Enemy Defeats as an Event Trigger

Sometimes we want something to happen when we defeat an enemy. For that we use the onDeath() method belonging to 'Enemy' objects.

var trex_image = "assets/images/creature-trex.png";
// Using a loop to spawn monsters
for( var i=0; i<10; i++ ){
  // Spawns monsters in a line
  var trexMonster = Spawn.enemy( 200 + (i * tile_size), 80, trex_image );
  trexMonster.onDeath = function(){
    addToCounter();
  }
}
var simpleWeapon = Spawn.weapon( 120, 160, "assets/images/item-sword-yellow.png");

Whenever a monster dies, it will call the custom made function addToCounter() that will tick the counter. However, now what do we do with the counter. Sure it can track a number, but it can be useful if it did something when we hit a certain number. Let's modify our addToCounter() to do something more.

function addToCounter(){
  if( counter >= 5 && quest3Complete === false ){
    quest3Complete = true;
    Spawn.message("You defeated enough monsters!");
    Spawn.message("Quest 3 Complete!");
  }
  counter++;
}

Now we turned our custom function into a conditional that will check if we defeated at least 5 monsters AND quest3Complete is not done yet. The operator && tells the conditional that both conditions passed into the 'if' statement need to be fulfilled. You can also use the operator || to mean OR where just 1 of the conditions need to be fulfilled to activate.

Initating Gameover

Now that we have 3 or so quests done. We can probably end the game now. Let's go back to the messageFlag that told us our winning conditions.

messageFlag.interact = function(){
  if( player.life < 5 ){
    Spawn.message('Are you sure you are ok?');
  }

  // Not very elegant, but it will get the job done!
  if( quest1Complete === true && quest2Complete === true && quest3Complete === true ){
    Spawn.message("You did it!");
    Spawn.gameWin();
  } else {
    Spawn.message('Finish 3 quests to win the game.');
  }
}

This will send the player to the "Game Win" screen using the Spawn.gameWinText when all booleans you set earlier are true when you talk to the flag. Alternatively you can call the .gameOver() method to send the player to a "Game Over" screen that can display a different message based on Spawn.gameOverText, which can be helpful if you want to force a 'bad' ending.

Programming Difficulty

Requires some knowledge of Javascript. Game level programming can be easy if code blocks are copied and pasted from documentation. Programming is more challenging if complex logic is desired for intricate timing.

SpawnHero RPG:Programming Documentation

Programming Setup

game.js

Game Story

Game Settings

Game Level

Everything Goes in Spawn.game

Hero

Hero Settings

Hero Default Skin

Default Hero Speed

Default Hero Life

Spawning the Hero

Spawn Hero

Spawning the Hero, and doing stuff

player.coins

player.life

player.hit(number)

player.die()

Objects

Spawning an Object

Spawning an Object, and doing stuff

greatWall.despawn( )

Coins

Coin Settings

Coin Default Skin

Coin Default Value

Spawning a Coin

Spawning a Coin, and doing stuff?

Powerups: Freeze, Slow, & Speed

Powerup Settings

Powerup Default Skins

Powerup Default Durations

Spawning a Freeze, Slow, or Speed Item

Spawning a Powerup, and doing stuff to it?

Enemies

Enemy Settings

Enemy Default Skin

Enemy Default Speed

Enemy Default Health

Spawning an Enemy

Spawning an Enemy, and doing stuff

enemy.hit(number)

bossMonster.kill( )

bossMonster.onDeath = function( ){ }

bossMonster.despawn()

Collectable Sprites

Spawning a Collectable

Spawning a Collectable, and doing stuff

goldenKey.despawn( )

goldenKey.onCollect = function( ){ }

Weapons

Spawning a Weapon

Spawning a Weapon, and doing stuff

greatSword.power

greatSword.equip( )

greatSword.despawn( )

greatSword.onCollect = function( ){ }

Ranged Weapons

Spawning a Ranged Weapon

Spawning a Weapon, and doing stuff

Interactable Sprites

Spawning an Interactable, and doing stuff

villager.interact = function( ){ }

villager.talk("string")

villager.receiveItem(itemVariableName)

villager.hasItem(itemVariableName)

villager.despawn( )

Messages

Examples

Placing Objects Easily

Placing a Bunch of Walls

Interaction with a Message

Tracking Progress

Triggering an Event by Collection an Item.

Turning in an Item to an Interactable.

Using Counters

Using Enemy Defeats as an Event Trigger

Initating Gameover

Programming Difficulty

SpawnHero RPG:
Programming Documentation