CN115170709A

CN115170709A - 动态图像的编辑方法、装置和电子设备

Info

Publication number: CN115170709A
Application number: CN202210598199.7A
Authority: CN
Inventors: 黄剑武; 黄挺
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2022-05-30
Filing date: 2022-05-30
Publication date: 2022-10-11
Also published as: WO2023231235A1

Abstract

本发明提供了一种动态图像的编辑方法、装置和电子设备，响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；响应针对于图形用户界面中的图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。该方式中，基于预览界面可以直接编辑动态图像，通过渲染纹理可以实时查看编辑后的动态图像的显示效果，保存的结果可以直接应用到游戏中，避免了动态图像需要在多个软件中开发的问题，简化了游戏的开发过程，减少了人工成本和时间成本，提高了开发效率。

Description

动态图像的编辑方法、装置和电子设备

技术领域

本发明涉及游戏技术领域，尤其是涉及一种动态图像的编辑方法、装置和电子设备。

背景技术

在游戏开发过程中，通常需要制作骨骼动画。相关技术中，一般使用spine(2D骨骼动画制作)工具制作骨骼动画资源。但是，在实际的游戏开发过程中，由于游戏场景的多样性，通常需要对骨骼动画资源进行比例设置、裁剪等编辑，生成不同效果的骨骼动画并实时展示动画效果，以适应不同的游戏场景。但是，spine工具并不具有动画编辑和实时显示编辑效果的功能。因此，通常在图像处理软件(Adobe Photoshop，简称“PS”)中编辑骨骼动画资源的静态图片，然后将编辑完成的资源再上传至服务器，进行资源打包后，才可以加载到游戏场景中查看效果。这种方式操作繁琐，人工成本和时间成本较高，编辑功能较少，无法满足开发人员的需求。

发明内容

有鉴于此，本发明的目的在于提供一种动态图像的编辑方法、装置和电子设备，能够实时编辑和查看动态图像的显示效果，简化游戏的开发过程，减少人工成本和时间成本，提高开发效率。

第一方面，本发明实施例提供了一种动态图像的编辑方法，通过终端设备提供一图形用户界面，图形用户界面中包括图像编辑控件和预览界面；方法包括：响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像；。

进一步的，基于第一渲染纹理，在图形用户界面渲染并显示第一目标资源对应的第一动态图像的步骤，包括：加载第一目标资源；创建第一渲染纹理，将第一目标资源逐帧渲染至第一渲染纹理上，得到目标第一渲染纹理；将目标第一渲染纹理确定为第一动态图像，并将第一动态图像显示在图形用户界面的第一显示区域；其中，第一动态图像的显示优先级高于图像编辑控件；第一动态图像包括多个，每个第一动态图像的尺寸不同。

进一步的，图像编辑控件包括第一裁剪控件；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤，包括：响应针对于第一裁剪控件的触发操作，将第一动态图像设置于预览界面上；其中，预览界面具有裁剪功能；根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像。

进一步的，根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像的步骤，包括：根据预览界面的裁剪功能，按照第一动态图像对应的裁剪尺寸，裁剪预览界面，得到裁剪区域；其中，第一动态图像包括多个，每个第一动态图像对应的裁剪尺寸不同；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像。

进一步的，图形用户界面还包括缩放控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，方法还包括：响应针对于缩放控件的第二操作，根据缩放控件显示的缩放参数，调整第一动态图像的尺寸；基于尺寸调整后的第一动态图像，调整裁剪区域显示的动态图像。

进一步的，将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，方法还包括：响应针对于裁剪区域显示的目标动态图像的位置调整操作，控制第一动态图像移动，并显示移动后的第一动态图像的位置信息；基于移动后的第一动态图像，调整裁剪区域显示的动态图像。

进一步的，图像编辑控件还包括第二裁剪控件和第三裁剪控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，方法还包括：响应针对于第二裁剪控件的触发操作，标识显示裁剪区域；响应针对于第三裁剪控件的触发操作，显示目标裁剪区域对应的编辑界面；其中，编辑界面包括参数编辑控件和确定控件；基于参数编辑控件和确定控件，调整裁剪区域的尺寸。

进一步的，基于参数编辑控件和确定控件，调整裁剪区域的尺寸的步骤，包括：响应针对于参数编辑控件的编辑操作，确定编辑操作对应的尺寸参数；响应针对于确定控件的触发操作，根据尺寸参数更新目标裁剪区域的尺寸，并标识显示更新后的裁剪区域。

进一步的，图形用户界面还包括参照框控件和隐藏参照框控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，方法还包括：响应针对于参照框控件的触发操作，在裁剪区域的预设位置显示参照框控件对应的参照框；响应针对于隐藏参照框控件的触发操作，取消显示参照框。

进一步的，图形用户界面还包括渐变参数配置控件；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，方法还包括：响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度。

进一步的，渐变参数配置控件包括多个第一渐变参数配置控件；响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度的步骤，包括：响应针对于第一渐变参数配置控件的第一参数的选择操作，根据第一参数，确定目标动态图像的第一边缘区域；其中，第一参数用于指示第一边缘区域的方向和范围；调整第一边缘区域的透明度。

进一步的，渐变参数配置控件包括第二渐变参数配置控件；调整第一边缘区域的透明度的步骤，包括：响应针对于第二渐变参数配置控件的第二参数的选择操作，根据第二参数，从第一边缘区域中确定第二边缘区域；其中，第二参数用于指示第二边缘区域的范围；第二边缘区域小于或等于第一边缘区域；调整第二边缘区域的透明度；其中，距离第二边缘区域的边缘越近的区域透明度的值越高，距离第二边缘区域的边缘越远的区域透明度的值越低。

进一步的，调整第二边缘区域的透明度的步骤，包括：获取预设的渐变材质；通过预设的渲染接口，将渐变材质赋予到第一动态图像上；通过渐变材质，调整第二边缘区域的像素点对应的透明度的值，使调整后的第二边缘区域具有透明度渐变效果。

进一步的，通过渐变材质，调整第二边缘区域的像素点对应的透明度的值的步骤，包括：通过渐变材质的着色器，采样第二边缘区域的目标像素点的UV坐标；根据目标像素点的UV坐标，确定目标像素点与第二边缘区域的边缘像素点的距离值；根据距离值和预设的控制参数，确定目标像素点对应的透明度的目标值；将第二边缘区域的目标像素点对应的透明度的值，调整为目标值。

进一步的，图形用户界面还包括静态控件和图片保存控件；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，方法还包括：响应针对于静态控件的触发操作，创建第二渲染纹理，将目标动态图像的初始帧渲染至第二渲染纹理，得到目标第二渲染纹理；将目标第二渲染纹理确定为初始帧图片；响应针对于图片保存控件的触发操作，保存初始帧图片。

进一步的，图形用户界面还包括多个游戏背景显示控件；方法还包括：响应于多个游戏背景显示控件中第一游戏背景显示控件的触发操作，在图形用户界面的背景区域显示第一游戏背景显示控件对应的第一游戏背景的画面。

进一步的，图形用户界面还包括镜像控件；响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像的步骤之后，方法还包括：响应针对于镜像控件的触发操作，翻转第一动态图像，得到第一动态图像的镜像图像；显示第一动态图像的镜像图像。

进一步的，图形用户界面还包括预览控件；方法还包括：响应针对于预览控件的触发操作，在图形用户界面显示游戏界面；其中，游戏界面包括资源加载控件和游戏场景画面；响应针对于资源加载控件的第四操作，加载第四操作对应的第二目标资源和第二目标资源对应的音频数据，在游戏界面显示第二目标资源对应的第二动态图像；基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频。

进一步的，第二目标资源包括预先生成的多个口型动画；基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频的步骤，包括：解析音频数据，得到对应的声音音频；从多个口型动画中，确定声音音频中每个目标音频对应的目标口型动画；播放第二动态图像对应的动作画面以及声音音频，同时播放每个目标音频对应的目标口型动画。

进一步的，图形用户界面还包括对比控件；方法还包括：响应针对于对比控件的触发操作，在图形用户界面显示对比界面；其中，对比界面包括多个资源输入控件、每个资源输入控件具有对应的图像显示区域和加载控件；资源输入控件用于输入目标资源的资源编号；响应针对于目标资源输入控件对应的加载控件的触发操作，加载目标资源输入控件显示的资源编号对应的第三目标资源；在目标资源输入控件对应的图像显示区域显示第三目标源对应的第三动态图像。

进一步的，对比界面还包括多个选择控件；每个选择控件对应一个图像尺寸；方法还包括：响应针对于多个选择控件中的第一选择控件的触发操作，在图像显示区域显示第一选择控件对应的第一图像尺寸的第三动态图像。

进一步的，对比界面还包括参考线控件；方法还包括：响应针对于参考线控件的触发操作，在对比界面显示参考线控件对应的参考线。

进一步的，对比界面还包括静态图控件；方法还包括：响应针对于静态图控件的触发操作，在图像显示区域显示第三动态图像的初始帧图片。

进一步的，响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，方法还包括：响应针对于目标动态图像的保存操作，将目标动态图像对应的数据信息转换为目标代码，将目标代码保存至预设的配置文件中。

