CN102663795B - 基于web网页的2.5D角色动画实现方法及其系统 - Google Patents

Abstract

本发明涉及一种基于web网页的2.5D角色动画实现方法及其系统，解决了现有2.5D角色动画实现复杂、制作周期长的问题。通过角色成像创建单元利用镜像算法获得多方向上的图片文件，再通过动画单元获得相应的动作或表情变化的信息，然后经动画生成器生成为生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。本发明具有角色动画图片创建简单、角色动画实现可靠性高、可适用于各个平台的优点。

Description

基于web网页的2.5D角色动画实现方法及其系统

技术领域

本发明涉及一种计算机图形技术领域，具体的是说一种基于web网页的2.5D角色动画实现方法及其系统。

背景技术

目前创建用于动画的角色图片的方法有多种，如3D动画中可利用骨骼动画的原理实现角色图片的创建及形成动画，并且3D图片，利用3Dmax等工具，可轻松的获得多个方向上的角色图片，但不适用于2.5D或2D。2.5D及2D必需先将创建的多个肢体图片(如头、手、身体和脚等)进行组合，然后根据动画实现要求是几个方向的(如4个、6个或8个方向)，就分别画出多个方向(4个、6个或8个方向)的肢体图片，再分别进行组合，从而使得制作时间延长，制作成本居高不下。

另一方面，在网页实现角色动画最常见应用于flash平台，但是从目前网络发展来看，flash的应用逐渐受到限制，如苹果公司旗下的电脑、手机等均不支持flash平台的动画播放，而支持最近推出的htmal4a和htmal5等新的平台，为了实现支持不同播放平台，需要推出一种适用于各种播放平台的角色动画实现系统。

发明内容

本发明的目的是为了解决上述技术问题，提供一种角色动画图片创建简单、角色动画实现可靠性高、可适用于各个平台的基于web网页的2.5D角色动画实现方法。

本发明还提供一种实现上述方法的的系统，该系统具有生成角色动画简单、成本低、周期短的优点。

本发明方法包括包括以下步骤：

(1)通过基准图片创建单元创建多个肢体图片，并将上述多个肢体图片组合形成角色在某一方向上的基准图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息，

(2)通过映射生成单元为所述基准动画控制坐标信息建立一一对应的标座映射表，按照镜像算法，通过坐标映射表绘制生成所述角色某一方向上基准图片的对称图片，以此类推重复步骤(1)及(2)，获得角色在多方向上的图片文件。

(3)通过动画单元对角色某个方向上的图片进行动画处理，绘制生成动画控制信息；

(4)利用动画播放单元将上述动画控制信息输出到指定平台的屏幕缓冲区。

所述步骤(1)中基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标信息。

所述步骤(3)中，

(a)通过动画单元中的动作变化坐标单元将某个方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存；

(b)通过动画单元中的动画组合生成单元将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区。

所述步骤(3)中还包括：通过动画单元中的表情变化单元根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存；

所述初始至完成表情变化的五官图片可输入动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区。

在步骤(4)中所述动画控制信息先经动画生成器生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。

本发明系统包括角色成像创建单元、动画单元以及动画播放单元，其特征在于，所述肢体成像创建单元包括：

基准图片创建单元：创建肢体图片组合后某一方向上角色的基准图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息；

映射生成单元：为所述基准动画控制坐标信息建立一一对应的标座映射表，按照镜像算法，通过坐标映射表绘制生成所述角色某一方向上基准图片的对称图片，以此类推，获得角色对称多方向上的图片文件。

所述基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标信息。

所述动画单元包括：

动作变化坐标单元：将设定方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存；

动画组合生成单元：将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生成动画控制信息，该动画控制信息经动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。

所述动画单元还包括有表情变化单元：根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存；

所述初始至完成表情变化的五官图片可输入上述动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区。

还包括有动画生成器：将所述动画控制信息生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。所述动画生成器内包含有可支持各种平台的生成器，可以例举的有flash生成器、html5生成器以及htmal4生成器等。从而可将包含了可以执行动画的所有信息(如轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标以及映射后获得的对称图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标等信息，以及旋转或动作后的肢体部位坐标及轴心关键点坐标等信息)转换成相应平台可支持的规范的动画控制信息。

本发明充分利用了映射原理，可由角色的一个基准图片生成一个对称图片，例如需要4个方向的图片时，只需创建两个不同方向上的基准图片，通过映射生成单元自动生成各自对应的对称图片，同理，如需创建角色6个或8个方向的图片时，只需创建3个或4个方向的基准图片即可，然后映射生成各自对应的对称图片，这样可大大的减少前期图片绘制人员的工作量，降低制作成本、短缩制作周期。

创建好多个方向的图片后，针对其中某一方向形成的动作变化的动画原理如下：将该方向(设定方向)上图片的肢体部位(肢体图片)的初始坐标及轴心关键点坐标依照角色动作变化(的要求)以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，若完成该动画需要多个动作变化，则依据上述调整方向再次生成一帧或多帧新的脚体部位坐标及轴心关键点坐标，直至完成要求的角色动作过程，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标信息全部保存(可保存在动画组合生成单元或者是另行配置的储存单元中)，以供调用。

表情变化的动画原理与动作变化的相似，先形成多帧完成角色表情变化的五官图片并将该信息全部保存(可保存在动画组合生成单元或者是另行配置的储存单元中)。

上述动作变化和表情变化的动画信息通过动画生成器转换成对应平台的规范的动画控制信息后通过播放单元播放，从而实现动作变化和/或表情变化的角色动画。

本发明的优点：角色动画图片创建简单、角色动画实现可靠性高、可适用于各个平台，具有生成角色动画成本低、周期短的优点。

附图说明

