Advanced user guide
Downloading the github repo
Go to the Git repo and clone it.
Hosting your own developer tool.
This page cannot be loaded just by opening it's index on a web browser, since it will cause a CORS error, so you need to either host it on an actual server or locally on your own machine.
Local host
The easiest and fastest is a local host, that means that only you will be able to use the page, so it's not really connected to the wider internet.
To do this you will require visual studio code.
Once on visual studio code, go to the Extensions section, and download a plugin called "Live Server" by Ritwick Dey.
Run the live server, and you are good to go. Remember that this method requires visual studio code to be opened, and the live server running, so if you close either of these or turn off your computer, you will need to re open the server.
Server
WIP
File modification
TileTypes.json
¿What is this file? When you load up a tileset, you have a bunch of sprites all in the same image file, but then in run time, those are rendered individually, to accomplish this the coordinates and size of each tile on the tileset is saved in this file.
Your file should look something like this, with more or less data, depending on how many tiles you have, but the data structure is the same.
"0" : { "colour":"#999999" , "name":"name 0" , "floor":1 , "sprite":[{"x":0,"y":0,"w":32,"h":32}]} ,
ID: First you have a key or ID, the first number in between quotes at the beginning of each line (colored red), that's the code for that individual tile, and it's what you use in code to call it to be drawn on screen.
Color: This is the second parameter (Colored yellow), it's currently unused, but it will serve as a fallback if the tile image cannot be found or if you want a plain color for a tile.
Name: (Colored green)The name is used mainly to facilitate user readability and identification of tiles, when you download the file for the first time, all of the names will be generic and tied up to the id of that tile, but you can change it to whatever you want.
Floor: (Colored orange)This is currently unused, but determines what type of floor or tile this is, if it is solid, or walkable or if any special properties may apply, this is used only if you add a player module(Not available for now)
Sprite: (Colored purple)These are the coordinates of that tile in the tile set, with its size, all measured on Pixels, you can check them yourself, by opening your tileset on an image editor, and looking for the x and y coords.
If you don't want a sprite and just want your plain color to display, remove the x,y,w and h parameters, and the curly brackets, and replace it with “none” (quote included). It should look something like this: "0" : { "colour":"#472d3c" , "name":"name 0" , "floor":1 , "sprite":[ "none" ]} ,
At any time you can open any of the configuration files and change things yourself ( Do a backup first ! ! ! ), this will allow for modifications nota available on the editor.
Project.json
The project file has most of the data needed to run your city and its divided on 4 "sections" settings, map, zContent and event
settings
This part of the file stores the basic information that the program needs to start.
tileSetUrl
This is the path where your image file is stored, by default it should be set to the root folder, in case you want to move it just change the path to wherever you have it stored.
tileW & tileH
This is the Width and Height of each tile measured on pixels.
scale
When creating a city with small tiles you may run into the problem that everything looks too small, if that is the case change the scale factor, this will multiply the tiles width and height by the scale without generating distortion on the images. The default value is 1 ( one ).
mapW & mapH
This is the Width and Height of your entire city measured on tiles. So if your tiles are 32x32 and the city is 10x10 with a scale of 2. (tileW * mapW) * scale || ( 32 * 10 ) * 2 = 640 your canvas size will be 640 px on width.
Zlevels
This is the maximum amount of layers that your project supports.
map
Your city "structure" is saved in code as an array, it's read from left to right and top to bottom.
The example above is indented in such a way that it represents how the map actually looks when drawn on screen, but instead of graphics it has the ID of each tile.
The program automatically cuts each row by the mapW.
None of the array values should be set to a value that is missing on the tileTypes list, it is recommended that you have at least one "blank" tile in your tileset for a situation where you want to leave empty spaces. The code will take the tile with id 0 (zero) by default, but this can be changed if yours is on a different spot (WIP).
zContent
Here is where the "layers" or zIndex contents are saved.
"zContent":
{
"1" : {"36":75},
"2" : {"45":74},
"3" : {"65":79},
"4" : { "22":67 , "31":67 , "65":90 }
}
This works with the same logic as the map array, each variable represents a position iside the tileset coords, and the content is the actual tile image.
As you can see, inside the "zContent" section you have four lines, that start with a number inside quotes (Colored red) each of this represent their entire layer, you may notice that there is no 0 (zero) layer, thats because its not saved here, but in the previous section map.
To the right you have some brackets (colored green), with multiple values inside, the first one, inside quotes is the tile position on the map, the second is the tile id image. In layer 4(Colored yellow) you can see there multiple tiles, on the positions 22,31 and 65, each layer can have as many tiles as the map can hold, in this case 10 x 10 ( mapW * mapH ).
events
"events":
{
"goToPage": [
{"pos":0, "args":["https://cranile.neocities.org/",true], "name":"Check out my Neo City" }, {"pos":1,"args":["https://cranile.wordpress.com/",true],"name":"Read my blog"}, {"pos":22,"args":["https://github.com/NicolasCrapanzano?tab=repositories",true],"name":"See my git repos"}, {"pos":3,"args":["https://cranile.itch.io/",true],"name":"Check my itchio"} ],
"changeMap": [
{"pos":5,"args":["./maps/New.json"],"name":"Go to the castle"}
]
}
¿How do events work?
An event is an action that you can save and execute inside the city, all of the event instances are saved in the project.json file under the events section, these are just the parameters for the events, not the code that runs the actions itself.
¿Where are events saved?
Events are actually just functions saved under the utilities.js file.
(For more info. about how events work see)
You can only save events that are already available in the code, there needs to be a working function and a reference save on the eventTypes variable on the game.js file.
The event section is subdivided on event Types (Colored red) ; these names are the ones saved on the eventTypes variable.
Inside each of this types the event parameters are saved.
{ "pos" : 0, "args" : ["https://cranile.neocities.org/",true], "name" : "Check out my Neo City" },
Let's take a look at this event of the type goToPage for example, it can be divided in three parts, the position (Colored orange), this tells us that this particular event is located on the position 0, which is the very top left tile. Next inside an array we have two values (Colored yellow), those are the parameters for that particular event, and lastly (Colored green), the name of the event, this is used for the developer to know what the event is, and can also be displayed as flavor text on the screen WIP.
Code modification
game.js
WIP
picker.js
WIP
index.html
WIP
Last updated