Image programming in actionscript3 games)

Total Directory: http://blog.csdn.net/iloveas2014/article/details/38304477

3.2.5 enhance the stereoscopic effect by changing the opacity of the gradient filter.

At the end of the previous section, I provided a small example of making a three-dimensional character with gradient light. The method is to flip the transparency change direction of the gradient. (Fig. 3.51)
 
Figure 3.51 use gradient light to produce Relief Effect

Although the stereoscopy has come out, the thickness part looks more like a dashed line, rather than a solid three-dimensional side.

The reason is that the gradient end point is completely transparent, and the Blur zone is too small, resulting in few colored areas.

The above two problems are corrected below. To solve the transparency problem, I first adjusted the alpha of all gradient points (except the leftmost point) to 100% (Figure 3.52 ).

Figure 3.52 gradient luminous effect after the transparent gradient is removed

It looks more like a projection, because there is almost no gradient. So next we need to adjust the color of the gradient area. For example, change the gradient to light blue to dark blue (Figure 3.53 ).

Figure 3.53 gradient luminous effect from light blue to deep blue

There is a sense of attention, but the transition area is not gentle, the gradient transition is a little sudden, only a few two or three pixels. The reason is as mentioned in the previous section, because the gradient area is equal to the Blur value, and our blur value is only set to 5 pixels.

According to tests, when the fuzzy value is set to 10 pixels in bold 80, performs the best (the fuzzy value is too large. exceeding the character width will cause serious deformation to the contour ), I added several colors to the gradient bar, as shown in Figure 3.54.
 

Figure 3.54 multi-color gradient light

For the time being, we will not be held accountable for the appreciation of this casual graffiti. Looking at the gradient scope, our adjustable space has been greatly improved. If the fuzzy value is 5, the gradient can only display a very fine line. (Fig. 3.55)

Figure 3.55 gradient luminous effect when the Blur value is 5 and the number of gradient points is greater than or equal to 5

Of course, using the contradiction between gradient and small fuzzy values, we can also make some amazing creations, or use it to make some pixel-style pictures.

Change the gradient settings from light blue to dark blue, as shown in Figure 3.56.

 

Figure 3.56 light blue-dark blue gradient light with a blur value of 10

A side shape is similar to a sphere. You can adjust the color and use projection to beautify the image. Figure 3.57 and figure 3.58 show the effect after adjustment.
 

Figure 3.57 Effect of tone adjustment-plastic font

 

 

Figure 3.58 effect of the adjusted colors-light box effect font

If you think that the edge is not smooth enough, you can combine the previously learned High Intensity luminous filter (that is, stroke) to soften the corner of the edge. The luminous color is consistent with the text color (Figure 3.59 ), however, this practice is not authentic. When talking about bitmapdata, I will provide some relatively advanced methods.
 

Figure 3.59 soften the edge with a Glow filter

For the next lightbox font, we can build a gradient inside to make the light penetrate the front of the font. (It is not recommended to use all here, because the fuzzy values on the internal and external sides are different from the distance) (Figure 3.60)
 

Figure 3.60 added the inside gradient light box font

We have already tried to create relief on the external side. Can we implement relief on the inner side?

Next we will start to use the gradient light on the inside for testing.

Delete all existing filters, add a gradient Glow filter again, and change the type to the inner side (Figure 3.61)
 

Figure 3.61 default inner gradient light filter

The white highlight is highlighted with a dark shadow. The embossed style has emerged, but the highlight effect is weak and the shadow effect is strong. It may be caused by the white opacity being too small and the black opacity being too large, after the opacity of both the white and black colors is adjusted to 75%, it will be improved. (Fig. 3.62)
 

Figure 3.62 effect after changing the gradient opacity to 75%

The covering area of the shadow area is still large, and even the original color of the text is completely covered. In addition, the edge of the highlight area also has obvious complex edges and troughs, we try to add a fully transparent color in the middle of the gradient, and adjust the white gradient point to the right, so that the highlight is more away from the edge position (Figure 3.63 ).

 

Figure 3.63 use a fully transparent gradient point to weaken the Light-emitting and shadow areas

Once again, the gradient is squashed into a box. Based on previous experiences, we can increase the Blur value by a bit (Figure 3.64 ).
 

Figure 3.64 effect after the Blur value is increased

With only three pixels larger, the highlights and contours have been severely deformed, and the metal is about to melt. Although this is not what we want now, it can inspire our future creations.

From the overall perspective, the closer the edge, the more serious the deformation, so you may wish to pull the white gradient to the right. (Fig. 3.65)

 

Figure 3.65 adjust the white gradient point to the right

The lines in the highlight area are relatively clear, but the deformation can still be seen from the gradient to the transparent area. to block this gradient, I add a completely transparent gradient point next to the white gradient point (Figure 3.66 ).
 

Figure 3.66 add a bit of white near the White gradient point

The white halo is squeezed again, and the Blur value cannot be increased. What should I do? Only the right-hand idea can be typed.

We move all gradient points to the right, and then remove the Transparency points between black and white, as shown in effect 3.67.
 

Figure 3.67 Effect of continued right shift at the White Point

I am afraid that even the Black will be dropped, but I still have no satisfactory results. The general practice is exhausted. Do you have to remove the black? Try again. All you need to do in this section is to break the regular!

I changed the black gradient to white. (Fig. 3.68)
 

Figure 3.68 change the black gradient point to white

Make another breakthrough! While the highlight area is clear and outlines, it also strives for a larger effective area, giving full play to a wider space!

According to common VISUAL habits, the highlight should be in the upper left corner. Therefore, we use the flip method to set the distance to a negative number. (Fig. 3.69)

 

Figure 3.69 adjust highlights to human habits

The highlight is a little too large. you can adjust it to a smaller value. It seems that it is a good choice to shift the right of the gradient point (Figure 3.70 ).
 

Figure 3.70 gradient point move right

It is found that the highlight area is still too large, and then to the right will be squeezed again, causing a vicious circle. In this case, you can make more minor adjustments with parameters such as fuzzy values and distance. (Fig. 3.71)
 

Figure 3.71 effect after fine-tuning

 

The final effect is 3.72.

 

Figure 3.72 Effect of image placement

After the stereoscopic effect is formed, we can increase the gradient area to create a more rounded relief slope (Figure 3.73 ).
 

Figure 3.73 more mellow slope effect

 

Figure 3.72 and figure 3.73 have their own merits in texture creation. Figure 3.72 is suitable for creating crystal fonts (Figure 3.74 ), figure 3.73 is more inclined to use soft plastic or stone tiles (Figure 3.75 ).

Figure 3.74 polish the crystal font on the basis of Figure 3.72

 

Figure 3.75 plastic font transformed from figure 3.73

 

 

Image programming in actionscript3 games)