第二方面，本发明实施例提供了一种动态图像的编辑装置，通过终端设备提供一图形用户界面，图形用户界面中包括图像编辑控件；装置包括：第一显示模块，用于响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；编辑模块，用于响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现第一方面任一项的动态图像的编辑方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，计算机可执行指令在被处理器调用和执行时，计算机可执行指令促使处理器实现第一方面任一项的动态图像的编辑方法。

本发明实施例带来了以下有益效果：

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1为本发明实施例提供的一种动态图像的编辑方法的流程图；

图2为本发明实施例提供的一种图形用户界面的示意图；

图3为本发明实施例提供的另一种图形用户界面的示意图；

图4为本发明实施例提供的另一种图形用户界面的示意图；

图5为本发明实施例提供的另一种图形用户界面的示意图；

图6为本发明实施例提供的一种编辑界面的示意图；

图7为本发明实施例提供的另一种图形用户界面的示意图；

图8为本发明实施例提供的另一种图形用户界面的示意图；

图9为本发明实施例提供的一种第一边缘界面的示意图；

图10为本发明实施例提供的一种目标动态图像的示意图；

图11为本发明实施例提供的另一种图形用户界面的示意图；

图12为本发明实施例提供的一种游戏界面的示意图；

图13为本发明实施例提供的一种对比界面的示意图；

图14为本发明实施例提供的一种动态图像的编辑装置的结构示意图；

图15为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前的游戏开发过程中，通常需要制作骨骼动画。相关技术中，一般使用spine(2D骨骼动画制作)工具制作骨骼动画资源。但是，在实际的游戏开发过程中，由于游戏场景的多样性，通常需要对骨骼动画资源进行比例设置、裁剪等编辑，生成不同效果的骨骼动画并实时展示动画效果，以适应不同的游戏场景。但是，spine工具并不具有动画编辑和实时显示编辑效果的功能。因此，通常在图像处理软件(Adobe Photoshop，简称“PS”)中编辑骨骼动画资源的静态图片，然后将编辑完成的资源再上传至服务器，进行资源打包后，才可以加载到游戏场景中查看效果。这种方式操作繁琐，人工成本和时间成本较高，编辑功能较少，无法满足开发人员的需求。

另外，spine工具，可以实现输出一份动态立绘资源的功能，但不能把这份资源转换成编辑后的动态图像效果。且，无法支持在游戏中实时查看效果；无法方便快速编辑位置，大小，缩放等；无法处理边缘虚化；无法镜像；无法快速储存静态png图片；无法查看口型适配的语音效果；无法很好的和剧情编辑器结合，配合剧情编辑器可以随意调用资源；无法根据剧情的台词加入情绪动作，增加角色动态和表情的变化；操作不方便且流程需要多方配合，时间跨度长，过于繁琐，不适合大批量处理。基于此，本发明实施例提供的一种动态图像的编辑方法、装置和电子设备，该技术可以应用于具有动态图像或动画编辑功能的电子设备，比如计算机、笔记本电脑等。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种动态图像的编辑方法进行详细介绍，通过终端设备提供一图形用户界面，图形用户界面中包括图像编辑控件和预览界面。如图1所示，该方法包括如下步骤：

步骤S102，响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；

上述第一目标资源通常是指Spine动画工具制作的立绘动态资源；上述第一渲染纹理也可以表示为rendertexture，主要用于将第一目标资源中的动态图像渲染到该第一渲染纹理中，然后在图形用户界面进行显示。上述第一动态图像可以是动态肖像、游戏中动态虚拟对象，比如坐骑、任务角色等。其中，Rendertexture：是一个运行时创建和更新的通用渲染纹理，可以把要渲染的东西填充进去，随后可以如同普通纹理一样在游戏中使用，如创建图片控件等。

具体的，由于第一目标资源是散图拼成的合图，即一种2d骨骼动画，、把各个骨骼部位相关的图片，合到一张大图里的合图，并不是一张完整的动态图，因此不利于进行显示处理，为了实现较好的显示效果，采用第一渲染纹理进行资源渲染并显示。

实际实现时，如图2所示，在编号控件中输入需要加载的第一目标资源的编号(如图2中的1003)，点击加载控件，即可使用游戏引擎中的spine模块将第一目标资源到编辑器中，在编辑器中将第一目标资源渲染并显示到编辑器的图形用户界面上。具体的，可以动态创建第一渲染纹理，将第一目标资源中的动画渲染到该第一渲染纹理上，然后将渲染后的第一渲染纹理显示在图形用户界面，具体可以是将渲染后的第一渲染纹理挂到图形用户界面，展示到游戏中。

步骤S104，响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像；

上述图像编辑控件主要用于编辑第一动态图像的尺寸大小、位置和镜像等。上述第一操作可以是点击操作、点击移动操作、滚动操作等，针对不同的编辑控件通常需要不同的操作。上述预览界面也可以表示为panel，可以理解为一种UI界面，该预览界面具有裁剪功能，用于裁剪第一动态图像。

比如，可以针对具有裁剪功能的图像编辑控件进行第一操作，可以使用游戏引擎UI模块的控件预览界面的裁剪功能，将第一动态图像设置于预览界面上，即，将渲染完成的第一渲染纹理设置于panel上，可以将预览界面裁剪为不同尺寸的形状，然后在该形状中显示第一动态图像的部分区域，比如头部区域，半身区域等，进而实现将第一动态图像进行裁剪编辑并显示的效果。

再如，可以针对具有缩放功能的图像编辑控件进行放大或缩小操作，可以放大或缩小第一动态图像的尺寸大小，即改变渲染后的第一渲染纹理，在图像用户界面显示放大或缩小后的第一动态图像，如果已经进行了裁剪操作，则可以显示放大或缩小后的目标动态图像。

再如，可以针对显示的动态图像进行移动操作，改变第一动态图像的显示位置，显示位置改变后的动态图像。

实际实现时，可以响应针对于图像编辑控件的第一操作，在预览界面上编辑第一动态图像，并在预览界面显示编辑后的目标动态图像。上述编辑操作都是基于预览界面进行的编辑，编辑完成后再显示在图形用户界面。

本发明实施例提供了一种动态图像的编辑方法，响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；响应针对于图形用户界面中的图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。该方式中，基于预览界面可以直接编辑动态图像，通过渲染纹理可以实时查看编辑后的动态图像的显示效果，保存的结果可以直接应用到游戏中，避免了动态图像需要在多个软件中开发的问题，简化了游戏的开发过程，减少了人工成本和时间成本，提高了开发效率。

在上述步骤S104之后，上述方法还包括：响应针对于目标动态图像的保存操作，将目标动态图像对应的数据信息转换为目标代码，将目标代码保存至预设的配置文件中。

具体的，如图2所示，点击图中显示的保存控件，即可保存目标动态图像对应的数据信息，该数据信息可以是编辑后的目标动态图像，还可以是目标动态图像的静态图像，还可以是编辑过程中的编辑数据，比如裁剪尺寸、缩放比例、移动位置等数据。上述目标代码是指目标脚本语言的代码。上述将目标动态图像对应的数据信息转换为目标代码的目的是，在实际的游戏中，该目标代码可以被该游戏配置的程序脚本读取。进而使配置文件能够在后续提供给游戏接口使用。

具体的，如果实际的游戏开发中，使用的是lua脚本语言进行文件读取加载，可以将目标动态图像对应的数据信息转换为lua脚本语言的代码，并保存至预设的config.lua配置文件中，该config.lua配置文件主要用于后续提供给游戏接口使用，所以，如果实际的游戏使用的是lua脚本语言，在编辑器中使用lua的配置形式性能较好。

另外，需要说明的是，本实施例中，实际以第一目标资源为基础，为编辑器封装了多个功能接口，通过编辑器可以实时编辑、查看和保存资源，最后可以输出编辑后的第一目标资源。输出的文件通常包括动态图像、静态图像、在编辑器中配置的各种参数等，其中的参数通常包括裁剪的尺寸、移动的位置，是否翻转等。

由于直接将资源渲染到图形用户界面并进行展示的方式功能单一，不利于后续对图形用户界面显示的动态图像进行各种效果的编辑，为了提高显示效果以及实现额外的编辑功能，上述步骤S102，基于第一渲染纹理，在图形用户界面渲染并显示第一目标资源对应的第一动态图像的步骤，一种可能的实施方式：

加载第一目标资源；创建第一渲染纹理，将第一目标资源逐帧渲染至第一渲染纹理上，得到目标第一渲染纹理；将目标第一渲染纹理确定为第一动态图像，并将第一动态图像显示在图形用户界面的第一显示区域；其中，第一动态图像的显示优先级高于图像编辑控件；第一动态图像包括多个，每个第一动态图像的尺寸不同。

