2d游戏地图编辑器_基于Typescript+React 的2d游戏地图编辑器

本文介绍了如何使用Typescript和React开发一款2D游戏地图编辑器,包括开始使用、导入导出地图资源、游戏内应用、编辑器功能如新建项目、图块属性编辑等,并提供了编辑器的GitHub地址和在线演示链接。
摘要由CSDN通过智能技术生成

fa3afd441aa6ec6299c20539f093e8b4.png

2d游戏地图编辑器

去年在和小伙伴们开发一款横版滚轴平台游戏,用到了 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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值