当前位置:网站首页>Uncover the secret! Millions of pixel color filling solutions. Blessed are those who want to develop picture book applications!

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

2021-08-08 15:42:18 wx5d33905354cb6

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

 

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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 .

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= Original picture watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= The modified part is transparent

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 !

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= Magic eraser

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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 :

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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 :
watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=img

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 .

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= Online experience :
http://gameview.creator-star.cn/maiyadexiangqi/tianse/index.html

Pictured :
There are large and small non-standard graphics in our scene , We get the touch points . watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

 

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

版权声明
本文为[wx5d33905354cb6]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/08/20210808153459094u.html

随机推荐