Miao's Homely RPG Map Editor

chinese Version:https://rpg.blue/forum.php?mod=viewthread&tid=495278

Well...regular chatters in the group may know During the development process of the RPG Plaza for Miao Zhai Yuan, I incidentally created a map editor alongside it.

 It looks like this (as shown in the above picture). Indeed, what you're seeing is the mobile interface.

Being super lazy, I wanted to be able to draw maps even while lying in bed, so I made sure to achieve maximum compatibility on mobile devices to ensure smooth drawing functionality. Since it's a web-based application, theoretically, it's cross-platform compatible, which means you can also use a tablet to draw your maps without any issues.

And of course, using a computer with a browser is not a problem either.

【Motivation Behind Development】

Why did I create such a tool? Primarily because the existing map editors out there were really inconvenient to use. It took me ages to complete a single map, and for Miao Zhai Yuan's design, I envisioned being able to finish drawing and immediately have it integrated into the server database, instantly taking effect on the front-end without needing to crop images or manually upload them—plus, even event triggers should work seamlessly. (Although details about the event system in Miao Zhai Yuan are not discussed here as they're less relevant to the drawing features.)

【Key Features】

• There's no restriction on the format or size of the materials used (except that the tile size is fixed at 32 pixels, which can be changed, but currently, there's no menu for modifying this setting; it will be added later).
• You can combine a large number of materials into one big image and import it for use.

Drag, Grouping, and Unlimited Layers

This is one of my most desired functions. The ability to drag elements freely and easily adjust their layering, along with grouping capabilities where each group doesn't interfere with others, closely mirrors the grouping function in Flash software. With this feature, you can accomplish most operations without heavily relying on the layers panel.

Automatic Tile Drawing – A Vital Function

 Full compatibility with RM VX Ace series' automatic 4x4 grid tile drawing is implemented, allowing imported tiles to be used directly. Additionally, a universal 3x3 grid tile drawing feature is available, making it convenient to draw terrain, fences, and similar patterned materials.

>>> Instructions

By clicking corner and edge pieces in the material library and then selecting corresponding positions on the map, you can place those tiles accordingly. 

The editor supports full touch control:

• Pinch to zoom or pan the canvas with two fingers.
• On a computer, use Alt + mouse scroll wheel to zoom.
• Scroll the mouse wheel to move the canvas.
• Single-finger tap selects or draws; double-tap enters a group.
• Right-click or long-press touch opens the menu.
• Common keyboard shortcuts are supported, including copy-paste, undo, and hotkeys like 'a' for drawing and 'p' for other actions.

【Existing Issues】

 While the feature set is extensive, there are quite a few bugs too. Although I've fixed most of them, many minor problems persist.

【Major Limitation】

Due to HTML constraints, my less-than-optimal algorithms, and performance optimization skills, the editor becomes sluggish and might even crash when there are too many elements. Please avoid creating extremely large maps; small room-sized maps are more feasible, or consider using an oversized ground tile to reduce the overall number of tiles.

【Import & Storage】

 Data is stored in JSON format, but local image URLs may need to be replaced since I'm using a server-side image library, which could cause issues due to copyright concerns with your own materials. I'll look into this later.

【Exporting Images】

After careful consideration, to generate some revenue for Miao Zhai Yuan's server costs, I decided to charge a fee. You'll need to pay 6.6 yuan per month to purchase a Designer status. However, if you feel comfortable assembling screenshots, feel free to do so.

【Download Link】

For now, I don't have the time to separate the project, plus constant bug fixing makes maintaining multiple codebases difficult. So, for now, access it via the web. If your mobile browser has conflicting gestures, please wait for the app update.

Web Address: https://www.o-o.zone Click on the Designer on the homepage, and note that you'll need to register for a Miao Zhai Yuan account.

【Related Videos】

• "Drawing RPG Game Maps on Mobile Attempt - Bilibili"
• "Another Attempt at Drawing RPG Game Maps on Mobile - Bilibili"
• "RPG Game Map Editor Developed with JavaScript/CoffeeScript (Open-Sourced on Github) - Bilibili"

【Double Question Mark Inquiry】

Is there an open-source version? Ah, well, there was one earlier, but again, managing two versions concurrently proved too daunting, so I stopped updating it...

This post was written on a phone, so please excuse any irregular formatting. Here's the QQ group number: 796948837.