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

1793156214 · 2021年11月8日 08:19

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小游戏
	✘	✘	✘	✘	✘	✘

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

释放代码,添加组件

操作流程
1.先导入Draw Call的拓展代码组件：
先导入Draw Call的拓展代码组件_Video_20211104_101205 00_00_0000_00_30.gif800×600
2.直接在编辑器内添加拓展的Draw Call代码组件
直接在编辑器内添加拓展的Draw Call代码组件_Video_20211104_101612 00_00_0000_00_30.gif800×600
3.最后呈现的效果展示,在编辑器内展示的刷新速度稍微慢一点,可修改Ts代码组件进行调整,浏览器上展示的效果更加丝滑::
最后呈现的效果展示_Video_20211104_102119 00_00_0000_00_30.gif800×600
3.2小面版支持滚动条和GIF图片播放
小面版支持滚动条和gif图片_Video_20211104_142007 00_00_0000_00_30.gif800×600

后续计划 (免费更新)

优化使用体验

补充说明

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

购买须知

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

1793156214 · 2021年11月8日 08:18

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

1793156214 · 2021年11月8日 08:23

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

2846919915 · 2021年11月8日 08:56

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

1793156214 · 2021年11月8日 09:20

感谢您的支持,谢谢

137392550 · 2021年11月10日 10:14

支持支持

1793156214 · 2021年11月10日 13:13

感谢您的支持，感谢啦

1793156214 · 2021年12月10日 09:32

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节点内加入显示纹理缓存统计信息

目前已测试平台

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

| | ✘ | ✘ | ✘ |✘ |✘ |✘ |

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

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

操作流程
1.先导入Draw Call的拓展代码组件：
先导入Draw Call的拓展代码组件_Video_20211104_101205 00_00_0000_00_30.gif800×600
2.直接在编辑器内添加拓展的Draw Call代码组件
直接在编辑器内添加拓展的Draw Call代码组件_Video_20211104_101612 00_00_0000_00_30.gif800×600
3.最后呈现的效果展示,在编辑器内展示的刷新速度稍微慢一点,可修改Ts代码组件进行调整,浏览器上展示的效果更加丝滑::
最后呈现的效果展示_Video_20211104_102119 00_00_0000_00_30.gif800×600
3.2小面版支持滚动条和GIF图片播放
小面版支持滚动条和gif图片_Video_20211104_142007 00_00_0000_00_30.gif800×600
4.支持导入新节点功能,导入代码后,可以直接导入新customDebugStatsDcall节点到场景Canvas节点内
导入代码,导入新节点.gif808×639
5.可以在编辑器内自定义cocos creator系统的信息的颜色,分左右
自定义系统信息面板颜色.gif816×642
6.可以拖拽、缩放自定义的信息draw call节点,节点过大过小可以自动贴边,节点内信息实时同步cocos debug status的FPS、ms数值,附加一个计算纹理总数+纹理缓存的功能::
自定义系统信息面板支持拖动缩放过大过小自动靠边实时更新ms.gif805×613
7.补充creator Editor插件开发常用API命令列表,备忘录,摘录于::
《creator插件开发常用API命令列表》备忘录
【muzzik教程】：插件开发之道
image.png885×777

后续计划 (免费更新)

优化使用体验
支持更多平台,升级到3.x版本

补充说明

后续功能完善后,价格也会随之提高,早购早划算呦,谢谢支持
如果有发现bug,请联系我,我会尽快修复
感谢各位的支持

购买须知

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

1793156214 · 2021年12月10日 09:26

1793156214 · 2021年12月11日 16:17

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)];
};

`

$}{LKZWGDVTS39H_RF`J761A$
}{LKZWGDVTS39H_RF`J761A1569×611 83.7 KB
2.优化整理插件内容,删除多余的gif图片,目前包体在36.0Kb左右,上一个版本在2.7M左右(其实就是两个小gif图,之前测试打开面板的GIF图片显示+滚动的时候忘记删了), ,这个面板看起来还行
image1356×873 188 KB
3.同步更新导入customDebugStatsDcall节点之前检查并导入代码的功能
image1038×337 39.6 KB
image1083×436 39.7 KB
$O_D_F%8XW$8_T{T9CYL990U$
O_D_F%8XW$8_T{T9CYL990U1800×704 122 KB
附：目前正在构建准备升级到 cocos creator 3.x 系列的版本

1793156214 · 2021年12月15日 07:41

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

cocos
cocos
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

1793156214 · 2022年09月23日 12:30

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

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

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

【记录】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 …

1793156214 · 2022年09月23日 14:25

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

演示版本为 Cocos Creator 3.6.0

1793156214 · 2022年09月27日 15:58

升级到 3.x 版本

已测试 3.6.0

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

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

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

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

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

1793156214 · 2022年09月28日 04:32

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

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

新改内容

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

1793156214 · 2022年09月30日 09:34

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

引擎安装目录\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();

edisonwsk · 2022年09月30日 07:11

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

1793156214 · 2022年09月30日 07:50

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

lei_radius · 2022年09月30日 08:24

购买一波，支持你一波

1793156214 · 2022年09月30日 09:29

感谢大佬的支持

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

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

开发环境

资源介绍

功能特点说明

痛点解决

更新声明

目前已测试平台

释放代码,添加组件

后续计划 (免费更新)

补充说明

购买须知

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

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

开发环境

资源介绍

功能特点说明

痛点解决

更新声明

目前已测试平台

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

后续计划 (免费更新)

补充说明

购买须知

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

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

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

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

注意：vscode 中，可以使用 ctrl + shift + v 进行预览；

一、标题

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

二、分隔线

三、换行

四、代码

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

* 多行首尾添加 ```

```

```

五、引用

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

例如::

六、标记小圆点

七、链接

八、列表

有序列表（’ . ’ 后跟一个空格）

无序列表（注意空格）

九、图片

和链接类似，格式::

十、表格

分割线可以随意对齐

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

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

升级到 3.x 版本

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

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

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

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

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

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

新改内容

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

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

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

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