正多边形弹幕

正多边形弹幕设计

Prepare:

        理解此教程,需要准备的材料:

        触发器基础:会变量、数组、for循环以及部分数学相关函数

        +

        数学基础:小学二年级就学过的向量、三角函数以及幼儿园大班的平面几何

        +

        聪明且耐心的你

Start :

        前段时间有个小朋友问我,请问正多边形弹幕该怎么做?

        我...陷入了沉思(我**哪会呀?)...

        但是转头看向这位小朋友求知若渴的眼神,得!

        于是Konux用ta小学二年级的数学水平,耗时长达1799999毫秒......

        

        费了吹灰之力!Konux终于做出了正宗且保熟的多边形弹幕!!!


Analysis :

        多边形弹幕在实际应用中可以是由中心扩散发射出,也可以直接显示出一个正多边形,通过直觉告诉我,决定弹幕的轨迹需要两个参数,要么就是以直角坐标系为基础的x轴和y轴坐标,要么就是基于极坐标系的角度θ和距离r,很显然在ic里,用坐标表示一个点的位置更加自然且方便,如果我们能求出以某一个点为中心构成的正多边形上每个点的坐标,那么我们对其进行直接显示或扩散操作都是可行的

        直接显示:弹幕直接创建在指定的多边形的边上,直接创建在求出的对应坐标即可

        扩散弹幕:创建弹幕在中心点,然后使每个弹幕以相同的时间(防止边形)移动到其指定坐标即可

        这个问题转化为了求多边形弹幕的所有坐标的数学表达,很多同学可能到这就不知道该怎么推导了,不慌,我们以大化小,逐个分解


Calculation:

        我们直接上图:

        


由于多边形的原理相同,所以这里以五边形为例

        先列出决定多边形弹幕的可变参数,以便后期的使用:

        多边形中心点:centerPoint

        多边形边数:n

        多边形外接圆半径:r

        多边形弹幕密度(即一条边上的弹幕数 - 1的值):ρ

        多边形整体角度:angle

 

将五边形的五个顶点从最上方开始逆时针依次如图标号0、1、2、3、4

仔细观察弹幕上的点的特征,你会发现每个点的坐标可以由两步求得:

1. 先找到当前点对应的顶点(这里取该点顺时针方向上的第一个顶点),比如边a上的点的顶点就是点0

2. 由顶点的坐标向某个角度偏移一定距离


我们只要使用一个for循环...


我们的所有坐标就都求出来了

好的,那么我们的教程就快乐的做完啦!大家下期再见(不是


推导过程:

我们使用一个for循环(使用变量k)就求出了所有的点的坐标,由图可以看到,我用名为drawPoint的数组存储了所有的点坐标,点的下标使用for循环的下标

下标如图所示(一边20个点)


根据1+1=10,我们可以知道所有点的个数应该是 n*ρ 个,所以for循环理所当然需要执行 n*ρ 次来计算每个点的坐标

我们的for循环的变量只有一个,所以需要根据这一个变量的变化来计算所有点的坐标

经过简单的数学计算可以得出一些关键信息:

——  k/ρ并向0取整:当前边数

         因为k为当前点的下标,其值除以每个边上的点数(即密度 ρ)即可得到当前边的下标,比如边a下标为0,b为1,c为2...

         举例子,如图b边的最后一个点37(38前面的一个点),除以边数19即可得结果1.947368421052631...,取整数位为1,而b的下标也确实为1

         那么在游戏中怎么取整数位呢?超级简单,游戏自带的数学函数【整数计算】37/19得到的结果就是1,因为此函数就是向0取整的

         另外注意!下文当中的"[ ]"符号专门表示向0取整,例如 [k/ρ] 就表示 k/ρ 向0取整,其他情况都使用小数计算

——  k%ρ:该点为当前边上的第几个点

         这里的%是指我们生前就会的求余数,比如9%4 == 1,这里的意思是表示当前点的下标除完一整条边的点数后剩余的点数,即表示该点在自己的那条边上逆时针上的第几个位置,也可以说,从该边端点顺数第几个点,例如下标为19的点,19%19 = 0,[19/19] = 1,表示该点在b边上的第一个点,下标18%19 = 18,[18/19] = 0,表示该点为a边上的第19个点


step 1(找顶点) :

        顶点坐标的共同特征都是以中心点centerPoint为起点向某个角度偏移 r 的距离,所以这里需要用到【向量偏移(逆时针)】函数,至于这个角度,通过简单的几何角度计算可以得出结果为:angle(控制整体方向) + 360/n(每加1边变化的角度) * [ k/ρ ](当前边数)

        游戏中这样表示(不要着急抄):


        这样我们就能通过变量k来找到对应点的边的端点(坐标)


step 2(找准确坐标点) :

        我们已经通过step1找到了任意点对应的边上的端点,那么,我们只需要再来一次【向量偏移(逆时针)】即可得到准确的点

        方法:使用step1里得到的端点坐标,向某角度偏移某距离

        这里的角度和距离进行一定的计算就可求得:

        角度公式:angle(控制整体方向) + (90 + 180 / n)(初始角度,即图中端点0至1的角度) + (360 / n)(每加1边变化的角度) * [ k / ρ ](当前边数)

        距离公式:(k % ρ)(当前点是对应边上的第几个点) * (( 2rsin(π/n) ) / ρ)(两点之间的距离,用边长 (利用三角函数简单推导) / 密度)


我们现在已经完成了所有的计算分析,所以,理论存在,实践开始!

总体计算图如下:


游戏中制作如下(阿巴阿巴阿巴...看不懂就对了,主要是理解):


好了,这期教程到此结束了,理解了原理的朋友可以自行挑战多角星的做法,思想和多边形的相似