Skip to content

areadata.js

Peter Gill edited this page Sep 17, 2019 · 8 revisions

Areadata consists of a global variable (Areas), an object containing an object for each area in the game.

An area in Antorax is a place that is loaded in when you use an areaTeleport.

Examples of areas are:

  • Fishers' Valley
  • Eaglecrest Logging Camp
  • The Nilbog

This page will outline the properties can (and sometimes must) be assigned to an area's object.

data

data contains the information displayed when an area is entered by the player.

data: {
	name: "Fishers' Valley",
	level: "Level 1 - 5",
	territory: "Neutral territory",
},

All of these properties within data must exist, however if you do not want them to exist then an empty string may be used:

data: {
	name: "Treefeller's Tavern",
	level: "",
	territory: "",
},

mapData

mapData contains all of the information regarding the tilemap of the area.

In Antorax, we refer to the single image containing every tile for an area as a tileset, and how this looks ingame as the tilemap or the ingame map.

We use a separate tileset for each area. When you move to a new area, the previous tileset is unloaded and the new one is loaded in. This sometimes results in a lot of overlap between tilesets (e.g: The Nilbog and Eaglecrest Logging Camp both contain the same grass and water tile images), however this is most efficient for making the tilemaps for each area.

For making an area's tileset, I use:

  • make8bitart for drawing the tiles
  • stitches to append them into a tileset (I make parts of the tilemap vertically first, then horizontally append these vertical components)
  • tiled for making the ingame map from the tileset (orthogonal mode)

When you export your tiled tilemap, you are given a javascript file. The "data" property (or properties, if you have multiple layers) contains an array of each of the tiles for each given position. This is moved to the areaData "layers" property (see below).

A tile is represented as a number. 1 is the first tile in the tilemap, 2 is the second (reading like a book), and so on. This is how areadata expects the tiles as well for the properties below.

Note that 60x60 sections of whitespace and transparency in the tileset are their own tiles as well.

// example mapData
mapData: {
	cols: 43,
	rows: 10,
	tsize: 60,
	tilesPerRow: 7,
	waterTiles: [],
	pathTiles: [],
	layers: [],
		[],
	],
},

Mandatory properties (these properties should exist and be set to a value)

  • cols is the number of columns in the tilemap.
  • rows is the number of rows in the tilemap.
  • tsize is the size of every tile. In Antorax we use 60px*60px tiles. Larger tiles are broken up into smaller ones of this size, and each referred to separately (see later).
  • tilesPerRow is the maximum number of tiles per row on the tileset. So if the tileset was 660px in width, this value would be 11 (because the maximum number of tiles per row is 660 / 60).
  • layers is an array of arrays, where each of those arrays contains all of the tiles of the tilemap, in order. The 0th array contains the tiles for the 0th layer; the 1st array contains the tiles for the 1st layer; and so on. Currently we just use the 0th layer of tiles for the tilemap. Note that these tiles should be their daytime versions - nighttime versions are replaced using the dayTiles and nightTiles arrays (see below).

If your tilemap isn't working in game, it is likely due to one of the above values being incorrectly set.

