Tag Archives: Cocos

Hello World

sp.Skeleton动画Listener汇总

简单总结一下cocos骨骼动画的各种几个回调监听,可以进行更精确的控制特效,免得到时只会this.schedule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    //整体开始是调用一次
    this.roleAnimation.setStartListener((trackEntry)=>{
        console.log('---->> HeroAI roleAnimation, setStartListener:', trackEntry.trackIndex, trackEntry.animation.name);
    });
    //动画关闭时调用,在setEndListener之后
    this.roleAnimation.setDisposeListener((trackEntry)=>{
        console.log('---->> HeroAI roleAnimation, setDisposeListener:', trackEntry.trackIndex, trackEntry.animation.name);
    });
    //整体结束时调用
    this.roleAnimation.setEndListener((trackEntry)=>{
        console.log('---->> HeroAI roleAnimation, setEndListener:', trackEntry.trackIndex, trackEntry.animation.name);
    });
    //中断时调用,在setEndListener之前
    this.roleAnimation.setInterruptListener((trackEntry)=>{
        console.log('---->> HeroAI roleAnimation, setInterruptListener:', trackEntry.trackIndex, trackEntry.animation.name);
    });
    //每次循环结束时调用
    this.roleAnimation.setCompleteListener((trackEntry)=>{{
        console.log('---->> HeroAI roleAnimation, setCompleteListener:', trackEntry.trackIndex, trackEntry.animation.name);
    });

——
over
转载请注明出处:http://www.jiangkl.com/2025/04/cocos-skeleton-listener

Hello World

cocos.tween动画,时间线控制汇总

本文主要简绍cc.tween与sequence、delay、parallel、repeat和call的各种搭配、混合使用,实现事件序列的串并行控制
1. 简单串行

1
2
3
4
5
6
7
8
// 示例代码,先执行动作1、再执行动作2、然后执行回调
cc.tween(node)
    .to(time1, { position: newPosition }) // 动作1
    .to(time2, { angle: newAngle }) // 动作2
    .call(() => {
        // console.log('>> cc.tween end')
    })
    .start();

2. 并行parallel、延迟delay

1
2
3
4
5
6
7
8
9
// 示例代码,先同步执行动作1和动作2、然后延迟0.5秒、然后执行动作3
cc.tween(node)
    .parallel(
        cc.tween().to(time1, { position: newPosition1 }),// 动作1
        cc.tween().to(time2, { angle: newAngle }),// 动作2
    )
    .delay(0.5)
    .to(time2, { position: newPosition2 }) // 动作3
    .start();

3. 并行parallel、串行sequence、重复repeat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 示例代码 串并行混排、重复
cc.tween(node)
    .repeat(3,  // 让整个 sequence 重复 3 次
        cc.tween().sequence( //先执行第一个parallel,然后等待0.5秒、然后执行第二个parallel
            cc.tween().parallel( //先动作1与动作2串行
                cc.tween().to(1, { position: cc.v2(200, 200) }),  // 动作1
                cc.tween().to(1, { angle: 180 }) //动作2
            ),
            cc.tween().delay(0.5),
            cc.tween().parallel( //后动作3与动作4
                cc.tween().to(1, { position: cc.v2(-200, -200) }).to(1, { position: cc.v2(0, -200) }), //动作3,包含两个串行的子动作
                cc.tween().to(1, { color: cc.Color.RED }) //动作4
            )
        ).call(()=>{
               console.log('>> repeat once'); //每次repeat可以单独定义回调
        }),
 
    ).call(()=>{
        console.log('>> repeat end');} //整体完成的回调
    ).start();

——
over
转载请注明出处:http://www.jiangkl.com/2025/02/cocos-tween_timeline

Hello World

cocos.tween动画,移动曲线参数汇总

1. 缓动曲线:

1
2
3
4
5
6
7
8
9
10
11
// 示例代码
cc.tween(node)
    .to(time, { position: newPosition }, { easing: "sineInOut" }) // 先慢后快
    .start();
// 常用 easing 类型
// "sineIn"	开始慢,后面加速
// "sineOut"	开始快,后面减速
// "sineInOut"	先慢-加速-再慢
// "quadIn"	二次方曲线加速
// "quadOut"	二次方曲线减速
// "quadInOut"	二次方曲线平滑过渡

2. 贝塞尔曲线(Bezier Curve):

1
2
3
4
5
6
7
//示例代码
cc.tween(node)
    .bezierTo(time, cc.v2(100, 200), cc.v2(200, 300), cc.v2(300, 100)) // 1秒内按贝塞尔曲线移动
    .start();
// bezierTo(time, control1, control2, endPos)
// control1 和 control2 是控制点,决定曲线形状。
// endPos 是终点,节点沿着曲线到达该点。

3. 分步依次移动,使用 sequence() 组合多个 to():

1
2
3
4
5
6
7
//示例代码
cc.tween(node)
    .sequence(
        cc.tween().to(time1, { position: cc.v2(100, 200) }, { easing: "sineOut" }),
        cc.tween().to(time2, { position: cc.v2(200, 100) }, { easing: "sineIn" })
    )
    .start();

——
over
转载请注明出处:http://www.jiangkl.com/2025/02/cocos_tween_positin_easing

Hello World

Label对Drawcall的影响测试

众所周知,drawcall的数量是影响CocosCreator流畅度的一个重要指标,本文主要测试Label与Sprite混排时对性能的影响,主要有下面几个对照量:
1. 运行环境,共三种:
    a. mac端chrome浏览器(开启开发者工具、尺寸模拟iphon12pro)
    b. iphone(8plus)自带浏览器
    c. android(其实是鸿蒙、麒麟820/6G运存)自带浏览器
2. Label属性CacheMode,这里节选一下官方文档:
    a. None: 默认值,Label 中的整段文本将生成一张位图
    b. BitMap: 选择后,Label 中的整段文本仍将生成一张位图,但是会尽量参与 动态合图。只要满足动态合图的要求,就会和动态合图中的其它 Sprite 或者 Label 合并 Draw Call。由于动态合图会占用更多内存,该模式只能用于文本不常更新的 Label
    c. Char: 原理类似 BMFont,Label 将以“字”为单位将文本缓存到全局共享的位图中,相同字体样式和字号的每个字符将在全局共享一份缓存。能支持文本的频繁修改,对性能和内存最友好……不能参与动态合图(同样启用 CHAR 模式的多个 Label 在渲染顺序不被打断的情况下仍然能合并 Draw Call)
3. 节点形态:每一个精灵节点下,加一个Label子节点;精灵节点简单转动或摆动;Label仅显示数字,使用系统字体;测试过程共分三种情况:50/200/1000个节点
4. Label节点除了会修改CacheMode,还会尝试两种情况:不修改文案内容、每秒修改一次文案内容
基本的测试要素就是上面这些,下面来看测试结果

简单总结几个结论:
1. 就像文档里说的,对于固定内容的Label,BitMap确实对性能有巨大帮助,可以通过合批最大程度减少Drawcall
2. 对于Label和Sprite混排的情况,文本如果还要频繁更新,性能必然会受影响,如果预期这类节点数量很多,一定不能这么做
3. 虽然测试用的chrome浏览器已经开启了硬件加速,但或许是对m1mac的适配不好,这次测试chrome浏览器的表现完败,甚至不如六年前的iphone手机。(试了一下mac自带的safar浏览器,表现和iphone手机浏览器差不多)
那么,针对上面提到的第二条,如果确实需要大量、频繁更新的文本,应该怎么办?看文档大概有下面两种解决方案:
1. 使用艺术字图集代替系统字体
2. 将Label节点提出来,不要和Sprite混编
后续有时间试试这两种方案的效果 o(* ̄︶ ̄*)o
————
转载请注明出处:http://www.jiangkl.com/2023/04/cocos_label_drawcall
————
补充:
继续上面的话题,按照第2个解决方案对项目做了“优化”,也就是将所有的Label提取出来,单独放在一个节点了,和Sprite区隔开,测试结果:
1000个节点的情况下,三个端都能轻松运行,FPS 60,Drawcall 5,成功将1000个Label合批到一个Drawcall!

Hello World

浅析schedule与update的关系

schedule是cocos自带的定时器,这里简单试试这玩意的执行情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    onLoad () {
        this.schedule(()=>{
            let now = new Date().getTime();
            console.log('schedule-test, schedule 0.001', now);
        }, 0.001);
        this.schedule(()=>{
            let now = new Date().getTime();
            console.log('schedule-test, schedule  0.01', now);
        }, 0.01);
        this.schedule(()=>{
            let now = new Date().getTime();
            console.log('schedule-test, schedule   0.1', now);
        }, 0.1);
    }
 
    update (dt) {
        let now = new Date().getTime();
        console.log('schedule-test,         update', now);
    }

输出如下:
————
schedule-test, update 1658395521046
schedule-test, schedule 0.001 1658395521047
schedule-test, schedule 0.01 1658395521048
schedule-test, update 1658395521063
schedule-test, schedule 0.001 1658395521064
schedule-test, schedule 0.01 1658395521065
schedule-test, update 1658395521080
schedule-test, schedule 0.001 1658395521081
schedule-test, schedule 0.01 1658395521082
schedule-test, update 1658395521097
schedule-test, schedule 0.001 1658395521098
schedule-test, schedule 0.01 1658395521099
schedule-test, schedule 0.1 1658395521100
schedule-test, update 1658395521113
schedule-test, schedule 0.001 1658395521114
schedule-test, schedule 0.01 1658395521115
。。。。
————
简单总结一下,可以得到下面几个结论:
1. 在cocos的世界里,一“帧”,就是它的最小计时单位,也是schedule的最小调用周期,比帧间隔再小的时间单位,对schedule无效
2. schedule(可能)会在每一帧的update以后,调起定时逻辑
3. 即使定时间隔大于帧间隔,schedule也不能按毫秒级的时间精确调起回调函数(这一点从定时“0.1s”的回调里可以看出,不过上面没贴出出这么多)
嗯,简单来说看,可以把schedule当成低配版setInterval,既然cocos提供了自己的定时器,就尽量少用setInterval和setTimeout吧
————
转载请注明出处:http://www.jiangkl.com/2022/07/cocos_schedule_update

Hello World

使用图片序列创建cocos帧动画

    需求是制作一个简单的帧动画,图片素材来自一个gif,只有八帧,实现简单的人物动作。做demo时,没找到ccoos的切片工具,便直接用8个图片文件来实现了动画,效果还不错。但是正式项目时,八张图就是八个http请求,会拖慢页面加载速度,于是便回头找cocos做图片切片的方法
    这里要吐槽一个cocos,css有background-position,unity更是自带强大的切片工具,但找了很久,也没找到cocos对应的解决方案~~
    从前天一直拿“cocos 切片”类似的关键字搜索,一直也没找到解决方案~~到是在sprite的sliced浪费了不少时间。。。最后才发现被误导了,这玩意根本不是做图片切片用的,而是做背景图无变形放大用的。。。
    终于,昨天无意间看到一篇文章,提到的cocos的mask组件。。。嗯,就是它了,遮罩
    具体做法也很简单:父节点增加mask组件,然后将图片精灵放在子节点,调整子节点的position属性,就可以实现类似background-position的效果,详细设置见下图

———-
转载请注明出处:http://www.jiangkl.com/2022/06/sequence_animation
————————-
    三天后补充:
    就在我自己拿ps合并了项目里的二十几张小图后,然后呼哧呼哧一顿替换,将项目小图通过前面提得到的mask形式全都全换成了合并后大图,然后继续项目调优。。。然后就看到了cocos高手的调优经验:慎用mask,因为会带来过多的Drawcall。。。调整后的项目,Drawcall是36。。。咕~~(╯﹏╰)b
    同时也在这篇文章里看到了解决小图问题的方案:cocos createor自带“合并图集”的功能。。。
    这就是不好好看教材,直接靠搜代码方案做项目的结果,白费两天时间。。。
    还好上次折腾前,备份了项目。于是直接恢复项目,10分钟不到,就是用“合并图集”完成了减少http请求数的目标——然后打包运行,项目正常!
———-
    反思一下,其实就是没搞清“切图”和“合图”的区别,被自己一知半解的unity经验误导了。。。一直没找到点上
    记得大三时,刚接触汇编语言,有一次作业,需要相似的逻辑,执行10次。虽然当时已经学了c,知道程序里有“循环”可以做这事,可是在简单翻书没找到汇编的“循环”写法以后,下意识以为汇编这种低级语言没有循环,于是手动写了10次代码逻辑。老师看了以后评价:下次作业要执行有个一万次的循环,你要不要也这么写?

Hello World

cocos碰撞检测的坑–移动太快可能不触发

    下午调试一个cocos射击游戏,未击中时,目标背后的“墙”上会显示一个弹孔。本来以为挺简单的东西,可碰到了一个无厘头的问题,搞了一个小时才解决。
    具体的问题是这样的:子弹和墙的碰撞事件,有时能触发、有时不能触发。于是按照以前的经验,逐个找了下面一个容易出问题的点:
    1. 开启碰撞检查:cc.director.getCollisionManager().enabled = true;
    2. 碰撞检测函数onCollisionEnter加入到碰撞实体的绑定函数
    3. 项目设置里的碰撞分组设置
    4. 碰撞节点出了添加collder,还要至少有一方添加rigidbody
———-
    这几个点都确认了一遍,还是没解决。。。只能瞎搞了
    N种尝试以后,降低子弹速度了,问题不在重现。。。
    于是看出了端倪:游戏过程是每帧间隔的,子弹速度太快,撞击体太小,刚好撞击的过程发生在了两帧之间
    尝试增大撞击体“墙”的“厚度”,问题解决
——————
转载请注明出处:http://www.jiangkl.com/2022/03/cocos_oncollisionenter

Hello World

cocos加载网络图片

    其实就是个简单的img-src需求,显示指定url地址的图片,刚开始用的cc.loader.load,后来换成cc.assetManager.loadAny,都不好用,最后换成cc.assetManager.loadRemote,问题解决

1
2
3
4
  let imgUrl = 'xxx';//图片地址
  cc.assetManager.loadRemote(imgUrl, {ext: '.png'}, (err, tex: cc.Texture2D) => {
     this.imgNode.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(tex);
  });

——-
转载请注明出处:http://www.jiangkl.com/2022/01/cocos_net_img

Hello World

cocos刚体子节点不随父节点移动的坑

早听说cocos的坑挺多~~~坑就在那里,只要坚持搞,早晚会碰上O(∩_∩)O~
昨天碰到了这样一个问题:触屏滑动,父节点旋转角度,子节点移动位置。本来移动子节点的移动效果已经做好了。然后给子节点加了刚体组件,准备处理后续碰撞逻辑。可是加了刚体以后,子节点不再随父节点旋转了。。。
刚才搜了一下解决方案,syncRotation/syncPosition,加上以后,问题解决,具体用法如下:
this.node.getComponent(cc.RigidBody).syncRotation(true)
———
这应该不是cocos的bug,而是,加了刚体以后,运动的处理逻辑交给物理引擎处理,所以不再跟随父节点。。。也么说也能解释的通~~~好歹人家提供了解决方法^_^

Hello World

Cocos学习笔记——碰撞回调(1)

接上篇小球落地,如果想让小球落地后反弹,要怎么做哪?
cocos的物理引擎提供了碰撞回调,需要如下步骤开启:
1. 参照前一篇,配置碰撞双方的RigidBody,开启重力引擎
2. 菜单选择“项目”-“项目设置”-“分组管理”,添加分组:ground、balls(这里,物理引擎的碰撞并不需要勾选balls与ground的碰撞关系)
3. “层级管理器”里,分别选择ground、ball节点,配置ground、balls分组
4. 脚本的onLoad内开启重力引擎,小球的脚本内添加碰撞回调:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
....
  onLoad(){
    cc.director.getPhysicsManager().enabled = true;
  }
....
  //碰撞开始时的回调,self为碰撞“主动方”, other为碰撞“被动方”
  onBeginContact(contact, self, other){
    let v = self.body.linearVelocity;
    v.y = 1200;//设置一个向上的速度
    self.body.linearVelocity = v;
    //注意,下面这种写法是无效的:
    //self.body.linearVelocity.y = 1200;
  }
  //碰撞处理结束时的回调
  onEndContact(contact, self, other){
 
  }
....

注意:
a. onBeginContact、onEndContact是系统指定的碰撞引擎的回调方法,不需要绑定,也不能改名
b. 除了“物理组件”引起的碰撞,cocos还有正常运动时产生的碰撞,此时的回调方法是onCollisionEnter,详细使用方法将放到下一篇笔记里

演示:http://dev.jiangkl.com/ex/dlx2
转载请注明出处:http://www.jiangkl.com/2020/05/cocos_碰撞