[发明专利]一种动画图像的遮挡显示方法

说明书

技术领域

本发明申请涉及一种动画图像遮挡显示的方法，尤其是一种基于WEB浏览器的动画图像遮挡显示方法。

技术背景

通常的网页显示图片，只能显示一张图片或显示该图片的部分区域，无法达到像素级的显示效果。因此传统网页图像遮挡显示的办法采用图片分层叠加的办法，来达到图像穿过遮挡物体时的显示效果。但是，这种显示方法造成了需要显示的图片数量多，叠加显示分层的运算较复杂，遮挡设置复杂，运行不流畅等各种弊端。

因此，对于WEB浏览器用户在浏览动画或进行网页游戏时，需要一种能够在浏览器上运行的高效、快速、简单的图像遮挡显示方法，从而满足用户的需求，并且提高网页动画设计及网页游戏设计的便捷。

发明内容

本发明即是针对目前在动画图像浏览技术中存在的上述不足之处，提供一种WEB浏览器动画图像遮挡显示的方法，旨在解决现有技术中网页不能为用户提供高效流畅的动画图像遮挡显示功能，无法满足用户对网页的动画显示的需求问题。

具体来说，本发明申请所述的一种动画图像的遮挡显示方法，其特征在于：所述的显示方法包括以下步骤：

1.将需要显示的背景图片按要求的精度分成大小统一的格子，每个格子代表图片上的一个区域，在整个背景图片上建立直角坐标系，每个点对应一个唯一的坐标(x，y)；

2.把当图像移动到该区域时需要显示为遮挡效果的背景区域标上记号，并且输出成WEB浏览器的控制脚本所能识别的数据格式；

3.计算图像所需要显示的图片区域大小，并且输出成WEB浏览器的控制脚本所能识别的数据格式；

4.WEB浏览器将背景图片显示在图像图片的底层；

5.当WEB浏览器控制脚本移动图像时，通过移动的坐标x、y加上图像由步骤2和3所产生的数据进行重叠判断，如果重叠则说明图像进入遮挡区，否则为不在遮挡区；

6.当图像进入遮挡区时，通过浏览器脚本控制图像图片显示模式为Alpha渲染，Alpha的混合度可根据背景图片上的遮挡区域来设置，产生半透明的显示效果从而达到进入被遮挡物体内部的显示效果；

7.当图像不在遮挡区域内时，通过浏览器脚本控制把图像图片显示模式设置为非Alpha渲染模式，产生正常的图像图片显示效果。

本发明申请所述的一种动画图像的遮挡显示方法，通过把显示的背景图片空间画分成大小一致的区域，把需要显示遮挡效果的区域记上标记，计算图像(包括人物或动物、风景等)移动时是否与遮挡区重叠，通过设置图片Alpha渲染和非渲染模式来达到遮挡显示的效果，从而加快了计算机处理的速度，达到了网页动画设计或网页游戏设计的便捷，解决了技术问题，满足了用户流畅的显示效果。

附图说明

图1是本发明申请所述的一种动画图像的遮挡显示方法中分割背景显示的区域示意图；

图2是本发明申请所述的一种动画图像的遮挡显示方法中进入遮挡区域的标记示意图；

图3是本发明申请所述的一种动画图像的遮挡显示方法中图像进入遮挡区域内时采用Alpha渲染模式下的显示示意图；

图4是本发明申请所述的一种动画图像的遮挡显示方法中图像未在遮挡区域内的正常显示图片的示意图。

具体实施方式

下面结合附图对本发明申请所述的一种动画图像的遮挡显示方法进行具体的描述，目的是为了公众更好的理解本发明申请所述的技术内容，而不是对所述内容的限制，事实上，在不违反本发明精神实质内做出的相应改动和替换都在本发明申请要求保护的技术方案之内。

在使用本发明申请所述的显示方法之前，已经有一张需要显示的背景图片(城楼)和一个图像(动画人物)图片，该人物图片带有透明区域，本发明申请所阐述的是当人物在穿过遮挡物体时所产生的穿透遮挡的显示效果，不包含如何显示图像动画及图像所能移动到达的区域。

本发明申请所述的一种动画图像的遮挡显示方法，具体包括如下的步骤：

1.把需要显示的背景图片(城楼)按要求的精度把图片画分成若干大小的像素(例如16×16)区域，如图1所示；

2.把背景图片中3个门通道和房屋边角上的部分区域标记为遮挡区域(图中斜线所示区域)，如图2所示，并且输出成WEB浏览器的控制脚本所能识别的x与y坐标的数组数据；

3.计算图像所需要显示的图片区域大小，如图3和4中人物周围的框(即进行Alpha渲染模式的区域)，并且输出成WEB浏览器的控制脚本所能识别的高和宽的数据；

4.WEB浏览器显示背景图片在图像图片的底层；