需求是制作一个简单的帧动画，图片素材来自一个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次代码逻辑。老师看了以后评价：下次作业要执行有个一万次的循环，你要不要也这么写？

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

    其实就是个简单的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

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

接上篇小球落地，如果想让小球落地后反弹，要怎么做哪？
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_碰撞