CocosCreator3.8(及以上)前端开发框架

Creator 3.x
#62

更新

新增一些用于实现帧同步的扩展包：

  • @gamex/cc-decimal【定点数】
  • @gamex/cc-decimal-vec2【定点数二维向量】
  • @gamex/cc-decimal-vec3【定点数三维向量】
  • @gamex/cc-decimal-random【定点数随机库】

在项目根目录下执行安装

npm run package

帧同步

也就是帧同步技术，是一种在多人在线游戏尤其是实时对战游戏中常用的同步方法。这种技术确保所有玩家看到的游戏状态是一致的，尽管他们的网络状况和地理位置可能不同。

在帧同步中，游戏的逻辑是在每一帧中独立执行的。游戏服务器并不处理每个角色的每个动作，而是在固定的时间间隔内（比如每秒15帧），将玩家的输入（比如移动、攻击指令等）收集起来，并在这个时间点广播给所有玩家。在收到所有玩家的输入之后，每个客户端将这些输入应用到游戏世界，并计算出下一个状态。因为所有的客户端都接收到相同的输入，并以相同的方式计算游戏世界的变化，所以理论上每个客户端的游戏状态都应该是同步的。

帧同步的关键点在于：

  • 所有玩家的输入在每一帧被收集，并在固定的帧间隔同时处理
  • 每个客户端对游戏世界的计算应当完全确定性，意味着相同的输入总是产生相同的输出
  • 网络延迟和丢包的处理机制需要精心设计，以确保玩家体验的一致性

帧同步的优点是：

  • 服务器负载较低，因为它不处理游戏逻辑，仅仅是转发玩家的输入指令；
  • 实现相对简单，天然支持回放功能；

但帧同步也有其缺点：

  • 对于网络状况较差的玩家，可能会出现较大的游戏延迟
  • 小数计算的不确定性对于状态一致性是个挑战
  • 处理玩家作弊也是一个需要考虑的问题

尽管帧同步技术在处理这些问题上可能存在一些挑战，但它仍然是一种广泛用于多人在线游戏且相对高效的同步方法。

实战项目

这段时间做了一个帧同步的射击玩法，现已在 Cocos Store 上线！

而且后续还计划会做一个联机防守图玩法(类似dota防守图)

感兴趣想想学习帧同步的同学不可错过！
https://store.cocos.com/app/detail/5987

#63

补充误差测试结果(数值随机，误差结果保留小数点后4位)

