[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:

​

 

Looks very cool

 

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) https://github.com/nicloay/colorus/...2dd4/Assets/Scripts/Utils/TextureUtil.cs#L238
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

Code (CSharp):

1. Shader "AIO_Tools/NormalRegion" {  
2.     Properties {      
3.         _MainTex ("Swatch", 2D) = "white" {}          
4.         _RegionTex("Regions Texture", 2D) = "white" {}
5.         _OriginX("First click uv.x", Range(0,1)) = 0.5
6.         _OriginY("First click uv.y", Range(0,1)) = 0.5
7.     }
8.  
9.    SubShader {
10.     Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
11.     Cull Off
12.     Lighting Off
13.     ZWrite Off
14.     Blend SrcAlpha OneMinusSrcAlpha
15.     Pass {
16.      CGPROGRAM //Shader Start, Vertex Shader named vert, Fragment shader named frag
17.  
18.      #pragma vertex vert
19.      #pragma fragment frag
20.      #include "UnityCG.cginc"
21.      //Link properties to the shader
22.    
23.      sampler2D _MainTex;  
24.      sampler2D     _RegionTex;
25.    
26.      float        _OriginX;
27.      float         _OriginY;
28.  
29.      struct v2f
30.      {
31.          float4  pos : SV_POSITION;
32.          float2  uv : TEXCOORD0;    
33.          float2  uv3 : TEXCOORD2;
34.          fixed4  color : COLOR;
35.      };
36.  
37.      float4 _MainTex_ST;
38.      float4 _RegionTex_ST;
39.  
40.      v2f vert (appdata_full v)
41.      {
42.          v2f o;
43.          o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
44.          o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);    
45.          o.uv3 = TRANSFORM_TEX(v.texcoord1, _MainTex);
46.          o.color =  v.color;      
47.          return o;
48.      }
49.  
50.      half4 frag (v2f i) : COLOR
51.      {
52.          fixed4 color = i.color;
53.          color.a *= tex2D (_MainTex, i.uv).a;
54.        
55.          fixed4 mask = tex2D(_RegionTex, i.uv3);
56.          fixed4 original = tex2D(_RegionTex, float2(_OriginX, _OriginY));
57.          color.a *= (mask.a == original.a);
58.          return color;
59.      }
60.  
61.      ENDCG //Shader End
62.     }
63.    }
64. }
65.  
66.  

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
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 Thanks

 

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

 

In paintcraft you have a "tool pipeline" that's mean that you can inject own module which will have access to input points or interpolated points. and you can store this points to file or send them over network. but you need to implement this stuff by yourself. and then add this module to every brush which you are going to send.
And finaly you need to write new "input.module" or enhance existing one (package contains source code) and instead of listening input data from device take data which come from network.

 

Hi Nicloay,

A few questions about your plugin.

1. Do the drawings now save when the user exits out of the Unity app? In your Quick Start document you say "We need separated downscaled icon because of the following reason. When you make any changes on the canvas we store this state on the disk. so when your player would comeback it will be able to work with this image." so does this mean the state of a drawing and what has been coloured in is saved?

2. Does your plugin support pinch and zoom on mobile devices so that a user could use two fingers to 'pinch' on the screen to zoom in to see more complex images in closer detail and then zoom out again?

If you do not currently support pinch and zoom, would it be something you would consider adding in as a feature at some point?

Regards,
Quicksilver.

 

1. Yes it save changes to disk after every change with timeout 1-2 seconds. This means if you quickly draw several lines it will commit changes after last one.
2. Right now pinch and zoom supported as separated tool (you need to select magnification to change zooming) it works like this because of multifinger drawing. there is no chance to distinguish whether you want to draw 2 lines or pinch and zoom.

 

