【像素画板】游戏地图编辑器-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&gt;标签里去写逻辑代码

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

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&gt;...</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去掉即可

想要项目源码在点这里查看下载，或者直接点这里搜索:像素画板，在本博客站内请放心下载，感谢支持！

可能手机上看不到，请改用电脑浏览器查看

代码007普通

打赏 收藏 海报 链接