一种应用于Photoshop图层的散图管理方法、系统、设备及介质

技术领域

本发明涉及美术UI处理领域，尤其涉及一种应用于Photoshop图层的散图管理方法、系统、设备及介质。

背景技术

PhotoshopToSpine是一款可以将Photoshop中的图层在不改变图层位置、层级的情况下完美导入到Spine中的脚本插件，该插件支持将ps图层导出为spine需要的散图与json文件。然而，在现有的业务流程中，对于PhotoshopToSpine导出的散图和json文件，目前只能依靠人工从从无数的碎图资源中去找图，做比对，然后填写所需要配置，这个过程效率低下、不直观，无法及时发现资源缺漏，同时还极易找错图，填错配置信息。

发明内容

本发明的目的在于提供一种应用于Photoshop图层的散图管理方法、系统、设备及介质，可以方便快速的定位美术资源，提高产出效率，无需人工去分类、查找、定位资源，以解决上述现有技术问题的至少之一。

本发明提供了一种应用于Photoshop图层的散图管理方法，所述方法具体包括：

根据PhotoshopToSpine脚本插件导出Photoshop图层，获得散图集和json配置文件；

基于列表按钮模块，获取所述json配置文件的散图资源信息，根据所述散图资源信息将所述散图集生成散图层列表；

基于页面显示模块，将所述散图层列表的选中散图层作为预览图进行展示和上下页切换，显示所述散图层列表的散图层总数和所述选中散图层的页序号；

基于页面重置模块，将所述选中散图层的每个散图资源的当前位置还原为初始位置。

进一步的，所述列表按钮模块的创建步骤具体包括：

基于Cocos Creator，创建第一panel节点和第一UI预制体，将所述第一UI预制体引入所述第一panel节点，生成列表按钮模板，所述列表按钮模板包括一个按钮和一个用于显示散图层列表的容器；

为所述第一panel节点创建列表按钮脚本组件，在所述列表按钮脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置Node节点单元和根目录文件夹路径指定单元以及引用所述列表按钮模板，所述Node节点单元用于存储散图层列表，所述根目录文件夹路径指定单元用于指定所述散图集和所述json配置文件的所在根目录文件夹路径。

进一步的，所述页面显示模块的创建步骤具体包括：

基于Cocos Creator，创建第二panel节点，在所述第二panel节点中创建第一Button节点和第二Button节点，所述第一Button节点用于向上一个页面切换，所述第二Button节点用于向下一页页面切换；

为所述panel节点中创建页面显示脚本组件，在所述页面显示脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置预览图显示单元、当前页序号显示单元以及预览图页序号存储单元；

基于Cocos Creator的Component模块，在入口函数update中引用所述预览图显示单元、所述当前页序号显示单元以及所述预览图页序号存储单元。

更进一步的，所述预览图显示单元引用Cocos Creator的Sprite组件。

更进一步的，所述当前页序号显示单元引用Cocos Creator的Label组件。

更进一步的，所述预览图页序号存储单元引用Cocos Creator的SpriteFrame组件。

进一步的，所述页面重置模块的创建步骤具体包括：

在Cocos Creator中为每个散图层设置一个根节点，在每个根节点下为每个散图层的每个散图资源分别设置一个子节点；

为每个根节点分别设置一个页面重置脚本组件，在所述页面重置脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置子节点存储单元，所述子节点存储单元用于保存根节点下的子节点数组；

基于Cocos Creator的Component模块，在入口函数onLoad中设置子节点初始位置记录单元，所述子节点初始位置记录单元用于在每个子节点加载记录其初始位置；

在所述页面重置脚本组件中，根据所述子节点存储单元和所述子节点初始位置记录单元，将每个子节点的当前位置还原为初始位置；

为每个根节点设置一个点击事件监听器，所述点击事件监听器用于在每个根节点被触发页面重置事件时向对应的页面重置脚本组件传递启动指令。

本发明提供了一种应用于Photoshop图层的散图管理系统，所述系统具体包括：

