Hi Guys.
I recently started building a colouring book app using Phaser 3. I am playing around with the idea of having a segment of the image completely fill with a selected colour, exactly like a paint bucket would flood fill an area of an image on other applications like photoshop.
Would something like this be done using masks or perhaps somehow adjusting BitmapData of the segment of the image? If someone has any idea how to approach this problem please advise.
Thanks
Hello,
so I m guessing you ll probably need to access the pixel of the canvas, here is and example that do that : https://labs.phaser.io/view.html?src=src/textures/get%20pixel%20dynamic.js
then you need to find all the pixel that need to be filled, here is a little game that do something similar, I doubt it would run smoothly with lots of pixels, but we never know, https://labs.phaser.io/edit.html?src=src/games/flood/flood-fill.js
the function is called flood fill , it apply on a grid, but you ll have to do it on the canvas.
there is also https://labs.phaser.io/edit.html?src=src/display/tint/tint%20fill.js that fill an image, if you manage to create a mask of the area you need as a texture, I guess that would work
I hope this help
good luck on your project.