Image programming in actionscript3 games)

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

 

4.5.2 Implementation of matrix convolution in ActionScript

Next we will try to implement it in ActionScript. Wow, isn't it necessary to operate pixels? Don't worry, like colormatrixfilter, actionscript also helps us implement a convolution filter-convolutionfilter:

 

Convolutionfilter (MATRIXx: Number = 0, matrixy: Number = 0, matrix: array = NULL, divisor: Number = 1.0, bias: Number = 0.0, preservealpha: Boolean = true, clamp: boolean = true, color: uint = 0, Alpha: Number = 0.0)

 

Among them, the first three parameters correspond to the matrix, because Matrix is a one-dimensional array, if 9 1 is directly passed, it can be a 3*3 matrix, it can also be 9*1 or 1*9. Therefore, we need three parameters to represent the number of rows, the number of columns, and the specific value of the matrix.

 

The 4th divisor parameter corresponds to the above-mentioned factor. In the matrix of the absolute average allocation, divisor = 9 is corrected to the matrix expanded by circle, where divisor = 11.

 

The divisor value does not have to be equal to the sum of elements in the Matrix. When divisor is smaller than the sum of matrix elements, the color and Alpha components increase, and the color becomes brighter or fades in, otherwise, the image fades out, or the transparency fades out. In the case of equality, the image fades out slowly because the decimal part of the calculated result is discarded.

 

Considering the divisor's variability, Adobe did not write this factor to the bottom layer of Flash Player for our own setup.

 

I will explain other parameters based on the instance.

 

The effects produced in this book are as far as possible not to use the ready-made materials (except for the font), so here we still use a textfield for testing.

 

Create an ActionScript project named convolutionfiltertest. The Code is as follows:

 

Package {[SWF (width = "800", Height = "600")] public class convolutionfiltertest extends sprite {private VaR _ main_txt: textfield; Public Function convolutionfiltertest () {Init ();} private function Init (): void {initmaintxt ();} private function initmaintxt (): void {_ main_txt = new textfield (); _ main_txt.autosize = textfieldautosize. left; _ main_txt.selectable = false; _ main_txt.defaulttextformat = new textformat ("Microsoft yahei", 80, null, true); _ main_txt.text = "Flash art programming "; _ main_txt.filters = [New convolutionfilter (3, 3, [1, 1, 1, 1, 1, 1, 1, 1], 9)]; addchild (_ main_txt );}}}

The running effect is shown in 4.49, which is similar to the status before the filter is set.

 

Figure 4.49 test convolution Filter

It can also be understood that, after all, it is only a solid color text, and how to swap the color is still black, and only convolution with the surrounding 1 pixel, the effect is not obvious is also reasonable.

 

In this case, we may wish to make the convolution matrix bigger and expand its impact scope.

 

Extended from 3*3 to 5*5 (not considering 4*4 because 4*4 cannot be aligned to the center), the length of the matrix array soared from 9 to 25. If you want to test 7x7 again, you may need to work a lot and be prone to errors when making one manual knock. Therefore, without considering the running efficiency, I prefer to write a method to generate a specified size matrix array:

 

private function getConFilter(matrixSize:int, bias:Number = 0, preserveAlpha:Boolean = true, clamp:Boolean = true, color:uint = 0, alpha:Number = 0):ConvolutionFilter{var amount:int = matrixSize * matrixSize;var arr:Array = [];for(var i:int = 0; i < amount; i ++){ arr[i] = 1;}return new ConvolutionFilter(matrixSize, matrixSize, arr, amount, bias, preserveAlpha, clamp, color, alpha);}

 

With this method, we can easily create a matrix of any size (the number of rows = the number of columns is called a matrix). If you care about the running efficiency, you can use the code snippets I mentioned earlier to generate code that does not need to be computed during runtime, so that development can run properly.

 

Next, set the filter:

 

_main_txt.filters = [getConFilter(5)];

 

Now we only need to adjust the parameters in getconfilter to set the filter scope at Will (this certainly does not include decimals ).

 

But after running it, I found that it has no effect. Why?

 

At this point, we should calm down and analyze it. First, we analyze RGB. Their channel values are all equal to 0, while the transparent color. Because it is completely transparent, the RGB channel cannot be carried and the channel value is equal to 0, so it cannot be exchanged. Therefore, in the entire text, only alpha contains at least the 0 and 1 values. Then, let's see if the filter contains parameters related to the alpha channel.

 

