最近在做个飞行射击游戏当练手,顺便熟悉一下ccc3.0的开发流程,大多数飞行射击游戏都有激光炮这种子弹,但看了一些教程,实现效果都是与屏幕方向平行,没有弧度的激光,实现后发现效果没达到自己预期,于是看到了下图这种激光效果(我称为激光鞭),觉得很酷炫,想要着手实现。
希望实现的效果
最终实现的效果
前期调研了一些资料,本来计划使用Graphic组件+shader实现,但因为没有shader基础,放弃了,后来经过cocos论坛的大神指导,尝试使用Line组件来实现这个效果。
肯定有效果更好的实现方式,还望大佬能够继续指点。
注:
1、本次实现未使用到对象池,用对象池对性能优化肯定更好。
一、实现思路
其实实现思路不难,飞机通过发射普通子弹,并收集这些普通子弹的坐标存入数组,将该数组赋给Line组件的拐点参数,使用Line组件绘制激光。
二、组件准备
2.1 Line组件
新建一个Node,添加Line组件,如下:
参数说明:
Texture:Line组件的贴图,传一个横向的激光贴图即可。
WorldSpace:后续Line组件每个拐点的坐标是否基于世界坐标,因为我其他类型子弹的坐标都是基于世界坐标计算的,所以这个部分也给勾上了。
Positions:拐点的数量,最终会使用贴图将这些拐点连接起来,拐点越多,最终激光鞭的效果会越平滑,后续使用代码设置,此处先放空。
Widh:激光鞭的宽度
Tile:贴图平铺设置,我设置为:1,1,设置成不同值会有什么效果,自行尝试即可。
Offset:偏移量,没明白啥意思,先放着不管了
color:默认的白色即可。
2.1 新添加一个Camera
之所以要添加一个相机是因为COCOS无法同时渲染显示Line组件和Canvas等2D组件,二者叠加的部分无法显示Line组件(即便在Line组件上加上UIMeshRenderer也没用)。
所以需要单独使用一个Camera单独照这个Line组件,首先增加一个Layer:Laser_Bullet,之后把上面的Line组件的Layer设置为:Laser_Bullet。
之后开始设置Camera的参数:
部分参数说明:
Priority:渲染优先级,我把两个camera的优先级都设置为0,如果激光鞭的camera的优先级比画布的优先级数字小的话,可能会被后渲染的画布给覆盖掉。
Visibility:把之前添加的Laser_Bullet给勾上就可以了,因为我们只需要他显示激光鞭。
Projection:选择正交
OrthoHeight:480和另一个Camera保持一致
添加一个Canvas(设置与主Canvas一致即可),将这个新添加的Camara设置为这个Canvas的2D渲染相机。
此时的节点树如下:
下一篇:
[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(二)