I want to make a coloring app in unity. I don't need flood filling. THe player will select a color and click the shape to fill that color. The app will have designs as shown below:

enter image description here

Here the problem is, design has to be empty with black outline. One way would be to create textures using the jpg of each shape. However, there are thousands of shapes and each can be colored in about 7 colors. So, i will have to create 7 textures for each shape.Is there any way to create model with black outline so that only inner color can be changed?

  • \$\begingroup\$ First, I would flood fill. It is a common way to fill an area with color for a reason. Why ignore this simple technique? \$\endgroup\$ – AturSams Oct 31 '14 at 9:21

If it's loaded from an image then you probably don't need flood fill, if you can access the palette table of the image to change colors and carry the change into the new representation of the image. If you are drawing the image programmatically then you probably do need flood fill and it's often trivial to do.

If you could use vector images like SVG images this is trivial because you'd just change the inner color. For a raster image like PNG or others, if you have some way to know which bytes are the (transparent) edges, the bytes that are the black border, and the bytes which are the inside, if the image format points to a palette table, then it's trivial, one color is transparent, one color is the border, the third is the inside. Then you just change the palette value for the inside to a different color.

I think GIF images do this, the colors in an image point to a palette table of the 255 colors plus transparent so if you change the value of the color in the palette, anything referencing it is automatically changed. So if your puzzle has 40 parts, each part's interior is one palette pointer, then just change that one palette entry from white to the new color.

  • \$\begingroup\$ But i need to convert the svg to model before i can use them in the app using blender. \$\endgroup\$ – SanSolo Oct 31 '14 at 4:29
  • \$\begingroup\$ Well, if your converted image can use a palette table, if each entry that can be colored has its own specific exclusive palette entry, and you can access the values in the palette table, then change the color on that one entry then tell the program to either update the image to reflect the value of the changed palette or redraw the image. \$\endgroup\$ – Paul Robinson Oct 31 '14 at 4:37

The one alternative that could be used in the general case (with images like these):

  1. Applying the marching squares algorithm and getting a mesh for each area.
  2. Simplifying the 2d-mesh in a way similar to what is described here.
  3. Detecting clicks on the resulting mesh and changing it's diffuse color accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.