实际上，图形用户界面可以显示多个不同尺寸的第一动态图像，例如，如图3所示，显示有三个不同尺寸的第一动态图像。因此，在实际实现时，可以创建多个不同尺寸的第一渲染纹理，主要用于渲染并显示不同尺寸的第一动态图像，其中，每个第一渲染纹理需要和编辑器中预先设置的尺寸相同。具体可以使用游戏引擎的rendertexture模块，动态创建多张不同尺寸的第一渲染纹理，即rendertexture，将第一目标资源渲染到不同的第一渲染纹理上。其中，由于第一目标资源是动画资源，且动画是变化的，所以在渲染的过程需要逐帧对每个动画进行渲染，得到多个渲染后的第一渲染纹理。最后将渲染后的第一渲染纹理以挂接的方式显示在图形用户界面的第一显示区域上，展示到游戏中，此后形成一张完整的动态图像，方便继续处理在游戏中的展示效果。另外，第一动态图像的显示优先级高于图像编辑控件，当编辑后的第一动态图像较大时，图形用户界面中的部分控件可能会被第一动态图像遮挡。

另外，显示多个尺寸不同的动态图像的目的是，由于在实际的游戏中，针对同一个第一动态图像，在不同的游戏场景中可能需要第一动态图像会有不同的显示方式，有的游戏场景需要显示的是头部图像，有的游戏场景需要显示的是半身图像，有的游戏场景需要显示的全身图像，因此本实施例可以在编辑器中提供多个不同尺寸的第一动态图像，以使开发人员按照需要进行编辑开发。

上述方式中，通过渲染纹理的渲染逻辑渲染第一动态图像，并显示在图形用户界面的第一显示区域，有利于后续对动态图像进行编辑，同时提高可显示效果。另外，通过显示多个不同尺寸的第一动态图图像，提供了丰富的待编辑资源，同时了丰富了第一动态图像的编辑结果，进一步提高了开发效率。

上述图像编辑控件包括第一裁剪控件；下面描述上述步骤S104，响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤，一种可能的实施方式：

(1)响应针对于第一裁剪控件的触发操作，将第一动态图像设置于预览界面上；其中，预览界面具有裁剪功能；

(2)根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像。

上述第一裁剪控件对应图4所示的“启动裁剪”，点击“启动裁剪”前面的选择框，可以将第一动态图像以挂接的方式挂在预览界面上，即，将渲染后的第一渲染纹理挂在预览界面上。具体可以通过预设的尺寸参数，对预览界面进行裁剪，以使裁剪后的预览界面，只能显示裁剪部分的第一动态图像，即上述目标动态图像。如图4所示，显示的裁剪后的目标动态图像可以是第一动态图像的头部图像、半身图像和全身图像。该方式中，将第一动态图像设置于预览界面上，裁剪预览界面，实现了对第一动态图像的裁剪编辑功能，提高了编辑效率。

上述步骤(2)根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像的步骤，一种可能的实施方式：

根据预览界面的裁剪功能，按照第一动态图像对应的裁剪尺寸，裁剪预览界面，得到裁剪区域；其中，第一动态图像包括多个，每个第一动态图像对应的裁剪尺寸不同；将裁剪区域内的动态图像确定为目标动态图像，在裁剪区域显示目标动态图像。

上述每个第一动态图像都具有对应的裁剪尺寸，并显示在图形用户界面，如图4所示的82×82、300×300、490×490。比如，将图3中的第一个第一动态图像对应的预览界面，按照82×82的裁剪尺寸进行裁剪，得到82×82的裁剪区域，如图4所示的第一个裁剪区域，并将该裁剪区域内显示的动态图像确定为目标动态图像，最后在裁剪区域显示目标动态图像。如图4所示，最终可以得到三个裁剪区域，在每个裁剪区域显示对应的目标动态图像。该方式中，按照每个第一动态图像对应的裁剪尺寸，裁剪预设面版，在裁剪区域显示目标动态图像，进一步提高了编辑效率和开发效率。

如图4所示，上述图形用户界面还包括缩放控件，对应图4中的缩放配置下方的“59.2700/200.0000”控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：

响应针对于缩放控件的第二操作，根据缩放控件显示的缩放参数，调整第一动态图像的尺寸；基于尺寸调整后的第一动态图像，显示裁剪区域显示的动态图像。

具体的，编辑人员可以控制鼠标点击或者点击后移动缩放控件，选择缩放参数，其中，如果缩放控件显示的缩放参数大于初始显示的59.27，则放大第一动态图像的尺寸，并按照显示的缩放参数进行放大。如果缩放控件显示的缩放参数小于初始显示的59.27，则缩小第一动态图像的尺寸，并按照显示的缩放参数进行缩小。其中，对第一动态图像调整后，裁剪区域显示目标动态图像也会发生调整。具体的，由于裁剪区域不变，调整了第一动态图像的尺寸后，裁剪区域显示的图像必然会发生变化。该方式中，通过实时控制和显示缩放参数，对第一动态图像进行缩放编辑，进一步提高了编辑效果和开发效果。

进一步的，将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于裁剪区域显示的目标动态图像的位置调整操作，控制第一动态图像移动，并显示移动后的第一动态图像的位置信息；基于移动后的第一动态图像，调整裁剪区域显示的动态图像。

继续参见图4所示的位置信息显示区域，实际实现时，用户可以控制鼠标对每个裁剪区域显示的目标动态图像进行点击移动操作，控制第一动态图像移动，并显示移动后的第一动态图像的位置信息，比如，X：27，Y：-219等。同时将裁剪区域内的移动后的第一动态图像确定为目标动态图像，显示目标动态图像。该方式中，可以控制第一动态图像移动，调整第一动态图像的位置并显示位置信息，进一步提高了编辑效果和开发效果。

上述图像编辑控件还包括第二裁剪控件和第三裁剪控件；如图4所示，上述第二裁剪控件对应图中的“裁剪背景”，上述第三裁剪控件对应图中的“编辑自定义宽高”。将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：

(1)响应针对于第二裁剪控件的触发操作，标识显示裁剪区域；

(2)响应针对于第三裁剪控件的触发操作，显示目标裁剪区域对应的编辑界面；其中，编辑界面包括参数编辑控件和确定控件；

(3)基于参数编辑控件和确定控件，调整裁剪区域的尺寸。

上述标识显示可以是高亮显示，也可以是其他形式的显示，目的是突出显示裁剪区域。具体的，编辑人员可以点击“裁剪背景”的选择框，高亮显示每个裁剪区域，如图5所示，以黑色的边框显示形式表示上述标识显示。然后，点击“编辑自定义宽高”的选择框，显示目标裁剪区域对应的编辑界面，其中目标裁剪区域通常是指裁剪尺寸最大的裁剪区域。如图6所示，编辑界面包括参数编辑控件和确定控件；其中，图6中的“修改宽高”对应上述的确定控件，参数编辑控件包括“宽”和“高”的裁剪尺寸输入控件。实际实现时，可以在参数编辑控件中编辑需要修改的宽和高，然后点击“修改宽高”，调整裁剪区域的尺寸并显示修改后的裁剪区域。最后如果点击图中的“启用自定义宽高”即将修改后的裁剪尺寸应用到图形用户界面。

上述方式中，通过第二裁剪控件和第三裁剪控件可以自定义调整裁剪区域的尺寸大小，不仅限于预设的裁剪尺寸，提高了动态图像编辑的灵活性。

上述基于参数编辑控件和确定控件，调整裁剪区域的尺寸的步骤，一种可能的实施方式：响应针对于参数编辑控件的编辑操作，确定编辑操作对应的尺寸参数；响应针对于确定控件的触发操作，根据尺寸参数更新目标裁剪区域的尺寸，并标识显示更新后的裁剪区域。

具体的，编辑人员可以在图6所示的“宽”和“高”对应的输入框中输入想要修改的裁剪尺寸，输入完成后点击下方的修改宽高，即可确定编辑操作对应的尺寸参数，然后点击确定控件，即图6中的“修改宽高”，即可在编辑界面更新显示目标裁剪区域的尺寸，同样会标识显示更新后的裁剪区域。最后如果点击图中的“启用自定义宽高”即将修改后的裁剪尺寸应用到图形用户界面。当然，如果直接取消选择第二裁剪控件，则取消显示编辑界面。

由于编辑人员可以在裁剪区域内移动第一动态图像的位置，为了进一步提高裁剪区域内的目标动态图像的显示效果。上述图形用户界面还包括参照框控件和隐藏参照框控件；其中的参照框控件通常包括多个，如图7所示，第一个裁剪区域会显示有三个参照框控件，“参照框1类46”、“参照框2类50”、“参照框3类72”，第二个裁剪区域会显示有四个参照框控件，“参照框1类64”、“参照框2类64”、“参照框3类82”、“参照框4类200”，每个参照框控件对应显示的参照框的尺寸不同。当然，不同尺寸的裁剪区域的参照框控件对应显示的参照框的尺寸也不同。

需要说明的是，只有头像和半身像需要参照框，参照框的作用是划分出头像半身像中的中心区域，让编辑人员更方便的把图像的主要内容(比如人的脸部)区域对准并放置到中心区域中，比较美观。而全身像尺寸因为会展示全部内容，所以不需要参照框。

将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于参照框控件的触发操作，在裁剪区域的预设位置显示参照框控件对应的参照框；响应针对于隐藏参照框控件的触发操作，取消显示参照框。

