Hi,
How can I do advanced coloring like in this video.
I mean coloring by zone, soft brush, brush shape.
My thoughts:
It looks as if a shaded layer initially exists and the brush creates a mask for displaying this layer.
Zones of the picture are predefined because there are options when one zone is in different places of the picture, for example, head, arms and legs.
Then the result of painting is superimposed on the final canvas of the picture.
Do I need to use SVG files for zones? If so, how to use them in phaser 2?
How to give the brush a shape? Because I use a context.lineTo() method that simply draws a line.
How to draw through filling the mask layer?
So let’s start by talking about how to draw lines (suposing it’s the brush), did you have tryed something or do I have to try to code a little script ? It will be a testing of the drawing features
After that we can move on talking about the shapes to color guessing that the color picker like the brushs in the video are just tweens with the image corresponding to the color one want to use and if you click one of them it will change a variable named brushColour for example
I mean that when you start brushing in the background, only the background is painted and the front objects are not painted. the picture is sort of divided into objects and they are each painted separately, but as a result it should be a single picture.
watch the example video again for a better understanding.
in the code the main functions is:
reloadImage(…) - recreate the image and auxiliary layers.
onBmdDown(…) - bitmapData pointer down, this function contains the magic wand fill code.
paint(…) - erase and brush coloring in this function.
You’ll need some JSDocs comments for sure if you plan to commit into your GitHub account which is really nice, with nice explorations of WebGL, but you know … Nobody comment his code generally speaking
So to come back to the thread, the first things that cames into my mind is the order in which you call the brush, so if for example generally speaking, you add an image into the canvas then a second one, the second one will be displayed over the first one like in this very basic example https://jsfiddle.net/nazimboudeffa/j8Lgvoq9/
what are you talking about?
Of course I know how the second picture will be on top of the first, why are you talking about this? How does this relate to my question?
Or are you saying that I create a second picture on top of the first? I do this so that the black lines are not painted over with brushes. the second picture displays the contours of the picture always on top. and on the first layer, the picture is filled. after the painting process ends, I draw the contours of the painted picture so that the picture becomes whole.
