CN111694723A - 产品在h5下运行时对节点及组件编辑的方法、存储介质 - Google Patents

Abstract

本发明提供产品在H5下运行时对节点及组件编辑的方法、存储介质，方法包括：节点编辑插件将获取当前运行环境下所有节点的内存数据至缓存，且各节点的内存数据与唯一标识符关联的代码注入到当前运行环境中执行；将通过执行获取的数据传回插件并生成对应的树形节点列表；当选中树形节点列表中一节点，则依据其唯一标识符从缓存中提取其内存数据；插件的属性检查面板依据内存数据显示一节点的各属性数值，并提供编辑功能和一节点的组件对象路径获取功能；当一属性数值改变时，插件同步修改缓存中的内存数据；在浏览器的控制台中依据所获取的组件对象路径编辑对应组件对象的属性或调用方法。能够实现产品在H5下运行时编辑当前的节点数据。

Description

产品在H5下运行时对节点及组件编辑的方法、存储介质

技术领域

本发明涉及软件产品调试领域，具体涉及产品在H5下运行时对节点及组件编辑的方法、存储介质。

背景技术

在使用Cocos Creator引擎开发项目过程中，对于产品的调试，例如调整界面元素的位置、显示特定的数据或者执行不同的函数，通常需要修改相应的代码或者UI布局文件，然后重新编译运行才能检视调整结果。

上述调试过程中重复修改编译耗时较久，且难以直观地进行反馈，更重要的是还需要获取源文件或者相应代码的修改权限。因此，有必要提供一种能同时解决上述问题，支持在产品使用过程中进行调试修改的方案。

发明内容

本发明所要解决的技术问题是：提供产品在H5下运行时对节点及组件编辑的方法、存储介质，将产品内容的调试和代码编译分离，提高调试便捷性，且支持即时反馈调试结果。

为了解决上述技术问题，本发明采用的技术方案为：

产品在H5下运行时对节点及组件编辑的方法，包括：

在浏览器提供使用节点编辑插件的标签页；

节点编辑插件将对应执行包括获取当前运行环境下所有的节点对象实例和获取各个节点对象实例的内存数据并对应各自的唯一标识符存储至缓存中的字符串格式代码注入到当前运行环境中执行；

通过跨域通信函数将所述缓存中的数据传回节点编辑插件；

节点编辑插件依据所述数据生成对应的树形节点结构，并将其渲染成对应的树形节点列表至所述标签页；

当选中所述树形节点列表中一节点，则依据所述一节点的唯一标识符从所述缓存中提取对应节点对象实例的内存数据；

节点编辑插件的属性检查面板依据所述内存数据显示所述一节点的各属性数值，并提供对应所述各属性数值的编辑功能和所述一节点的组件对象路径获取功能；

当一属性数值改变时，节点编辑插件同步修改所述缓存中的所述内存数据；

在浏览器的控制台中依据所获取的组件对象路径编辑对应组件对象的属性或调用方法。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时能实现上述产品在H5下运行时对节点及组件编辑的方法所包含的步骤。

本发明的有益效果在于：能够实现产品在H5环境下代码编译后的运行时阶段中实时编辑当前的节点属性、组件方法及成员变量。具体使用浏览器中可以进行脚本注入当前页面上下文环境的特性，通过特制的节点编辑插件方式，从H5网页中捕获当前运行中所有节点的数据，并整理成树形节点列表显示在插件使用页面中供实时编辑，且能即时获取编辑效果反馈。本申请通过将产品内容的调整和代码文件编译修改分离，避免了耗时繁琐的代码修改编译操作，同时又能直观、便捷地在产品运行阶段依据实际需求进行调试，即时查看调试结果，显著提高产品开发效率和操作舒适度。

附图说明

图1为本发明一实施例产品在H5下运行时对节点及组件编辑的方法的流程示意图；

图2为本发明实施例一产品在H5下运行时对节点及组件编辑的方法的交互示意图；

图3为本发明实施例一中树形数据结构的示意图；

图4为本发明实施例一中依据树形结构数据渲染得到的树形节点列表的显示效果实例图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：使用浏览器中可以进行脚本注入当前页面上下文环境的特性，通过特制的节点编辑插件方式，从H5网页中捕获当前运行中所有节点的数据，并整理成树形节点列表显示在插件使用页面中供实时编辑，且能即时获取编辑效果反馈。

本发明涉及的技术术语解释:

