This project allows you to edit multi dimensional tile map on my own game engine. it is worked fine on any platforms such as Linux Desktop, OSX, Windows and so on.
This stuff is written in a TypeScript. if you want to make a new menu command into the editor, you can add a new command into the packages/menu/commands directory, this editor can collect a decorator called @OnMenuClick('menu-command-key') and can execute a mapped action to its decorator.
import { MenuCommand } from "../../decorators/MenuCommand";
import { OnMenuClick } from "../../decorators/OnMenuClick";
import { IBaseMenuCommand } from "./IBaseMenuCommand";
@MenuCommand("file", "file-new", "새로 만들기", ["ctrl", "n"])
export class NewFileCommand implements IBaseMenuCommand {
@OnMenuClick("file-new")
action(ev: any) {
if (window.app) {
window.app.emit("openWindow", {
path: "/newWindow",
});
}
}
}To write a new menu command, you must import an interface named IBaseMenuCommand that starts with 'I' like as C# and so on. this interface has a name, children, shortcut properties, and action method. the action method is a function that can be executed when the menu command is clicked.
To create a new element, you can use the InitialDOM class. this class is a wrapper class of the document object. this class has a static method called query and fetch. the query method is a wrapper method of the document.querySelector method. the fetch method is a wrapper method of the document.createElement method. the css method creates a new style sheet to the head element and returns class name.
const parent = InitialDOM.query("#view");
let child = null;
if ((child = InitialDOM.query("#tileset-marker"))) {
parent?.removeChild(child);
return;
}
this._element = InitialDOM.fetch("div");
this._element.id = "tileset-marker";
this._element.className = InitialDOM.css`
min-width: ${this._tileWidth}px;
min-height: ${this._tileHeight}px;
width: ${this._tileWidth}px;
height: ${this._tileHeight}px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
border: 2px dotted yellow;
z-index: 50;
box-sizing: border-box;
`;Why the wrapper class is needed? In this way, it will be possible to change this class to another framework such as React, Vue, Angular and so on easily. so I wrote it like this way.
| Platform Type | Status |
|---|---|
| Electron | Stable (100%) |
In case of platform such as OSX, try these steps. First up, you must install node in your system.
brew install node
node -v
cd ~/Documents
git clone https://github.com/biud436/InitialEditor.git
cd InitialEidtor
sudo yarn installIn case of platform such as Windows 10, try to download the Node.js LTS version in your system manually. and next, if you exist the program called git in environment variable named PATH of your system, you must just call the command such as git clone https://github.com/biud436/InitialEditor.git in desired directory. and next try to below step.
git clone https://github.com/biud436/InitialEditor.git
cd InitialEidtor
yarn installyou have to run the following command in the terminal.
yarn script:build
yarn devTo upstream from the remote repository, you must call below command.
git remote add upstream https://github.com/biud436/InitialEditor.git
git fetch upstream
git checkout main
git merge upstream/mainThis tool is under the MIT License.
But some icon and javascript and stylesheets and images included at this tool have their own licenses.
- Font Awesome Free - https://fontawesome.com/license/free
- FSM Tile (2k_town05.png) - http://refmap-l.blog.jp/archives/8632768.html
- FSM Tile (2k_town05-01.png) - http://refmap-l.blog.jp/archives/8632768.html
- Tuxemon Tileset - https://opengameart.org/content/tuxemon-tileset