CN102147923A

CN102147923A - Method for displaying animated image in masking way

Info

Publication number: CN102147923A
Application number: CN 201010551687
Authority: CN
Inventors: 李新全
Original assignee: 李新全
Current assignee: SHENZHEN RUIDE NETWORK TECHNOLOGY CO., LTD.
Priority date: 2010-11-19
Filing date: 2010-11-19
Publication date: 2011-08-10
Anticipated expiration: 2030-11-19
Also published as: CN102147923B

Abstract

The invention provides a method for displaying an animated image in a masking way. The method comprises the following steps: dividing the space of a background picture to be displayed into uniform regions, marking the regions required to display a masking effect, and calculating whether an image (comprising people, animals, scenery or the like ) is overlapped with a masking region when the image moves. By setting a picture Alpha rendering and non-rendering mode to achieve the masking display effect, the method accelerates the processing procedure of the computer, facilitates web animation design or web game design, solves the technical problem, and provides a smooth displaying effect for a user.

Description

A kind of animated image block display packing

Technical field

The present patent application relates to the method that a kind of animated image blocks demonstration, and especially a kind of animated image based on the WEB browser blocks display packing.

Technical background

Common web displaying picture can only show a pictures or show the subregion of this picture, can't reach the display effect of Pixel-level.Therefore the conventional web image way of blocking demonstration adopts the way of picture layering stack, reaches image and passes display effect when blocking object.But this display packing has caused needs the picture number of demonstration many, and stack shows that the computing of layering is complicated, blocks complexity is set, and moves various drawbacks such as not smooth.

Therefore, for the WEB browser client when browsing animation or carrying out web game, need a kind of efficient, quick, simple image that can on browser, move to block display packing, thereby satisfy user's demand, and improve the convenient of web animation design and web game design.

Summary of the invention

The present invention promptly is at above shortcomings part in the animated image browser technology at present, provide a kind of WEB browser animated image to block the method for demonstration, be intended to solve that webpage can not block Presentation Function for the user provides the animated image of efficient smoothness in the prior art, can't satisfy the needs of problems of user the animation display of webpage.

Specifically, the described a kind of animated image of the present patent application block display packing, it is characterized in that: described display packing may further comprise the steps:

1. the background picture precision on request that will need to show is divided into the unified grid of size, and rectangular coordinate system is set up in a zone on each grid representative picture on whole background picture, and the corresponding unique coordinate of each point (x, y);

2. the background area that need be shown as occlusion effect when image moves to this zone is put signs on, and be output into the control script institute energy recognition data form of WEB browser;

3. the picture region size of the required demonstration of computed image, and be output into the control script institute of WEB browser can the recognition data form;

4.WEB browser is presented at background picture the bottom of image graphic;

5. when WEB browser control script moves image, add epigraph by coordinate x, the y that moves and carry out overlapping judgement by step 2 and 3 data that produced, if overlapping then key diagram looks like to enter the blocked area, otherwise for not in the blocked area;

6. when image enters the blocked area, by browser script control image graphic display mode is that Alpha plays up, the degree of mixing of Alpha can be provided with according to the occlusion area on the background picture, reaches the display effect that enters the interior of articles that is blocked thereby produce translucent display effect;

7. when image is not in occlusion area, be set to non-Alpha render mode, produce normal image graphic display effect by browser script control image graphic display mode.

The described a kind of animated image of the present patent application block display packing, by being drawn, the background picture space that shows is divided into zone of the same size, the zone note that needs is shown occlusion effect goes up mark, it is whether overlapping when computed image (comprising personage or animal, landscape etc.) is mobile with the blocked area, play up with non-render mode and reach the effect of blocking demonstration by picture Alpha is set, thereby accelerated the speed of Computer Processing, reached the convenient of web animation design or web game design, solve technical matters, satisfied the display effect of user's smoothness.

Description of drawings

Fig. 1 is that blocking of the described a kind of animated image of the present patent application cut apart the area schematic that background shows in the display packing;

