This is part of the series by Cocos developer “Billion Dollar Programmer” on helping developers build their own games. We’ll be sharing his stories on the forum. You can read the originals from his website.
What is a map editor?
An in-game map editor is a software tool or feature used by a game developer to create, edit, and customize in-game maps or levels. A map editor allows the player or designer to customize the game map by adding, moving, adjusting, and deleting in-game elements, including terrain, buildings, paths, character generation points, enemy and item placement, and more.
Main features of the map editor
Terrain Editing: Allows users to draw, edit, and adjust the terrain of the game map, such as mountains, rivers, forests, grasslands, etc.
Item and Resource Placement: Allows users to place and edit various items, resources, and props in the game, such as weapons, medicines, treasures, etc.
Character and Enemy Generation: Allows the user to set the initial position of the player character and the generation point of the enemies, as well as their behavior and attributes.
Map Details: Allows users to add map details such as decorations, buildings, environmental effects, weather, etc., to enhance the visual appeal and atmosphere of the map.
Map Export and Sharing: Typically, map editors allow users to save and export maps they have created to share with other players or to test and play them in-game.
Wall Editor: Some places where traveling is forbidden need to be depicted as a forbidden cell.
Ideas for implementing the map editor
1. Open the Map project from the previous section
Open the Map project of our last article.
Note: All the author’s source code will be attached at the end of the article. To obtain the source code, you can get it yourself.
2. Creating MapEditor Scripts
MapEditor currently includes editing map cell information and generating and downloading corresponding configuration files. The idea is obvious: if necessary, you can create other functions on your own, such as placing monsters, props, and other functions.
Depending on the map information, the cell information will be depicted as blocks:
The depiction is mainly done using the cc.Graphics component, which is mainly used to draw some points, lines, and surfaces, and is very suitable on the map editor:
Mouse operation in the map editor: the left button is used to draw cells as blocking cells, the right button is used to cancel blocking cells, and a long press and slide can draw or remove blocking cells continuously.
Note that we need to block the event delivery with event.stopPropagation() to avoid dragging the map when drawing continuously:
Listen to keyboard events. i key can open and close the map editor, w key can save the current cell information and download it (need to use the browser to run the program).
3. Write test code
Create a MapEditor map editor and mapEditorNode node, and initialize the map editor with map data:
The map data I mainly used in the last project is already ready-made. You can build by yourself to read and load the map data of the specified map:
4. Test Result Demo
The test is successful! Press button i to open and close the map editor and button w to save and download map data. The left mouse button can draw cells, and the right button can remove cells. You can only slide the map when the map editor is off.
Summary
Map editors are commonly found in various types of games, including sandbox games, strategy games, role-playing games, and shooters. They provide players with greater freedom and creativity, enabling them to add their own ideas and content to the game world, thus enriching the experience and playability of the game.
Code example: