Creating Entities

Please refactor scripts/resources.js

Creating and displaying entities on the grid is a fairly easy task that involves minimal coding.

Loading the Entity's Image

Before you can display the entity on the grid, you must first load an image for it to use. If you don't yet have an image made up, check out Creating Isometric Graphics.

Open up scripts/resources.js. Under the /* graphics */ section, create a variable to store your image.

/**
 * graphics
 */

var myImage;

Next , under the loadResources() function

• loading the image for the entity
• adding the entity to the entities array and make it visible

Loading the entity's image only requires two lines of code. At the top of game.js:

/**
 * entity resources
 */
var factory = new Image();
factory.src = "./assets/entities/factory.png";

The first line creates an image object. Make sure to name it accordingly. The second line defines the path to the entity's image.

Once that's all said and done, it's time to move onto adding the entity to the entities array. Also in game.js:

/**
 * game variables
 */
$(document).ready(function()
{
	/*** other code ***/

	// entities
	addEntity(new Entity("factory", factory, new Point(4,5), true));

	/*** more other code ***/
});

In this example, we've simply using the addEntity() function to add a new Entity object to the entities array. The Entity object has four basic attributes:

• name (string): Name of the entity. This is what you'll use to reference the entity on the screen

• image (image object): Image object for this entity. This is the image object you created earlier. Multiple entities can use the same image object.

• point (point object): Point object for this entity. Defines the location of the entity. Simply use new Point(x,y), replacing x and y with grid coordinates.

• visible (boolean): True or false. Determines whether object should be drawn on canvas.

In the above example, addEntity() occurs in the Game Variables section of game.js. Please note that addEntity() can be placed anywhere in any file as long as it falls inside a document.ready(). This is to ensure that the entity's image has been loaded first.