[图片] 以下内容来自公众号：小游戏可视化开发工具 如果你想实现一个画笔工具 那么小游戏可视化开发工具绝对适合你 跟着我一起 动手撸一个画笔工具吧 网址是：http://gm.weixin.qq.com （PC上使用） [图片] 实现原理 实现画笔的核心在于：克隆 当手指在屏幕上按住时，克隆精灵并移动到手指的相对位置。这样手指移动的过程中就会不断的克隆，视觉上就相当于画了一条线 先来实现一个简单的画笔功能 一、切换颜色的画板 首先准备一个可以切换颜色的画板： 创建一个竖屏项目，取名：画笔工具           添加一个正方形、圆形和滚动列表插件。调节精灵的大小和位置，滚动插件设置子元素为圆形，滚动方向为左右。 [图片] 新建一个rgb表格，添加几组rgb颜色。 [图片] 在场景启动时，设置滚动列表的总个数为表格rgb的行的长度。 [图片] 圆形作为克隆体启动时，设置自己的颜色为自己的列表索引在rgb表中对应的颜色值。 [图片] 新建一个全局变量：当前颜色。 [图片] 列表子元素被点击的时候，设置当前颜色为自己的列表索引，并切换圆形的颜色。 [图片] 这样一个简单的可切换颜色的画板就搭建好了。 [图片] 二、画笔功能 添加一个圆形精灵，设置宽高为40，重命名为画笔。当手指在屏幕上按住时，如果手指的位置在正方形的上面则克隆画笔。 [图片] 画笔作为克隆体启动时，移动到手指的相对位置，显示并修改自己的颜色。 [图片] 查看效果发现出现问题： [图片] 克隆体在一瞬间暴增，最后全部移动到了一个位置。我们需要采用防抖的方式来控制克隆数量。新增一个全局变量：正在克隆 [图片] 在克隆时前加一个条件：正在克隆等于0，在克隆前将正在克隆设置为1。 [图片] 克隆体启动事件结束后将正在克隆设置为0。 [图片] 这样一个简单的画笔工具就实现了： [图片] 这里我们发现一个问题：画笔之间不是很连贯，有缝隙。这里我们的优化方案是对缝隙进行补充！ 优化画笔 我们需要记录前后两点的坐标，当两点距离超过一定值时，就用一个正方形链接两点并进行补充： [图片] 如上图所示，在两点之间做个坐标，将正方形移动到中心位置，设置高度为两点之间的距离，然后旋转到对应位置。 所以，我们需要求出两点间的距离和需要旋转的角度。 [图片] 如上图所示，正方形旋转的角度为A，根据对角相等和直角三角形，可知∠A==∠B==∠C。根据atan函数可以求得 ∠A =atan（ X/Y）。 其中X为两点间的X轴距离，Y为Y轴距离 在小游戏可视化工具里，逆时针旋转的角度为负数，所以，这里我们需要求得一个负数的角度。如果左下角为第1个点，右上角为第2个点，那么X和Y都是正数，反过来则都是负数，所以 ∠A = -1 * atan（ X/Y）。 这里旋转的角度我们就求出来了，距离可以根据勾股定理和平方根公式求得。 一、旋转角度和距离 新建几个变量：偏移X、偏移Y、旋转角度和补充高度。 [图片] 新建2个列表：手指当前坐标X和手指当前坐标Y。 [图片] 在克隆之前，记录手指的当前坐标到对应列表： [图片] 作为克隆体启动时，如果两点之间的距离大于5，则克隆一个正方形进行补充。 [图片] 二、补充 新添一个正方形重命名为补充并隐藏，作为克隆体启动时，移动到两点中心点，调整高度并旋转到对应角度： [图片] 当手指在屏幕上放开时，要删除坐标列表的全部项目。 [图片] 这样，一个画笔工具就实现了。快来试试吧！ Tip：还差了两点在同一水平线和垂直线上的优化 [图片] 扫描二维码体验 项目地址： https://gamemaker.weixin.qq.com/#/game?game_id=lbMDUwZWVkNWMtNWJjNS00ZGRlLTk2YzYtYjQ1MTkyMjhjZDYy B站教程： https://www.bilibili.com/video/BV1of4y1h7kk - END -