图1为本发明系统的结构示意图。

具体实施方式

方法实施例：

以角色4个方向的2.5D动画为例，实现方法如下：

(1)通过基准图片创建单元创建多个肢体图片(如组成人物所需的头、手、身体、脚等，或者动画物品所需的各部件)，并将上述多个肢体图片组合形成角色在左上方向的基准图片，即形成左上方向完整角色的图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息。基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标信息。

(2)通过映射生成单元为所述基准动画控制坐标信息建立一一对应的标座映射表，按照镜像算法，通过坐标映射表绘制生成所述角色左上方向基准图片的对称图片(即右上方向的图片)；

以此类推重复步骤(1)及(2)，由左下方向的基准图映射生成右下方向的对称图片，从而获得角色在4个方向(左上、右上、左下、右下四个方向)上的图片文件；

(3)通过动画单元对角色某个方向上的图片进行动画处理，绘制生成动画控制信息，以左上方向为例，包括：

a：通过动作变化坐标单元将左上方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存，

b：通过动画组合生成单元将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生成动画控制信息，

和/或者通过表情变化单元根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存，

所述初始至完成表情变化的五官图片可输入动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息。

(4)利用动画播放单元将上述动画控制信息输出到指定平台的屏幕缓冲区实现角色在左上方向的动画播放，包括所述动画控制信息先经动画生成器生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放，所述动画生成器内包含有可支持各种平台的生成器，包括有flash生成器、html5生成器以及htmal4生成器等。

系统实施例：

所述动画系统包括角色成像创建单元、动画单元、动画生成器以及动画播放单元，所述肢体成像创建单元包括：

基准图片创建单元：创建肢体图片组合后某一方向上角色的基准图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息；

映射生成单元：为所述基准动画控制坐标信息建立一一对应的标座映射表，按照镜像算法，通过坐标映射表绘制生成所述角色某一方向上基准图片的对称图片，以此类推，获得角色对称多方向上的图片文件。

所述基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标信息。

所述动画单元包括：

动作变化坐标单元：将设定方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存；

动画组合生成单元：将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。

所述动画单元还包括有表情变化单元：根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存；

所述初始至完成表情变化的五官图片可输入上述动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息；

动画生成器：将所述动画控制信息生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。

Claims (6)

1.一种基于web网页实现2.5D角色动画的方法，其特征在于，包括以下步骤： 

(1)通过基准图片创建单元创建多个肢体图片，并将上述多个肢体图片组合形成角色在某一方向上的基准图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息； 

(2)通过映射生成单元为所述基准动画控制坐标信息建立一一对应的坐标映射表，按照镜像算法，通过坐标映射表绘制生成所述角色某一方向上基准图片的对称图片，以此类推重复步骤(1)及(2)，获得角色在多方向上的图片文件； 

(3)通过动画单元对角色某个方向上的图片进行动画处理，绘制生成动画控制信息，包括 

(a)通过动画单元中的动作变化坐标单元将某个方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存； 

(b)通过动画单元中的动画组合生成单元将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区；

(4)所述动画控制信息先经动画生成器生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。 

2.如权利要求1所述的基于web网页实现2.5D角色动画的方法，其特征在于，所述步骤(1)中基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准 图片的中心轴点坐标信息。 

3.如权利要求1所述的基于web网页实现2.5D角色动画的方法，其特征在于，所述步骤(3)中还包括：通过动画单元中的表情变化单元根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存； 

所述初始至完成表情变化的五官图片可输入动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区。 

4.一种基于web网页的2.5D角色动画实现系统，其特征在于，包括角色成像创建单元、动画单元以及动画播放单元，其特征在于，所述角色成像创建单元包括 

基准图片创建单元：创建肢体图片组合后某一方向上角色的基准图片，并将该基准图片的动画控制坐标信息作为基准动画控制坐标信息； 

映射生成单元：为所述基准动画控制坐标信息建立一一对应的坐标映射表，按照镜像算法，通过坐标映射表绘制生成所述角色某一方向上基准图片的对称图片，以此类推，获得角色对称多方向上的图片文件； 

所述动画单元包括 

动作变化坐标单元：将设定方向上图片的肢体部位的初始坐标及轴心关键点坐标依照角色动作变化以轴心旋转方向调整，生成一帧新的肢体部位坐标及轴心关键点坐标，以此类推，直至完成要求的角色动作，并将上述多个由初始至完成动作的肢体部位的坐标及轴心关键点坐标全部保存； 

动画组合生成单元：将上述由初始至完成动作的肢体部位的坐标及轴心关键点标坐的信息进行顺序组合，和或不和方向坐标关联，生 成动画控制信息，该动画控制信息经动画播放单元输出到指定平台的屏幕缓冲区进行动画播放； 

还包括有动画生成器：将所述动画控制信息生成指定平台可执行的动画信息，再经由动画播放单元输出到指定平台的屏幕缓冲区进行动画播放。 

5.如权利要求4所述的基于web网页的2.5D角色动画实现系统，其特征在于，所述基准动画控制坐标信息为基准图片上角色各肢体部位图片的轴心关键点坐标、当前坐标、以及基准图片的中心轴点坐标信息。 

6.如权利要求4所述的基于web网页的2.5D角色动画实现系统，其特征在于，所述动画单元还包括有表情变化单元：根据表情动画需要创建相应表情变化的五官图片，以此类推，直至完成要求的角色表情变化，将上述多个由初始至完成表情变化的五官图片全部保存； 

所述初始至完成表情变化的五官图片可输入上述动画组合生成单元，经其顺序组合后，和或不和方向坐标关联，生成动画控制信息，该动画控制信息可经动画播放单元输出到指定平台的屏幕缓冲区。