search

nymphofthevales / Tile-Editor

A dev tool for laying out tile-based patterns, maps, etc. Renders a grid in which tiles can be placed, and provides functionality for performing actions on subsets of those tiles. Under development.
3 stars 0 forks source link

How to run it? #13

Open JaySlamer opened 1 year ago

JaySlamer commented 1 year ago

Sorry, this might seem like a stupid question, but I really don't know. Please help.

nymphofthevales commented 1 year ago

Hello Jay! Perfectly reasonable question, I understand it's not at all obvious.

First of all, the reason I haven't included documentation on how to use this is because the application is a work-in-progress. Much of the functionality is there but some things are missing. Knowing this, if you want to try it anyway you can do the following.

How to run the project

In the project directory:

  1. Make sure you install dependencies with npm install.
  2. Compile the scripts with tsc before you run. You will also need to create a folder called saves in the root directory.
  3. Then, npm start will run the application with electron-forge. You should be good to go!

Some more information

index.html is the core executable of the project. Electron serves index.html in its own renderer. This is needed so that the application has I/O privileges in the project directory. Serving index.html from your own node.js localhost server would have the same effect, but simply opening index.html in a browser will give you some errors.

The main thing the project is missing in its current state is a standalone renderer to be used in other projects. You can manipulate a tileset to lay it out in the grid and this will be saved as a .json file, but there is currently no way to read this file other than the editor itself. In future, I hope to write a standalone renderer that could be used to display created maps in other html-based projects, but haven't had the time yet.

There are also a few keyboard shortcuts you should know about in the editor:

There are also some tools for adjusting the tile workspace dynamically:

Another future add-on I'll need to write is a more intuitive system for setting up custom tilesets for use in the editor. Currently it is possible to use your own images by simply dropping a new folder of uniquely-named square images into the tilesets folder of the project directory, but the rotations will not be specified this way unless you manually create a specifications.json.

Let me know if you have any more problems or questions and I'll be happy to help here, or on Discord at Athena//#0663 if you want to talk more. I'd love to hear more about how you found my project and your interest.

JaySlamer commented 1 year ago

Hello Jay! Perfectly reasonable question, I understand it's not at all obvious.

First of all, the reason I haven't included documentation on how to use this is because the application is a work-in-progress. Much of the functionality is there but some things are missing. Knowing this, if you want to try it anyway you can do the following.

How to run the project

In the project directory:

1. Make sure you install dependencies with `npm install`.

2. Compile the scripts with `tsc` before you run. You will also need to create a folder called `saves` in the root directory.

3. Then, `npm start` will run the application with `electron-forge`. You should be good to go!

Some more information

index.html is the core executable of the project. Electron serves index.html in its own renderer. This is needed so that the application has I/O privileges in the project directory. Serving index.html from your own node.js localhost server would have the same effect, but simply opening index.html in a browser will give you some errors.

The main thing the project is missing in its current state is a standalone renderer to be used in other projects. You can manipulate a tileset to lay it out in the grid and this will be saved as a .json file, but there is currently no way to read this file other than the editor itself. In future, I hope to write a standalone renderer that could be used to display created maps in other html-based projects, but haven't had the time yet.

There are also a few keyboard shortcuts you should know about in the editor:

* `Shift` toggles between drawing and selection mode. Toggling to draw mode clears your selection.

* `A` selects everything.

* `Enter` fills selected area with the selected tile.

* `Delete` fills selected area with the "empty" tile of the current tileset.

* `Q` and `W` rotate the selected tile counterclockwise / clockwise if the current tileset has a `specifications.json` file which describes how tile images are related by rotations.

* A click-drag draws the selected tile over every space your cursor hovers over until you unclick.

There are also some tools for adjusting the tile workspace dynamically:

* The `+` buttons expand the workspace for your map.

* `Crop Workspace` removes all "empty" tiles around the edges.

* `Add Map to Workspace` concatenates another saved map onto one side of the current map. This is useful if you want to work on a map in "chunks", but since there isn't any functionality for moving / copying / pasting selections yet, it's not too useful if the new map is added in the wrong place.

Another future add-on I'll need to write is a more intuitive system for setting up custom tilesets for use in the editor. Currently it is possible to use your own images by simply dropping a new folder of uniquely-named square images into the tilesets folder of the project directory, but the rotations will not be specified this way unless you manually create a specifications.json.

Let me know if you have any more problems or questions and I'll be happy to help here, or on Discord at Athena//#0663 if you want to talk more. I'd love to hear more about how you found my project and your interest.

Thanks for your hard work and information. I see the last update is 10 months ago, have you been occupied with something of higher priority?

nymphofthevales commented 1 year ago

Happy to help. Let me know what you think when you get it running.

This project was originally created as a tool to aid the development of my game, Keeper of the Labyrinth. Simply put, I felt it had gotten to the point where it could do what I needed it to, and went to focus on other parts of that project. I was also grappling with the responsibilities of school since at the time I was a full time university student!

I have a bit more time these days and certainly might polish off the last parts of this project in the next couple months.