如图7所示，编辑人员可以点击“参照框2类64”，在中间显示的裁剪区域中显示图中的参照框，该参照框主要用于指示调整第一动态图像在裁剪区域的位置。如果需要调整裁剪区域中第一动态图像的位置，可以以参考框为基准进行调整，比如将图像的头部调整至参考框的中间。当调整完成第一动态图像位置后，可以点击隐藏参照框控件，取消显示参照框。上述方式中，通过在裁剪区域显示参考框，有利于编辑人员对第一动态图像进行位置调整，提高了编辑效率和动态图像的效果。

由于spine工具直接做边缘渐变效果很差，为了呈现更好的渐变效果，上述图形用户界面还包括渐变参数配置控件；其中，渐变参数配置控件用于调整裁剪区域显示的目标动态图像边缘的透明度，使目标动态图像的边缘区域具有渐变的效果。

响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，上述方法还包括：响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度。

上述第三操作可以是点击操作，也可以是点击移动操作等。上述渐变参数配置控件通常包括多个，每个渐变参数配置控件用于控制目标动态图像的指定方向的边缘区域的透明度。比如，顶部渐变参数配置控件用于控制目标动态图像的顶部边缘区域的透明度。其中，透明度为渐变形式的，具有渐变的显示效果。该方式中，通过渐变参数配置控件，可以控制调整目标动态图像的边缘区域的透明度，实现透明度渐变的显示效果，提高了目标动态图像的效果。

上述渐变参数配置控件包括多个第一渐变参数配置控件；如图8中的“顶部：0.0000/1.0000”、“底部：0.0000/1.0000”、“左侧：0.0000/1.0000”、“右侧：0.0000/1.0000”对应上述第一渐变参数配置控件。响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度的步骤，一种可能的实施方式：

步骤1，响应针对于第一渐变参数配置控件的第一参数的选择操作，根据第一参数，确定目标动态图像的第一边缘区域；其中，第一参数用于指示第一边缘区域的方向和范围；

实际实现时，参见图8中间的裁剪区域显示的渐变参数配置控件，可以点击“顶部：0.0000/1.0000”选择第一参数为0.2000，该第一参数用于指示目标动态图像的顶部边缘到目标动态图像的底部边缘的百分比区域，即0.2000表示目标动态图像的顶部边缘到目标动态图像的底部边缘的20％的区域为第一边缘区域，如图9所示的一种第一边缘区域的示意图。其中，如果第一参数为0.0000则表示没有第一边缘区域，如果第一参数为1.0000则表示从目标动态图像的顶部边缘到目标动态图像的底部边缘都是第一边缘区域。同理，如果点击“底部：0.0000/1.0000”、“左侧：0.0000/1.0000”、“右侧：0.0000/1.0000”，选择第一参数，同样会确定对应的第一边缘区域。

步骤2，调整第一边缘区域的透明度。

具体的，可以直接根据预设的参数直接调整第一边缘区域的透明度，比如，直接按照边缘到中心透明度逐渐变小的规则，调整第一边缘区域的透明度，使第一边缘区域从边缘到中心呈透明度逐渐变低的效果。

也可以从第一边缘区域中确定需要调整的区域，在该区域中按照预设的调整方式进行透明度的调整，比如，从第一边缘区域中确定只有50％的边缘区域需要进行透明度调整。即，从第一边缘区域的顶部边缘到第一边缘的中间位置调整透明度，使呈透明度第一边缘区域的顶部边缘到第一边缘的中间位置呈透明度逐渐变低的效果。

上述方式中，通过第一渐变参数配置控件选择第一参数，确定需要显示渐变效果的第一边缘区域，然后调整第一边缘区域的透明度，使得目标动态图像的边缘能够具有渐变的效果，提高了动态图像的显示效果。

上述渐变参数配置控件包括第二渐变参数配置控件；该第二渐变参数配置控件对应如图8所示的“渐变：0.0000/1.0000”。其中，步骤(2)调整第一边缘区域的透明度的步骤，一种可能的实施方式：

步骤21，响应针对于第二渐变参数配置控件的第二参数的选择操作，根据第二参数，从第一边缘区域中确定第二边缘区域；其中，第二参数用于指示第二边缘区域的范围；第二边缘区域小于或等于第一边缘区域；

步骤22，调整第二边缘区域的透明度；其中，距离第二边缘区域的边缘越近的区域透明度的值越高，距离第二边缘区域的边缘越远的区域透明度的值越低。

举例说明，如果第一边缘区域为顶部边缘区域，则上述第二参数用于指示从第一边缘区域的顶部位置开始到中间区域的目标位置之间区域的范围。比如，如果第二参数为0.0000，则不会确定第二边缘区域，当然也不会显示渐变效果。如果第二参数为1.0000则直接将第一边缘区域确定为第二边缘区域。如果第二参数为0.5000，从第一边缘区域的顶部位置开始到中间位置(即50％的位置)之间的区域确定为第二边缘区域。

然后，调整第二边缘区域的顶部边缘的透明度的值越高，调整第二边缘区域的底部边缘的透明度的值越低。例如10所示，中间裁剪区域显示的顶部的第一参数为0.2000，第二参数为0.5000时，第二边缘区域的渐变效果。上述方式中，根据第二渐变参数配置控件选择第二参数，通过第二参数确定第二边缘区域，在第二边缘区域中调整透明度，以实现第二边缘区域渐变的效果，进一步提高了动态图像的效果。

不同的裁剪尺寸可能会需要部分显示图像，如半身像尺寸会将全身图像截断，在裁剪边缘有时候不想留下硬边。在一些相关技术中，都是通过spine直接做边缘渐变效果，但是该种方式效果较差，为了呈现较好的渐变效果，上述步骤22，调整第二边缘区域的透明度的步骤，一种可能的实施方式：

步骤221，获取预设的渐变材质；

步骤222，通过预设的渲染接口，将渐变材质赋予到第一动态图像上；

步骤223，通过渐变材质，调整第二边缘区域的像素点对应的透明度的值，使调整后的第二边缘区域具有透明度渐变效果。

在编辑器中封装了spine转rt的模块，该模块可以表示为CSpine2ImageRTLayout。实际实现时，预先制作了边缘渐变的后处理材质ui_spine_alpha_rt，即上述渐变材质，通过游戏引擎预设的渲染接口(比如GLProgram)可以将渐变材质应用到第一动态图像上，然后对渲染到上面的动态图像进行处理，通过渐变材质，根据第二边缘区域的像素点的位置信息调整该像素点对应的透明度的值，使调整后的第二边缘区域具有透明度渐变效果。其中，GLProgram：是封装了一套和底层渲染接口(D3D或OpenGL)交互的逻辑，可以从着色器shader层面修改渲染逻辑，方便游戏中将各种特效效果定制到界面控件上。上述方式中，通过为第一动态图像赋予渐变材质，实现第二边缘区域的渐变效果，操作方式简单，同时提高了第二边缘区域的渐变效果。

为了进一步提高第二边缘区域的效果，上述步骤223，通过渐变材质，调整第二边缘区域的像素点对应的透明度的值的步骤，一种可能的实施方式：通过渐变材质的着色器，采样第二边缘区域的目标像素点的UV坐标；根据目标像素点的UV坐标，确定目标像素点与第二边缘区域的边缘像素点的距离值；根据距离值和预设的控制参数，确定目标像素点对应的透明度的目标值；将第二边缘区域的目标像素点对应的透明度的值，调整为目标值。

在渐变材质的着色器中，预先设置渐变调整规则，具体的，如果第二边缘区域为顶部边缘区域，采样第二边缘区域的每个像素点的UV坐标，针对每个像素点，根据该像素点的UV坐标，确定该像素点与第二边缘区域的顶部位置像素点的距离值。上述预设的控制参数可以是不同距离值对应的透明度的值，具体的对应关系为距离值越小，对应的透明度的值越大，距离值越大对应的透明度的值越小。当然，上述预设的控制参数中，通常距离值的大小需要根据第二边缘区域的范围值确定，当距离值为0时，对应的透明度的值最大为1，当距离值为第二边缘区域的最大范围值时，对应的透明度的值最小为0。可以理解的是，上述距离值与透明度的值可以根据一次函数y＝-ax+1的方式确定，其中x为距离值，y为透明度的值，随着距离值增大或者减少，透明度逐渐减小或者增大。

比如，如果该像素点与第二边缘区域的顶部位置像素点的距离值最小为0，则对应的该像素点的透明度的值为1，如果该像素点与第二边缘区域的顶部位置像素点的距离值最大为1，则对应的该像素点的透明度的值为0，如果该像素点与第二边缘区域的顶部位置像素点的距离值为0.1，则对应的该像素点的透明度的值为0.9等。

上述方式中，通过渐变材质的着色器，基于像素点与第二边缘区域的边缘像素点的距离值，调整像素点的透明度值，进一步提高了第二边缘区域的渐变效果。

