[Deprecated] PaintCraft (Multiplatform coloring book & drawing app constructor)

Paint craft support thread

  • It works really great on any kind of device iOS,Android,WP8-universal and even WEBGL
  • multitouch support
  • you can even make multiuser drawing apps. where each player could draw in split screen mode on the same or personal canvases.
  • I’m trying to make it artist friendly (all configs trough ui components), and standard unity ui is used
  • complete project inside

Documentation

new features in 1.04 version:

Video tutorials:

Screenshots:

2 Likes

Looks very cool

1 Like

I’m really happy that project just has been accepted.
You can find it at the following page http://u3d.as/tJ4

Nice app. cannot find an option to flood areas that have or haven’t been painted. Like, if you work in an area and then want to flood around it, the whole area floods. Most paint programs will flood only the areas that you click on.

Tooltips on the paint tools would be useful too.

Can users colour their own line drawings? Add their own images to be coloured?

Hello Daniel. Thanks for feedback.

About floodfill.
If you open some program like photoshop you will see that all floodfill tools like region selection or color floodfill has one very important parameter - it’s a tolerance this parameter used in color comparison. whether RGB(100,100,100) the same as RGB(100,99,99) or not.
You can see that all brushes has soft borders so we can’t make a floodfill which will nice works and has smooth borders all the time. all floodfills would require custom adjustments. or maybe even create floodfill mask at first (as in photoshop) and then use it with flood fill.

Actually I implemented and hardly optimized floodfill algorithm for unity. but it was for coloring book where all brushes has hard borders, you can find it here TextureUtil if you have idea how to make it simple i could try to implement this as well.

About images in paintcraft. Defenetly you can create use your own pictures. What you can do is just place 3 files in to the Resources folder and then create one config which will links to these files. you need to create following files
1 - Icon (if you want to show your image icon in your album where)
2 - Outline layer (it’s a top layer of your image with transparency, you can draw shadows or colors here)
3 - Border masks.

Border masks - is a specific texture which has the same size as Outline layer but store all regions. I use Alph8 texture format to keep app size smaller. So what i usualy do is just paint my coloring book in photoshop, every region has own color. and then in unity texture import settings i use “use grayscale as alpha”.


Please check tutorial page it describe more how to create your own drawing pages and also why we need icon and not just store live shanpshots.

Tooltips - actually you can use any unity gui elements. but paintcraft planned mainly for touch screen devices, this is why it doesn’t contains any tooltips.

I’ve just recorded several basic tutorial guides. You can see in the first post here how to create basic drawing app from scratch in 10 minutes, package overview and custom coloring page.

Hi, thanks for posting this asset!

So, just curious, I’m doing something very similar to the code above for flood fills in my app and running into major performance overhead on mobile. I noticed in PaintCraft there are shaders. Are you actually doing the flood fill on the GPU using a shader? I downloaded the Android demo and it is so much faster than mine.

Thanks!

Hi Knertified
It’s not actually computed at runtime. All region masks stored in separated texture. (each regions has unique alpha color on source texture). And as you can see you can flood fill several separated regions. You can find more details here (predefined regions section).

there are several issues in calculating regions at runtime:
1 - you need to read actual texture from gpu memory (it’s ok on iOS but has performance issue on another mobile platforms)
2 - floodfill has parameter “tolerance”. (to get soft borders. see e.g. photoshop magic wand tool)
3 - normal color comparison probably should be performed in HSV color space. and in paint craft everything in RGB.

If you need fast flood fill implementation you can find my implementation which works quite fast (it takes about 0.003 - 0.005 seconds to get the region) colorus/Assets/Scripts/Utils/TextureUtil.cs at 15e0f0fe25c8fa4a83e4a224e8c890f318b92dd4 · nicloay/colorus · GitHub
But you will still have some performance issue when you will generate the mask and upload it to cpu

p.s. Yes flood fill is just a mask in the shader. I render a swatch mesh with region mask. so is color within region is calculated in shader. something like this i just have additional shader parameters (alpha value for clipping mask).

Thank you so much for responding. I was pretty sure you were the same person who built colorus!

About the 255 limitation using Alpha8 regions. Does that mean that my coloring page can only have a maximum of 255 regions or does it mean that I just can’t use the same gray color for adjacent regions? The reason why I ask is that I’m building an adult coloring book app and much of the artwork is intricate and has many more than 255 regions.

Thanks!

