Importing to your page

Required files

To be able to run your own city, you will need an .html file, some JS, and your configuration files.

Configuration files

When exporting your project from the editor you should get 2 files, project.json and tileTypes.json, you may have changed these files names, if that's your case, don't worry, you will set it up properly on the JS section. Additionally you will also need to include your tileset image, this needs to be the same you used on the editor.

You have to drop all of these files on the folder where the rest of your page is hosted. If you put the config files on the root folder ("./project.json") the program should work without any major issues, if instead you want to save them on a sub-folder, you need to make an extra step on the JS section.

Before going forward you need to open your project file, it should have the following structure.

{
    "settings": 
    {
        "tileSetUrl" : "./yourTileSet.png",
        "tileW" : 32,
        "tileH" : 32,
        "scale" : 2,
        "mapW" : 10,
        "mapH" : 10,
        "zLevels" : 4
    },
    "map":
    [
        173,173,173,173,173,173,173,173,173,173,173,173,173,173,177,173,173,173,173,173,173,173,173,173,173,
        173,173,179,173,173,173,173,173,179,173,173,173,173,173,173,173,173,179,173,173,173,173,177,173,173,
        173,173,173,173,179,173,173,173,173,173,173,165,173,173,165,173,173,173,173,173,173,173,173,173,173,
        173,173,177,173,173,173,173,173,173,165,173,173,173,173,173,173,173,173,173,173,173,173,173,173,173
    ],
    "zContent":
    {
        "1":{"36":75},
        "2":{"45":74},
        "3":{"65":79},
        "4":{"22":67,"31":67,"65":90}
    },
    "events":
    {
        "goToPage":
        [
            {"pos":0,"args":["some link",true],"name":"some name/description" },
            {"pos":1,"args":["some link",true],"name":"some name/description"},
            {"pos":22,"args":["some link",true],"name":"some name/description"},
            {"pos":3,"args":["some link",true],"name":"some name/description"}
        ]
    }
}

There is a chance that your file isn't as tidy as this one, and the data is all bunched up on a single line, you could just press enter after each " }, ". It's also possible that your " tileSetUrl " field on " setting s" has a lot of weird gibberish, instead of a path for your image, delete all of that, and replace it with the path were your image will be saved, if you dropped it on the root folder, then the path will be " ./yourTileSet.png ", if instead you saved it on a folder, just add the folder name in front of the " ./ " followed by another " / ", it should look something like this " ./folder/yourTileSet.png ", you can do this with as many folders as you want.

For more info on how the project settings work see.

HTML

Once you decide where your canvas is going to display, add a canvas element, with an id of "game", an onmouseenter="mouseEnterCanvas('game')" and onmouseleave="mouseLeaveCanvas('game',event)".

Next to the canvas (NOT inside) add a div element with the id "canvasOverlay"

For more info about html canvas you can read this.

It should look something like this:

<canvas id="game" onmouseenter="mouseEnterCanvas('game')" onmouseleave="mouseLeaveCanvas('game',event)"></canvas>
<div id="canvasOverlay"></div>

At the end of the .html file where you added the canvas you need to add 3 scripts.

<script src="game.js"></script>
<script src="utilities.js"></script>

JS

The fastest and easy way is to just drop the utilities.js and game.js scripts on the root folder of your project, then they will boot up with no extra steps.

But if you want to put them somewhere else or you used custom names when exporting the files, you must open the game.js file on a text or code editor.

Look around lines 40 - 60 for a function named setupProject, or search for it with F3 it should look something like this.

function setupProject()
{
    gameCanvas = document.getElementById("game");
    ctx = gameCanvas.getContext("2d");
    fetchProject( " ./project.json " , " ./tileTypes.json " )
}

On this case, in line 5 you can see a "fetchProject" function, with some parameters inside parentheses and quotation marks, those are the paths for your settings if you just changed the names of the files then replace project.json with yourName.json, and the same for tileTypes ( see that this tile file is not the same as the tileset image ), if you saved your files on a sub folder use the same method seen on configuration files , when changing the path.