图层导出模块，用于根据PhotoshopToSpine脚本插件导出Photoshop图层，获得散图集和json配置文件；

列表按钮模块，用于获取所述json配置文件的散图资源信息，根据所述散图资源信息将所述散图集生成散图层列表；

页面显示模块，用于将所述散图层列表的选中散图层作为预览图进行展示和上下页切换，显示所述散图层列表的散图层总数和所述选中散图层的页序号；

页面重置模块，用于将所述选中散图层的每个散图资源的当前位置还原为初始位置。

本发明提供了一种计算机设备，包括：存储器和处理器及存储在存储器上的计算机程序，当所述计算机程序在处理器上被执行时，实现如上述方法中任一项所述的应用于Photoshop图层的散图管理方法。

本发明提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时，实现如上述方法中任一项所述的应用于Photoshop图层的散图管理方法。

与现有技术相比，本发明具有以下技术效果的至少之一：

1、极大的提高了产品开发工作流中美术、产品、程序三者的效率，做到了既分工又合作的效果，提高了内容输出效率，解决了依靠人工去分类、查找、定位资源的问题。

2、有效的提高了美术人员切图、导图的效率，同时产品人员也可以根据导出的资源和配置提前在工具上预览美术效果，检查资源缺漏，完成课程配表。程序人员根据导出的资源和配置以及产品配置出的课程配表来显示最终的效果。

3、依据Photoshop和PhotoshopToSpine做了相应的结合，开发出一套实现方便、可视化，100％还原布局，快捷定位UI元素的预览工具。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种应用于Photoshop图层的散图管理方法的流程示意图；

图2是本发明实施例提供的一种应用于Photoshop图层的散图管理系统的结构示意图；

图3是本发明实施例提供的一种计算机设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本申请说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

PhotoshopToSpine是一款可以将Photoshop中的图层在不改变图层位置、层级的情况下完美导入到Spine中的脚本插件，该插件支持将ps图层导出为spine需要的散图与json文件。然而，在现有的业务流程中，对于PhotoshopToSpine导出的散图和json文件，目前只能依靠人工从从无数的碎图资源中去找图，做比对，然后填写所需要配置，这个过程效率低下、不直观，无法及时发现资源缺漏，同时还极易找错图，填错配置信息。

参照图1，本发明实施例提供了一种应用于Photoshop图层的散图管理方法，所述方法具体包括：

S101：根据PhotoshopToSpine脚本插件导出Photoshop图层，获得散图集和json配置文件。

该实施例中，使用PhotoshopToSpine脚本插件导出Photoshop里面美术制作好的课程资源图层，导出之后会有一张张散图资源以及一个json配置文件，配置文件会记录每个散图的名称、位置坐标、宽高等信息。

S102：基于列表按钮模块，获取所述json配置文件的散图资源信息，根据所述散图资源信息将所述散图集生成散图层列表。

该实施例中，点击按钮后，程序自动搜索遍历软件定义的一个本地电脑磁盘位置路径，把路径下的所有根目录文件夹列出，并且点击列出的根目录文件夹会继续列出它下面的文件夹列表，直到检测到文件夹中有uiposition.json文件时，此时会判定该文件夹下包含了导出的散图。程序会去读取uiposition.json文件，根据散图命名规则和位置信息，把该文件夹下的散图分页面读取显示出来。默认显示第一个页面的散图资源。

在一些实施例中，所述列表按钮模块的创建步骤具体包括：

基于Cocos Creator，创建第一panel节点和第一UI预制体，将所述第一UI预制体引入所述第一panel节点，生成列表按钮模板，所述列表按钮模板包括一个按钮和一个用于显示散图层列表的容器；

为所述第一panel节点创建列表按钮脚本组件，在所述列表按钮脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置Node节点单元和根目录文件夹路径指定单元以及引用所述列表按钮模板，所述Node节点单元用于存储散图层列表，所述根目录文件夹路径指定单元用于指定所述散图集和所述json配置文件的所在根目录文件夹路径。