After scanning, we found two such parameters: preservealpha and Alpha. Alpha is obviously an opacity value, which looks unrelated to channel settings. Let's look at preservealpha, it indicates whether to retain the alpha channel so that it does not change. The default value is true. However, only the alpha channel can implement transformation. Therefore, you need to set this parameter to false.

 

After setting, the effect is 4.50. As you can see, the edges become blurred. If the filter is constantly increased or reused, the results will fade away as smoke.

 

 

Figure 4.50 set preservealpha to false

 

After finding the crux of the problem, we may wish to adjust the matrix size back to 3*3 to achieve a 4.51 effect, although the overall font has not changed much, however, we can see that the edge is blurred, which is very useful for the device text. With this feature, most of the edges can be eliminated. Of course, this method is not omnipotent in terms of eliminating the Sawtooth, for example, small font size and complicated text with complicated outlines, which will be discussed in the subsequent sections.
 

Figure 4.51 set the matrix size to 3*3

 

If we haven't seen any difference between the RGB channels before, and if the RGB values of all transparent colors are equal to 0, I will change the text to another color, color should be exchanged. 4.52, I changed the text color to pure red, and adjusted the filter size to 5*5. The text edge was painted with a dark red edge (Why is it dark red, this is related to the RGB value when alpha = 0. Please think about it yourself ).

 

Figure 4.52 set the text color to pure red

 

Next we will adjust the Blur to a larger value, for example, 20 and then look at the effect (Figure 4.53 ).

 

Figure 4.53 set the matrix size to 20*20

 

The Blur results come with a lot of dregs, and there are a lot of lines across the lines ...... This seems to be the side effect of the square matrix. So let's try the color distribution matrix based on distance.

 

However, before entering the forum, I want to let you know if you are familiar with it? Is there any similarity with a kind of slag simulated previously? Yes, there is also a problem with the simple filter of flash! Is the Blur used in the Flash Filter Based on this mode? We may switch to blurfilter to see:

 

_main_txt.filters = [new BlurFilter(20, 20)];

 

As shown in result 4.54, the slag is still removed from the ground, and the slag adjustment level is higher than that of convolutionfilter. Furthermore, the color of the square is a little deeper. Therefore, we may try to modify some parameters so that the effect of the convolutionfilter is similar to that of the blurfilter.

 

Figure 4.54 test the blurfilter Effect

 

First, the degree of slag loss of the blurfilter is serious, so we may wish to change the fuzzy value to 10. Because the Fuzzy Value of blurfilter refers to the Blur radius, and the 20*20 matrix of convolutionfilter places the current vertex at the center of the transformation matrix, it also only relates to the rectangular area in the surrounding 10 pixel range.

 

After the blurfilter is adjusted to 10, the effect is 4.55. At this time, the degree of slag loss and its contour are already close to that of the 20*20 convolution filter, but the color is much deeper than that of the convolution filter.

 

Figure 4.55 set the Fuzzy Value of blurfilter to 10

 

Since the Blur has been finalized, we can only adjust the color of the convolutionfilter. Because we know that this is a pure black image, RGB cannot become larger, so the light color must be the result of Alpha reduction. Therefore, we need to increase the calculated result value, make the text more opaque.

 

The method of setting matrix elements one by one is not scientific, So we adjust the overall color by adjusting the divisor parameter. It seems that multiplying the color by 0.5 makes Alpha just doubled to get a good result:

return new ConvolutionFilter(matrixSize, matrixSize, arr, amount * 0.5, bias, preserveAlpha, clamp, color, alpha);

 

The result of 4.56 is no different from that of blurfilter.

 

 

Figure 4.56 set divisor to equal half of the total Matrix Elements

 

It can be seen that the convolutionfilter matrix convolution algorithm is used in the fuzzy process of a simple filter. As for how to multiply the value by 0.5, the author will not be too arbitrary. The experiment result alone will be determined. Therefore, in the following time, I continue to experiment on a variety of fuzzy values (including unequal blurx and blury), and check the information related to the fuzzy algorithm before the final conclusion is multiplied by 0.5.

 

This Fuzzy Matrix also has a proprietary term in graphics: Mean filtering, because the essence is to apply the average value of the surrounding pixels to the current pixel as a new value.

 

 

Image programming in actionscript3 games)