creator-creator记录

creator-creator记录


前篇


去掉闪屏

  • a

配置代码编辑环境


Asset Bundle

cocos 的 assetbundle 其实就是 文件夹 + 配置, 并不是 unity 中一个单独的 ab 文件, 所以 cocos 不用考虑维护 assetbundle


生命周期


编辑器扩展


protobuf 使用

  1. 加入所有 proto 文件放在 build_proto/src_proto/csprotos 目录下

  2. package.json 文件中加入 pb 配置和生成命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
    "dependencies": {
    "protobufjs": "^7.2.2"
    },
    "devDependencies": {
    "protobufjs-cli": "^1.1.1"
    },
    "scripts": {
    "pbjs": "npx pbjs --dependency protobufjs/minimal.js -t static-module -w commonjs -o assets/code/gen/proto.js build_proto/src_proto/csprotos/*.proto",
    "pbts": "npx pbts -o assets/code/gen/proto.d.ts assets/code/gen/proto.js"
    }
    }
  3. cd 到项目目录下执行命令

    1
    2
    3
    $ npm i # 安装引用包
    $ npm run pbjs # 生成 js
    $ npm run pbts # 生成 ts

    就会在 assets/code/gen 目录下生成 proto.jsproto.ts 文件

  4. 代码中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
        import { csprotos } from '../../gen/proto.js'; # 这里有个坑, 是要用引用js 文件, 一定要带上后缀, 否则报错  Module 'xxx' not found

    let pldReq = new csprotos.PayloadData()
    pldReq.CSHead = new csprotos.CSHead()

    let loginReq = new csprotos.LoginReq()
    loginReq.AppsflyerId = "hello"
    loginReq.PlatID = 123

    pldReq.CSBody = csprotos.LoginReq.encode(loginReq).finish()

    let pbReqBuff = csprotos.PayloadData.encode(pldReq).finish()



    ---

    ### 二进制文件加载

    1. 文件必须以 *.bin* 结尾

    2. 加载代码

    ```json
    async TestReadCfgBin() {
    let path = "cfg_skin"
    let bundleName = "dataconfig"

    let finishCb
    finishCb = (err: Error, ba: BufferAsset) => {
    console.log(`--- BufferAsset 111,`, err, ba)

    const data = ba.buffer()
    console.log("--- data len:", data.byteLength)

    let info = CFGskin.skinArray.decode(new Uint8Array(data))
    info.items.forEach((val, idx, arr) => {
    LogUtil.D(`--- idx: ${idx}, ID: ${val.ID}, IconPath: ${val.IconPath},`)
    })
    }
    ResMgr.Ins.load<BufferAsset>(bundleName, path, finishCb)
    }

    参考: https://forum.cocos.org/t/topic/103326


图片类型 及 资源加载

  • 指定了 type, 这加载图片的时候, 有两种方式可以加载到

    image-20230323152418441

    1. 方式一: 可以直接加多个类型, 用于直接加载对应图片

      1
      2
      3
      4
      5
      let saPath = "ui/Atlas/login/bx_loading_button_yellow/spriteFrame" // 加多个 类型后缀
      ResMgr.Ins.load(saPath, (err, sf: SpriteFrame) => {
      let sp = this._view._BtnFbLogin.getComponent(Sprite)
      sp.spriteFrame = sf
      })
    2. 方式二: 不加类型后缀, 将 ImageAsset 转成对应类型

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      let saPath = "ui/Atlas/login/bx_loading_button_yellow"
      ResMgr.Ins.load(saPath, (err, imgAst: ImageAsset) => {

      // 将 ImageAsset 转换成 SpriteFrame
      const spriteFrame = new SpriteFrame();
      const tex = new Texture2D();
      tex.image = imgAst;
      spriteFrame.texture = tex;

      // 将 SpriteFrame 赋值到组件上
      let sp = this._view._BtnFbLogin.getComponent(Sprite)
      sp.spriteFrame = spriteFrame;
      })

destroy 和 removeFromParent 的区别

调用一个节点的 removeFromParent 后,它并不会从内存中释放,因为引擎内部仍会持有它的数据。因此如果一个节点不再使用,请直接调用它的 destroy 而不是 removeFromParent,否则会导致内存泄漏。

总之,如果一个节点不再使用,destroy 就对了,不需要 removeFromParent 也不需要设置 parentnull 哈。


2d 粒子序列帧实现


资源管理


热更


平台调用


打包发布


Android


Windows


可写路径

  • native.fileUtils.getWritablePath()
    • Android : /data/user/0/com.test.hot001/files

动态合图


ase 加密


js 代码压缩

  • release 模式会自动压缩 js 代码, 也就是非 调试模式, 不勾选构建面板的调试选项

    image-20230417103430419


引入外部模块


PWA

渐进式 Web 应用 ( )


踩坑

临时解决方案, 禁止掉浏览器的跨域检测

  • 解决Chrome浏览器的跨域问题 - https://juejin.cn/post/7019171779478290463

    1. 找到快捷方式, 右击打开属性,找到 目标 字段,并在目标字段后面加上参数:

      image-20230303163122303

      1
      --disable-web-security --user-data-dir=D:\ChromeData\MyChromeDevUserData

      其中 D:\ChromeData\MyChromeDevUserData 为跨域浏览器数据存储的地方,可以根据需要修改。

      2.png

    2. 双击打开浏览器, 出现不安全提示就表示禁用了 跨域检测

      image-20230303163204291


shader 中修改了参数, animation 中不更新

  • 在 shader 的 properties 中增加了暴露的参数, 但是在 animation 中没有显示出来

  • 原因是没有退出动画编辑器, 或者没有切到别的节点在切回需要 k 的节点, 动画编辑器没有释放掉就的数据

  • 解决办法: 退出动画编辑器, 选中其他节点, 再选中回要 k 的节点

    image-20230331180157727


animation k 材质参数不生效

  • 使用 3.6.3 的引擎出现了这个问题
  • 解决办法 升级到 3.7.2+ 版本就没这个问题了

引擎变更导致场景打不开

  • 报错: [Scene] Cannot read property 'localSetLayout' of undefined
  • 解决办法: 关闭工程, 删除掉打开工程默认生成的几个文件夹 library, local, profiles, temp, 然后重新打开工程即可

https 网页内请求 http 内容

  • 报错: This request has been blocked; the content must be served over HTTPS.
  • 原样是在 https 网页内请求了 http 内容, 有两种解决办法
    1. 请求的 http 内容改为 https
    2. 在 html 页面中加入: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">, 参考: https://blog.51cto.com/YangPC/5482970

编辑器 run 到浏览器进不去

可能编辑器跑浏览的时候有缓存, 解决办法是先切到 跑编辑器内部, 然后在切到跑浏览器

image-20240227141928296


libcocos.so 变大

  • 原因是有 3.7 升级到 3.8, build.gradle 里 so 构建命令, 使用了 3.7.2 的模板

    1
    arguments "-DRES_DIR=${RES_PATH}", "-DCOCOS_X_PATH=${COCOS_ENGINE_PATH}", "-DANDROID_STL=c++_static", "-DANDROID_TOOLCHAIN=clang", "-DANDROID_ARM_NEON=TRUE", "-DANDROID_LD=gold"
  • 解决办法, 使用 3.8 创建个新项目构建一下, 对齐到 3.8 默认生成的 build.gradle 即可

    1
    arguments "-DRES_DIR=${RES_PATH}", "-DANDROID_STL=c++_static", "-DANDROID_TOOLCHAIN=clang", "-DANDROID_ARM_NEON=TRUE"