# mapeditor

**Repository Path**: itmasterc/mapeditor

## Basic Information

- **Project Name**: mapeditor
- **Description**: Cocos Creator 开发的地图编辑器
- **Primary Language**: TypeScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-06-12
- **Last Updated**: 2024-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mapeditor

Cocos Creator 开发的地图编辑器

## 开发环境

- Cocos Creator 2.4.8
- TypeScript

## 运行

使用`Cocos Dashboard`打开并运行项目，场景会显示一个默认的地图用来体验编辑器功能。

## 在线体验

[https://mirahs.github.io/cases/](https://mirahs.github.io/cases/)

## 功能点

### 新建地图

点击菜单栏`新建`按钮，弹出`新建地图`面板。

![新建地图](images/新建地图.png)

面板参数可以自定义`网格宽度`和`网格高度`，点击`浏览`按钮，会弹出`选择文件对话框`(支持 jpg、jpeg、png 三种图片格式)。

选中地图文件并点击`打开`按钮后会显示选择的地图文件名，点击`确认`按钮，编辑器会加载选择的地图文件。

### 打开地图

点击菜单栏`打开`按钮，弹出`打开地图`面板。

![打开地图](images/打开地图.png)

依次选择`地图文件`和`数据文件`的`浏览`按钮，选择对应的文件，再点击`确认`按钮，编辑器会打开地图并显示保存的数据状态。

### 保存地图

`新建`或者`打开`地图编辑后，点击菜单栏`保存`按钮保存地图数据文件，点击后会下载一个`json`格式的地图数据文件到本地。

### 拖动

点击`拖动`后，可以鼠标左右键拖动地图。

### 绘制

点击`绘制`后，可以选择要绘制的类型，当前有`可行走`和`半透明`两种类型，有三种方式绘制网格。

- 鼠标点击网格
- 按住鼠标后不松开移动鼠标
- 选中`多边形`复选框，鼠标依次点击地图绘制绿色圆点，至少两个点，双击鼠标结束后会绘制多边形包含的网格

### 清除

点击`清除`后，有三种方式清除网格。

- 鼠标点击网格
- 按住鼠标后不松开移动鼠标
- 选中`多边形`复选框，鼠标依次点击地图绘制绿色圆点，至少两个点，双击鼠标结束后会清除多边形包含的网格