请参照图1以及图3，本发明提供产品在H5下运行时对节点及组件编辑的方法，包括：

在浏览器提供使用节点编辑插件的标签页；

节点编辑插件将对应执行包括获取当前运行环境下所有的节点对象实例和获取各个节点对象实例的内存数据并对应各自的唯一标识符存储至缓存中的字符串格式代码注入到当前运行环境中执行；

通过跨域通信函数将所述缓存中的数据传回节点编辑插件；

节点编辑插件依据所述数据生成对应的树形节点结构，并将其渲染成对应的树形节点列表至所述标签页；

当选中所述树形节点列表中一节点，则依据所述一节点的唯一标识符从所述缓存中提取对应节点对象实例的内存数据；

节点编辑插件的属性检查面板依据所述内存数据显示所述一节点的各属性数值，并提供对应所述各属性数值的编辑功能和所述一节点的组件对象路径获取功能；

当一属性数值改变时，节点编辑插件同步修改所述缓存中的所述内存数据；

在浏览器的控制台中依据所获取的组件对象路径编辑对应组件对象的属性或调用方法。

从上述描述可知，本发明的有益效果在于：

1.本方案利用浏览器中可以进行脚本注入当前页面上下文环境的特性，通过制作插件的方式，从Cocos的H5页面中捕获节点数据，并整理显示在插件使用页面中，同时提供能够实时修改属性的功能。

2.本方案能够在产品运行阶段进行修改与调试，避免了耗时的修改代码编译，可以直观的看到当前页面下的节点分布情况，方便进行的节点数量优化和性能问题排查。并且可以直接修改内容用于测试。

进一步的，还包括：

在浏览器安装节点编辑插件；

在manifest中对应所述插件开启跨域权限和标签页模块权限。

由上述描述可知，通过在浏览器中安置节点编辑插件，实现通过插件访问运行中的产品数据，并对其进行操作。通过在manifest中开启插件的跨域权限和标签页模块权限，利用跨域权限可以将捕获的节点数据跨域回传至插件；插件利用开放的标签页模块权限可以对标签页内容进行管理，从而支持树形节点列表的显示和编辑。

进一步的，通过引擎的导演类单例获取所述所有节点对象实例；

所述字符串格式代码使用浏览器提供的inspectedWindow.eval方法注入到当前运行环境中执行。

由上述描述可知，当运行使用Cocos Creator制作的引擎H5页面时，通过浏览器的window对象，使用全局变量cc.director便可直接获取到引擎导演类单例，其中包含了当前运行环境下所有的节点对象实例。通过编程式输入的方法来执行插件捕获数据的JavaScript代码，能够很好地克服浏览器下插件的内容脚本无法访问javascript变量和函数的问题。

进一步的，所述一节点的属性包括节点的大小尺寸、坐标位置、旋转方向和颜色。

由上述描述可知，支持对当前产品中节点的各项属性都进行编辑。

进一步的，所述一节点的组件对象路径获取功能，具体通过以下步骤实现：

利用JavaScript的反射机制，从组件池获取所述一节点的组件对象实例，并提供获取路径的复制黏贴功能。

由上述描述可知，利用JavaScript的反射机制，从组件池中间接获取绑定该节点的组件的实例，以便在外部能够访问和修改数据。

进一步的，还包括：

依据预设周期自主刷新当前缓存中的数据，将更新数据传回节点编辑插件。

由上述描述可知，本发明的插件提供自主刷新操作，能够自主刷新当前混村数据，保证页面显示与插件操作数据对应，实现树状节点列表显示的刷新与属性检查面板的更新。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时能实现上述产品在H5下运行时对节点及组件编辑的方法所包含的步骤。

从上述描述可知，本发明的有益效果在于：对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程，通过所述程序的执行，能实现产品在H5环境下代码编译后的运行时阶段中实时编辑当前的节点属性、组件方法及成员变量。具体使用浏览器中可以进行脚本注入当前页面上下文环境的特性，通过特制的节点编辑插件方式，从H5网页中捕获当前运行中所有节点的数据，并整理成树形节点列表显示在插件使用页面中供实时编辑，且能即时获取编辑效果反馈。本申请通过将产品内容的调整和代码文件编译修改分离，避免了耗时繁琐的代码修改编译操作，同时又能直观、便捷地在产品运行阶段依据实际需求进行调试，即时查看调试结果，显著提高产品开发效率和操作舒适度。

