网站开发需要什么证书,网站建设辶首先金手指十五,网站开发 软文,绍兴集团网站建设嘿#xff0c;用过像素画板没有哦#xff0c;相信喜欢绘画的小朋友会对它感兴趣呢#xff0c;用来绘制像素画非常好看#xff0c;有没有发现#xff0c;它是可以用来绘制游戏地图的#xff0c;是不是很好奇#xff0c;来一起看看吧。 像素画板#xff0c;也叫像素画的绘…嘿用过像素画板没有哦相信喜欢绘画的小朋友会对它感兴趣呢用来绘制像素画非常好看有没有发现它是可以用来绘制游戏地图的是不是很好奇来一起看看吧。 像素画板也叫像素画的绘图工具可绘制游戏素材也是游戏地图编辑器 文章目录 游戏地图创建项目初始页面画板页面初始化数据初始化画布触摸操作绘制逻辑 运行项目像素画迷宫地图 游戏地图
有个案例绘制的游戏地图在以下两个游戏中都有用到可以看一看这两篇文章
地下迷宫游戏-微信小程序开发流程详解
创建项目
这里用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-groupcheckbox是控制是否显示绘制网格线的7个迷你按钮button sizemini从中选择一个像素来绘制每个像素点表示不同的颜色像素点可以表示数字例如01234...ef游戏地图是用字节数字来表示的占用内存少
初始化数据
同样也是在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 #000000ctx.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: 111111111111111111111111101100010001000000000001000101101010101110101111111010101101010100000101000000010101101010111111101011111110101101010000000100010000000001101011101110101111111111101101000101000101000000000101101110101011101111111110101100010001010100010000000101111011111010111010111111101100010100010001010000000001101110101110101011101111111100000101000101000101000001111011101111101110101111101100010100000100000100000001101110111111111111101111101100000100000001000101000001111110101111101110111011111100000101000001010000010001101111101011111011111010101100000001010000010001000101111111111010101110101111101100000000010101000100000001101111101110101111101111101100000100000100000101000001111111111111111110111111111cols: 27
}导出的地图数据很长很长粘贴时把后面多出的一串数字0去掉即可 想要项目源码在点这里查看下载或者直接点这里搜索:像素画板在本博客站内请放心下载感谢支持 可能手机上看不到请改用电脑浏览器查看
