游戏技能一：激光扫射的实现【CocosCreator 2D】【TypeScript】

本豚利

已于 2022-02-07 23:25:45 修改

阅读量4.2k

点赞数

分类专栏： TypeScript cocos 文章标签： typescript 游戏

于 2022-02-07 23:21:12 首次发布

本文链接：https://blog.csdn.net/LicalKi/article/details/122789844

版权

本文介绍如何使用CocosCreator 2.4.4结合一张可拉伸激光射线图片，实现激光扫射效果，并通过图形碰撞检测技术，实时判断与木箱的碰撞，触发木箱破碎动画。涉及关键代码和激光路径计算，适合游戏开发者学习碰撞检测原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

激光扫射技能，感觉还是挺酷炫的，可以应用在镭射眼、奥特曼光波、张口就来的激光攻击（比如特斯拉）等。
本篇实现方法没采用Cocos的物理引擎碰撞检测，主要用的是图形与图形是否有交集的检测

需要的东西：
1.一张可九宫格拉伸的激光射线png图片

2.CocosCreator 2.4.4
3.可被攻击的木箱
4.木箱被击碎的动画

实现方式：
首先，新建一个script，写一个cc.Component
设置一个用来控制激光的cc.Node，用property，方便拖拽赋值。

    /**激光 */
    @property(cc.Node)
    skillNode: cc.Node = null

激光扫射嘛一般是先直直的像金箍棒一样快速伸长，然后再进行角度变换的横扫。
考虑到快速伸长的过程也是可攻击到敌人的，换句话说就是每一单位时间都会判断一下激光的长度和箱子受击范围是否相交来决定是否销毁箱子。
假设让激光的光波先每0.05秒延长40像素，达到500像素左右开始做旋转。同时进行受击判断doSkill()
大概持续3秒左右：

代码实现

	onClick(){
   
		this.schedule(this.showLight,0.05)
        this.scheduleOnce(this.doDestory,3)
	}
    /**释放激光射线 */
    showLight(){
   
        this.doSkill()//受击判断
        this.skillNode.width += 40
        if(this.skillNode.width >= 500){
   
            this.skillNode.width = 500
        }
        if(this.skillNode.width > 400){

最低0.47元/天解锁文章