How to approach a coloring app?

How to approach a coloring app?

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:

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? 


Answer 1:

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.

Answer 2:

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.