实施例一

请参照图2，本实施例提供一种用于使用Cocos Creator引擎开发制作的产品在H5环境下代码编译后的运行时阶段中实时编辑当前节点属性、组件方法及成员变量的方法。

首先，为了能够查看产品的节点信息，提供可视化交互的功能。本实施例在浏览器安装节点编辑插件，该插件为专用的Chrome浏览器插件，其作为制作节点和组件编辑的工具。插件在页面加载完成阶段执行脚本，在浏览器开发工具页面下提供使用插件的标签页。

由于在浏览器下插件的内容脚本只能访问当前Cocos的H5页面的DOM而不能访问javascript变量和函数。所以本实施例通过编程式注入的方法来执行插件捕获节点数据的JavaScript代码，实现节点数据的获取。

具体的，本实施例的插件将在manifest中开启了跨域权限和chrome.tabs模块(标签页模块)权限。然后将捕获节点数据的核心代码(下面将展开具体说明)转为字符串格式，使用Chrome浏览器提供的inspectedWindow.eval方法再注入到当前页面的上下文环境中执行。

所述的捕获节点数据的核心代码对应执行包括以下内容：

当运行使用Cocos Creator制作的引擎H5页面时，通过浏览器的window对象，使用全局变量cc.director直接获取到引擎导演类单例，其中包含了当前运行环境下所有的节点对象实例。引擎中页面是以场景作为载体的，从当前运行的场景中切入，获取场景下的子节点，并通过递归的方式获取到所有子节点的内存数据，再将获取到的各个子节点的内存数据根据各自对应的唯一标识uuid存储在缓存中。

优选的，将根据是否存在命名空间cc决定捕获的数据，并将收集到的内存数据进行递归解析，整理为包含uuid、名字、子节点数组的树状数据结构。

通过上述核心代码捕获的节点数据，为各个子节点与各自的唯一标识uuid建立了关联的内存数据。

然后，在浏览器通过注入上述核心代码至当前页面中执行，获取到当前产品的所有节点对应的与各自唯一标识符关联的内存数据后，将使用window的跨域通信postMessage，将捕获到的上述数据传回插件中，并整理为如图3所示的树形数据结构，用于生成多级展开的树形节点列表。优选使用elementUI的树形控件渲染在浏览器中该插件的页面，即插件的标签页上(显示效果如图4所示)。

当有需求对当前H5下运行的产品进行调试修改时，则基于插件的标签也上显示的树形节点列表进行目标节点信息的编辑。

具体的，将在插件的属性检查面板上将根据选中的目标节点属性(节点的大小尺寸、坐标位置、旋转方向和颜色等)提供各自编辑数值的操作方式，当数值改变时，会通知插件修改目标节点在缓存中的对应数据，以即时改变页面的显示状态，获取编辑反馈。在选中目标节点的组件后，将通过反射拿到对象的所有属性和方法，并提供复制该路径的功能，然后可以在浏览器控制台中，根据该路径编辑对象属性或者调用方法。

作为一具体实例，当选中树形节点列表中的一个节点时，将根据该节点的uuid从缓存NodeMemoryStroge中取出该节点的完整数据，其类型为cc.Node,可以从中获取该节点的大小尺寸、坐标位置、旋转方向和颜色信息等属性信息，然后将其显示在插件的属性检查面板中，同时提供对应编辑数值的输入框供用户输入自定义数值。当该节点的某一个属性数值改变时，将同步对缓存中该节点对应的属性数值进行修改。

作为另一具体实例，当有需求对某一节点的内容进行调整时，可通过选中树形节点列表中的该节点，并通过预设的操作方式获取该节点的组件对象路径至浏览器的控制台中，然后直接通过改变该节点的组件对象的内容的方法string，达到编辑的目的。优选直接提供对该组件对象路径的复制粘贴功能；同时，获取组件对象路径的方式为利用JavaScript的反射机制，从组件池components中间接拿到绑定该节点的组件的实例。

最后，本实施例的插件还提供主动刷新操作，能够依据预设的更新周期自主刷新当前缓存数据，将更新数据传回节点编辑插件。保证页面显示与插件数据操作对应，实现树状列表显示的刷新与属性检查面板的重置。

本实施例利用浏览器的window对象和引擎导演类单例的基础上，利用JavaScript的反射机制封装了一套在浏览器下运行时实时编辑Cocos产品的节点及组件的解决方案。本实施例将内容的调整和代码文件编译修改分离，能够所见即所得的进行查看以及调试产品显示的内容，从而提高开发效率和操作舒适度。

