Cocos Creator 简版拓展Draw Call小代码组件类插件 (已发布,优惠中_)

Cocos Creator 简版拓展Draw Call小代码组件类插件 (已发布,优惠中_)

Cocos Creator 简版拓展Draw Call小代码组件类插件
Cocos Creator 简版拓展Draw Call小代码组件类插件

开发环境

  • 引擎版本:Cocos Creator 2.4.0
  • 编程语言:TypeScript

资源介绍

  • 在Cocos Crator 的UI编辑器内实时显示当前Draw Call的数值
  • 固定随机彩色算法展示Draw Call
  • 小面版支持滚动条GIF图片播放

功能特点说明

  • 编辑器\浏览器内可实时显示Draw Call
  • 仅需要在场景内把拓展Draw Call组件挂载在一个空节点上即可
  • 彩色支持自定义数值颜色
  • 彩色字体加入了固定随机算法显示
  • 可自定义显示或者隐藏系统debug面板(左下角的info)(用setDisplayStats)
  • 支持显示或者隐藏本Draw Call的拓展Label组件

痛点解决

  • 1.最近开发的时候感觉要是在Editor内也有Draw Call实时显示就好了,所以开发了这个小插件
  • 2.可以在cocos编辑器内直接添加小DrawCall代码组件
  • 3.可在编辑器内实时查看当前Draw Call
  • 4.去除了多余的功能,仅保留显示Draw Call,开发上视觉更直观
  • 5.解决Vscode代码爆红问题用下方代码块:
// @ts-ignore

更新声明

  • 后续 免费升级迭代
  • 可以直接在属性面板添加draw call代码组件
  • 编程代码有详细注释(可直接修改)
  • 颜色渐变的组件使用的是eazax-ccc大大的GradientColor组件所改造的
  • 在cocos crator Editor内的draw call比浏览器内的要大一些,可能内部Editor的东西加载比较多

目前已测试平台

H5 微信小游戏 Android原生 iOS原生 抖音小游戏 OPPO小游戏 vivo小游戏
:heavy_check_mark:

本资源暂时支持测试通过平台,其他平台暂未支持,后续内容会持续测试支持,敬请期待。

释放代码,添加组件

后续计划 (免费更新)

  • 优化使用体验

补充说明

  • 如果有发现bug,请联系我,我会尽快修复
  • 感谢各位的支持

购买须知

  • 请各位朋友看后仔细思考,是否符合您的项目或者研究需求
  • 目前内容相对比较少,后续才会迭代
  • 因为本产品为付费虚拟商品,一经购买成功概不退款,请在购买谨慎确认购买内容。

:grinning:一个简单的小插件,需要的朋友可以支持一下么 :blush:,
我知道很多大大会,不过这个后续会更新的,各位大大,在下献丑了 :laughing:

3.14毛,想开个张 :sweat_smile:感谢大家的支持,不容易呀,终于开张了

1赞

支持,支持,买了,希望有更多更好的作品

1赞

:grinning:感谢您的支持,谢谢 :blush:

支持 支持

1赞

感谢您的支持,感谢啦

Cocos Creator 简版拓展Draw Call小代码组件类插件 (新版内容已过审发布_,双十二优惠中)

Cocos Creator 简版拓展Draw Call小代码组件类插件,点击访问

开发环境

  • 引擎版本:Cocos Creator 2.4.0

  • 编程语言:TypeScript

资源介绍

  • 在Cocos Crator 的UI编辑器内实时显示当前Draw Call的数值

  • 固定随机彩色算法展示Draw Call

  • 小面版支持滚动条GIF图片播放

  • 同步更新cocos系统面板信息(部分)到自定义节点内

  • 自定义draw call节点内加入显示纹理缓存统计信息

功能特点说明

  • 编辑器\浏览器内可实时显示Draw Call

  • 仅需要在场景内把拓展Draw Call组件挂载在一个空节点上即可

  • 彩色支持自定义数值颜色

  • 彩色字体加入了固定随机算法显示

  • 可自定义显示或者隐藏系统debug面板(左下角的info)(用setDisplayStats)

  • 支持显示或者隐藏本Draw Call的拓展Label组件

  • 支持导入新节点功能,导入代码后,可以直接导入新customDebugStatsDcall节点到场景Canvas节点内

  • 可以在编辑器内自定义cocos creator系统的信息的颜色,分左右

  • 可以拖拽、缩放自定义的信息draw call节点

  • 节点过大过小可以自动贴边,节点内信息实时同步cocos debug status的FPS、ms数值

  • 附加一个计算纹理总数+纹理缓存的功能

