Uncover the secret! Millions of pixel color filling solutions. Blessed are those who want to develop picture book applications!

Magic eraser

Hello everyone , I am the aroma of malt , A developer who likes to solve products to solve requirements .4 year Cocos Creator Little games 、 education App Development , Today, I'd like to share with you some of my little experience accumulated in my work Demo.

1. How to get a picture of RGBA data , What happens if you change this data ？
2. Draw lines and eraser , The pain point is solved by drawing lines through pixels （ Eraser function , And the background is not pure white ）
3. Color a picture , Children's games

This case Demo The code has been shared to Cocos Store Thank you for your support ！

One 、 Discoloration principle

During the job interview in , Have you ever been asked such a question ： You know one 1024 * 1024 How much memory does a graph of size occupy ？

If you don't want to go , Please open it step by step A_Test_Demo, Pictured ： Input X value = （0-255 transparency ） Set the transparency of some areas of the picture .

I don't know if you've ever played the screenshot in the official case , without . Refer to the official case demo, There is such a passage ：

/**
*  Convert picture RGBA data 
* @param data 
* @param width 
* @param height 
* @returns 
*/
 private filpYImage(data, width, height): any {
        let picData = new Uint8Array(width * height * 4);
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let start = srow * width * 4;
            let reStart = row * width * 4;
            for (let i = 0; i < rowBytes; i++) {
                picData[reStart + i] = data[start + i];
            }
        }
        return picData;
    }

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
      
11.
      
12.
      
13.
      
14.
      
15.
      
16.
      
17.
      
18.
      
19.
      
20.
     

We know from this method that , We return picData It's a one-dimensional array , The contents are as follows ：

[R,G,B,A,R,G,B,A,R,G,B,A,..............]

     

      
1.
     

The length of the array is width * height * 4, It's the data of a picture . The data can then be reset to a new image , The code is as follows ：

createCanvas(picData) {
    let texture = new cc.Texture2D();
    texture.initWithData(picData, 32, 1663, 768);

    let spriteFrame = new cc.SpriteFrame();
    spriteFrame.setTexture(texture);

    let sprite = this.target.getComponent(cc.Sprite)
    sprite.spriteFrame = spriteFrame;
}

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
     

Two 、 Magic eraser

Be careful ： If you don't understand A_Test_Demo This Demo, Please don't open the project ！

The project pencil and eraser are made through touchMove The distance is greater than 5（ Project tuning values 、 Draw a line according to this value ） To get two points .

this.startPoint and this.endPoint, Note that remember to transform the world coordinates, with the upper left corner as the starting point to transform . Back to width * height * 4 Back to our width * height * 4（ From the picture above test_demo） Array , We change the coordinate system to the upper left corner to calculate . Here's the picture

After we dynamically get two points , In obtaining this.startPoint and this.endPoint A point on a straight line of two points （ Horizontal line , A straight line , Oblique line ） The figure below shows two cases of diagonal lines ：

OK, When we get the corresponding point , In the pencil line thickness, such as 10（ Dynamic setting ） Stack the points .

• Horizontal line ： Get the horizontal line point plus  10 / 2 = 5  Go in at one point
• A vertical bar ： Get the left and right addition of each point of the line  10 / 2 = 5  Go in
• Oblique line ： The line above 1, Add and subtract at each point ; The line above 2, Add and subtract around each point  10 / 2 = 5  A little bit , As shown in the figure below ：

When you get these points, it turns into [R,G,B,A,R,G,B,A,R,G,B,A..............] My index pencil , Just change RGB value , The eraser changes A Value , Then we can achieve our pixel line drawing and eraser function .

The demo Just learning demo, A lot of values in it are fixed by me , Students want to apply it to practice demo It needs to be improved by itself , And the sawtooth needs to be tuned getPixel Method , The method is just enlightenment .

3、 ... and 、 Coloring principle

Next, let's move tianSe Colouring demo, And open the scene . If you don't understand A_Test_Demo, and RubberAndDraw Please don't open the project .

Starting at that point, traverse , Top left bottom three points , Top left bottom , Top left bottom , Up, right, down , Up, right, down, etc RGB The value is the value around the ellipse or square, etc , Get the coordinate value , Do the above demo1、demo2 Stop again .

Once again remind ： If you don't understand the above demo1 and demo2 Please don't look at the demo！ Please be there. Cocos Store Search for ： Colouring 、 Pixel brushes