How to add an item

This page is meant to guide you through the creation of a basic item.

Draw a sprite

General info

Every sprite in the game is present in three sizes conveniently put into the following folders:

• client/img/1: smallest sprites, meant for a map with 16x16 pixels tiles;
• client/img/2: medium sprites, meant for a map with 32x32 pixels tiles;
• client/img/3: bigest sprites, meant for a map with 48x48 pixels tiles; To keep inline with the visual style of the game, instead of drawing big sprites and then reducing them, one should create the sprites for the smallest map and enlarge them (with no extrapolation whatsoever).

Create the image for your sprite

This should be a png file with transparent background containing all the "states" for your object's animations in a line. Each animation (action) is a line. The name of the png file should be explicit. e.g.: item-rosettastone.png

Define the rendering of the sprite

This should be done by creating a .json file to the name of your item in the folder client/sprites. In our example, we will call it « item-rosettastone.json ». The content of this file is as follows… The content of the file is pretty straightforward, except the offset. The image produced will be put on a tile on the map. The "row" will indicate the row (0: first, 1: second) whose top left corner will be put on the top left corner of the tile it is associated with. For sprites bigger than a tile, it is therefore necessary to specify an offset to know where is situated the tile supporting the item. The offset will tell how many pixels and in which direction the whole row should be moved. This tile will be the one the user will have to loot in order to collect the object (active tile in the above figure).

Add it to the list of sprites

To do so, a link has to the .json file you just created must be added to client/js/sprites.js. e.g.: add line `'text!../sprites/item-rosettastone.json','

Add it to the map

To add the item to the map it should be added under the form of a 16x16 tile to the mobset.png used to edit the map and a type property should be added to this tile, containing the name of the item (without item).

e.g.: type → rosettastone in our example. You then can add it like any other item.

client/js/renderer.js

In this file you can add extra rendering info. For instance, on line 381, all entities but the cake are added sparks : if(entity instanceof Item && entity.kind !== Types.Entities.CAKE) {[…]} See below for explanation of Types.Entities.CAKE.

##Add it to the game There are several steps in order to include the item in the game.

client/js/entityfactory.js

This is the file that processes the list of entities of the map and decides associates them to a given kind.

In the items section of the file, add your entity. E.g.: EntityFactory.builders[Types.Entities.ROSETTASTONE] = function(id){ return new Items.RosettaStone(id); } The new kind thus created is «Types.Entities.ROSETTASTONE».

Define the kind of item

/shared/js/gametypes.js holds the taxonomy of entities in the game.

The variable kinds holds the different types of objects ("player", "mob", "weapon", "armor", "object", "npc"), add your item to the kinds. e.g.: rosettastone: [Types.Entities.ROSETTASTONE, "object"],

You can further describe your object by adding it to the disposable list of expandable items for instance: Types.isExpendableItem = function(kind) { return Types.isHealingItem(kind) || kind === Types.Entities.FIREPOTION || kind === Types.Entities.CAKE || kind === Types.Entities.ROSETTASTONE; };

Define the item's behavior

This is done in client/js/item.js.

There are different kinds of items:

• "weapon" → changes the user's weapon upon loot;
• "armor" → changes the user's armor upon loot;
• "object" → a healing object (in most cases).