I have used the Demo project as a starting point on something I'm creating, and I have set the screen size to suit a standard iPad resolution of 2048 x 1536 and I'm not sure if this is related to changing the screen size (I've left the Canvas Scaler Match to 0.85), but when I do any sort of fill paint colouring on the iPad I get an issue where the fill looks to be missing sections out.

But if I use one of the other tools to colour over the same area then it colours in just fine.

To make sure it wasn't something on the image I'd imported I tried several of your images and I get something more uniformed, but still some sort of bug.

These are both on the iPad. I've tried your Android version on a Galaxy Tab tablet and it works fine, so do you know what could be causing this issue? I also gets worse if I leave in the ability to set the app to Portrait or Landscape and change the orientation once or twice, then the fill tool gets worse.

Also, when I try to use the Magnification and Pan tool, once I start to zoom in to the image and then pan the image around, the image will flicker and jump around the screen before usually vanishing completely if I move the image too far. Is this also related to a scaling issue?

 

Quicksilver01uk could you zip your project and send me drop box link by email. I'll check here what is an issue. I'm not sure but it could be related to compression format.
Also i'll check what i can do with pan/zoom issue

to zip project - copy your working directory, remove Library and Temp folder and after that zip it.

 

Hi, I've sent you an email with a link to the project for you to test with.

 

Hi,
Asset looks lovely. I'm trying to determine whether it can help me with my need. Is this fixed to screen-space? (i.e. could I place it on a world-space canvas and still have it work)
Thanks very much in advance!

 

Arkade, thanks for feedback. but unfortunately right now it works only in screen space (separated camera render canvas to the screen rect.

 

Thanks for replying! Yeah, I figured that might be the case.

Forgive me that I'm not sure what "separated camera render canvas to the screen rect." meant. I'm guessing you're saying the canvas is a offscreen texture and you're using a camera to do something related to showing it on the screen? Perhaps panning, zooming, etc. All that sounds reasonable to be adapted to outputing to a RenderTexture which could then appear in-world though maybe?

I'd imagine the most awkward part is the input stuff? Are you using Unity new UI input events, etc?

I'm curious about integrating into a VR game for kids -- they'd then be able to draw in-game if you see what I mean. That said, my game is for mobile VR so its performance requirements are a little tight. Perhaps I might yet buy and integrate your system as a whole-screen phase of my game?

Any thoughts welcome. Thanks

 

Arkade Yes. i use render texture for the back layer (where i merge swatches to the texture. and this happens using separated camera which render to the texture and looks to the same texture. And another camera used for pan/zoom.

But unfortunately I didn't expect to use this in the world space so many filters (brush pipeline) hardcoded value to the global zero point. Input stuf is not a big deal it's possible to create plane collider and use raycast from camera. so main issue is in the internal brush pipeline.

 

Really cool asset. It would be great for kids coloring game! Good work!

 

Hi, I'm still waiting for a reply to my last emails to you sent on the 1st and 5th December?

 

Actually i replied to you in the same day (5h december). If you whish we can continue chat in Skype.

Could you give me your iPad mini device id and i'll make a build with provision. and at least we will know whether it's a problem in a device or in the environment where the app was builded.

p.s. please confirm that you received 2 emails which i also sent to you today. and try to build app from iOS project which i made on my environment and sent to you as dropbox link.

 

Hi Nicloay, I did think it was strange not to get a reply, but I haven't received any. I'm going to email you with another email address which you can try emailing instead?

 

forwarded previous emails with instructions to your personal email.

 

I was requested many times with one interesting features couple of times. so started to work on it, and hope to release it soon (next week)

it's a brush with mask,

So where you can use this.

1 - You can make like a lottery ticket where you need to scratch silver bar and reveal numbers
2 - you can make already drawn picture and draw on top of it. Main issue here is a eraser - right now it draw with background color but with this thing it will draw with original texture
3 - you can create brush which will draw with tiled patterns (like carbon texture, bricks, and so on

 

PM me if you critically need stamp drawing,or drawing on existing image so i'll send the alpha build. Otherwise just wait one more week.

Right now i'm working on SVG integration so you will be able to make really small coloring book for adult, with mandalas and so on.
And thanks to @tkoknordic for providing me SimpleSVG package

p.s. Also forgot to mention that camera enhanced, right now there is no any jitter on zooming and moving.

 

Hi Nicoloay, What would be a way implement an object which paints on its own? For example a ball rolling across the picture leaving a trajectory? Thanks

 

do you mean something like speed lines? Could you draw example in any editor like photoshop and show it to me and i'll tell you how to do that.

But keep in mind. right now just plane swatch supported. Maybe later i'll add any kind of mesh so you will be able to draw using some 3d objects.

Another thing is that in brush pipeline it's easy to differentiate is point first last or middle and it's even possible to draw temporary swatches. so it should be possible to draw speed line and show object just on final point.

 

to draw on canvas programmatically (e.g. i'm using something like this in debuging when i record points and then just play them automatically).
Please see following class Assets/PaintCraft/Engine/Scripts/Controllers/ScreenCameraController.cs this class listen input and call specific methods. what you need is just check following method inside:
HandleTouch if you want several lines simulatenously or
HandleMouseEvents if you need just one.

you can also see that ScreenCameraController has a link to LineConfig component which store selected brush color and so on. so you need to adjust tool setup in LineConfig.

hope that helps.

 

I just realized that current renderer filter doesn't support different materials or different textures from the points in current brush context. It's a main limitation why it's not possible to make something like a brush with "trail" behavior.

something like a car + speed marks behind.

So the question is. what is better, rewrite some logic in paint craft core and use DrawMeshNow with different materials. or use existing DrawMesh, but add new property MainTexture to the point, and change it using MaterialPropertyBlock?

What do you guys think?

 

Several people ask me to show how to draw on canvas over code, so here you are.
In this example i show you how to draw using scene object, but if you will check the code you can easily understand how to do that using data which come from remote service or something else.

So here is a code

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.Assertions;
3. using System.Reflection;
4. using PaintCraft.Controllers;
5.  
6. public class ObjectDraw : MonoBehaviour {  
7.     public ScreenCameraController ScreenCameraAndInput;
8.     public bool IsDrawing;
9.  
10.     const int FAKE_TOUCH_ID = 10111;
11.     bool previousStepIsDrawing = false;
12.    
13.     void Start () {
14.         Assert.IsNotNull(ScreenCameraAndInput);
15.     }
16.        
17.     void Update () {
18.         if (IsDrawing){
19.             if (!previousStepIsDrawing){              
20.                 InvokeMethodThroughReflection("HandleTouchesBegan", GetObjectScreenPosition());
21.             } else {              
22.                 InvokeMethodThroughReflection("HandleTouchesMoved", GetObjectScreenPosition());
23.             }
24.         } else {
25.             if (previousStepIsDrawing){              
26.                 InvokeMethodThroughReflection("HandleTouchesCancelledOrEnded", GetObjectScreenPosition());
27.             }
28.         }
29.         previousStepIsDrawing = IsDrawing;
30.     }
31.  
32.     Vector2 GetObjectScreenPosition(){
33.         return ScreenCameraAndInput.Camera.WorldToScreenPoint(transform.position);
34.     }
35.  
36.     void InvokeMethodThroughReflection(string methodName, Vector2 screenPosition){
37.        
38.         MethodInfo methodInfo = ScreenCameraAndInput.GetType().GetMethod(methodName, BindingFlags.Instance | BindingFlags.NonPublic);
39.         methodInfo.Invoke(ScreenCameraAndInput, new object[]{
40.             FAKE_TOUCH_ID, screenPosition
41.         });
42.     }        
43. }
44.  

You can see that I use reflection here, and i think that on next release i'll just make these methods public. Also FAKE_TOUCH_ID simulate a separated touch. so if you want to use like 5 objects on scene to draw you need to have them unique touch id's so they will draw different lines.

and here you can see just quick demo

 

will your project support for this SVG Importer? because I already have this asset and can't afford to buy another SimpleSVG

 

Hello Nicloay,

I having a problem on coloring. Already following this tutorial but using Affinity Designer as a photo editor instead of photoshop. The result is like screenshot below where there is some white at edge of each line. How do I fix this?

I'm using black stroke for each line for and save it as panda.png. thanks

 

Yes. I already received this package and will add support of it soon.

About your problem, you need to expand regions by adjusting sensitivity of flood fill in your designer, Your regions must overlap your black lines on your source image.

 

Nice. my previous game is for kids. Can't wait to integrate my game with SVG drawing/coloring.

Yes, my problem solved after overlap regions with black lines. Thank you.

 

you are welcome. If you will get a minute could you please rate the package on asset store page. it's really important for me. Thanks in advance.

 

Today i finished multilateral brush you can see how it works below (1st point has material with a car, remaining with skid marks)


and here is a brush setup


Together with another feature you will be able to setup on screen game objects which moves on top of screen and draw using different brushes.

 

today successfully tested different brushes with different materials. Looks quite promising.

 

I downloaded the demo android app on Google Play to my Samsung S7, but the backgrounds for the images are all black.

Also possible to make the view portrait instead of landscape?