该实施例中，在Cocos Creator编辑器内创建一个新场景，在该场景中创建一个Panel节点，用于容纳按钮列表，在项目资源管理器中，创建一个新的UI预制体，命名为"ListButtonTemplate"，包含一个按钮和一个用于显示散图层列表的容器。

为Panel节点创建一个列表按钮脚本组件，在列表按钮脚本组件中引入CocosCreator的Component模块，并创建以下属性：属性listContainer，类型为cc.Node，用于引用显示散图层列表的容器节点；属性rootFolderPath，类型为字符串，用于指定根目录文件夹路径；属性listButtonTemplate，类型为cc.Prefab，用于引用列表按钮模板。在列表按钮脚本组件中实现一个方法，用于初始化散图层列表。在列表按钮脚本组件中实现一个方法，用于实现根据指定路径搜索根目录文件夹，生成散图层列表的逻辑。

S103：基于页面显示模块，将所述散图层列表的选中散图层作为预览图进行展示和上下页切换，显示所述散图层列表的散图层总数和所述选中散图层的页序号。

该实施例中，程序读取到uiposition.json文件后，根据散图命名规则，便可以知道改文件夹下有多少个页面的资源，此时便可以显示总页面数和当前页面数。根据之前读取的uiposition.json文件，程序已经知道了每个页面具有哪些散图，所以只需去文件夹下读取该页面的散图资源显示即可，也即是上下一页功能所做的事情。

在一些实施例中，所述页面显示模块的创建步骤具体包括：

基于Cocos Creator，创建第二panel节点，在所述第二panel节点中创建第一Button节点和第二Button节点，所述第一Button节点用于向上一个页面切换，所述第二Button节点用于向下一页页面切换；

为所述panel节点中创建页面显示脚本组件，在所述页面显示脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置预览图显示单元、当前页序号显示单元以及预览图页序号存储单元；

基于Cocos Creator的Component模块，在入口函数update中引用所述预览图显示单元、所述当前页序号显示单元以及所述预览图页序号存储单元。

具体的，所述预览图显示单元引用Cocos Creator的Sprite组件。

具体的，所述当前页序号显示单元引用Cocos Creator的Label组件。

具体的，所述预览图页序号存储单元引用Cocos Creator的SpriteFrame组件。

该实施例中，在Cocos Creator编辑器内创建一个新场景，在该场景中创建一个Panel节点，在Panel节点中创建一个名为"PreviousButton"的按钮节点，作为向上一个页面切换的按钮，创建一个名为"NextButton"的按钮节点，作为向下一页页面切换的按钮，再创建一个名为页面显示脚本组件。在页面显示脚本组件中引入Cocos Creator的Component模块，并创建以下属性：属性previewImage，类型为cc.Sprite，用于引用预览图显示单元；属性pageIndexLabel，类型为cc.Label，用于引用当前页序号显示单元；属性pageSpriteFrame，类型为cc.SpriteFrame，用于存储预览图页序号存储单元。在页面显示脚本组件的update方法中使用上述属性，根据当前页序号更新预览图和页序号显示。

S104：基于页面重置模块，将所述选中散图层的每个散图资源的当前位置还原为初始位置。

该实施例中，在预览工具上，点击每个散图资源，会显示该散图资源的名称，并且把散图资源移动到特定位置上，这样便可以查看下面盖住的散图(美术制作资源可能会在同一个位置放置多个图片)，此时，点击的散图多的前提下，如果想看图片初始布局效果，便可以点击重置按钮，这时候程序会把每个散图按照json配置中的初始位置重新定位显示位置。

在一些实施例中，所述页面重置模块的创建步骤具体包括：

在Cocos Creator中为每个散图层设置一个根节点，在每个根节点下为每个散图层的每个散图资源分别设置一个子节点；

为每个根节点分别设置一个页面重置脚本组件，在所述页面重置脚本组件中引入Cocos Creator的Component模块；

基于Cocos Creator的Component模块，在属性列表properties中设置子节点存储单元，所述子节点存储单元用于保存根节点下的子节点数组；

