公司项目也完结了一阵时间了，是时候总结下经验了。

首先新手入门，中文搜索引擎能搜索到的博文我大抵上也看了7成，只推荐“云风”的那篇守望先锋同步解析博文，其他都是复制粘贴的垃圾。不然就是泛泛而谈，纸上谈兵，没有从代码层面去解析讲解。所以我推荐新手看完云风的那篇博文后去找找英语的博文，不得不承认，国外那些程序员理解很深刻且讲解很形象易懂。

然后说说我的经验之谈吧。由于能力有限，并不保证内容完全正确，如果你能够看到这篇文章请自行斟酌内容对错。

1. 首先名称“帧同步”，我也不知道这个叫法谁起的，但我更认同云风博文里所说的“锁定步进算法”，这个更为形象贴切。简单来说帧同步是将整个游戏沙盒时间轴切成一个个逻辑帧，收集玩家在一个逻辑帧内的操作，然后通过中央服务器转发给所有玩家，并进行推演。文字的描述总是惨白的，不理解的可以去玩玩“文明”系列游戏，帧同步也就大体如此。
2. 帧同步最基础也最重要概念：逻辑帧与渲染。反正我这么叫，不清楚他人是否也这样叫。帧同步之所以流量小对服务器压力小，因为帧同步一般只采集玩家的输入，并直接在玩家客户端推演他人的操作。当基于游戏的公平性，理论上所有玩家在同一时刻看到的画面应当相同，但由于玩家间设备、网络的差异，这是不可能实现的。（当然早年的即时战略游戏通过局域网、等待等措施消除了）由于设备的差异，有的人的画面会快一点有的会慢一点，当把逻辑依旧参杂在渲染流程中，那么势必设备好的玩家具有优势。（设备差的玩家由于卡顿，渲染稍慢，与设备好的玩家在同一时刻看到的画面不同）因此需要将游戏中的逻辑（击中，施法）从渲染中剥离，从而减少设备差异带来的不同步因素。
3. 帧同步是将时间切成一块一块的，那么快越大玩家之间的延迟就越大，因此竞技类游戏一个逻辑帧是越小越好。但与此同时带宽要求也会越来越大（同一时间发送接收的数据包越来越多），所以一个逻辑帧时间应该视项目类型而定。
4. “预测”：由于时间是块状的，且数据在链路上传输也需时间。因此，玩家的操作无法立即呈现在画面上，也就我们平时说的延迟感。对于一些类型游戏其实这种延迟可以忽略，但对于射击类的竞技游戏，这种延迟是万万不能有的。因此为了解决这个问题，人们在收到当前玩家操作后，会通过一系列算法去预测下一步，从而抹平延迟感。有预测就会有失败，失败后就需要回滚预测。
5. “追帧”：当玩家的设备出现卡顿，掉线，链路拥堵的情况，那么这个玩家的演算进程就会比他人慢一些，为了公平，我们应当加快玩家本地的时间轴间隔，使他尽快追到他人相同的时间上。
6. 网络链路不是通行无阻的，离中央服务器越远，越可能出现数据包阻塞更甚是丢包。出现这种情况时玩家本地推演将停止，表现就是其他人不动了。等数据包到达后为了公平开始“追帧”时又开始快速推演。这种情况就是人们常说的网卡了，出现这种是很影响体验的。解决方案是在当前时间上缓存若干个数据包，（时间轴推后），在网络波动时就有若干个逻辑帧的时间来等待阻塞的数据包了，这样就不会出现其他人不动的情况了。但这种处理会造成延迟感，须在二则之间寻找平衡点。
7. 浮点数，这个很多博文都提到。由于计算机的实现，浮点数是有可能出现不一致的。常用解决方案是定点数或者将小数乘以一个较大的倍数（1000，10000）来抹除小数。其实都行，帧同步还是允许误差的，但可容忍的最大误差就应当视项目而定。

从Unity又回来做Cocos了，一个坑，文档倒是写了，但没注意可能还真找不出问题。

直接使用tween().to(time,{position:pos}).start(),看起来是一顿一顿的，因为渲染position位置没有即时更新。

//应该这样写
tween()
    .to(time,{position:pos},{
        onUpdate:(newPos:Vec3,ratio:number)=>{
            node.position = newPos;
        }})
    .start();

最近公司一个Cocos项目实在是过不去苹果的审核，多方打听，建议我们使用移植到Unity提交。于是就有了这个需求。

移植啥的就不说了，说下这个存档继承问题。

Cocos的本地数据持久化（存档）是使用slqite实现的（非H5），因此想要做存档继承，那只要直接读取Cocos的sqlite文件就行。

一开始选择的方案是在Unity中直接使用sqlite。说真，网上相关内容不多，但在多方搜索下搞定了。但没有完全搞定，在应用小规范发布后发现，很多海外手机上插件不存在。搞了一天完全没有头绪，时间还紧迫（部分发布了），于是我决定直接不废弃这套方案。

于是有了第二个方案：使用原生层面JAVA来读取sqlite数据库。代码不难，小半天就测试通过了。上线，然后我们又发现还是有用户存档继承不了，具体原因是找不到存档文件（由于项目没用设备标识id来关联用户，后面玩家反馈才发现）。

那么为什么会找不到sqlite文件呢？一开始读Cocos源码，发现sqlite文件存储在:

std::string strFilePath = cc::FileUtils::getInstance()->getWritablePath();
    strFilePath += "/jsb.sqlite";

但明显与我真机上存储的位置不一致，也不知道是我没找对还是版本不一样的问题。

真机上打印结果为

/data/user/0/bundle_id/databases/jsb.sqlite

为了保险起见，我两种方式都去读一下文件。但结果还是存在找不到sqlite文件，为什么呢？

