How to use
User interface
Map editor area
This is what you will end up showing on your page, and the place where you put your content.
To add a tile press the left mouse button, the tile that you are currently holding is shown just to the top left of the map area "Current tile: name 0 : 0" in this case. The name 0 is the name assigned to that particular file, in this case this was generated automatically so it matches it's ID, the id is the 0 after the : and that is unique to that particular tile.(On top of the label 2)
So, on the left the name, on the right the ID.
To delete a tile press the right mouse button, deleting tiles works "top to bottom", so the higher layers(that being the ones with the higher number) will get deleted first.
Pressing the central/middle mouse button on top of an already placed tile, you will replace the tile that you are holding, with the one under your mouse.
Tools area
(Labeled 2) Here you will have multiple sub-menus on which you can configure events, layers, animations, and general configuration.
Z index
-Zindex.png-
To open this section press the first button named "z index" (labeled 2), to close the section press the same button again.
The amount of layers is set by you when setting up the project and can be changed on the "settings" section.
By default, all your tiles are drawn on layer 0.
To change the layer you are currently drawing in, click the dropdown labeled "Current layer:" and select the layer you want, and that's it, from now on you will draw on that layer until you change it again.
Animations
This feature is not implemented yet.
Events
Unless you just want to make a nice looking "window" with content inside your page, you will most probably want to add some functionality, the program already comes with some events built in.
To open the events section click the "Events" button (labeled 1)
inside the menu you will have multiple options, first you can see the events that are currently setup on your project, with a dropdown (labeled 2), from there you can read the data (But not modify it) by pressing the "Read" button, left to the events dropdown, this will fill the input fields that are just below the button, this is useful to check for errors or in the case of the example project to see how the events are written.
To the right of the "Read" button you have one named "Modify", this will fill out the input fields inside the "Create Event" section(Labeled 3), this is used to change the data of already existing events.
In case you want to create a new event, just fill out the fields. “ Name “ can be anything you want, and won't be actually shown anywhere.
Event position is the tile number on which the event will reside.
The third input is a dropdown with all the event types, built onto the project, by default the program already has some implemented, but if you want to add your own you can read this.
The built in events are the following:
" goToPage " which works like an <a> tag on html, and lets you redirect the user on click to a specified URL, you can also select if the link must be opened on the same tab or a new one. The event parameters are first the URL, and the true or false, depending on if you want the link to open on a new tab(target="_blank"), setting the parameters out of order will not work.
" changeMap " this changes the current map, event and layers to another, think of this as a videogame zone transition, for this you require a separate "extra map" file, that contains the content to be swapped. The event parameter is the path where the file will be hosted once you set up the project on your own machine.
"openWindow" opens a brand new window (not a tab), given a name, size, and content.
Lastly you have 3 buttons(labeled 4).
" reload events display " is mostly unnecessary, it's meant for when the system fails and events are not properly updated, after creation/modification.
" Show events overlay " dyes the tiles that contain events so you can see where they are (This only works on developer mode).
" Hide events overlay " this un-dyes the event filled tiles.
Show/Hide tile positions
Sometimes you will need to know the position of an individual or multiple tiles, by default a red number will guide you, but it can get annoying when you are trying to see what you are making, so pressing the button will enable or disable the numbers.
Load New Nap Map
Press the button to reveal an input field, there you can enter the path to a map file, so you can edit it without re opening the program, the file MUST be loaded on the machine hosting the program, in the case of my github pages version you will not be able to add custom files, so it's recommended that you clone the repo and host your own developer editor.
Settings ( this section is not fully functional)
This allows you to modify your project settings, how big each tile is, how many tiles a map has, amount of layers and scale, which were introduced here.
" Canvas Resolution " let's you change the size of the actual "drawing board" where your content is shown, it's not recommended to change it since its adjusted dynamically to the size and amount of your tiles.
" Add the tileset image " this let's you change the current tileset to something else, make a backup before changing this.
" Tile picker map height/width " If you are learning by using the premade project or one with a tileset with similar structure, you may have no trouble with the default size, but if your tileset is neatly organized to show connecting tiles or sequential animations, the default size may be wrapping tiles on the wrong way, with this you can set it to whatever you want, remember this is measured on tiles and is tied up to your uploaded image.
Tile picker
To pick a tile, move your mouse to the right side of the screen (Labeled 3), put your cursor over the tile you want to use and press the left mouse button, the text under "current tile:" (Labeled 2) should change to the name and id of the tile you clicked.
If you can't see all of the tiles of your tileset, you can use your mouse wheel to scroll down while hovering over the tile picker section and see more content.
Exporting project
Once you finished your job or if you want to save progress while you work (highly recommended) yo can go to the orange section named "Export Just a map or an Entire Project" (Labeled 4)
The input field let's you change the name of your files.
"Generate map file"
This will output just a map file, containing only the basic map, no events, and no layers.
If the name input is left blank a default name will be set.
After pressing the "Generate map file" button a blue link will appear named "Download Map", press that to get your file.
"Generate Project file"
This is most of the project data, for a deep dive on what it has or how it works see.
You will need this file, tile types and your tileset to be able to host the program.
If the name input is left blank a default name will be set.
After pressing the "Generate Project file" button, a blue link will appear named "Download Project", press that to get your file.
"download Tile Types"
This is most of the tiles data, for a deep dive on what it has or how it works see.
You will need this file, tile types and your tileset to be able to host the program.
If the name input is left blank a default name will be set.
After pressing the "download Tile Types" button, a blue link will appear named "Download TileType", press that to get your file.
Hotkeys
shift + left click : starts the event on that tile.
middle mouse click : copies the tile directly under your cursor (like Minecraft does!)
Useful Console Commands
Some features will not have an easy way to use when you start your project, here is a small list of implemented features that are not accessible on the User Interface.
To use console commands press F12 on your keyboard, and open the "console" tab, look to the bottom of the developer tool there must be an input field with ">>" symbols, click there and write or copy / paste the commands. For more info check
addTileOnRange ( from , to , tile) Changes all the tiles from any given position to any given position, these positions are set on tile coordinates (to know each tile number see), the tile parameter is optional, by default this function will use whatever tile you already selected from UI, this behavior can be overwritten by setting tile to any existing ID, see ¿What is an ID? or where is it stored.
Last updated
