Html5 Game Development Strategy (pixel effect)

It is very simple, and there are some articles on Pixel effect processing on the network, which are not mentioned here. Briefly share some of the methods I am currently using.

There are two ways to process pixels.

First, the normal operation method. (Suitable for processing single pixel effects with fast speed)

Second, convolution. (Applicable to computing with multiple pixels, which is slow but changeable)

First, put a source image we use in this article.

(The pixel data used in this article is getImageData (x, y, width, height). data)

For convenience, we first define a convolution function (this function will directly change the input ImageData pixel data ).

Function convolutionMatrix (id, w, h, matrix, divisor, offset) {// <summary> calculate the convolution matrix </summary> // <param name = "input" type = "ImageData"> pixel data </param> // <param name = "w" type = "Number"> image region width </param> // <param name = "h" type = "Number"> image region height </ param> // <param name = "matrix" type = "Array"> matrix </param> // <param name = "divisor" type = "Number"> divisor </param> /// <param name = "offset" type = "Number"> offset </param> // copy a copy of the source data var bd = new Uint8Array (id); var m = matrix; var cp = 0; var wb = (w <2 ); // perform the RGB operation on the internal vertex except the edge vertex (var y = 1; y 







Black/white filterThere are many ways to write this effect. Here are two examples. Please feel free to understand them ...... :

Function desaturate (data) {// <summary> black/white effect (weight method) </summary> // <param name = "data" type = "ImageData"> pixel data </param> var I = data. length; while (I-= 4)> 0) {data [I] = data [I + 1] = data [I + 2] = (data [I] * 0.299 + data [I + I] * 0.587 + data [I + 2] * 0.114 );}}


Function desaturate (data) {// <summary> black/white effect (average) </summary> // <param name = "data" type = "ImageData"> pixel data </param> var I = data. length; while (I-= 4)> 0) {data [I] = data [I + 1] = data [I + 2] = (data [I] + data [I + I] + data [I + 2]) /3 ;}}
Effect (weight method ):






Reversed Color Filter:

Function inverse (data) {// <summary> reversed color effect </summary> // <param name = "data" type = "ImageData"> pixel data </param> var I = data. length; var ff = 0xff; while (I-= 4)> 0) {data [I] ^ = ff; data [I + 1] ^ = ff; data [I + 2] ^ = ff ;}}
In the above Code, data [I] ^ = ff; that is, data [I] ^ = 0xff; can be translated as data [I] ^ = 255; continue to translate data [I] = 255-data [I];. Please feel it for yourself ......

Effect:






The following method uses a convolution matrix. Therefore, I only write three parameters: matrix, divisor, and offset.


Blur filter:
[0, 1, 0,
1, 1, 1,
0, 1, 0]
Divisor: 5
Offset: 0
Effect:






Add contrast filter:
[0, 0, 0,
0, 2, 0,
0, 0, 0]
Divisor: 1
Offset:-255.
Effect:






Embossed Filter:
[1, 1, 1,
1,. 9,-1,
-1,-1,-1]
Divisor: 1
Offset: 0
Effect:






Sharpen Filter:
[0,-1, 0,
-1, 5,-1,
0,-1, 0]
Divisor: 1
Offset: 0
Effect:







Well ~ It's easy.
If you have any questions ~ Please leave a comment!