痛点解决

  • 1.最近开发的时候感觉要是在Editor内也有Draw Call实时显示就好了,所以开发了这个小插件

  • 2.可以在cocos编辑器内直接添加小DrawCall代码组件

  • 3.可在编辑器内实时查看当前Draw Call

  • 4.去除了多余的功能,仅保留显示Draw Call,开发上视觉更直观

  • 5.解决Vscode代码爆红问题用下方代码块:

  • 6.同步cocos debug info的部分内容到自定义的节点内

  • 7.自定义draw call节点内加入显示纹理缓存统计信息


// @ts-ignore

更新声明

  • 后续 免费升级迭代

  • 可以直接在属性面板添加draw call代码组件

  • 编程代码有详细注释(可直接修改)

  • 颜色渐变的组件使用的是eazax-ccc大大的GradientColor组件所改造的

  • 在cocos crator Editor内的draw call比浏览器内的要大一些,可能内部Editor的东西加载比较多

  • 同步cocos debug info的部分内容到自定义的节点内

  • 自定义draw call节点内加入显示纹理缓存统计信息

目前已测试平台

| H5 | 微信小游戏 | Android原生 | iOS原生 | 抖音小游戏 | OPPO小游戏 | vivo小游戏 |

| ---- | ---------| ----------- | -------|-------|-------|-------|

| :heavy_check_mark: | ✘ | ✘ | ✘ |✘ |✘ |✘ |

本资源暂时支持测试通过平台,其他平台暂未支持,后续内容会持续测试支持,敬请期待。

释放代码,添加组件,添加节点

后续计划 (免费更新)

  • 优化使用体验

  • 支持更多平台,升级到3.x版本

补充说明

  • 后续功能完善后,价格也会随之提高,早购早划算呦,谢谢支持

  • 如果有发现bug,请联系我,我会尽快修复

  • 感谢各位的支持

购买须知

  • 请各位朋友看后仔细思考,是否符合您的项目或者研究需求

  • 目前内容相对比较少,后续才会迭代

  • 因为本产品为付费虚拟商品,一经购买成功概不退款,请在购买谨慎确认购买内容。

1赞

Cocos Creator 简版拓展Draw Call小代码组件类插件

第三版修复优化内容如下:

cc-editor-drawcall-v0.0.3版本**【已通过审核_发布】**

  • 1.修复场景内导入节点会出现的错误: Widget target must be one of the parent nodes of it
  • 关键代码::
    `
    // 修复错误:: Widget target must be one of the parent nodes of it
    // var getCanvasTheNode=(CC_EDITOR?cc.director.getScene().children[1]:cc.director.getScene().children[0]);
    var getCanvasTheNode=null;
    let getScenesChild=[];
    for(let iChild=0;iChild<cc.director.getScene().children.length;iChild++){
    // @ts-ignore
    getScenesChild.push(cc.director.getScene().children[iChild]._objFlags);
    };
    // cc.director.getScene().children[iChild]._objFlags=canvas=0||Editor Scene Foreground=Editor Scene Background=1096
    if(getScenesChild.indexOf(0)>-1){
    getCanvasTheNode=cc.director.getScene().children[getScenesChild.indexOf(0)];
    };

`

MD 的常用语法格式,可以用于论坛写文章或者Store插件源码,排版【记录】

注意:vscode 中,可以使用 ctrl + shift + v 进行预览;

一、标题

用 # 来进行标题层级标识(HTML知识,六个级别)

  #  => h1;
  ## => h2;
  ### => h3;
  #### => h4;
  ##### => h5;
  ###### => h6;

h1 级别会默认带一个 < hr/>如下的下划线


二、分隔线

至少三个 * 或 - 或 _ ,有空格也可以,不必连续。

***
---
___



三、换行

两个空格 + 一个回车。

四、代码

* 单行使用 `` 反引号括起来,代码写在中间

cocos creator

* 多行首尾添加 ```

```

cocos creator
cocos creator
cocos creator
cocos creator