在某些特殊情况下(比如一些低配置的设备)中使用这些资源的时候，如果是加载和显示编辑器保存的动态图像消耗可能会较大，基于此，上述图形用户界面还包括静态控件和图片保存控件；如图11所示，上述静态控件对应图11中的“静态spine”，上述图片保存控件对应图11中的“保存图片”。响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，上述方法还包括：

响应针对于静态控件的触发操作，创建第二渲染纹理，将目标动态图像的初始帧渲染至第二渲染纹理，得到目标第二渲染纹理；将目标第二渲染纹理确定为初始帧图片；响应针对于图片保存控件的触发操作，保存初始帧图片。

本实施例中，编辑器同时还提供了将动态图像保存成静态图像的功能，具体的，编辑人员可以点击“静态spine”的选择框，首先创建第二渲染纹理，可以表示为rendertexture，然后将目标动态图像的初始帧渲染至第二渲染纹理，得到目标第二渲染纹理；将目标第二渲染纹理确定为初始帧图片，并在图形用户界面显示，最后，编辑人员可以点击保存图片，即可将初始帧图片输出到指定的配置文件中。该方式中，可以通过创建第二渲染纹理，保存目标动态图像的静态图像，静态图像资源占用的资源较少，在低配置的设备中能够使用静态图像，减少了设备的运行压力。

上述图形用户界面还包括多个游戏背景显示控件；如图11所示，上述游戏背景显示控件对应图11中“1”到“10”。上述方法还包括：响应于多个游戏背景显示控件中第一游戏背景显示控件的触发操作，在图形用户界面的背景区域显示第一游戏背景显示控件对应的第一游戏背景的画面。

如图11所示的10个游戏背景显示控件，每个游戏背景显示控件对应有一种游戏场景画面。实际实现时，在对第一动态图像进行编辑的过程中，或者在为加载第一目标资源之前都可以点击游戏背景显示控件，显示想要预览的游戏背景的画面，使加载资源后显示的动态图像更直观的相融于游戏场景之中，达到实时预览最终画面的效果。

上述图形用户界面还包括镜像控件；如图11所示，上述镜像控件对应图11中的“左右镜像”响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像的步骤之后，上述方法还包括：响应针对于镜像控件的触发操作，翻转第一动态图像，得到第一动态图像的镜像图像；显示第一动态图像的镜像图像。

编辑人员可以根据实际需要选择是否进行翻转操作，进而保存镜像图像。实际实现时，如果编辑人员想要查看第一动态图像的翻转图像，可以点击“左右镜像”，即可翻转第一动态图像，同时显示第一动态图像的镜像图像。换句话说说，就是翻转渲染后的第一渲染纹理。其中的镜像功能通常运用于剧情编辑器对话使用。该方式中，支持动态角色左右镜像动画，可以对第一动态图像进行翻转显示镜像图像，进一步丰富了编辑功能。

为了模拟并预览目标动态图像在游戏场景内的表现和显示效果。如图11所示，上述图形用户界面还包括预览控件；上述方法还包括：

(1)响应针对于预览控件的触发操作，在图形用户界面显示游戏界面；其中，游戏界面包括资源加载控件和游戏场景画面；

编辑人员可以点击预览控件，然后在图形用户界面的上方显示游戏界面，如图12所示，其中包括资源加载控件和背景显示的游戏场景画面。其中，资源加载控件包括动态图像编号的输入控件，和加载控件。对应图12中的“图像ID”和“加载”。

(2)响应针对于资源加载控件的第四操作，加载第四操作对应的第二目标资源和第二目标资源对应的音频数据，在游戏界面显示第二目标资源对应的第二动态图像；

编辑人员可以在输入控件中输入想要预览的动态图像的编号，点击加载，即可加载编号对应的第二目标资源和第二目标资源对应的音频数据。其中，第二目标资源是指已经编辑完成并保存的动画资源，上述第二目标资源对应的音频数据是预先通过AI语音生成工具生成的音频数据。具体的，编辑器可以通过预设的获取接口从AI语音生成工具加载第二目标资源对应的音频数据，并在游戏界面显示第二目标资源对应的第二动态图像。

(3)基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频。

上述第二动态图像对应的动作画面不仅包括身体部位的动画，还包括口型动画，该口型动画是预先在spine工具制作的，通常是指元音口型动画。比如，spine工具制作角色的五种元音口型动画帧，存储至第二目标资源中。具体的，在预览界面播放第二动态图像对应的动作画面和声音音频，其中的声音音频需要和口型动画对应，比如，播放声音音频时，同时也播放口型动画，停止播放声音音频时，同时也停止播放口型动画，第二动态图像的身体部位的动画一般会一直播放。同时还会同步显示播放的声音音频对应的文字

上述方式中，通过预览控件可以显示界面，在预览界面中可以模拟并预览目标动态图像在游戏场景内的表现和显示效果，进一步提高了编辑功能，同时提高了动态图像的效果。

上述步骤(3)，第二目标资源包括预先生成的多个口型动画；基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频的步骤，一种可能的实施方式：解析音频数据，得到对应的声音音频；从多个口型动画中，确定声音音频中每个目标音频对应的目标口型动画；播放第二动态图像对应的动作画面以及声音音频，同时播放每个目标音频对应的目标口型动画。

具体的，可以同过预设的AI语音分析工具，将音频数据转化为可以进行分析的声音音频，然后从多个口型动画中确定对应的语音时间线上的每一帧目标音频的目标口型动画，最后在播放的时候，能够达到最终动画表现中口型与声音同步的效果。该方式中，通过解析音频数据，确定声音音频中每个目标音频对应的目标口型动画，不仅实现了实时预览动态图像在游戏场景中动态表现效果，还实现了语音与动作的同步的讲话效果。

为了节省资源开发的工作量，减少保存的动态资源的总包体量，上述如图11所示，图形用户界面还包括对比控件；上述方法还包括：

(1)响应针对于对比控件的触发操作，在图形用户界面显示对比界面；其中，对比界面包括多个资源输入控件、每个资源输入控件具有对应的图像显示区域和加载控件；资源输入控件用于输入目标资源的资源编号；

编辑人员点击对比控件，然后在在图形用户界面显示对比界面；如图13所示，包括多个资源输入控件(如图13中显示的8个资源输入控件)其中包括编号输入框，在每个资源输入控件的上方显示有对应的图像显示区域，用于显示编号对应的动态图像。另外，在图13中还包括加载控件。

(2)响应针对于目标资源输入控件对应的加载控件的触发操作，加载目标资源输入控件显示的资源编号对应的第三目标资源；

(3)在目标资源输入控件对应的图像显示区域显示第三目标源对应的第三动态图像。

编辑人员可以在每个资源输入控件输入想要对比的第三目标资源的资源编号，如果想要对比8个，则可以在每个资源输入控件中输入资源编号，在输入完成后点击加载，即可加载资源编号对应的第三目标资源，并将第三目标资源中的目标动态图像显示在图像显示区域，如图13所示。该方式中，通过同时显示多个目标动态图像的方式，可以对比多个目标动态图像的大小和显示效果，进而方便编辑人员进行规格的统一，使每个显示的目标动态图像具有统一的显示和风格效果，同时通过统一的对比方式进行编辑，进一步提高了开发效率，同时通过对比的方式进行后续的统一规格也减少了资源的总包体量。

上述对比界面还包括多个选择控件；每个选择控件对应一个图像尺寸；如图13所示，上述选择控件包括三个，分别为“头像”、“半身像”、“全身像”。上述方法还包括：响应针对于多个选择控件中的第一选择控件的触发操作，在图像显示区域显示第一选择控件对应的第一图像尺寸的第三动态图像。

具体的，可以在加载每个目标动态图像之前，点击多个选择控件中的第一选择控件，然后显示的第三动态图像的尺寸大小即为第一选择控件对应的尺寸，比如点击半身像，则显示的第三动态图像都为半身像。当然，可以在加载每个第三动态图像之后，点击多个选择控件中的第一选择控件，可以统一显示的第三动态图像的图像尺寸，比如点击半身像，可以统一显示的第三动态图像为半身像。该方式中，通过选择控件可以统一显示的第三动态图像的图像尺寸，进一步提高了编辑效率和对比效率，同时提高了开发效率。

如图13所示，上述对比界面还包括参考线控件；上述方法还包括：响应针对于参考线控件的触发操作，在对比界面显示参考线控件对应的参考线。

上述参考线可以方便编辑人员对比显示的每个第三动态图像的位置是否正确，能够快速对比出哪个图像的位置与其他图像不同。通过参考线直观进行直观对比，进一步提高了编辑效率和对比效率，同时提高了开发效率。

如图13所示，上述对比界面还包括静态图控件；上述方法还包括：响应针对于静态图控件的触发操作，在图像显示区域显示第三动态图像的初始帧图片。

由于静态图像也是游戏开发中的重要资源，因此在对比界面还包括静态图控件，编辑人员点击静态图控件，即可显示第三动态图像的初始帧图片，以方便编辑人员进行静态图像的对比。

对应上述的方法实施例，本发明实施例提供了一种动态图像的编辑装置，通过终端设备提供一图形用户界面，图形用户界面中包括图像编辑控件；如图14所示，该装置包括：