Fig. 2 is blocking of the described a kind of animated image of the present patent application enters occlusion area in the display packing a mark synoptic diagram;

Fig. 3 is the demonstration synoptic diagram that adopts when image enters in the occlusion area in the display packing under the Alpha render mode that blocks of the described a kind of animated image of the present patent application;

Fig. 4 be the described a kind of animated image of the present patent application block in the display packing the not synoptic diagram that normally Shows Picture in occlusion area of image.

Embodiment

Below in conjunction with accompanying drawing the display packing of blocking of the described a kind of animated image of the present patent application is carried out concrete description; purpose is better to understand the described technology contents of the present patent application for the public; rather than to the restriction of described content; in fact, corresponding change of making in not violating spirit of the present invention and replacement are all within the claimed technical scheme of the present patent application.

Before using the described display packing of the present patent application, a background picture (gate tower) and an image (animated character) picture that needs demonstration has been arranged, this personage's picture has transparent region, the present patent application is set forth is to pass the display effect of blocking that penetrates that is produced when blocking object as the personage, and how not comprising, display image animation and image can move the zone that arrives.

The described a kind of animated image of the present patent application block display packing, specifically comprise following step:

1. background picture (gate tower) precision on request that needs are shown is drawn the pixel that is divided into some sizes (for example 16 * 16) zone to picture, as shown in Figure 1;

2. the subregion on 3 doors in the background picture and the corner, house is labeled as occlusion area (zone shown in the figure bend), as shown in Figure 2, and is output into the x that the control script of WEB browser can discern and the array data of y coordinate;

3. the picture region size of the required demonstration of computed image as the frame (promptly carrying out the zone of Alpha render mode) around the personage in Fig. 3 and 4, and is output into the data of the height and width that the control script of WEB browser can discern;

4.WEB the browser display background picture is at the bottom of image graphic;

5. when WEB browser control script moves image, add epigraph by the x that moves and y coordinate and carry out overlapping judgement by the data that the 2nd step and the 3rd step are produced, if overlapping then key diagram looks like to enter the blocked area, otherwise for not in the blocked area;

6. when image enters the blocked area, be that Alpha plays up by browser script control image graphic display mode, the degree of mixing of Alpha is 30%, reaches the display effect that enters the interior of articles that is blocked thereby produce translucent display effect, as Fig. 3;

7. when image is not in occlusion area, be set to non-Alpha render mode, produce normal image graphic display effect, as Fig. 4 by browser script control image graphic display mode;

8. the moving coordinate by computed image reaches the display effect of passing between image animation and the shelter.

In fact,, background can be divided into the different zone of pixel size, adopt the different Alpha render mode of degree of mixing according to the needs of different scenes and background, draw transparency different block display effect.

The described animated image of the present patent application block display packing, on browser operation efficient, fast, simple, operation is smooth, has improved the convenient of web animation design and web game design.

Claims

An animated image block display packing, it is characterized in that: described display packing may further comprise the steps:

1) the background picture precision on request that will need to show is divided into the unified grid of size, and rectangular coordinate system is set up in a zone on each grid representative picture on whole background picture, and the corresponding unique coordinate of each point (x, y);

2) background area that need be shown as occlusion effect when moving to this zone when image puts signs on, and be output into the control script institute of WEB browser can the recognition data form;

3) the picture region size of the required demonstration of computed image, and be output into the control script institute of WEB browser can the recognition data form;

4) the WEB browser is presented at background picture the bottom of image graphic;

5) when WEB browser control script moves image, add epigraph by coordinate x, the y that moves and carry out overlapping judgement by step 2 and 3 data that produced, if overlapping then key diagram looks like to enter the blocked area, otherwise for not in the blocked area;

6) when image enters the blocked area, by browser script control image graphic display mode is that Alpha plays up, the degree of mixing of Alpha can be provided with according to the occlusion area on the background picture, reaches the display effect that enters the interior of articles that is blocked thereby produce translucent display effect;

7) when image is not in occlusion area, be set to non-Alpha render mode by browser script control image graphic display mode, produce normal image graphic display effect.