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

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

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

文章目录

游戏地图
创建项目
初始页面
画板页面
- 初始化数据
- 初始化画布
- 触摸操作
- 绘制逻辑
运行项目
- 像素画
- 迷宫地图

游戏地图

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

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

创建项目

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

例如项目名填写uniapp_map_edit，依次选择如下图
在这里插入图片描述

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

初始页面

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

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

要在<template>...</template>标签中修改布局

布局结果显示如下图
在这里插入图片描述

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

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

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

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

画板页面

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

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

然后打开，同样是在<template>标签中修改，写好布局，显示页面如下图
在这里插入图片描述

从页面上看，布局中只用了一个canvas，和复选框，还有7个迷你按钮组件，

复选框checkbox-group，checkbox是控制是否显示绘制网格线的；
7个迷你按钮button size="mini"，从中选择一个像素来绘制，每个像素点表示不同的颜色；
像素点可以表示数字，例如0，1，2，3，4...e，f；
游戏地图是用字节数字来表示的，占用内存少；

初始化数据

同样也是在<script>标签里去写逻辑代码

写好初始化逻辑，代码如下，

const app = getApp()
export default {data() {return {isShowGrids: true, //是否显示网格//所有按钮数据：文本，数值，颜色buttons: [{text: '0',value: '0',color: 'transparent'},//...{text: '6',value: '6',color: '#909399'},],currentKey: '1' //定义选择的按钮，如不同的画笔按钮};},/** 页面加载完毕会执行到这里 */onReady() {let {map, //地图数据cols //列数} = app.getMapData() //获取初始页面保存好的数据this.cols = cols//执行加载初始化方法this.load(map)},methods:{//...onTouchStart(e){...},onTouchMove(e){...},onTouchEnd(e){...},}
}

data()方法返回的是页面布局中使用到的数据，

做到这里，上面的画布页面就会显示好底部的一排按钮了，

如果显示效果不一样，就要调整布局对应样式，就在<style>...</style>标签中写CSS样式，

初始化画布

还有就是画布，现在还没有显示出来，继续写初始化画布代码，

在methods里写加载的load(map)方法，代码如下

load(map) {const {cols} = thisuni.createSelectorQuery().select('#' + canvasId).fields({size: true}, res => {//定义画布数据this.canvasData = {canvas: {width: res.width,height: res.height},ctx: uni.createCanvasContext(canvasId)};//调用初始化画布方法this.initCanvas(map, cols || 24)}).exec()
},

同样的，调用的initCanvas(map, cols)方法也是在methods里面写，代码如下

initCanvas(map, cols) {const {ctx,canvas} = this.canvasData//计算出每个单元格大小const size = Math.floor(canvas.width / cols)//计算出铺满网格的行数const rows = Math.floor(canvas.height / size)//...const grids = []//...// 绘制网格，r是行数，c是列数for (let r = 0, i = 0; r < rows; r++) {for (let c = 0; c < cols; c++, i++) {let g = {x: c * size + paddingLeft, //位置x paddingLeft是左边距y: r * size + paddingTop,//...v: '0' //像素初始数据}//...grids.push(g)}}//将计算出的数据放到canvasData数据中，下次会读取到Object.assign(this.canvasData, {grids, //这是网格的数据size,//...rows})//调用重新绘制方法this.redraw()
},

触摸操作

画布显示出来以后，就要实现触摸绘制，

看之前的代码，有如下三个方法，分别是触摸开始，移动，结束事件调用的方法，就在这方法中实现

export default {//...methods:{//...onTouchStart(e){...},onTouchMove(e){...},onTouchEnd(e){...},}
}

在布局中的canvas组件需要加上属性关联绑定上面的三个方法

当用户触摸画布时，就在画布中画出一个点就可以了，代码如下

onTouchStart(e) {let touch1 = e.touches[0]//调用此方法，根据第一个触摸点查找网格中单元格的索引let index = this.findGridIndex(touch1);//如果没有在网格内，就返回if (index < 0) return;//...这是第二个触摸点，如果有的话，就实现触摸拖动像素点，来达到准确绘制let touch2 = e.touches[1]//...省略了//如果是点击，直接调用触摸移动方法即可，避免重复写this.onTouchMove(e)
},

调用触摸移动方法里实现了如何绘制像素点，代码如下

onTouchMove(e) {//如果是同时存在两个触摸点，就是拖动操作let isMove = e.touches.length > 1let touch = isMove ? e.touches[1] : e.touches[0];const {grids} = this.canvasData;const {currentKey} = this;if (isMove && this.selectGrids.grid) {//...处理拖动操作的}let index = this.findGridIndex(touch);if (index < 0) return;let grid = grids[index];//...//更新指定的像素信息Object.assign(grid, {v: currentKey,color: this.findCurrentColor(currentKey) //将数值转换为按钮对应的颜色方法});//调用重绘方法this.redraw();
},

这个触摸移动方法可以实现连续绘制像素点，就像画一条线，

在触摸结束的方法这里，如下代码，

onTouchEnd(e) {if (!e || e.touches.length > 0) return//...触摸多点触摸操作的
},

这个触摸结束方法是可有可无的，如果实现多点触摸就要去写

绘制逻辑

知道为什么叫重绘方法吗，它就用刷新逻辑来实现的，

绘制方法redraw()，代码如下，先擦干净，再画上去

redraw() {const {canvas,ctx,grids,size,rows,cols} = this.canvasDataconst {isShowGrids} = this//擦画板ctx.clearRect(0, 0, canvas.width, canvas.height)//设置画笔颜色ctx.strokeStyle = '#000000'ctx.fillStyle = '#ffffff'//画背景色，如果想背景透明，就注释掉这一行ctx.fillRect(0, 0, canvas.width, canvas.height)//定义单元格的一半大小let r = size / 2;for (let r = 0; r < rows; r++) {for (let c = 0; c < cols; c++) {let g = grids[r * cols + c]ctx.beginPath()if (g.v != '0') {//画颜色的ctx.fillStyle = g.colorctx.fillRect(g.x, g.y, size, size)} else if (isShowGrids) {//画网格的ctx.strokeRect(g.x, g.y, size, size)}}}//最后调用这个方法就绘制出来了ctx.draw(true)
},

看上面的方法是不是很简单，容易理解呢

运行项目

讲到这里，像素画板的小程序项目基本上就算做好了，可以编译运行，接下来看看效果

像素画

想当像素画板用，看看作者随便画的一个二哈，如下图，
在这里插入图片描述

这是像素画，笔者画得好看吗 (^o^)；
对画画感兴趣的话，就自己想象画出来也好看的

如果调整的像素太细的话，或者网格列数过多，这是不好控制的，

这样，就要用两个手指触摸操作，项目里实现多点触摸操作逻辑是有点复杂的，

实现操作就是用一个手指按住画板，另一个手指去拖动，就会发现按住的像素点拖出来了，继续拖动到指定的位置即可，这就准确绘制了

迷宫地图

要想用来绘制游戏地图，例如迷宫地图，运行效果动图如下，
请添加图片描述

底部最后边的按钮是作者在项目里新加的预览图片功能，可以保存为图片的；
绘制好返回初始页面，可以看到显示导出的地图数据，

从上图中可以看到画出来导出的一串数字，点击复制地图数据按钮，然后粘贴到自己编写的小游戏程序中当新关卡地图用，

还可以绘制出2d像素人，像素地图，瓦片地图等，能想到的你都能用得上吧

例如，给地下迷宫游戏项目添加新的游戏地图，用法同如下代码

// 迷宫地图数据
const mapData1 = {map:' 111111111111111111111111101100010001000000000001000101101010101110101111111010101101010100000101000000010101101010111111101011111110101101010000000100010000000001101011101110101111111111101101000101000101000000000101101110101011101111111110101100010001010100010000000101111011111010111010111111101100010100010001010000000001101110101110101011101111111100000101000101000101000001111011101111101110101111101100010100000100000100000001101110111111111111101111101100000100000001000101000001111110101111101110111011111100000101000001010000010001101111101011111011111010101100000001010000010001000101111111111010101110101111101100000000010101000100000001101111101110101111101111101100000100000100000101000001111111111111111110111111111'cols: 27
}