第一显示模块141，用于响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；

编辑模块142，用于响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。

本发明实施例提供了一种动态图像的编辑装置，响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；响应针对于图形用户界面中的图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。该方式中，基于预览界面可以直接编辑动态图像，通过渲染纹理可以实时查看编辑后的动态图像的显示效果，保存的结果可以直接应用到游戏中，避免了动态图像需要在多个软件中开发的问题，简化了游戏的开发过程，减少了人工成本和时间成本，提高了开发效率。

进一步的，上述第一显示模块还用于：加载第一目标资源；创建第一渲染纹理，将第一目标资源逐帧渲染至第一渲染纹理上，得到目标第一渲染纹理；将目标第一渲染纹理确定为第一动态图像，并将第一动态图像显示在图形用户界面的第一显示区域；其中，第一动态图像的显示优先级高于图像编辑控件；第一动态图像包括多个，每个第一动态图像的尺寸不同。

进一步的，上述图像编辑控件包括第一裁剪控件；上述编辑模块还用于：响应针对于第一裁剪控件的触发操作，将第一动态图像设置于预览界面上；其中，预览界面具有裁剪功能；根据预览界面的裁剪功能，裁剪预览界面，显示裁剪后的目标动态图像。

进一步的，上述编辑模块还用于：根据预览界面的裁剪功能，按照第一动态图像对应的裁剪尺寸，裁剪预览界面，得到裁剪区域；其中，第一动态图像包括多个，每个第一动态图像对应的裁剪尺寸不同；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像。

进一步的，上述图形用户界面还包括缩放控件；上述装置还包括第一调整模块，用于：响应针对于缩放控件的第二操作，根据缩放控件显示的缩放参数，调整第一动态图像的尺寸；基于尺寸调整后的第一动态图像，调整裁剪区域显示的动态图像。

进一步的，上述装置还包括第二调整模块，用于：响应针对于裁剪区域显示的目标动态图像的位置调整操作，控制第一动态图像移动，并显示移动后的第一动态图像的位置信息；基于移动后的第一动态图像，调整裁剪区域显示的动态图像。

进一步的，上述图像编辑控件还包括第二裁剪控件和第三裁剪控件；上述装置还包括裁剪模块，用于：响应针对于第二裁剪控件的触发操作，标识显示裁剪区域；响应针对于第三裁剪控件的触发操作，显示目标裁剪区域对应的编辑界面；其中，编辑界面包括参数编辑控件和确定控件；基于参数编辑控件和确定控件，调整裁剪区域的尺寸。

进一步的，上述裁剪模块还用于：响应针对于参数编辑控件的编辑操作，确定编辑操作对应的尺寸参数；响应针对于确定控件的触发操作，根据尺寸参数更新目标裁剪区域的尺寸，并标识显示更新后的裁剪区域。

进一步的，上述图形用户界面还包括参照框控件和隐藏参照框控件；上述装置还包括第二显示模块，用于：响应针对于参照框控件的触发操作，在裁剪区域的预设位置显示参照框控件对应的参照框；响应针对于隐藏参照框控件的触发操作，取消显示参照框。

进一步的，上述图形用户界面还包括渐变参数配置控件；上述装置还包括第三调整模块，用于：响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度。

进一步的，上述渐变参数配置控件包括多个第一渐变参数配置控件；上述第三调整模块还用于：响应针对于第一渐变参数配置控件的第一参数的选择操作，根据第一参数，确定目标动态图像的第一边缘区域；其中，第一参数用于指示第一边缘区域的方向和范围；调整第一边缘区域的透明度。

进一步的，上述渐变参数配置控件包括第二渐变参数配置控件；上述第三调整模块还用于：响应针对于第二渐变参数配置控件的第二参数的选择操作，根据第二参数，从第一边缘区域中确定第二边缘区域；其中，第二参数用于指示第二边缘区域的范围；第二边缘区域小于或等于第一边缘区域；调整第二边缘区域的透明度；其中，距离第二边缘区域的边缘越近的区域透明度的值越高，距离第二边缘区域的边缘越远的区域透明度的值越低。

进一步的，上述第三调整模块还用于：获取预设的渐变材质；通过预设的渲染接口，将渐变材质赋予到第一动态图像上；通过渐变材质，调整第二边缘区域的像素点对应的透明度的值，使调整后的第二边缘区域具有透明度渐变效果。

进一步的，上述第三调整模块还用于：通过渐变材质的着色器，采样第二边缘区域的目标像素点的UV坐标；根据目标像素点的UV坐标，确定目标像素点与第二边缘区域的边缘像素点的距离值；根据距离值和预设的控制参数，确定目标像素点对应的透明度的目标值；将第二边缘区域的目标像素点对应的透明度的值，调整为目标值。

进一步的，上述图形用户界面还包括静态控件和图片保存控件；上述装置还包括第二保存模块，用于：响应针对于静态控件的触发操作，创建第二渲染纹理，将目标动态图像的初始帧渲染至第二渲染纹理，得到目标第二渲染纹理；将目标第二渲染纹理确定为初始帧图片；响应针对于图片保存控件的触发操作，保存初始帧图片。

进一步的，上述图形用户界面还包括多个游戏背景显示控件；上述装置还包括第三显示模块，用于：响应于多个游戏背景显示控件中第一游戏背景显示控件的触发操作，在图形用户界面的背景区域显示第一游戏背景显示控件对应的第一游戏背景的画面。

进一步的，上述图形用户界面还包括镜像控件；上述装置还包括镜像模块：响应针对于镜像控件的触发操作，翻转第一动态图像，得到第一动态图像的镜像图像；显示第一动态图像的镜像图像。

进一步的，上述图形用户界面还包括预览控件；上述装置还包括预览模块，用于：响应针对于预览控件的触发操作，在图形用户界面显示游戏界面；其中，游戏界面包括资源加载控件和游戏场景画面；响应针对于资源加载控件的第四操作，加载第四操作对应的第二目标资源和第二目标资源对应的音频数据，在游戏界面显示第二目标资源对应的第二动态图像；基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频。

进一步的，上述第二目标资源包括预先生成的多个口型动画；上述预览模块还用于：解析音频数据，得到对应的声音音频；从多个口型动画中，确定声音音频中每个目标音频对应的目标口型动画；播放第二动态图像对应的动作画面以及声音音频，同时播放每个目标音频对应的目标口型动画。

进一步的，上述图形用户界面还包括对比控件；上述装置还包括对比模块，用于：响应针对于对比控件的触发操作，在图形用户界面显示对比界面；其中，对比界面包括多个资源输入控件、每个资源输入控件具有对应的图像显示区域和加载控件；资源输入控件用于输入目标资源的资源编号；响应针对于目标资源输入控件对应的加载控件的触发操作，加载目标资源输入控件显示的资源编号对应的第三目标资源；在目标资源输入控件对应的图像显示区域显示第三目标源对应的第三动态图像。

进一步的，上述对比界面还包括多个选择控件；每个选择控件对应一个图像尺寸；上述对比模块还用于：响应针对于多个选择控件中的第一选择控件的触发操作，在图像显示区域显示第一选择控件对应的第一图像尺寸的第三动态图像。

进一步的，上述对比界面还包括参考线控件；上述对比模块还用于：响应针对于参考线控件的触发操作，在对比界面显示参考线控件对应的参考线。

进一步的，上述对比界面还包括静态图控件；上述对比模块还用于：响应针对于静态图控件的触发操作，在图像显示区域显示第三动态图像的初始帧图片。

进一步的，上述装置还包括：第一保存模块，用于响应针对于目标动态图像的保存操作，将目标动态图像对应的数据信息转换为目标代码，将目标代码保存至预设的配置文件中

本发明实施例提供的动态图像的编辑装置，与上述实施例提供的动态图像的编辑方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

本实施例还提供一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现上述动态图像的编辑方法。该电子设备可以是服务器，也可以是终端设备。

参见图15所示，该电子设备包括处理器100和存储器101，该存储器101存储有能够被处理器100执行的计算机可执行指令，该处理器100执行计算机可执行指令以实现上述动态图像的编辑方法，具体实现如下方法：

响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像。

上述基于第一渲染纹理，在图形用户界面渲染并显示第一目标资源对应的第一动态图像的步骤，包括：加载第一目标资源；创建第一渲染纹理，将第一目标资源逐帧渲染至第一渲染纹理上，得到目标第一渲染纹理；将目标第一渲染纹理确定为第一动态图像，并将第一动态图像显示在图形用户界面的第一显示区域；其中，第一动态图像的显示优先级高于图像编辑控件；第一动态图像包括多个，每个第一动态图像的尺寸不同。

上述图像编辑控件包括第一裁剪控件；上述响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤，包括：响应针对于第一裁剪控件的触发操作，将第一动态图像设置于预览界面上；其中，预览界面具有裁剪功能；根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像。

上述根据预览界面的裁剪功能，裁剪预览界面，在预览界面上显示裁剪后的目标动态图像的步骤，包括：根据预览界面的裁剪功能，按照第一动态图像对应的裁剪尺寸，裁剪预览界面，得到裁剪区域；其中，第一动态图像包括多个，每个第一动态图像对应的裁剪尺寸不同；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像。

