天天看点

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

      最近在做个飞行射击游戏当练手,顺便熟悉一下ccc3.0的开发流程,大多数飞行射击游戏都有激光炮这种子弹,但看了一些教程,实现效果都是与屏幕方向平行,没有弧度的激光,实现后发现效果没达到自己预期,于是看到了下图这种激光效果(我称为激光鞭),觉得很酷炫,想要着手实现。

希望实现的效果

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

最终实现的效果

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

      前期调研了一些资料,本来计划使用Graphic组件+shader实现,但因为没有shader基础,放弃了,后来经过cocos论坛的大神指导,尝试使用Line组件来实现这个效果。

        肯定有效果更好的实现方式,还望大佬能够继续指点。

注:

1、本次实现未使用到对象池,用对象池对性能优化肯定更好。

一、实现思路

        其实实现思路不难,飞机通过发射普通子弹,并收集这些普通子弹的坐标存入数组,将该数组赋给Line组件的拐点参数,使用Line组件绘制激光。

二、组件准备

2.1 Line组件

        新建一个Node,添加Line组件,如下:

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

 参数说明:

Texture:Line组件的贴图,传一个横向的激光贴图即可。

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

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的参数:

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

 部分参数说明:

Priority:渲染优先级,我把两个camera的优先级都设置为0,如果激光鞭的camera的优先级比画布的优先级数字小的话,可能会被后渲染的画布给覆盖掉。

Visibility:把之前添加的Laser_Bullet给勾上就可以了,因为我们只需要他显示激光鞭。

Projection:选择正交

OrthoHeight:480和另一个Camera保持一致

        添加一个Canvas(设置与主Canvas一致即可),将这个新添加的Camara设置为这个Canvas的2D渲染相机。

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

        此时的节点树如下:

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(一)二、组件准备

下一篇:

[学习笔记]cocos creator 3.0,实现飞行射击游戏的激光鞭(二)

继续阅读