如果有熟悉安卓的同学可能很快就会发现了，或者根本不会出现这个错误。

错在哪呢？真机打印的结果没问题，但在不同手机上会有所不同（如果该手机开启了安卓多用户）

”/data/user/0/bundle_id/databases/jsb.sqlite“中的”0“代表这用户，如果开启了多用户则这个数字就会不同。就这样，简单，但不熟悉安卓的人一时间还真找不出问题（说的就是我自己🤐）

由于代码会进行混淆，导致动画事件不可用。于是手动写了个完成的监听。

public static async UniTask AnimationComplete(this Animator ani,Action action)
        {
            await UniTask.NextFrame(); 
            AnimatorStateInfo info = ani.GetCurrentAnimatorStateInfo(0);
            int t = (int)(info.length / info.speed * 1000);
            if (t < 0) t = 0;
            await UniTask.Delay(t);
            if(action != null) action();
        }

写完测试发现延迟的时间不对，似乎获取的是默认clip的信息。

解决：在执行监听时需要等待1帧时间

问题：摄像机跟随角色移动，呈现出来角色移动时会是不是抖动。

导致原因（大概）：角色位置设置与摄像机位置设置分处于两个不同脚本的update中，可能是由于两者的执行顺序会时不时变化导致看起来角色抖动

解决方案：将两者的执行顺序固定（某一方放laterUpdate中或者其他什么方法）

非滚动动画。实现了一版，不过好像不是很好看的样子，姑且放上来。

效果：

代码：

        let target = this.editBox.getComponent(cc.EditBox).string;
        //跳动动画
        let now = this.textNode.getComponent(cc.Label).string;

        //将数字切割成一个一个的
        let breakUp = (num)=>{
            if(typeof num == 'number') num = num + '';
            let arr = [];
            for(let i = num.length - 1; i >= 0; --i){
                arr.push(num[i]);
            }
            return arr;
        }

        let targetArr = breakUp(target);
        let nowArr = breakUp(now);

        let max = 0;
        let arr = targetArr.length > nowArr.length ? targetArr : nowArr;
        //选出最长
        for(let i = 0; i < arr.length; ++i){
            let t = targetArr[i] ? targetArr[i] : 0;
            let n = nowArr[i] ? nowArr[i] : 0;
            
            let diff = t < n ? (10 - parseInt(n) + parseInt(t)) : t - n; //如果目标数比原来的数小，那就要绕一圈，例： 7 -> 2 ,要 8，9，0，1，2
            if(max < diff) max = diff;
        }
        console.log('max值:',max)
        //进行动画,0.1秒更新一次文本 形成跳动感觉
        let index = 0;
        this._updateText = ()=>{
            ++index;
            let text = ""; //将要显示的文本
            for(let i = arr.length -1; i >= 0; --i){ //由于是从后往前记录的,现在也要从后往前拼接
                let n = parseInt(nowArr[i] ? nowArr[i] : 0) + index;
                if(targetArr[i] < nowArr[i]){
                    n = n >= 10 ? n - 10 : n; //转一圈
                    n = n > targetArr[i] && n < nowArr[i] ? targetArr[i] : n; //如果超过目标值
                    console.log('n的值：',n,i,index)
                }else{
                    n = n >= targetArr[i] ? targetArr[i] : n; //如果大于目标值，则等于目标值
                }
                if(targetArr[i] == undefined) continue;
                text += n +'';
            }
            
            this.textNode.getComponent(cc.Label).string = text;
            if(index >= max) this.unschedule(this._updateText);
        }
        this.schedule(this._updateText,0.1);

//红包显示及收集
    showHbAndCollect(parentNode,targer,num = 6){
        for(let i = 0; i < num; ++i){
            let itemNode = cc.instantiate(this.hbPrefab);
            parentNode.addChild(itemNode);

            itemNode.position = cc.v2( -200 + 400*Math.random(),-400 + 400*Math.random() );
            let desPosition = targer.convertToWorldSpaceAR (cc.v2(0,0));
            desPosition = parentNode.convertToNodeSpaceAR(desPosition);
            let bezier1 = [itemNode.position, cc.v2(-400 + 200*Math.random(), (itemNode.position.y+desPosition.y)/2 ) , desPosition ];
            let bezierTo1 = cc.bezierTo(0.25 + 0.25*Math.random() , bezier1);

            itemNode.runAction(cc.sequence(cc.delayTime(0.8*Math.random()), cc.scaleTo(0.3,1.2), cc.scaleTo(0.1,1) ,cc.delayTime(0.5+0.2*Math.random()), bezierTo1, cc.callFunc(function () {
                itemNode.removeFromParent();
                itemNode.destroy();
                if(targer != null){
                    targer.runAction(cc.sequence(
                        cc.scaleTo(0.1,1.2),
                        cc.scaleTo(0.07,0.96),
                        cc.scaleTo(0.03,1),
                    ));
                }

            
            }, this)));
        }
        //数额刷新
        targer.emit('refUI');
    },

具体效果有空再写

碰撞系统

3.为物体分组。

4.在脚本中开始碰撞检测（默认为关闭）

cc.director.getCollisionManager().enabled = true;

/**
 * 当碰撞产生后，碰撞结束前的情况下，每次计算碰撞结果后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionStay(other,self){}

/**
 * 当碰撞结束后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionExit(other,self){}

物理系统

但有一个坑

/**
*同步位置
*/
syncPosition(true);
例：
this.node.getComponent(cc.RigidBody).syncPosition(true);

/**
*同步旋转角度
*/
syncRotation(true)；
例：
this.node.getComponent(cc.RigidBody).syncRotation(true);

//要注意的是如果要实现一些平移之类的动作的话，需要每次（每帧）父节点更改时调用对应的函数