嘿，用过像素画板没有哦，相信喜欢绘画的小朋友会对它感兴趣呢，用来绘制像素画非常好看，有没有发现，它是可以用来绘制游戏地图的，是不是很好奇，来一起看看吧。
像素画板，也叫像素画的绘图工具，可绘制游戏素材，也是游戏地图编辑器
文章目录
- 游戏地图
- 创建项目
- 初始页面
- 画板页面
- 初始化数据
- 初始化画布
- 触摸操作
- 绘制逻辑
- 运行项目
- 像素画
- 迷宫地图
游戏地图
有个案例，绘制的游戏地图在以下两个游戏中都有用到，可以看一看这两篇文章
- 地下迷宫游戏-微信小程序开发流程详解
创建项目
这里用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
} = this
uni.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 > 1
let 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.canvasData
const {
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.color
ctx.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
}
导出的地图数据很长很长，粘贴时把后面多出的一串数字0去掉即可
想要项目源码在点这里查看下载，或者直接点这里搜索:像素画板，在本博客站内请放心下载，感谢支持！
可能手机上看不到，请改用电脑浏览器查看