实施例二

本实施例对应实施例一，提供两个具体运用场景：

运用场景一

在游戏开发过程中，需要对游戏内界面的UI布局进行调整，改变按钮的位置和颜色时可以：

1、在浏览器中安装实施例一的Chrome插件，在游戏运行的标签页下打开浏览器的开发者工具，其中的Tab中便有插件的使用页面，点击捕获按钮.；

2、在生成的树状列表中根据名字找到待修改的按钮，改变属性面板中的坐标位置和颜色，便可以实时修改游戏中按钮的表现。

运用场景二

在游戏开发过程中，需要对游戏内界面上的内容进行适配兼容测试，改变某些文本的显示内容可以：

1、点击捕获按钮，在生成的树状列表中找到该文本的节点，通过插件提供的获取按钮，可以复制文本组件的获取路径；

2、将获取到的路径粘贴到浏览器的控制台中，可以直接调用文本组件改变内容的方法string，传入不同的内容便可以在页面中实时显示，已到达快速测试的目的。

实施例三

本实施例对应实施例一至实施例三中的任意一个实施例，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时能实现上述实施例一至实施例三任意一个实施例所述的产品在H5下运行时对节点及组件编辑的方法所包含的步骤，具体的步骤内容在此不进行复述，详细请参阅实施例一至实施例三的记载。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

综上所述，本发明提供的产品在H5下运行时对节点及组件编辑的方法、存储介质，不仅能够以插件形式实现在产品运行中进行调试，而且无需耗时又繁琐地修改产品代码编译，大大提高产品开发效率和操作舒适度；进一步的，还能直观地、即时性看到产品的调试结果，有助于调试工作的高效开展；最后，还能同时直观地查看到当前页面下节点分布情况，方便进行节点数量优化和性能问题排查，还能直接修改节点数据用于测试。因此，本发明具有较高实用性。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (7)

1.产品在H5下运行时对节点及组件编辑的方法，其特征在于，包括：

在浏览器提供使用节点编辑插件的标签页；

节点编辑插件将对应执行包括获取当前运行环境下所有的节点对象实例和获取各个节点对象实例的内存数据并对应各自的唯一标识符存储至缓存中的字符串格式代码注入到当前运行环境中执行；

通过跨域通信函数将所述缓存中的数据传回节点编辑插件；

节点编辑插件依据所述数据生成对应的树形节点结构，并将其渲染成对应的树形节点列表至所述标签页；

当选中所述树形节点列表中一节点，则依据所述一节点的唯一标识符从所述缓存中提取对应节点对象实例的内存数据；

节点编辑插件的属性检查面板依据所述内存数据显示所述一节点的各属性数值，并提供对应所述各属性数值的编辑功能和所述一节点的组件对象路径获取功能；

当一属性数值改变时，节点编辑插件同步修改所述缓存中的所述内存数据；

在浏览器的控制台中依据所获取的组件对象路径编辑对应组件对象的属性或调用方法。

2.如权利要求1所述的产品在H5下运行时对节点及组件编辑的方法，其特征在于，还包括：

在浏览器安装节点编辑插件；

在manifest中对应所述插件开启跨域权限和标签页模块权限。

3.如权利要求1所述的产品在H5下运行时对节点及组件编辑的方法，其特征在于，通过引擎的导演类单例获取所述所有节点对象实例；

所述字符串格式代码使用浏览器提供的inspectedWindow.eval方法注入到当前运行环境中执行。

4.如权利要求1所述的产品在H5下运行时对节点及组件编辑的方法，其特征在于，所述一节点的属性包括节点的大小尺寸、坐标位置、旋转方向和颜色。

5.如权利要求1所述的产品在H5下运行时对节点及组件编辑的方法，其特征在于，所述一节点的组件对象路径获取功能，具体通过以下步骤实现：

利用JavaScript的反射机制，从组件池获取所述一节点的组件对象实例，并提供获取路径的复制黏贴功能。

6.如权利要求1所述的产品在H5下运行时对节点及组件编辑的方法，其特征在于，还包括：

依据预设周期自主刷新当前缓存中的数据，将更新数据传回节点编辑插件。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时能实现上述权利要求1-6任意一项所述的产品在H5下运行时对节点及组件编辑的方法所包含的步骤。

Images