[==] 62.531867578614765==-65.03859451338943 Decimal: false  Math: false ✅
[==] -5.919801755915316==21.68254399905662 Decimal: false  Math: false ✅
[==] -90.42086750912586==23.744631735785845 Decimal: false  Math: false ✅
[==] -66.63044164287224==0.42269717412951024 Decimal: false  Math: false ✅
============================
[!=] -77.43619169417104!=38.55014268316012 Decimal: true  Math: true ✅
[!=] -7.136491370152328!=-81.36718716836305 Decimal: true  Math: true ✅
[!=] -11.851833591824331!=0.13637311108398364 Decimal: true  Math: true ✅
[!=] -37.460645944396816!=-71.06728654742741 Decimal: true  Math: true ✅
============================
[>] -91.27894656930545>-83.0048743744606 Decimal: false  Math: false ✅
[>] 20.932209876762812>-64.43377411416179 Decimal: true  Math: true ✅
[>] 13.063887503033783>-64.47650042588214 Decimal: true  Math: true ✅
[>] -80.29127968660421>7.795113112716749 Decimal: false  Math: false ✅
============================
[>=] 23.561002212355802>=-18.337547841258143 Decimal: true  Math: true ✅
[>=] 8.400451805046757>=7.237992716639226 Decimal: true  Math: true ✅
[>=] 83.12263282952031>=29.190081961520946 Decimal: true  Math: true ✅
[>=] -3.2746027259186405>=-58.75256263229662 Decimal: true  Math: true ✅
============================
[<] -69.72435919831116<-52.78586909247976 Decimal: true  Math: true ✅
[<] -26.771729525027382<-88.87628466713275 Decimal: false  Math: false ✅
[<] -67.6380996672302<44.73504108156118 Decimal: true  Math: true ✅
[<] 83.33510109438436<8.010383849989026 Decimal: false  Math: false ✅
============================
[<=] 86.81537061509067<=-63.404839156719596 Decimal: false  Math: false ✅
[<=] 55.11355467745801<=-43.20026329649558 Decimal: false  Math: false ✅
[<=] 22.45085411824786<=-8.48620821060706 Decimal: false  Math: false ✅
[<=] -16.500889929365755<=42.18672907316105 Decimal: true  Math: true ✅
============================
[加法] 90.50999104710749+11.846966395318773 Decimal: 102.35695743  Math: 102.35695744242626 误差: 0.0000% ✅
[加法] 9.999798260410046+60.28632659441402 Decimal: 70.28612485  Math: 70.28612485482407 误差: 0.0000% ✅
[加法] -9.348959668368465+45.32907038488568 Decimal: 35.98011072  Math: 35.98011071651722 误差: 0.0000% ✅
[加法] 78.10388039382175+-88.48454139617247 Decimal: -10.380661  Math: -10.38066100235072 误差: 0.0000% ✅
============================
[减法] 4.589892654235058--10.949785353969602 Decimal: 15.539678  Math: 15.53967800820466 误差: 0.0000% ✅
[减法] 1.5493979561874909-90.67149200092453 Decimal: -89.12209405  Math: -89.12209404473704 误差: 0.0000% ✅
[减法] -70.0335663103651--11.991485678818805 Decimal: -58.04208064  Math: -58.0420806315463 误差: 0.0000% ✅
[减法] -66.19302055616676--10.84260549531271 Decimal: -55.35041506  Math: -55.35041506085405 误差: 0.0000% ✅
============================
[乘法] 57.12727459817475*-78.27688150062855 Decimal: -4471.74490349  Math: -4471.7449041751925 误差: 0.0000% ✅
[乘法] -35.08313877725864*6.245465497854667 Decimal: -219.11053246  Math: -219.110532789816 误差: 0.0000% ✅
[乘法] -41.185674105742095*89.97462388224528 Decimal: -3705.66553639  Math: -3705.665537000874 误差: 0.0000% ✅
[乘法] -61.86011948618053*55.65462156947456 Decimal: -3442.80153931  Math: -3442.8015402458564 误差: 0.0000% ✅
============================
[除法] 8.530509194850026/-55.18778669225979 Decimal: -0.1545724  Math: -0.15457241005909825 误差: 0.0000% ✅
[除法] 96.90128115456011/71.6150074259088 Decimal: 1.35308624  Math: 1.353086240405852 误差: 0.0000% ✅
[除法] -90.33972807256552/-98.01540770656598 Decimal: 0.92168905  Math: 0.9216890505931521 误差: 0.0000% ✅
[除法] 85.88092059154536/-0.546871109871816 Decimal: -157.04051757  Math: -157.04051474153653 误差: 0.0000% ✅
============================
[余数] -0.7506626032573536%13.905491078284456 Decimal: -0.7506626  Math: -0.7506626032573536 误差: 0.0000% ✅
[余数] 51.43185100307602%54.9313685240071 Decimal: 51.431851  Math: 51.43185100307602 误差: 0.0000% ✅
[余数] 71.06237089589794%-92.35982694741436 Decimal: 71.06237089  Math: 71.06237089589794 误差: 0.0000% ✅
[余数] 57.83787008623196%83.69787120524222 Decimal: 57.83787008  Math: 57.83787008623196 误差: 0.0000% ✅
============================
[sqrt] Math.sqrt(97.47171218865664) Decimal: 9.87277631  Math: 9.872776316146165 误差: 0.0000% ✅
[sqrt] Math.sqrt(32.23827183877861) Decimal: 5.67787563  Math: 5.677875644885031 误差: 0.0000% ✅
[sqrt] Math.sqrt(19.46687227268282) Decimal: 4.41212786  Math: 4.412127862231876 误差: 0.0000% ✅
[sqrt] Math.sqrt(25.04636213637945) Decimal: 5.00463406  Math: 5.004634066181008 误差: 0.0000% ✅
============================
[floor] Math.floor(32.881757231786224) Decimal: 32  Math: 32 误差: 0.0000% ✅
[floor] Math.floor(-34.658581607906086) Decimal: -35  Math: -35 误差: 0.0000% ✅
[floor] Math.floor(-30.972489534472516) Decimal: -31  Math: -31 误差: 0.0000% ✅
[floor] Math.floor(-65.36304581234225) Decimal: -66  Math: -66 误差: 0.0000% ✅
============================
[ceil] Math.ceil(97.40341982183631) Decimal: 98  Math: 98 误差: 0.0000% ✅
[ceil] Math.ceil(-48.34612431972087) Decimal: -48  Math: -48 误差: 0.0000% ✅
[ceil] Math.ceil(12.164740370163102) Decimal: 13  Math: 13 误差: 0.0000% ✅
[ceil] Math.ceil(49.57383749857803) Decimal: 50  Math: 50 误差: 0.0000% ✅
============================
[round] Math.round(41.16095344433265) Decimal: 41  Math: 41 误差: 0.0000% ✅
[round] Math.round(-85.36939384579215) Decimal: -85  Math: -85 误差: 0.0000% ✅
[round] Math.round(-30.491662125277543) Decimal: -30  Math: -30 误差: 0.0000% ✅
[round] Math.round(-99.12890685991384) Decimal: -99  Math: -99 误差: 0.0000% ✅
============================
[sin] Math.sin(719.4185793385932) Decimal: -0.01014777  Math: -0.01014753072003781 误差: 0.0024% ✅
[sin] Math.sin(-49.05888404275288) Decimal: -0.75538352  Math: -0.7553834259417381 误差: 0.0000% ✅
[sin] Math.sin(411.0953325724863) Decimal: 0.77819176  Math: 0.7781919900309454 误差: 0.0000% ✅
[sin] Math.sin(205.56577240190813) Decimal: -0.43147707  Math: -0.4315469312416674 误差: 0.0162% ✅
[sin] Math.sin(572.5204717362215) Decimal: -0.53749041  Math: -0.5376009171970287 误差: 0.0206% ✅
============================
[cos] Math.cos(90.32917026774365) Decimal: -0.00574483  Math: -0.005745073367806461 误差: 0.0042% ✅
[cos] Math.cos(178.41882055619385) Decimal: -0.99961921  Math: -0.9996192328301272 误差: 0.0000% ✅
[cos] Math.cos(775.3576604916477) Decimal: 0.56845198  Math: 0.5684518579889999 误差: 0.0000% ✅
[cos] Math.cos(667.3118178833515) Decimal: 0.60600169  Math: 0.60615246248964 误差: 0.0249% ✅
[cos] Math.cos(-885.4224151038563) Decimal: -0.96780761  Math: -0.9678077103968008 误差: 0.0000% ✅
============================
[tan] Math.tan(90.32917026774365) Decimal: -174.06668082  Math: -174.05930836898943 误差: 0.0042% ✅
[tan] Math.tan(-146.7624390841462) Decimal: 0.65531865  Math: 0.6553183484403385 误差: 0.0000% ✅
[tan] Math.tan(-211.25888134041656) Decimal: -0.60702643  Math: -0.6070270025446182 误差: 0.0001% ✅
[tan] Math.tan(14.78708549650105) Decimal: 0.26397  Math: 0.2639702757415503 误差: 0.0001% ✅
[tan] Math.tan(-143.39529657183016) Decimal: 0.74279325  Math: 0.74279291652313 误差: 0.0000% ✅
============================
[asin] Math.asin(-0.7194974872753956) Decimal: -46.01158085  Math: -46.013007626436696 误差: 0.0031% ✅
[asin] Math.asin(0.9321436221467367) Decimal: 68.77138617  Math: 68.7714707465148 误差: 0.0001% ✅
[asin] Math.asin(0.880099806994803) Decimal: 61.65440524  Math: 61.654405423899455 误差: 0.0000% ✅
[asin] Math.asin(-0.959753033873469) Decimal: -73.68804759  Math: -73.6893353382602 误差: 0.0017% ✅
============================
[acos] Math.acos(0.35484126161716745) Decimal: 69.2161693  Math: 69.21628401027306 误差: 0.0002% ✅
[acos] Math.acos(0.7619567205177851) Decimal: 40.36322711  Math: 40.3629969696863 误差: 0.0006% ✅
[acos] Math.acos(0.7888895646567433) Decimal: 37.91818473  Math: 37.91813965078408 误差: 0.0001% ✅
[acos] Math.acos(0.03697812722442828) Decimal: 87.88082639  Math: 87.88082623520097 误差: 0.0000% ✅
============================
[atan] Math.atan(1.9536276627969142) Decimal: 62.89353476  Math: 62.893534131886824 误差: 0.0000% ✅
[atan] Math.atan(0.8006862300346529) Decimal: 38.68385287  Math: 38.683774670640354 误差: 0.0002% ✅
[atan] Math.atan(-1.3456837854931045) Decimal: -53.3833309  Math: -53.38334577590901 误差: 0.0000% ✅
[atan] Math.atan(2.221295710384873) Decimal: 65.76330618  Math: 65.76331207474915 误差: 0.0000% ✅
============================
[atan2] Math.atan2(-71.60784873756313,-455.3385171028541) Decimal: -171.06260497  Math: -171.06269867841357 误差: 0.0001% ✅
[atan2] Math.atan2(-869.258882777845,216.93221540244417) Decimal: -75.98604609  Math: -75.98748812586132 误差: 0.0019% ✅
[atan2] Math.atan2(-359.013719650683,-848.4509958734616) Decimal: -157.06480256  Math: -157.06482480600474 误差: 0.0000% ✅
[atan2] Math.atan2(267.2997876576062,-236.7925337792451) Decimal: 131.5371722  Math: 131.5367304466368 误差: 0.0003% ✅

