<8>Cocos Creator组件开发cc.Component

1.组件简介

    组件是Cocos Creator的主要构成,渲染(场景显示内容)、逻辑、用户输入反馈、计时器等等几个方面都是由组件完成的。根据Cocos Creator的总体架构,组件和节点配合完成游戏所需内容。

    所有组件都是代码脚本。一部分是Cocos Creator提供的,源码在Cocos Creator安装目录中;一些是用户自定义脚本,可在资源管理器中找到对应的脚本文件,组件需要添加到节点上才能执行

    Cocos Creator是组件式开发游戏,组件是完成某种功能的部件,例如假设一个人穿了防弹衣又拿了把枪,那么人相当于节点,防弹衣和枪相当于组件,防弹衣组件给人提供了不会被枪击射死的功能,而枪组件给人提供了可以射击敌人功能。如果把人(节点)去掉枪(组件)这个组件后,那么人就不具备了可以射击敌人的功能。

    因此,组件直接作用在节点之上!

2.cc.Component

    2.1 在Cocos Creator js引擎中有cc.Component这个组件,它为所有组件的基类。即所有的组件都扩展自cc.Component(, 构造函数);

    2.2 每一个cc.Component组件实例都有个成员node,指向它关联的节点cc.Node;

    2.3 每一个cc.Component组件实例可以通过name属性获得节点的名称;

    2.4 组件实例入口函数:

onLoad: 在组件加载的时候调用;

start: 组件第一次激活前, 调用在第一次update之前;

update(dt): 每次游戏刷新的时候调用,

lateUpdate(dt): 在update之后调用;

enabled:组件是否被启动;

onEnable: 组件被允许的时候调用;

onDisable: 组件不被允许的时候调用;

 

3.this和this.node区别

    脚本代码中的

    this:当组件加载运行的时候,代码函数里面的this指向这个组件的实例;

    this.node:指的是组件所挂的节点(cc.Node);所以在代码组件里面,可以使用this.node来访问这个组件实例说挂载的节点对象;

4.cc.Component属性和方法

    更详细内容可以参考官方API文档 https://docs.cocos.com/creator/api/zh/classes/Component.html

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 cc.Line 组件绘制随机闪电可以通过以下步骤实现: 1. 在场景编辑器中创建一个节点,添加 cc.Line 组件。 2. 编写脚本,获取 cc.Line 组件,并在 onEnable 生命周期回调函数中调用 draw 方法绘制随机闪电。具体实现方法如下: ``` cc.Class({ extends: cc.Component, properties: { line: cc.Line, duration: 0.2, // 闪电持续时间 offset: 10, // 闪电偏移量 boltWidth: 5, // 闪电宽度 color: cc.Color.WHITE // 闪电颜色 }, onEnable: function () { this.schedule(this.drawBolt, this.duration); }, onDisable: function () { this.unschedule(this.drawBolt); }, drawBolt: function () { var startPos = cc.v2(0, 0); // 起点坐标 var endPos = cc.v2(cc.winSize.width, cc.winSize.height); // 终点坐标 var midPos = cc.v2(startPos.x + (endPos.x - startPos.x) / 2, startPos.y + (endPos.y - startPos.y) / 2); // 中点坐标 // 生成随机偏移量 var offset1 = cc.v2(Math.random() * this.offset - this.offset / 2, Math.random() * this.offset - this.offset / 2); var offset2 = cc.v2(Math.random() * this.offset - this.offset / 2, Math.random() * this.offset - this.offset / 2); // 绘制闪电 this.line.setColor(this.color); this.line.setWidth(this.boltWidth); this.line.draw(startPos, midPos.add(offset1)); this.line.draw(midPos.add(offset1), endPos.add(offset2)); } }); ``` 这段代码将在节点上绘制随机闪电,每隔一定时间刷新一次。可以根据需要调整闪电的持续时间、偏移量、宽度和颜色等参数。需要注意的是,随机闪电的绘制效果可能会受到屏幕分辨率的影响,可以根据需要调整起点和终点坐标来适配不同的屏幕大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值