评论

我用2小时实现了一个画笔工具

一次群里的讨论得出来的实现方案,通过克隆+补充的方式实现画笔功能

以下内容来自公众号:小游戏可视化开发工具



如果你想实现一个画笔工具

那么小游戏可视化开发工具绝对适合你

跟着我一起

动手撸一个画笔工具吧

网址是: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 -



最后一次编辑于  2021-08-02  
点赞 0
收藏
评论

1 个评论

  • 玫瑰花
    玫瑰花
    2021-08-02
    :丶∴∴:∵乄∴↖∴冫:、∵。…冫丶∵
    2021-08-02
    赞同
    回复 1
    • Silvia Xu
      Silvia Xu
      2021-08-04
      @_@囧囧囧
      2021-08-04
      回复
登录 后发表内容