【像素画板】游戏地图编辑器-uniapp项目开发流程详解

嘿，用过像素画板没有哦，相信喜欢绘画的小朋友会对它感兴趣呢，用来绘制像素画非常好看，有没有发现，它是可以用来绘制游戏地图的，是不是很好奇，来一起看看吧。

像素画板，也叫像素画的绘图工具，可绘制游戏素材，也是游戏地图编辑器

游戏地图

有个案例，绘制的游戏地图在以下两个游戏中都有用到，可以看一看这两篇文章

• 地下迷宫游戏-微信小程序开发流程详解

创建项目

这里用HBuilderX开发工具来创建一个uniapp项目，

例如项目名填写uniapp_map_edit，依次选择如下图

• 选择新建uni-app项目
• 使用默认模板
• Vue版本选择 3

初始页面

这时项目是自动创建好的，找一找初始页面，

页面文件在项目里/pages/index/index.vue，打开文件修改布局，

要在标签中修改布局

布局结果显示如下图

可以看到，页面使用了表单组件form，

• 一个滑块slider，设置画板像素宽度，也就是列数；
• 一个多行输入框textarea，这里放置输出的地图数据，可直接修改，复制；
• 三个按钮button，见名知意，什么用途不用多说吧

点击编辑地图数据按钮，就会跳转到画板页面了，

要在标签中去写页面跳转javascript逻辑代码，很简单，自己能做出来，这里就不讲

画板页面

这个画板页面文件是没有的，需要自己创建一个，

创建页面文件在项目里/pages/game/game.vue，

然后打开，同样是在