性能测试结果，与decimal.js对比，基于相同的输入

============开方===========
Decimal: 7 ms
decimal.js: 11 ms
============加法===========
Decimal: 2 ms
decimal.js: 6 ms
============减法===========
Decimal: 3 ms
decimal.js: 6 ms
============乘法===========
Decimal: 3 ms
decimal.js: 5 ms
============除法===========
Decimal: 4 ms
decimal.js: 8 ms
============sin===========
Decimal: 29 ms
decimal.js: 515 ms
============cos===========
Decimal: 20 ms
decimal.js: 476 ms
============tan===========
Decimal: 42 ms
decimal.js: 887 ms
#64

不明觉厉。。从来没用过cocos里的开发框架，，感觉可以学习一波

#65

不知道对微信小游戏做了哪些优化？ 尤其是首屏和包体

#66

https://gitee.com/cocos2d-zp/cococs-creator-frame-3d/wikis/最佳实践/微信小游戏平台分包策略
前两天写的，你看看这个能看明白吗

1赞
#67

更新

A星巡路模块

1、增加一个async搜寻路径方法
2、以极低的代价实现计算一致性(可用于帧同步)

在项目根目录下执行

npm run package

#68

更新

易用性调整

cc-random、cc-decimal-random、cc-sat、cc-decimal-sat、cc-quadtree部分方法及参数列表更新

