地图编辑器

2019/04/23

基于 React+Typescript+redux 的地图编辑器

2d游戏地图编辑器

历时三个多月，利用工作之余完成了这款地图编辑器，技术栈是 React+Typescript+redux 接下来会放缓写游戏的进度，而去丰富一下前端系统知识架构。
地图编辑器就此 Ending, Happly Ending~~

去年（2018）在和小伙伴们开发一款横版滚轴平台游戏，用到了 Tiled Map 编辑器,但在使用的过程中遇到了很多坑，用过它的人都知道。

Tiled 功能很强大，但我需要的功能好像不是很多，是否能造个轮子？来简单快速的进行地图编辑
github 地址: 点我点我

开始使用

http://qqqdu.com/React-map-editer/

导入demo

在左上角的导入按钮中，导入根目录中的 Hello World.json 地图资源文件，得益于图片被转成了 base 64 字符串，你可以快捷的预览到地图效果，而不需要下载图片原资源

导出demo

现可以导出两种类型，一种编辑器可以解析的地图文件，一种游戏引擎解析的地图文件，点击左上角导出，可选择导出类型

游戏内应用

我写了一个简单的基于白鹭引擎的地图解析demo，你可以去这看它 egret Map
地图json格式为：


export interface matrixItem {
  src: string | undefined;
  width: number;
  row: number;
  col: number;
  height: number;
  name: string;
  extra?: Array<any: any>
}

export interface LayerItem {
  // 图层id
  id: number,
  // 图层名称
  name: string,
  // 是否显示
  show: boolean,
  matrix: Array<Array<matrixItem>>
}
export interface layer { 
  layers: Array<LayerItem>;
  // 表格横轴个数
  tableRow: number;
  // 表格纵轴个数
  tableCol: number;
  // 单元格宽度和高度
  boxWidth: number;
  boxHeight: number;
  name: string
}