https://github.com/biud436/initialeditor
자체 개발한 2D 게임 엔진의 맵을 편집할 수 있게 해주는 웹 기반 맵 에디터(Tilemap Editor)입니다.
https://github.com/biud436/initialeditor
react tilemap tilemap-editor typescript
Last synced: 9 months ago
JSON representation
자체 개발한 2D 게임 엔진의 맵을 편집할 수 있게 해주는 웹 기반 맵 에디터(Tilemap Editor)입니다.
- Host: GitHub
- URL: https://github.com/biud436/initialeditor
- Owner: biud436
- Created: 2020-09-12T10:00:22.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-06-14T09:54:49.000Z (11 months ago)
- Last Synced: 2025-06-14T10:34:56.690Z (11 months ago)
- Topics: react, tilemap, tilemap-editor, typescript
- Language: TypeScript
- Homepage: https://initial-editor.biud436.com
- Size: 46.6 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Introduction
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.
## Tilemap
## Child Window
# Usage
## Menu Commands
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.
```ts
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.
## InitialDOM
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.
```ts
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.
# Environment
| Platform Type | Status |
| :-----------: | :-----------: |
| Electron | Stable (100%) |
## How to setup
In case of platform such as `OSX`, try these steps. First up, you must install node in your system.
```sh
brew install node
node -v
cd ~/Documents
git clone https://github.com/biud436/InitialEditor.git
cd InitialEidtor
sudo yarn install
```
In 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.
```bat
git clone https://github.com/biud436/InitialEditor.git
cd InitialEidtor
yarn install
```
## How to start
you have to run the following command in the terminal.
```sh
yarn script:build
yarn dev
```
## How to upstream from remote github repository
To upstream from the remote repository, you must call below command.
```bash
git remote add upstream https://github.com/biud436/InitialEditor.git
git fetch upstream
git checkout main
git merge upstream/main
```
# License
This 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