嗨！大家好，我是小蚂蚁。 今天我们分享一下如何使用滚动列表来实现一个物品图鉴功能。 [图片] 如图，在很多的游戏中都有这种物品图鉴的模块，用于玩家在游戏的过程中收集解锁物品，或者敌人，宠物等等。 这种功能能够满足玩家的收集欲望，就像我们小时候收集的画册，邮票，现在大家喜欢收集的手办，卡片等等。只要有这样的一个收集图鉴，你就总是会想把其中的所有物品全部集齐或者点亮。 下面我们就来看一下如何在微信小游戏制作工具中实现一个这样的物品图鉴功能。 先来布置一下示例的场景。 [图片] 如图，我们导入了滚动列表插件（位于素材库中的插件类别中），制作了两个容器，一个是显示物品图鉴的面板，一个是用于滚动列表中的物品项。 重点来看一下滚动列表的属性设置。 [图片] 有的同学问我做的滚动列表为什么只有一行或者一列呀？那是因为你没有设置行数或者列数呀！这里滚动方向选择的是“上下”，下面对应的会出现列数的属性。如果滚动方向选择的是“左右”，那下面对应的会出现行数的属性。 在子元素中选择我们制作好的“物品项”容器，子元素中可以选择单个精灵或者容器。 接着，我们来看一下对于物品项的处理。 [图片] 如图，物品项容器中包含了两个部分：一个精灵图片用于显示物品图，一个基础文字用于显示物品名称。在滚动列表中要显示很多个不同的物品，对应的不同的图片和不同的文字，这些该怎么处理呢？ 对于图片来说，可以通过为一个精灵增加多个造型来实现。 [图片] 我们可以为一个精灵图片增加很多个造型（你可以把造型理解为一个人的很多套衣服），每个造型都有一个独立的编号，这个编号就是切换造型的关键。 对于物品名称来说，最好是也能按照一定的编号来设置，我们可以借助列表来实现。 [图片] 如图，因为物品只需要一个名字，所以我创建了一个列表，如果你的物品还需要介绍等其它信息，可以选择使用一个表格来管理数据（表格的行号就是编号），列表中的第几项代表的就是这个物品名字的编号。 这个编号就是一把钥匙，只要有了一个物品的编号，我们就能够通过这个编号获取物品的图片以及名称了。 最后，来看一下物品项上的积木逻辑。 [图片] 这里有两个重点：第一是所有滚动列表中的项，都是被滚动列表插件克隆出来的，所以初始化操作应该放在“当克隆体启动时”积木中，如果你把初始化操作放在“当场景启动时”积木中，就会发现初始化操作没有完成。第二是列表中的项是从 1 开始计数，想要知道当前是第几项，可以通过使用积木“自己的列表索引”来获得，这个列表索引就是我们之前所说的那把钥匙。 滚动列表一共有 15 项，对应的列表索引是 1～15，物品精灵有 15 个造型，对应的是 1～15，存储物品名称的列表中有 15 项，对应的是 1～15。每个索引对应一个造型和一个物品名称，很像是一把钥匙对应一把锁。 为了测试，我们增加了一个按钮，创建了一个“当前等级”的全局变量，以及一个“物品解锁”的通知。 [图片] 每点击一次按钮，等级增加 1 ，然后解锁一个新的物品。 在真实的游戏中，有可能通过关卡来解锁物品，也可能通过游戏中的某些节点（干掉某种怪，收集到某个物品或宠物）来解锁物品。我们今天所讲的是物品图鉴的展示功能，至于背后的具体数据逻辑需要视具体的游戏而定。 --- 自己学习没氛围学不下去？遇到问题无人解答？缺少经验不知该如何前行？......欢迎加入小蚂蚁的游戏开发课，不只是一门课，而是围绕着新手学习做游戏有关的一整套服务。从入门到进阶一套服务全部搞定，欢迎来跟一百多位同学一起学习做游戏。【点击这里】可了解课程服务详情。 欢迎关注我的微信公众号【小蚂蚁教你做游戏】，每天学点儿游戏开发知识。 [图片] 也欢迎加小蚂蚁微信(xiaomayi6669)，交个朋友。 [图片] 这里是小蚂蚁的小游戏系列，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装，微信扫码可以直接玩啦！ [图片] [图片] [图片] [图片] [图片] [图片] [图片]