BUG修复

cc-sat、cc-decimal-sat中Rect在投影计算错误

新特性

cc-quadtree(四叉树碰撞检测)，在进行查询时是很高效和方便的，但是处理碰撞体之间相互碰撞的逻辑时，就显得不那么好用也不那么高效，因为每个碰撞体最多可能要进行两次查询操作(a查询b，b查询a)。

新增一个trigger方法，在完全不影响原有性能的前提下，处理相互碰撞检测的逻辑时，相比于常规用法，减小 50% 所有计算耗时(测试数据基于2000节点相互碰撞检测)。

在项目根目录下执行

npm run package

#69

新增SAP碰撞检测模块

  • 比四叉树中的 trigger性能更好一些，大概提升 20% 左右
  • 同时支持查询碰撞的逻辑

按需引入，在框架项目根目录下执行：

npm run package
#70

Mark!!!

#71

弹窗动画的话，我是要在哪里添加比较好

#72

onShow

#73

mark！！！ :kissing_heart:

#74

示例工程没有源码吗？

#75

mark.

#76

github 只有Readme了？

#77

github一直只有readme，没传过源码

#78

框架设计与我的设计理念不谋而合，有点欣喜。我也是喜欢 npm 封装，但我用的是编译 js 发布到 node_modules 的离线安装模式（缺点就是没法发布资源去用）。从你这学到了不编译 js 的方式，get！！

#79

哈哈，感谢认同。

我最初也想要编译js的方式，不过我们当时内部考虑了一下，确实会有需要发布资源的情况。
比如一些公共的授权弹窗、公共的图片音频资源包、公共的控件。

最初还考虑过不用npm自己实现一套，但是考虑到整个前端的工具规范(npm是前端公认的包管理就你搞特殊 :sweat_smile:)，最终确定了现在这个方案。

#80

拥抱 npm :grinning:

#81

mark一下