上述图形用户界面还包括缩放控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于缩放控件的第二操作，根据缩放控件显示的缩放参数，调整第一动态图像的尺寸；基于尺寸调整后的第一动态图像，调整裁剪区域显示的动态图像。

将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于裁剪区域显示的目标动态图像的位置调整操作，控制第一动态图像移动，并显示移动后的第一动态图像的位置信息；基于移动后的第一动态图像，调整裁剪区域显示的动态图像。

上述图像编辑控件还包括第二裁剪控件和第三裁剪控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于第二裁剪控件的触发操作，标识显示裁剪区域；响应针对于第三裁剪控件的触发操作，显示目标裁剪区域对应的编辑界面；其中，编辑界面包括参数编辑控件和确定控件；基于参数编辑控件和确定控件，调整裁剪区域的尺寸。

上述基于参数编辑控件和确定控件，调整裁剪区域的尺寸的步骤，包括：响应针对于参数编辑控件的编辑操作，确定编辑操作对应的尺寸参数；响应针对于确定控件的触发操作，根据尺寸参数更新目标裁剪区域的尺寸，并标识显示更新后的裁剪区域。

上述图形用户界面还包括参照框控件和隐藏参照框控件；将裁剪区域内的动态图像确定为目标动态图像，并在裁剪区域显示目标动态图像的步骤之后，上述方法还包括：响应针对于参照框控件的触发操作，在裁剪区域的预设位置显示参照框控件对应的参照框；响应针对于隐藏参照框控件的触发操作，取消显示参照框。

上述图形用户界面还包括渐变参数配置控件；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，上述方法还包括：响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度。

上述渐变参数配置控件包括多个第一渐变参数配置控件；上述响应针对于渐变参数配置控件的第三操作，调整目标动态图像的边缘区域的透明度的步骤，包括：响应针对于第一渐变参数配置控件的第一参数的选择操作，根据第一参数，确定目标动态图像的第一边缘区域；其中，第一参数用于指示第一边缘区域的方向和范围；调整第一边缘区域的透明度。

上述渐变参数配置控件包括第二渐变参数配置控件；上述调整第一边缘区域的透明度的步骤，包括：响应针对于第二渐变参数配置控件的第二参数的选择操作，根据第二参数，从第一边缘区域中确定第二边缘区域；其中，第二参数用于指示第二边缘区域的范围；第二边缘区域小于或等于第一边缘区域；调整第二边缘区域的透明度；其中，距离第二边缘区域的边缘越近的区域透明度的值越高，距离第二边缘区域的边缘越远的区域透明度的值越低。

上述调整第二边缘区域的透明度的步骤，包括：获取预设的渐变材质；通过预设的渲染接口，将渐变材质赋予到第一动态图像上；通过渐变材质，调整第二边缘区域的像素点对应的透明度的值，使调整后的第二边缘区域具有透明度渐变效果。

上述通过渐变材质，调整第二边缘区域的像素点对应的透明度的值的步骤，包括：通过渐变材质的着色器，采样第二边缘区域的目标像素点的UV坐标；根据目标像素点的UV坐标，确定目标像素点与第二边缘区域的边缘像素点的距离值；根据距离值和预设的控制参数，确定目标像素点对应的透明度的目标值；将第二边缘区域的目标像素点对应的透明度的值，调整为目标值。

上述图形用户界面还包括静态控件和图片保存控件；响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，上述方法还包括：响应针对于静态控件的触发操作，创建第二渲染纹理，将目标动态图像的初始帧渲染至第二渲染纹理，得到目标第二渲染纹理；将目标第二渲染纹理确定为初始帧图片；响应针对于图片保存控件的触发操作，保存初始帧图片。

上述图形用户界面还包括多个游戏背景显示控件；上述方法还包括：响应于多个游戏背景显示控件中第一游戏背景显示控件的触发操作，在图形用户界面的背景区域显示第一游戏背景显示控件对应的第一游戏背景的画面。

上述图形用户界面还包括镜像控件；响应针对于第一目标资源的加载操作，基于第一渲染纹理，在图形用户界面中渲染并显示第一目标资源对应的第一动态图像的步骤之后，上述方法还包括：响应针对于镜像控件的触发操作，翻转第一动态图像，得到第一动态图像的镜像图像；显示第一动态图像的镜像图像。

上述图形用户界面还包括预览控件；上述方法还包括：响应针对于预览控件的触发操作，在图形用户界面显示游戏界面；其中，游戏界面包括资源加载控件和游戏场景画面；响应针对于资源加载控件的第四操作，加载第四操作对应的第二目标资源和第二目标资源对应的音频数据，在游戏界面显示第二目标资源对应的第二动态图像；基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频。

上述第二目标资源包括预先生成的多个口型动画；上述基于第二目标资源和音频数据，播放第二动态图像对应的动作画面和声音音频的步骤，包括：解析音频数据，得到对应的声音音频；从多个口型动画中，确定声音音频中每个目标音频对应的目标口型动画；播放第二动态图像对应的动作画面以及声音音频，同时播放每个目标音频对应的目标口型动画。

上述图形用户界面还包括对比控件；上述方法还包括：响应针对于对比控件的触发操作，在图形用户界面显示对比界面；其中，对比界面包括多个资源输入控件、每个资源输入控件具有对应的图像显示区域和加载控件；资源输入控件用于输入目标资源的资源编号；响应针对于目标资源输入控件对应的加载控件的触发操作，加载目标资源输入控件显示的资源编号对应的第三目标资源；在目标资源输入控件对应的图像显示区域显示第三目标源对应的第三动态图像。

上述对比界面还包括多个选择控件；每个选择控件对应一个图像尺寸；上述方法还包括：响应针对于多个选择控件中的第一选择控件的触发操作，在图像显示区域显示第一选择控件对应的第一图像尺寸的第三动态图像。

上述对比界面还包括参考线控件；上述方法还包括：响应针对于参考线控件的触发操作，在对比界面显示参考线控件对应的参考线。

上述对比界面还包括静态图控件；上述方法还包括：响应针对于静态图控件的触发操作，在图像显示区域显示第三动态图像的初始帧图片。

上述响应针对于图像编辑控件的第一操作，在预览界面上显示编辑后的目标动态图像的步骤之后，上述方法还包括：响应针对于目标动态图像的保存操作，将目标动态图像对应的数据信息转换为目标代码，将目标代码保存至预设的配置文件中。

进一步地，图15所示的电子设备还包括总线102和通信接口103，处理器100、通信接口103和存储器101通过总线102连接。

其中，存储器101可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口103(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线102可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图15中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器100可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器100中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器100可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processor，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器101，处理器100读取存储器101中的信息，结合其硬件完成前述实施例的方法的步骤。

本实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，计算机可执行指令在被处理器调用和执行时，计算机可执行指令促使处理器实现上述动态图像的编辑方法，具体实现如下方法：

本发明实施例所提供的动态图像的编辑方法、装置、电子设备以及系统的计算机程序产品，包括存储了程序代码的计算机可读存储介质，程序代码包括的指令可用于执行前面方法实施例中的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims

1.一种动态图像的编辑方法，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面中包括图像编辑控件和预览界面；所述方法包括：

响应针对于第一目标资源的加载操作，基于第一渲染纹理，在所述图形用户界面中渲染并显示所述第一目标资源对应的第一动态图像；

响应针对于所述图像编辑控件的第一操作，在所述预览界面上显示编辑后的目标动态图像。

2.根据权利要求1所述的方法，其特征在于，基于第一渲染纹理，在所述图形用户界面渲染并显示所述第一目标资源对应的第一动态图像的步骤，包括：

加载所述第一目标资源；

创建所述第一渲染纹理，将所述第一目标资源逐帧渲染至所述第一渲染纹理上，得到目标第一渲染纹理；

将所述目标第一渲染纹理确定为所述第一动态图像，并将所述第一动态图像显示在所述图形用户界面的第一显示区域；其中，所述第一动态图像的显示优先级高于所述图像编辑控件；所述第一动态图像包括多个，每个所述第一动态图像的尺寸不同。

3.根据权利要求1所述的方法，其特征在于，所述图像编辑控件包括第一裁剪控件；

响应针对于所述图像编辑控件的第一操作，在所述预览界面上显示编辑后的目标动态图像的步骤，包括：

响应针对于所述第一裁剪控件的触发操作，将所述第一动态图像设置于所述预览界面上；其中，所述预览界面具有裁剪功能；

根据所述预览界面的裁剪功能，裁剪所述预览界面，在所述预览界面上显示裁剪后的所述目标动态图像。

4.根据权利要求3所述的方法，其特征在于，根据所述预览界面的裁剪功能，裁剪所述预览界面，在所述预览界面上显示裁剪后的所述目标动态图像的步骤，包括：

根据所述预览界面的裁剪功能，按照所述第一动态图像对应的裁剪尺寸，裁剪所述预览界面，得到裁剪区域；其中，所述第一动态图像包括多个，每个所述第一动态图像对应的裁剪尺寸不同；

将所述裁剪区域内的动态图像确定为所述目标动态图像，并在所述裁剪区域显示所述目标动态图像。

5.根据权利要求4所述的方法，其特征在于，所述图形用户界面还包括缩放控件；

将所述裁剪区域内的动态图像确定为所述目标动态图像，并在所述裁剪区域显示所述目标动态图像的步骤之后，所述方法还包括：

响应针对于所述缩放控件的第二操作，根据所述缩放控件显示的缩放参数，调整所述第一动态图像的尺寸；

基于尺寸调整后的所述第一动态图像，调整所述裁剪区域显示的动态图像。

6.根据权利要求4所述的方法，其特征在于，将所述裁剪区域内的动态图像确定为所述目标动态图像，并在所述裁剪区域显示所述目标动态图像的步骤之后，所述方法还包括：

响应针对于所述裁剪区域显示的目标动态图像的位置调整操作，控制所述第一动态图像移动，并显示移动后的所述第一动态图像的位置信息；

基于移动后的所述第一动态图像，调整所述裁剪区域显示的动态图像。

7.根据权利要求4所述的方法，其特征在于，所述图像编辑控件还包括第二裁剪控件和第三裁剪控件；

响应针对于所述第二裁剪控件的触发操作，标识显示所述裁剪区域；

响应针对于所述第三裁剪控件的触发操作，显示目标裁剪区域对应的编辑界面；其中，所述编辑界面包括参数编辑控件和确定控件；

基于所述参数编辑控件和确定控件，调整所述裁剪区域的尺寸。

8.根据权利要求7所述的方法，其特征在于，基于所述参数编辑控件和确定控件，调整所述裁剪区域的尺寸的步骤，包括：

响应针对于所述参数编辑控件的编辑操作，确定所述编辑操作对应的尺寸参数；

响应针对于所述确定控件的触发操作，根据所述尺寸参数更新所述目标裁剪区域的尺寸，并标识显示更新后的所述裁剪区域。

9.根据权利要求4所述的方法，其特征在于，所述图形用户界面还包括参照框控件和隐藏参照框控件；

响应针对于所述参照框控件的触发操作，在所述裁剪区域的预设位置显示所述参照框控件对应的参照框；

响应针对于所述隐藏参照框控件的触发操作，取消显示所述参照框。

10.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括渐变参数配置控件；

响应针对于所述图像编辑控件的第一操作，在所述预览界面上显示编辑后的目标动态图像的步骤之后，所述方法还包括：

响应针对于所述渐变参数配置控件的第三操作，调整所述目标动态图像的边缘区域的透明度。

11.根据权利要求10所述的方法，其特征在于，所述渐变参数配置控件包括多个第一渐变参数配置控件；

响应针对于所述渐变参数配置控件的第三操作，调整所述目标动态图像的边缘区域的透明度的步骤，包括：

响应针对于所述第一渐变参数配置控件的第一参数的选择操作，根据所述第一参数，确定所述目标动态图像的第一边缘区域；其中，所述第一参数用于指示所述第一边缘区域的方向和范围；

调整所述第一边缘区域的透明度。

12.根据权利要求11所述的方法，其特征在于，所述渐变参数配置控件包括第二渐变参数配置控件；

调整所述第一边缘区域的透明度的步骤，包括：

响应针对于所述第二渐变参数配置控件的第二参数的选择操作，根据所述第二参数，从所述第一边缘区域中确定第二边缘区域；其中，所述第二参数用于指示所述第二边缘区域的范围；所述第二边缘区域小于或等于所述第一边缘区域；

调整所述第二边缘区域的透明度；其中，距离所述第二边缘区域的边缘越近的区域透明度的值越高，距离所述第二边缘区域的边缘越远的区域透明度的值越低。

13.根据权利要求12所述的方法，其特征在于，调整所述第二边缘区域的透明度的步骤，包括：

获取预设的渐变材质；

通过预设的渲染接口，将所述渐变材质赋予到所述第一动态图像上；

通过所述渐变材质，调整所述第二边缘区域的像素点对应的透明度的值，使调整后的所述第二边缘区域具有透明度渐变效果。

14.根据权利要求13的方法，其特征在于，通过所述渐变材质，调整所述第二边缘区域的像素点对应的透明度的值的步骤，包括：

通过所述渐变材质的着色器，采样所述第二边缘区域的目标像素点的UV坐标；

根据所述目标像素点的UV坐标，确定所述目标像素点与所述第二边缘区域的边缘像素点的距离值；

根据所述距离值和预设的控制参数，确定所述目标像素点对应的透明度的目标值；

将所述第二边缘区域的目标像素点对应的透明度的值，调整为所述目标值。

15.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括静态控件和图片保存控件；

响应针对于所述静态控件的触发操作，创建第二渲染纹理，将所述目标动态图像的初始帧渲染至所述第二渲染纹理，得到目标第二渲染纹理；

将所述目标第二渲染纹理确定为初始帧图片；

响应针对于所述图片保存控件的触发操作，保存所述初始帧图片。

16.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括多个游戏背景显示控件；所述方法还包括：

响应于所述多个游戏背景显示控件中第一游戏背景显示控件的触发操作，在所述图形用户界面的背景区域显示所述第一游戏背景显示控件对应的第一游戏背景的画面。

17.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括镜像控件；

响应针对于第一目标资源的加载操作，基于第一渲染纹理，在所述图形用户界面中渲染并显示所述第一目标资源对应的第一动态图像的步骤之后，所述方法还包括：

响应针对于所述镜像控件的触发操作，翻转所述第一动态图像，得到所述第一动态图像的镜像图像；

显示所述第一动态图像的镜像图像。

18.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括预览控件；所述方法还包括：

响应针对于所述预览控件的触发操作，在所述图形用户界面显示游戏界面；其中，所述游戏界面包括资源加载控件和游戏场景画面；

响应针对于所述资源加载控件的第四操作，加载所述第四操作对应的第二目标资源和所述第二目标资源对应的音频数据，在所述游戏界面显示所述第二目标资源对应的第二动态图像；

基于所述第二目标资源和所述音频数据，播放所述第二动态图像对应的动作画面和声音音频。

19.根据权利要求18所述的方法，其特征在于，所述第二目标资源包括预先生成的多个口型动画；

基于所述第二目标资源和所述音频数据，播放所述第二动态图像对应的动作画面和声音音频的步骤，包括：

解析所述音频数据，得到对应的声音音频；

从所述多个口型动画中，确定所述声音音频中每个目标音频对应的目标口型动画；

播放所述第二动态图像对应的动作画面以及所述声音音频，同时播放每个所述目标音频对应的目标口型动画。

20.根据权利要求1所述的方法，其特征在于，所述图形用户界面还包括对比控件；所述方法还包括：

响应针对于所述对比控件的触发操作，在所述图形用户界面显示对比界面；其中，所述对比界面包括多个资源输入控件、每个所述资源输入控件具有对应的图像显示区域和加载控件；所述资源输入控件用于输入目标资源的资源编号；

响应针对于目标资源输入控件对应的加载控件的触发操作，加载所述目标资源输入控件显示的资源编号对应的第三目标资源；

在所述目标资源输入控件对应的图像显示区域显示所述第三目标源对应的第三动态图像。

21.根据权利要求20所述的方法，其特征在于，所述对比界面还包括多个选择控件；每个选择控件对应一个图像尺寸；所述方法还包括：

响应针对于所述多个选择控件中的第一选择控件的触发操作，在所述图像显示区域显示所述第一选择控件对应的第一图像尺寸的第三动态图像。

22.根据权利要求20所述的方法，其特征在于，所述对比界面还包括参考线控件；所述方法还包括：

响应针对于所述参考线控件的触发操作，在所述对比界面显示所述参考线控件对应的参考线。

23.根据权利要求20所述的方法，其特征在于，所述对比界面还包括静态图控件；所述方法还包括：

响应针对于所述静态图控件的触发操作，在所述图像显示区域显示所述第三动态图像的初始帧图片。

24.根据权利要求1所述的方法，其特征在于，响应针对于所述图像编辑控件的第一操作，在所述预览界面上显示编辑后的目标动态图像的步骤之后，所述方法还包括：

响应针对于所述目标动态图像的保存操作，将所述目标动态图像对应的数据信息转换为目标代码，将所述目标代码保存至预设的配置文件中。

25.一种动态图像的编辑装置，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面中包括图像编辑控件；所述装置包括：

第一显示模块，用于响应针对于第一目标资源的加载操作，基于第一渲染纹理，在所述图形用户界面中渲染并显示所述第一目标资源对应的第一动态图像；

编辑模块，用于响应针对于所述图像编辑控件的第一操作，基于预览界面，编辑所述第一动态图像，显示编辑后的目标动态图像。

26.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机可执行指令，所述处理器执行所述计算机可执行指令以实现权利要求1-24任一项所述的动态图像的编辑方法。

27.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在被处理器调用和执行时，所述计算机可执行指令促使所述处理器实现权利要求1-24任一项所述的动态图像的编辑方法。