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 and start with item (see below). e.g.: item-rosettastone.png

Define the rendering of the sprite

This should be done by creating a .json file with the same name as the sprite in the folder client/sprites. In our example, our sprite was called « item-rosettastone.png » we will thus 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.

Define the entity and the kind of item

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

First of all you need to provide an ID for the type of entity: in variable Types.Entities, you have to define the entity you will use and associate an integer constant to it (see gametype.js l.61).

Then, the variable kinds will make the link between your sprite and the entity. It also 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"],

NB: This is where you associate the name of the sprite with the code. In this file the method used to enforce the 'item-'+name pattern is defined (cf. /client/js/item.js).

You can further describe your object by adding it to the 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; };

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); } This associate to the entity «Types.Entities.ROSETTASTONE» a builder

Define the item's behavior

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

There are different kinds of items:

• "weapon" → changes the user's weapon upon loot;
• "armor" → changes the user's armor upon loot;
• "object" → other (see /shared/js/gametypes.js for subtypes of other objects).

The init() behavior, containing a constructor and the loot message has to be defined, but the behavior upon loot can also be specified.

###Effectively add the item to the game In /client/js/game.js, add your sprite to this.spriteNames. In the examples above our spritename is item-rosettastone.

In this file, you can also associate an achievement to the item or add a silhouette to it.