能否在cocos 驱动浏览器刷新之后保持打开的节点状态

主干分支适用 Cocos Creator 3.4+ 版本，其他版本查看其他分支

ccc-devtools

简介

ccc-devtools 是一款用于 Cocos Creator 网页端预览的调试工具，可以实时显示场景的节点树，并对节点属性进行同步更改。

使用

下载打包好的 preview-template.zip 文件(release目录下)，解压到 Cocos Creator 项目目录下，刷新预览时的浏览器即可。节点属性修改不赘述，重点介绍几个独特的小功能：

输出节点、组件引用到控制台，配合调试比较常用

标记UI节点在场景中的位置

调试信息独立显示，再也不怕浅背景看不清 FPS 了

开发

项目依据文档中自定义预览模板一节进行开发，未接触过相关概念可以先阅读一下官方文档

自定义预览模板预览支持自定义模板方便用户自定义需要的预览效果，自定义的预览模板可以放置在项目目录的 preview-template 文件夹中。或者点击编辑器主菜单中的项目 -> 生成预览模板就可以在项目目录下创建一个最新的预览模板。编辑器中的预览也是使用模板来注入最新的项目数据，预览时将会查找该目录下的 index 文件，如果存在就是要该文件作为预览的模板。 preview-template 文件夹的结构类似：
project-folder
|--assets
|--build
|--preview-template
    // 必须的入口文件
    |--index.ejs
    // 其他文件可根据想要实现的预览效果进行添加

本项目主要修改index.ejs，注入一段 Vue 绑定的自定义html，核心修改见下图

在浏览器环境中 cc 是一个全局变量，可以通过 cc.director.getScene().children 获取场景中的节点，知道这点就可以开发了，剩下的就是节点数据如何展示出来的问题了。技术栈为 Vue3 + ElementPlus + TypeScript + Vite，熟悉前端的朋友欢迎来仓库贡献。项目结构如下：

项目开发需配合本地已有的 Cocos Creator 3.x 项目，将 ccc-devtools 克隆到本地后，打开scripts/setup.js，将 projectTemplatePath 改为你的本地测试 Creator 项目路径。

开发流程：

安装依赖 yarn
修改代码
构建项目 yarn build
安装构建产物到项目 yarn setup
刷新浏览器查看效果

插件商店版

插件版自带了一份工具代码，提供了自动安装功能。适合多个项目快速安装、卸载工具。

备注

源码地址：https://github.com/potato47/ccc-devtools
打包文件：https://github.com/potato47/ccc-devtools/raw/master/release/preview-template.zip
UI 组件库：https://element-plus.org
自定义网页预览文档：https://docs.cocos.com/creator/manual/zh/editor/preview/browser.html
插件地址：https://store.cocos.com/app/detail/3922

	cc.cache = function () {
	let rawCacheData = cc.loader._cache;
	let cacheData = [];
	let totalTextureSize = 0;
	for (let k in rawCacheData) {
	let item = rawCacheData[k];
	if (item.type !== 'js' && item.type !== 'json') {
	let itemName = '_';
	let preview = '';
	let content = (item.content && item.content.__classname__) ? item.content.__classname__ : item.type;
	let formatSize = -1;
	if (item.type === 'png' \|\| item.type === 'jpg') {
	let texture = rawCacheData[k.replace('.' + item.type, '.json')];
	if (texture && texture._owner && texture._owner._name) {
	itemName = texture._owner._name;
	preview = texture.content.url;
	}
	} else {
	if (item.content.name && item.content.name.length > 0) {
	itemName = item.content.name;
	} else if (item._owner) {
	itemName = (item._owner && item._owner.name) \|\| '_';
	}
	if (content === 'cc.Texture2D') {
	let texture = item.content;
	preview = texture.url;
	let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
	totalTextureSize += textureSize;
	// sizeStr = textureSize.toFixed(3) + 'M';
	formatSize = Math.round(textureSize * 1000) / 1000;
	} else if (content === 'cc.SpriteFrame') {
	preview = item.content._texture.url;
	}

potato47 / ccc-devtools Goto Github PK

ccc-devtools's Introduction

ccc-devtools

简介

使用

开发

插件商店版

备注

ccc-devtools's People

Contributors

Stargazers

Watchers

Forkers

ccc-devtools's Issues

问题描述

原因

举例

测试附件📎

✅ 解决方法

API 升级建议

Recommend Projects

Recommend Topics

Recommend Org

Jobs