Optional properties (these properties do not have to exist)

  • solidTiles is an array containing the tile numbers that are unpassable (the player's feet cannot walk through them).
  • waterTiles is an array containing the tile numbers that act as water (slow the player when their feet touch it, and give them the "Swimming" debuff). Only the full water tiles are counted on this - water edge tiles are not generally included in this array.
  • mudTiles is an array containing the tile numbers that act as mud. This currently works the same as waterTiles, except the "Stuck in the mud" debuff is given instead (which mechanically works the same as swimming anyway).
  • pathTiles is an array containing the tile numbers that act as paths. This currently does nothing, but will speed up the player by a small amount in the future.
  • dayTiles and nightTiles are arrays that contain the tile number of specific tiles that are changed between daytime and nighttime. Nighttime = 7pm to 7am (based on the user's computer time). The dayTiles array contains tiles that are replaced to the number of the same index in the nightTiles array, if it is night time. They must both be the same length. (see example below)

These properties only work for layer 0. (I might add support for other layers in the future, but at the moment we don't use them).

To find any tile number, open the tileset and count as if you are reading a book until you reach the tile you want. Make sure to count 60x60 sections of whitespace/transparency as their own tile, and to treat larger tiles (e.g: 120x120) as their composite tiles (e.g: four 60x60 tiles).

Example solidTiles property:

solidTiles: [1, 10, 19, 28, 37, 46],

Example layers property:

layers: [
	[2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 5, 3, 3, 3, 3, 3, 3, 3, 3, 3, 5, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 3, 4, 7, 8, 4, 3, 3, 4, 7, 8, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 3, 3, 3, 3, 3, 3, 4, 7, 8, 4, 3, 5, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 5, 5, 3, 3, 3, 3, 3, 3, 3, 3, 3],
],

Example dayTiles and nightTiles property:

dayTiles: [3, 13, 23],
nightTiles: [33, 43, 53],
// when it is nighttime this replaces tile 3 with 33, 13 with 43, etc.

images

images is used by the Loader (in main.js) to load in all of the images needed for that area. This property and its daughter "names" and "addresses" properties are mandatory.

These images are always unloaded when a new area is gone to by the player. Hence, every image used in a specific area (by NPCs, tileset, enemy projectiles, etc.) should be put into this property.

The images that remain for all areas (status effect icons, player, player's projectile) are always loaded in and do not need to be put into this property.

images: {
	names: [
		"tiles",
		"innkeeper",
	],
	addresses: [
		"./assets/tilemap/tavern.png",
		"./assets/npcs/innkeeper.png",
	],
},

The names property is an array of strings that contain the names of each tiles. This is what is referred to when an item is pulled from the Loader.

There should be no two images with the same name.

The addresses property is an array of strings that contain the address to each tile. This is how the loader knows where the images are.

The 0th property of names links with the 0th property of addresses, and so on.

Music

There are a couple of music properties that assign what song is played in this area at daytime and nighttime. These are mandatory.

If you don't have a particular nighttime song, just put it the same as daytime.

song_day: "./assets/music/Pippin-the-Hunchback.mp3",
song_night: "./assets/music/Pippin-the-Hunchback-night.mp3",

player

If the player can start/respawn in the area (any checkpoint area - where the player can respawn after death - often a city or town), the coordinates of the position where they respawn at should be specified.

player: {
	x: 2297,
	y: 387,
},

areaTeleports

areaTeleports is an array of objects. Each of those objects contains a different areaTeleport that is loaded in for that area.

An areaTeleport is an invisible entity that teleports you to another area when you touch it.

areaTeleports: [
	{
		// teleport to logging camp (bridge - west)
		x: 120,
		y: 960,
		width: 120,
		height: 300,
		teleportTo: "eaglecrestLoggingCamp",
		destinationX: 1330,
		destinationY: 400,
	},
],

All of these properties are mandatory.

A code comment is useful to have to make it clear where the teleport is going to and from.

  • x and y are the x and y position of the areaTeleport.
  • width and height are the width and height of the areaTeleport. Note that this extends the teleport upwards from its x position and leftwards from its y position.
  • teleportTo is the name of the object in areadata.js of the area that you want to teleport to. Examples are "nilbog", "tutorial" and "eaglecrestLoggingCamp".
  • destinationX and destinationY are the coordinates of where the player is teleported to in the destination.

areaTeleports that are situated at the end of an area's tilemap are often slightly offscreen, so happen as the player begins to walk offscreen.

villagerData

villagerData: {
	minPeople: 0,
	maxPeople: 3,
	locations: [
		{
			x: 39,
			y: 200,
			width: 642,
			height: 872,
		},
	},
},
  • minPeople is the minimum number of villagers that can be seen in that area at one time.

  • maxPeople is the maximum number of villagers that can be seen in that area at one time.

  • locations is an array of objects with properties x, y, width, and height. Each of these objects is a square inside which the villagers can walk around.

A rough way to figure out villager boundaries:

  • x: 60 * number of forbidden tiles at left + 39
  • y: 60 * number of forbidden tiles at top - 40
  • width: 60 * number of tiles villager is allowed in - 78
  • height: 60 * number of tiles villager is allowed in - 88

NPCs

NPCs is an array of objects. Each of those objects contains a different NPC that is loaded in for that area.

Currently, NPCs includes:

  • quest NPCs
  • merchants
  • combinations of the two

In the future, it will likely also include:

  • identifiers
  • villagers
  • combinations of all of these
NPCs: [
	{
		x: 2080,
		y: 290,
		image: "driver",
		name: "Cart Driver",
		level: 10,
		stats: {
			maxHealth: 100,
			defence: 1,
		},
		quests: [
			{
				quest: Quests.eaglecrestLoggingCamp[0], 
				role: "start"
			},
		],
		sold: [
			Items.sword[2],
			Items.staff[2],
			Items.bow[2],
		],
		chat: {
			questProgress: "Good luck with your adventures!",
			questComplete: "I hope your quests are going well!",
			inventoryFull: "You have no space to hold this. Empty your bags a bit and come back.",

			shopGreeting: "Would you like to buy anything?",
			shopLeave: "Come back some time.",
		}
	},

General properties

  • x and y are the x and y position of the NPC.
  • image is the name of the image of the NPC, as specified in the images section of areadata.js.
  • name is the name of the NPC, which appears in any dialogue with them in the DOM.
  • level is the level of the NPC. It currently does nothing, but should still be specified.

Stats

These currently do nothing, however will come into play in the future when we add sieges to villages. For a list of stats, please see this wiki page.

characters

villagers

This is currently in development, so nothing has yet been finalised.

identifiers

dummies

enemies