actually It’s possible to change shader and use not just alpha8 but 16 bit or 24 bit texture i think it will works the same fast

here is the shader source code which i use in paintcraft

Shader "AIO_Tools/NormalRegion" {  
    Properties {      
        _MainTex ("Swatch", 2D) = "white" {}          
        _RegionTex("Regions Texture", 2D) = "white" {}
        _OriginX("First click uv.x", Range(0,1)) = 0.5
        _OriginY("First click uv.y", Range(0,1)) = 0.5
    }

   SubShader {
    Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
    Cull Off
    Lighting Off
    ZWrite Off
    Blend SrcAlpha OneMinusSrcAlpha
    Pass {
     CGPROGRAM //Shader Start, Vertex Shader named vert, Fragment shader named frag

     #pragma vertex vert
     #pragma fragment frag
     #include "UnityCG.cginc"
     //Link properties to the shader
   
     sampler2D _MainTex;  
     sampler2D     _RegionTex;
   
     float        _OriginX;
     float         _OriginY;

     struct v2f
     {
         float4  pos : SV_POSITION;
         float2  uv : TEXCOORD0;     
         float2  uv3 : TEXCOORD2;
         fixed4  color : COLOR;
     };

     float4 _MainTex_ST;
     float4 _RegionTex_ST;

     v2f vert (appdata_full v)
     {
         v2f o;
         o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
         o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);     
         o.uv3 = TRANSFORM_TEX(v.texcoord1, _MainTex);
         o.color =  v.color;      
         return o;
     }

     half4 frag (v2f i) : COLOR
     {
         fixed4 color = i.color;
         color.a *= tex2D (_MainTex, i.uv).a;
       
         fixed4 mask = tex2D(_RegionTex, i.uv3);
         fixed4 original = tex2D(_RegionTex, float2(_OriginX, _OriginY));
         color.a *= (mask.a == original.a);
         return color;
     }

     ENDCG //Shader End
    }
   }
}

you see _OriginX and _OriginY is the coordinates of the first click (on the region mask texture) and then i just compare that mask.a == original.a so to make it works with more than one channel (R+G+B+A) you would need to compare mask==original
Or if you wish you can continue use just 256 regions and as you told just not use the same gray color for adjacent regions. For adult coloring books you probably wont use bucket tool. and leave just some kind of brush. so maybe it will works for you.

this is amazing! great job! quick question. Its it possible for you to add a feature to save the drawing to the device. I feel thats fairly important. Also, a home screen would be amazing as well. I will definitely get this app right away if those could be added!
thanks for the great work.
-andrew

Hello Andrew.
Thanks for feedback. Unfortunately unity store images on the device only to the local sandbox folder. And i prefer to use this plugin http://u3d.as/4pz if I need to save image to the gallery. Actually it’s a big amount of job for me to implement this and test this functionality on iOS, android, wp, by myself.

Could you give me more info about home screen. I don’t understand what exactly do you need. sims like separated scene with some more ui elements.

Hi Nicloay, asset seems cool,
I’ve coded my own coloring app for android, but however, it works very slow on galaxy S4 active, which is not a bad device.
I even tried vertex painting, but still slow.
How does paintcraft work on mobile devices?

OK, I found the apk link and downloaded. It is awesome, work very fast, congratiulations.

Hello Levent-B, I use renderTexture to render dots from line to the canvas. it happens only for the one frame (when render happens).

Hi, I just bought your nice plugin, thanks for your hardwork :slight_smile:
Is it possible to use an image as a texture then erase it with brush? What I want to do is to create a game like treasure hunt, where i hide some objects under a sand, then users must ‘erase’ the sand to find the hidden objects. I think just like fill the screen, but instead of color, it filled with a sand image. Then use erase tool to erase the sand to find object beneath. Is it possible? Thanks

Thanks for your purchase but I afraid right now it’s not supported. Do you want to calculate progress as well ?

Ah ok no problem…if you plan to support it next time, sure I’ll be glad :slight_smile: Thanks

1 Like

special for some users who asked me “how to populate image list dynamically” I’ve recorded following video

Hi,

I am curious about your product named PaintCraft, i am looking for 2D Paint Plugin for Unity that support for networking.

I am building a game that have paint feature on it, is it possible to use PaintCraft in networked game, is it possible to sync stroke over the network?

I know how to sync thing, but i need to make sure that this plugin can be networked.

Thanks,
Endrik Prasetyo