```

 cocos creator
         cocos creator
         cocos creator
 cocos creator

五、引用

符号是 > ,引用里可以套引用,理论上无限嵌套。如:

`> 一级`
`>> 二级`
`>>> 三级`
`>>>> 四级`
`...`

例如::

> https://forum.cocos.org/t/topic/124421

Cocos Creator 简版拓展Draw Call小代码组件类插件 (已发布,优惠中_)

六、标记小圆点

  * cocos crator  
  • cocos creator

七、链接

格式:
[页面说明文字](链接地址)
[简单版Draw Call 小插件](https://forum.cocos.org/t/topic/124421)
简单版Draw Call 小插件

八、列表

有序列表(’ . ’ 后跟一个空格)

1. cocos
2. cocos
3. cocos

  1. cocos
  2. cocos
  3. cocos

无序列表(注意空格)

* cocos

  • cocos
-  cocos
  • cocos

    也支持嵌套,使用时在嵌套列表前按 tab 或 空格 来缩进,去控制列表的层数。

九、图片

和链接类似,格式::

![简单Draw Call小插件展示](https://download.cocos.com/Cocos/CocosStore/markdown/2021/12/7de96a6111408da7b95f9fd3d2d61bd428314.gif) 

十、表格

| 开发内容        | 版号   |  代码量   |
| --------:            | --------------: | :--:  |
| coos1             | 2.4  |   500    |
| coos2        |   2.5     |   102     |
| coos3         |    \$2.6  |   3.14      |

: 是对齐方向

分割线可以随意对齐

分割线----后面的冒号表示对齐方式,在左边表示左对齐,右边为右对齐,两边都写表示居中

开发内容 版号 代码量
coos1 2.4 500
coos2 2.5 102
coos3 $2.6 3.14

补发一个链接, 另外最近已经在适配 3.x 版本的插件了, 明后天准备上架

【记录】MD 的常用语法格式,可以用于论坛写文章或者Store插件源码,排版【记录】

1. 升级到 3.x 版本的部分演示效果

演示版本为 Cocos Creator 3.6.0


升级到 3.x 版本

已测试 3.6.0

0.1 扫描并启用插件, 导入管理节点

0.2.1 查看自定义显示调试信息的节点, 并修改字体和颜色

0.2.2 查看自定义显示调试信息的节点, 并修改字体和颜色-2

0.3.1 在编辑器内预览调试信息

0.3.2 调整边距, 在编辑器内预览调试信息

目前 3.x 版本已过审, 优惠中

https://store.cocos.com/app/detail/3356

image

新改内容

0.4 设置自定义调试面板显示隐藏时, 让左下角的信息也同时显示和隐藏

最后补充一个, 关于调试时魔改引擎的代码, 如下

引擎安装目录\Creator\3.6.0\resources\resources\3d\engine\cocos\profiler
profiler.ts

代码内自定义 \color{red}{profiler.ts}

    profiler.generateCanvas = function () {
        // @ts-ignore
        if (profiler._canvasDone) {
            return;
        };

        var n_constants = {
            fontSize: 25 || 30 || 23,
            quadHeight: 0.6 || 0.4,
            segmentsPerLine: 8,
            textureWidth: 256 || 512 || 256,
            textureHeight: 256 || 512 || 256,
        };
        var n_average = 500;
        var n_profileInfo = {
            fps: { desc: `Framerate (FPS)`, below: 30, average: n_average, isInteger: true },
            draws: { desc: 'Draw call', isInteger: true },
            frame: { desc: 'Frame time (ms)', min: 0, max: 50, average: n_average },
            instances: { desc: 'Instance Count', isInteger: true },
            tricount: { desc: 'Triangle', isInteger: true },
            logic: { desc: 'Game Logic (ms)', min: 0, max: 50, average: n_average, color: '#080' },
            physics: { desc: 'Physics (ms)', min: 0, max: 50, average: n_average },
            render: { desc: 'Renderer (ms)', min: 0, max: 50, average: n_average, color: '#f90' },
            textureMemory: { desc: 'GFX Texture Mem(M)' },
            bufferMemory: { desc: 'GFX Buffer Mem(M)' },
        };
        // 重设下行高
        // @ts-ignore
        profiler._lineHeight = n_constants.textureHeight / (Object.keys(n_profileInfo).length + 1);

        var { textureWidth, textureHeight } = n_constants;

        // @ts-ignore
        if (!profiler._ctx || !profiler._canvas) {
            return;
        };

        // @ts-ignore
        profiler._canvas.width = textureWidth;
        // @ts-ignore
        profiler._canvas.height = textureHeight;
        // @ts-ignore
        profiler._canvas.style.width = `${profiler._canvas.width}`;
        // @ts-ignore
        profiler._canvas.style.height = `${profiler._canvas.height}`;

        // @ts-ignore
        profiler._ctx.font = `${n_constants.fontSize}px Arial`;
        // @ts-ignore
        profiler._ctx.textBaseline = 'top';
        // @ts-ignore
        profiler._ctx.fillStyle = hex_end_set || hex_rand_str || '#0c0' || '#f40';

        // @ts-ignore
        profiler._texture = profiler._device.createTexture(new gfx.TextureInfo(
            gfx.TextureType.TEX2D,
            gfx.TextureUsageBit.SAMPLED | gfx.TextureUsageBit.TRANSFER_DST,
            gfx.Format.RGBA8,
            textureWidth,
            textureHeight,
        ));

        // @ts-ignore
        profiler._region.texExtent.width = textureWidth;
        // @ts-ignore
        profiler._region.texExtent.height = textureHeight;
    };

    // debug.setDisplayStats(true);
    setDisplayStats(true);
    profiler.showStats(); 

厉害厉害 虽然我还不知这玩意目前有啥用

1赞

:no_mouth:
或许调试的时候查看方便点 ?
这个版本其实也是补完一下, 上半年有人说需要个 3.x 版本的, 之前只做了 2.x

购买一波,支持你一波

1赞

感谢大佬的支持 :smile: :smile: