一种动画文件的生成方法和渲染系统与流程

本发明涉及网页游戏技术领域，尤其涉及一种动画文件的生成方法和渲染系统。

背景技术：

网页游戏又称web游戏，无端网游，简称页游。是基于web浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题；并且，web游戏实现了各种丰富多彩的动画效果，得到了大众的喜爱。

其中，动画效果是由动画文件来实现的，通常一个web游戏需要制作数个动画文件，然后依据游戏场景和游戏界面对这些动画文件进行组合、程序编辑等流程来完成web游戏的制作。

因此，网页游戏的重点在于动画文件的制作，现有技术中通常采用序列帧的方式进行制作，其原理是创建一个舞台场景，在舞台场景中时间轴的每一个帧上逐帧绘制不同的内容，这些内容通常需要通过如ps工具或手绘的方式生成，然后逐帧编辑后，最终生成一个包含多个帧的动画文件，对动画文件进行渲染后，在播放时按照时间轴的顺序依次播放每一帧的内容，从而展现出动画效果。

但是，由于每一帧中的内容都是重新加载的一个全新的图片资源，因此，最终所形成的动画文件的体积通常都较大，进而导致整个web游戏的体积也很大，因此，在加载web游戏时，进入游戏的时间很长、渲染动画文件的速度很慢，不能满足用户的体验。

技术实现要素：

有鉴于此，本发明提供一种动画的生成方法和渲染系统，以解决现有技术中动画文件加载时间长，渲染速度慢的问题，其具体方案如下：

本发明公开了一种动画文件的生成方法，包括：

将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；

响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；

将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。

优选的，所述响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画数据进行编辑，生成该关键帧对应的动画数据包括：

响应用户的选定操作，选定所述舞台场景中时间轴上的关键帧；

根据用户对所述舞台场景中所述动画形象零件的位置操作，生成所述动画形象零件相对应的的位置数据；

和/或根据用户对所述舞台场景中所述动画形象零件的缩放操作，生成所述动画形象零件相对应的的缩放数据；

和/或根据用户对所述舞台场景中所述动画形象零件的旋转操作，生成所述动画形象零件相对应的旋转数据；

将所述位置数据、缩放数据和/或旋转数据作为该关键帧的动画数据。

优选的，还包括：

根据用户对所述关键帧中的至少一个所述动画形象零件添加滤镜的操作，生成该动画形象零件对应的滤镜数据；

和/或根据用户对所述关键帧中的至少一个所述动画形象零件调节透明度的操作，生成该动画形象零件对应的透明度数据；

和/或根据用户对所述关键帧中的至少一个所述动画形象零件添加遮罩操作，生成该动画形象零件对应的遮罩数据；

所述动画数据还包括所述滤镜数据、所述透明度数据和/或所述遮罩数据。

优选的，所述生成动画文件包括：

将所述动画数据保存在png格式的图片的尾部；

生成png格式的动画图片。

优选的，还包括：

响应用户的导出操作；

将所述png格式的图片导出到预设的存储位置。

本发明另一方面公开了一种动画文件的渲染系统，包括：

导入模块，用于将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；

编辑模块，用于响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；

生成模块，用于将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。

优选的，所述编辑模块具体包括：

选定单元，用于响应用户的选定操作，选定所述舞台场景中时间轴上的关键帧；

编辑单元，用于根据用户对所述舞台场景中所述动画形象零件的位置操作，生成所述动画形象零件相对应的的位置数据；

和/或根据用户对所述舞台场景中所述动画形象零件的缩放操作，生成所述动画形象零件相对应的的缩放数据；

和/或根据用户对所述舞台场景中所述动画形象零件的旋转操作，生成所述动画形象零件相对应的旋转数据；

动画数据生成单元，用于将所述位置数据、缩放数据和/或旋转数据作为该关键帧的动画数据。

优选的，所述编辑模块还包括：

滤镜添加模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件添加滤镜的操作，生成该动画形象零件对应的滤镜数据；

和/或透明度调节模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件调节透明度的操作，生成该动画形象零件对应的透明度数据；

和/或遮罩添加模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件添加遮罩操作，生成该动画形象零件对应的遮罩数据；

所述动画数据生成单元还用于将所述滤镜数据、所述透明度数据和/或所述遮罩数据作为该关键帧的动画数据。

优选的，所述生生成模块具体包括：

整合单元，用于将所述动画数据保存在png格式的图片的尾部；

动画图片生成单元，用于生成png格式的动画图片。

优选的，还包括：

导出模块，用于响应用户的导出操作；

将所述png格式的图片导出到预设的存储位置。

从上述技术方案可以看出，本发明公开了一种动画文件的生成方法和渲染系统，所述方法将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。由于每一动画帧中所使用的都是同一个动画形象，在播放时仅改变每一帧中动画形象零件的状态和位置就可以展现出动画效果，不用每一帧都重新绘制不同的图像，使得动画文件所占用的空间较小，从而减少了加载时间，提高了渲染速度，进而提高了用户体验。

附图说明

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

图1为本发明实施例公开的一种动画的生成方法的流程示意图；

图2为本发明实施例公开的一种动画的生成方法的另一种流程示意图；

图3为本发明实施例中一种动画文件的生成方法所使用的高性能渲染编辑器的框架示意图；

图4为本发明实施例公开的一种动画的渲染系统的结构示意图。

具体实施方式

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

本发明主要应用到web游戏中的2d游戏，现有的动画文件生成方式中，最后产生的通常是swf(shockwaveflash)格式的动画文件，此种格式的文件通常占用较大空间，在加载过程中需要的时间会很长，且渲染的速度也很慢，对系统的gpu要求较高。

因此，本发明的主要思路在于，使用动画部件作为最小单位，在制作过程中，仅调用动画部件，在每一帧中加入动画部件的运动数据，导出png格式的动画文件。这样，导出的动画文件可以减小十倍以上，减少加载时间，提高渲染速度。

下面详细对本发明实施例进行详细介绍。

本发明公开了一种动画的生成方法，其流程如图1所示，包括：

s101、将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；

本发明实施例中，首先需要将动画形象零件导入到预先创建的舞台场景中。其中，动画形象零件为用户预先绘制的动画形象的零件，动画形象是指一个完整的动画形象，例如一个人、云朵、花瓣等。而动画形象零件是指将一个完整的动画进行拆分后得到的多个部件，例如将一个人拆分成头、手、躯干、腿、脚等。可以理解为，一个动画资源的多个资源碎片。

本发明实施例中，以部件作为最小单位，可以很容易的实现对网页游戏中人物的换装。

其中，舞台场景中包括有时间轴，时间轴属于现有技术中制作动画的成熟技术，在此不进行赘述。

其中，预先创建舞台场景的过程包括，响应用户的创建舞台场景操作，创建用于编辑和展示动画的舞台场景。

s102、响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；

本发明实施例中，在将多个动画形象零件导入到舞台场景后，用户会对任意一个关键帧中动画形象零件的位置和状态进行编辑操作。

此时，响应用户的编辑操作，对用户所编辑的动画形象零件的动画参数进行编辑。其中，动画参数包括所述动画形象零件在所述舞台场景的位置和状态。

需要说明的是，在步骤s102中，包括对导入的动画形象零件进行命名过程。使得后续对动画形象零件所绑定的运动触发脚本可以正常运行，且方便用户的调用。

实际使用中，当用户对所述动画形象零件的位置和状态进行编辑后，会自动生成与用户所编辑的动画形象零件相对应的动画数据，动画数据中包括动画参数。其中，动画参数可以手动进行修改，例如调整动画形象零件的位置、缩放、旋转等参数。

需要说明的是，还可以包括对动画形象零件进行绑定运动触发脚本。该运动触发脚本用于指示动画形象零件执行复杂动作。

s103、将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。

当时间轴中每一个关键帧中都对应设置了动画形象零件以及对应的动画数据后，将整个时间轴中的动画形象零件在每一关键帧所对应的动画数据进行整合，生成动画文件。

其中，所述生成动画文件包括：

将所述动画数据保存在png格式的图片的尾部；

生成png格式的动画图片。

由于png格式的动画图片可以直接被网页的flash引擎所渲染，因此，可以直接应用到网页游戏中，而不用在进行其它格式的转换。

可以理解的是，还可以生成其它格式例如plist格式的动画文件，但是，这种动画文件不能被网页的flash引擎直接渲染，还需要进行格式转换。

可选的，在生成动画文件之后，还可以包括：

响应用户的导出操作；

将所述png格式的图片导出到预设的存储位置。

可以理解的是，还包括检测所述png格式的图片是否超过1048*1048的分辨率,若超过则发出提示信息，以便于告知用户所导出的图片格式不能直接被网页游戏所使用。

从上述技术方案可以看出，本发明公开了一种动画文件的生成方法，将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。由于每一动画帧中所使用的都是同一个动画形象，在播放时仅改变每一帧中动画形象零件的状态和位置就可以展现出动画效果，不用每一帧都重新绘制不同的图像，使得动画文件所占用的空间较小，从而减少了加载时间，提高了渲染速度，进而提高了用户体验。

图2是本发明实施例公开的另外一种动画的生成方法，其流程如图2所示。

所述方法包括：

s201、将多个动画形象零件导入到预先创建的舞台场景中；

步骤s201与步骤s101相同，在此不进行赘述。

s202、响应用户的选定操作，选定所述舞台场景中时间轴上的关键帧；

本发明实施例中，用户选定所需要编辑的关键帧。响应用户的选定操作，选定所述关键帧。

s203、根据用户对所述舞台场景中所述动画形象零件的位置操作，生成所述动画形象零件对应的位置数据；

和/或根据用户对所述舞台场景中所述动画形象零件的缩放操作，生成所述动画形象零件相对应的的缩放数据；

和/或根据用户对所述舞台场景中所述动画形象零件的旋转操作，生成所述动画形象零件相对应的旋转数据；

本发明实施例中，用户针对选定的关键帧进行动画编辑。此时，用户可以对动画形象零件的位置进行移动或选定，例如，将动画形象零件放置到舞台场景中的某一特定位置。则，根据用户的移动或选定操作，对该动画形象零件的动画参数中的位置数据进行编辑，生成所述动画形象零件对应的位置数据。

相类似的，还可以据用户对所述舞台场景中所述动画形象零件的缩放操作，生成所述动画形象零件相对应的的缩放数据以及根据用户对所述舞台场景中所述动画形象零件的旋转操作，生成所述动画形象零件相对应的旋转数据。

需要说明的是，前述的位置数据、缩放数据以及缩放数据为动画形象零件的动画参数。

s204、将所述位置数据、缩放数据和/或旋转数据作为该关键帧的动画数据。

本发明实施例中，在对选定的关键帧生成了对应的位置数据、缩放数据和/或旋转数据后，将位置数据、缩放数据和/或旋转数据作为该关键帧的动画数据。

s205、将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。

步骤s205与步骤s105相同，在此不进行多余赘述。

需要说明的是，在完成对每一关键帧的编辑后，还可以对已经编辑好的关键帧按照时间轴进行播放。来查阅动画的完整性。

此时还可以包括，响应用户的播放操作，按照所述时间轴的顺序，依次根据所述时间轴上的关键帧中所包含的动画数据对所述关键帧中所调用的动画形象零件进行播放。

可选的，还包括：

根据用户对所述关键帧中的至少一个所述动画形象零件添加滤镜的操作，生成该动画形象零件对应的滤镜数据；

和/或根据用户对所述关键帧中的至少一个所述动画形象零件调节透明度的操作，生成该动画形象零件对应的透明度数据；

和/或根据用户对所述关键帧中的至少一个所述动画形象零件添加遮罩操作，生成该动画形象零件对应的遮罩数据；

所述动画数据还包括所述滤镜数据、所述透明度数据和/或所述遮罩数据。

本发明实施例中，为了增加动画中的特殊效果，例如人物手中所持有的武器添加一个发光的效果，此时，用户执行对该动画形象零件添加滤镜的操作，此时，响应用户的操作，生成该动画形象零件所对应的滤镜数据。当然，此滤镜数据也可以根据用户的编辑操作而进行修改。

添加了滤镜数据后，动画数据中还包括所述滤镜数据。

这样，动画文件被flash引擎所渲染时，就可以显示出武器发光的效果。

当然，还可以对某一个动画形象零件的透明度进行调节。例如将动画形象零件的透明度调节为百分之50或者将透明度的数值设置为90。

可以理解的是，还可以进行添加遮罩的操作，遮罩是动画效果的一种实现形式，可以实现多种多样复杂的动画效果。本发明实施例中，还可以对某动画形象零件或者直接在关键帧中添加遮罩层来实现遮罩效果。

在实际使用中，上述方法的可以依据自主研发的7road-flash骨骼动画高性能渲染编辑器来实现。

图3是本发明实施例中一种动画文件的生成方法所使用的高性能渲染编辑器的框架示意图。

其中，至少包括有舞台模块，菜单模块，d7road骨骼模块以及其它属性栏模块。上述方法可以通过上述几个模块相互配合来实现。

其中，各个模块的功能可以包括为：

1)编辑器菜单栏：文件、编辑、快捷导入、快捷导出、xml信息等；

2)骨骼动画舞台编辑模块：动画编辑舞台、时间轴、背景设置等；

3)d7road骨骼编辑模块：骨架选择、编辑当前骨架、骨骼树、编辑骨骼动画等；

4)其他属性模块：实现编辑骨骼的混合模式、滤镜、缩放等。

本发明中公开的自主研发的网页游戏7road-flash骨骼动画高性能渲染编辑器，这套编辑器主要为了解决adobeflash工具的缺陷，配合解决公司网页游戏项目的需求自主研发的骨骼动画编辑工具。

长久以来公司网页游戏项目受限于动画资源过大加载速度慢、受限于于角色换装、资源管理等等技术难题，于是投入研发经费寻求一套技术方案能彻底解决网页游戏发展过程中遇到的技术瓶颈问题。

本发明另一方面公开了一种动画文件的渲染系统。

参见图4，本发明公开的一种动画文件的渲染系统包括：

导入模块401，用于将多个动画形象零件导入到预先创建的舞台场景中；多个所述动画形象零件构成一个动画形象；

编辑模块402，用于响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；所述动画参数包括所述动画形象零件在所述舞台场景的位置和状态；

生成模块403，用于将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。

优选的，所述编辑模块具体包括：

选定单元，用于响应用户的选定操作，选定所述舞台场景中时间轴上的关键帧；

编辑单元，用于根据用户对所述舞台场景中所述动画形象零件的位置操作，生成所述动画形象零件相对应的的位置数据；

和/或根据用户对所述舞台场景中所述动画形象零件的缩放操作，生成所述动画形象零件相对应的的缩放数据；

和/或根据用户对所述舞台场景中所述动画形象零件的旋转操作，生成所述动画形象零件相对应的旋转数据；

动画数据生成单元，用于将所述位置数据、缩放数据和/或旋转数据作为该关键帧的动画数据。

优选的，所述编辑模块还包括：

滤镜添加模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件添加滤镜的操作，生成该动画形象零件对应的滤镜数据；

和/或透明度调节模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件调节透明度的操作，生成该动画形象零件对应的透明度数据；

和/或遮罩添加模块，用于根据用户对所述关键帧中的至少一个所述动画形象零件添加遮罩操作，生成该动画形象零件对应的遮罩数据；

所述动画数据生成单元还用于将所述滤镜数据、所述透明度数据和/或所述遮罩数据作为该关键帧的动画数据。

优选的，所述生生成模块具体包括：

整合单元，用于将所述动画数据保存在png格式的图片的尾部；

动画图片生成单元，用于生成png格式的动画图片。

优选的，还包括：

导出模块，用于响应用户的导出操作；

将所述png格式的图片导出到预设的存储位置。

需要说明的是，本申请实施例中的一种动画文件的生成系统可以参照上述实施例中的一种动画文件的生成方法，用于实现上述方法实施例中的全部技术方案，其各个模块的功能可以根据上述方法实施例中的方法具体实现，其具体实现过程可参照上述实施例中的相关描述，此处不再赘述。

本发明公开了一种动画文件的渲染系统，所述生成系统中导入模块将多个动画形象零件导入到预先创建的舞台场景中；编辑模块响应用户对所述动画形象零件在所述舞台场景中时间轴的任意一个关键帧的操作，对该关键帧的动画参数进行编辑，生成该关键帧对应的动画数据；生成模块将所述时间轴上每一关键帧所对应的动画形象零件以及该动画形象零件对应的动画数据进行整合，生成动画文件。由于每一动画帧中所使用的都是同一个动画形象，在播放时仅改变每一帧中动画形象零件的状态和位置就可以展现出动画效果，不用每一帧都重新绘制不同的图像，使得动画文件所占用的空间较小，从而减少了加载时间，提高了渲染速度，进而提高了用户体验。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。