基于Cocos Creator的Component模块，在入口函数onLoad中设置子节点初始位置记录单元，所述子节点初始位置记录单元用于在每个子节点加载记录其初始位置；

在所述页面重置脚本组件中，根据所述子节点存储单元和所述子节点初始位置记录单元，将每个子节点的当前位置还原为初始位置；

为每个根节点设置一个点击事件监听器，所述点击事件监听器用于在每个根节点被触发页面重置事件时向对应的页面重置脚本组件传递启动指令。

该实施例中，在Cocos Creator场景中，为每个散图层创建一个根节点，命名方式可以是"RootNode1"、"RootNode2"，等等。在每个根节点下，为每个散图资源创建一个子节点，命名方式可以是"ImageNode1"、"ImageNode2"，等等。

为每个根节点创建一个页面重置脚本组件，在页面重置脚本组件中引入CocosCreator的Component模块，并创建以下属性：属性imageNodes，类型为cc.Node[]，用于保存根节点下的子节点数组；属性initialPositions，类型为cc.Vec2[]，用于保存子节点的初始位置。在页面重置脚本组件中实现onLoad方法，用于遍历imageNodes数组，记录每个子节点的初始位置到initialPositions数组中。在页面重置脚本组件中实现一个方法，用于将子节点的当前位置还原为初始位置，通过读取initialPositions数组。同时，为每个根节点添加一个点击事件监听器，该监听器用于在每个根节点被点击时触发页面重置事件，在点击事件监听器的回调函数中，获取对应的页面重置脚本组件，并调用其方法，将子节点位置还原为初始位置。

参照图2，本发明实施例还提供了一种应用于Photoshop图层的散图管理系统2，所述系统2具体包括：

图层导出模块201，用于根据PhotoshopToSpine脚本插件导出Photoshop图层，获得散图集和json配置文件；

列表按钮模块202，用于获取所述json配置文件的散图资源信息，根据所述散图资源信息将所述散图集生成散图层列表；

页面显示模块203，用于将所述散图层列表的选中散图层作为预览图进行展示和上下页切换，显示所述散图层列表的散图层总数和所述选中散图层的页序号；

页面重置模块204，用于将所述选中散图层的每个散图资源的当前位置还原为初始位置。

可以理解的是，如图1所示的应用于Photoshop图层的散图管理方法实施例中的内容均适用于本应用于Photoshop图层的散图管理系统实施例中，本应用于Photoshop图层的散图管理系统实施例所具体实现的功能与如图1所示的应用于Photoshop图层的散图管理方法实施例相同，并且达到的有益效果与如图1所示的应用于Photoshop图层的散图管理方法实施例所达到的有益效果也相同。

需要说明的是，上述系统之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述系统的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

参照图3，本发明实施例还提供了一种计算机设备3，包括：存储器302和处理器301及存储在存储器302上的计算机程序303，当所述计算机程序303在处理器301上被执行时，实现如上述方法中任一项所述的应用于Photoshop图层的散图管理方法。

所述计算机设备3可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。该计算机设备3可包括，但不仅限于，处理器301、存储器302。本领域技术人员可以理解，图3仅仅是计算机设备3的举例，并不构成对计算机设备3的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括输入输出设备、网络接入设备等。

所称处理器301可以是中央处理单元(Central Processing Unit，CPU)，该处理器301还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器302在一些实施例中可以是所述计算机设备3的内部存储单元，例如计算机设备3的硬盘或内存。所述存储器302在另一些实施例中也可以是所述计算机设备3的外部存储设备，例如所述计算机设备3上配备的插接式硬盘，智能存储卡(Smart MediaCard,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器302还可以既包括所述计算机设备3的内部存储单元也包括外部存储设备。所述存储器302用于存储操作系统、应用程序、引导装载程序(BootLoader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器302还可以用于暂时地存储已经输出或者将要输出的数据。

本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时，实现如上述方法中任一项所述的应用于Photoshop图层的散图管理方法。

该实施例中，所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。在某些司法管辖区，根据立法和专利实践，计算机可读介质不可以是电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所公开的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。