Starting a project

The first page you are going to encounter is the main menu, here is where you set up your project.

Main Menu

To start creating, open the web editor.

If you need some help, apart from this guide there is some extra text, that can be displayed per section of the program un buttons with a "?" symbol (labeled 3), the information for this will appear on the green box at the bottom of the screen (labeled 4), you can see how this looks on the image below.

Starting a new project

To create a new project click on "Start from the ground up" (labeled 1 ), this guide assumes you have a tileset if you don't have one, skip to start with an example.

On the right side of the image, you can see a bunch of input fields, this is the base configuration for your project.

Tile height and width

Each of your individual tiles will have a size measured on pixels, if you downloaded the tileset out of the internet, most probably the size its specified on the post, if you are not sure about the size you can count the amount of tiles you have (horizontal and vertical individually) and divide that by the image resolution (horizontal amount / image width) (vertical amount / image height).

Map height and width

This will define how many tiles you will be able to fit on the screen, this is measured on tiles, so if each of your tiles has a width of 16 PX, and your map is 10 tiles width, that will make the total "game screen" with of 160 PX, it's not recommended to make the game screen bigger than the user screen resolution, due to problems with the page scrolling.

If you have doubts about the size of your project, don't worry ! you can change it later.

Amount of Z layers

This refers to the layers or Z index of the project, you can "stack" tiles on top of each other, so if a tile is transparent or you want to make a "composed" graphic made out of different tiles you can!

You may have noticed that if your tiles are too small, like 16 x 16, a 10 x 10 map will look extremely small and difficult to understand, this may be intentional or you might want to have small tiles that look bigger on the actual project, this can be done by increasing the scale of the project, this will be global, that being, all of the sprites on your project get their sizes multiplied by the scale.

Scale

You may have noticed that if your tiles are too small, like 16 x 16, a 10 x 10 map will look extremely small and difficult to understand, this may be intentional or you might want to have small tiles that look bigger on the actual project, this can be done by increasing the scale of the project, this will be global, that being, all of the sprites on your project get their sizes multiplied by the scale.

For a quick example look at the images below.

100 tiles at 16 x 16 pixels each

100 tiles at 16 x 16 PX with scale set to 3

Tile set from this images Link

Add the tileset image

Drag and drop or use the "examine" button to load your tileset into the project.

Finishing

Once you loaded all of the data, press "done". (There is a bug where the project may not build, if more than 10 seconds pass and the screen hasn't changed, press done until it fixes itself. I'm still working on the solution)

start with an example

If you haven't really got around making or downloading a tileset, or just want to take a look at the program, you can use a premade project, just click the "Start with example project" (labeled 2).

Load existing project

If you already got to build your project or a friend sent you some files you want to add them on their own respective input spaces (labeled 5).

The main project file, which is in .JSON format, contains, your settings, map, layers, and events. This file goes on the first input slot.

The tileTypes file is also in .JSON format, and this contains a list of all the tiles of your tileset, but with names, and coordinates. This file goes on the second input slot.

Lastly the tileset is the image you use to show graphics on the program, that goes on the third and last slot.

Remember, changing or swapping any of these files with ones from other programs, or that have been tampered with manually, may cause your project, so make backups!