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

Hi nico,
I just bought the basic version, great asset and works fine , I check your https://paintcraft.in/vk2/ project, the image is very high fidelity when zoom to very large, do you implement it in SVG, I see you have another pro version, which include svg import, I wanna use the svg file to replace the image,
Does pro version support it?
BTW can you share the https://paintcraft.in/vk2/ project? I wanna learn how it works.

 

Hi nicloay，
I've checked the asset on unity 2018.2, just FYI, It works fine in Editor,

 

hello @renfei
No there is no this behavior in basic nor pro packages.
I don't use svg. I use SDF textures (the same as text mesh pro use). You can use imagemagic to generate textures, and as I remember it should be a free package on asset store with shader to render sdf images

 

Thanks for your quick reply , dude~~ Can I buy your https://paintcraft.in/vk2/ , it's really cool and that will save my life

 

@renfei, Im sorry but it's not ready made package. It doesn't have some features, and will require to much support from my self. Like history there is stored only for bucket, so brushes are not supported, and I'm not sure do I save this to disk right now or not.

I'm thinking to wrap this to separated package, but not sure when it will ready.

 

Hi nicloay,
Actually, I don't need the brush at all, what I'm interested in are the shader drawing effect and SDF texture, I've checked SDF texture asset package, it seems only work for B&W line art image?

 

yes. more over, it's a binary image, where you will have only black or transparent pixels, as texture contains data to the nearest border.

 

how to save sticker coloring pic after coloring in paint craft pro app?

 

Could you please check this page https://docs.paintcraft.in/qookbook/saveimage.html
it has the method which you can use to save data in to the texture2D
Please let me know if you need further assistance.

Thanks.

 

how can i use two control at same time like zoom function and color on single tap?
now a days the coloring app have both functionality used same time without any button i mean i don't want zoom function on button when user touch
the screen more than one finger then it will zoom and coloring on single tap
currently i am using touch gesture but it conflict with yours code i don't know how can i achieve it.
is it possible? if yes then how can i achieve it? kindly guide me

 

@Smarnovative You can implement your own controller which will trigger events on paintcraft

Like check this code which i use on one of my clients project
https://gist.github.com/nicloay/9790e4226c8a966edefc5f62ca3c364e
You can see there that all you have to do is to call those 3 methods from anywhere where you like

Code (CSharp):

1.             BeginLine(LineConfig, 0, GetWorldPosition(currentPosition), true);
2.             ContinueLine(0, GetWorldPosition(currentPosition));
3.             EndLine(0, GetWorldPosition(currentPosition));

Just make sure that all of those 3 are called (even if your tools works with one point you still have to Begin, Continue and end line.

Please let me know if you have further questions.

 

i am using
Fingers Lite - Free Touch Gestures for Unity to achieve my target.
https://assetstore.unity.com/packag...gers-lite-free-touch-gestures-for-unity-64276
how can i use these three lines which you mention me.
i means on single tap for coloring and long tap to drag and multi touch to zoom?
can you guide me how can i achieve my target with the help of this gesture?
the documentation of paint craft pro http://paintcraft.in/docs/0-brushpackbasic/#magnifier
you said we cannot use zoom with out button because of multi touch drawing so that's why i am asking you is there any possibility that we can use just zoom function with out button because on button zoom is irritating for user. if yes then how?

 

@junaid_gohar,
InputController is a base class wehere paintcraft handle managing tool usages.

So. you need to make following steps.
1. in your "Fingers Lite" package understand how you can intercept the events for the single finger gesture (like when it start, continue and end)
2. You probably can't extend both Finger Lite and Input controller. In this case just make a blank class and extend Input controller. You will be able to call [Begin|Continue|End]Line methods from outside
3. From your FingersLite script you need to call methods from step 2.

You can see that inputcontroller methods use global positions so you have to convert screen coordinates using GetWorldPosition method.
In Input controller you can see that it use constant "0" this is a line id, in case if you would use several lines at once each line must have own unique id. At begin you can see 3d parameter "true" this is regarding additional check if the input is allowed (in case if you have UI elements on top of paintcraft canvas you can override "DontAllowInteraction" method which will tell when you can or can not draw on the canvas).

Hope this helps. Let me know if you need more details.
Thanks.

 

can i manually putting the line id 1 from camera controller script?
could you please give me a short demo?

 

Yes, you can put any ID there, it's just must be persistent.
You can also check this https://docs.paintcraft.in/qookbook/recordplay-line-input-positions.html doc. It drawing lines from input positions which come from file. not from input device.

 

when touches more than one finger then how i know user want to draw or zoom and which line id currently use for zoom?
finger gesture is not working just rotate listener working but when image rotating then it also draw lines.
how to convert drawing multi touch to just single tap?

 

@junaid_gohar,
I'm sorry I don't understand is this question about how to recognize gesture, or how it works in paintcraft?

In paintcraft there is no pinch to zoom behaviour if you start with 2 fingers you will draw 2 lines at the same time if 4- four lines. But for my client projects (based on paintcraft, but with custom behaviours) usually I assume if input started with one finger - this is line drawing (so even if user add one more finger later while the first is active, I ignore that input). If input starts with 2 finger - this is only camera control and I don't draw any lines. In this case you will have just one line active in time so you can use any id which will be the same for the all time (in my case i use id=0).

 

How can i change the id mean painting for 0 and camera (zoom & drag)for 1?
if i change the id for painting and zoom and by default selected the bucket brush then i touches the screen with two fingers at the same time then zoom works or not?
if In paintcraft there is no pinch to zoom behavior then how camera works how can i selected the specific id for it?

 

Id is something like Input.TouchID it used only to determine the different input touches. It's not ID of different tools or touch controls.
Camera controls implemened as separated tools. You switch from brush to camera control and back. so you can not paint when camera control is active and you can't change camera position when other tools (like brush bucket, etc) is active.

Please check this app https://play.google.com/store/apps/details?id=com.nicloay.paintcraft&hl=en_US it has demo where you can select brush or camera zoom

 

i have purchased this package and also check the demo scene but i want that when i want to camera (zoom & drag) then whatever other tools (like brush bucket, etc) is active.then camera should zoom it never depends on active( button or any brush or bucket).

 

@junaid_gohar,
I'm sorry but there is no this behaviour in the package. You need to implement this by yourself. or if it's a showstopper. Just drop me email with your invoice id and I'll ask unity store to make refund for you.

 

i didn't mean that i want refund and i like your package coloring work but i have issue with camera button which i think irritate the user to press again and again. i think camera cannot depend on button.hopefully you understand that what i want so Can i achieve my target using this kit(Camera didn't depend on active button or brush) ? if yes then how ? kindly guide me?
how can i convert painting just on single finger touch if finger more than one then painting didn't work then camera work.

 

@junaid_gohar
I'm working on this. I made drawing works. now need to reimplement camera control, as it doesn't wit well with gesture design. This will take more time than I expected, I'll let you know when it ready (I hope to finish it today, but not sure right now).

 

ok nicloay take your time but when its ready then kindly inform me i am waiting for it and thanks for your quick response

 

@junaid_gohar,
Please check https://gist.github.com/nicloay/6999c2a6fe497897c7e2e15f4cda1b59 scripts it show how to use FingersLite gestures with paintcraft input controller.

 

Hi nicloay,
How can i achieve the radial fill animation efffect in your project? https://paintcraft.in/vk2/ , it can fill multiply cells at the same time. can you share the code?

 

@FeynmanRen100, I'm sorry unfortunately that is a very customized paintcraft version, and that code is not compatible with base paintcraft.

If you want you can try to check this code, used by that tool, but as you understand I can not garantee that it will work, so I provide it only as a reference. And keep in mind that sahder can be implemented in more nice way using function to take global positions and distances, global time, etc..

Here is a bucket filter

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using PaintCraft.Tools;
5. using NodeInspector;
6.  
7.  
8. [NodeMenuItem("NewBucketFilter")]
9. public class NewBucketFilter : FilterWithNextNode {
10.  
11.  
12.  
13.     #region implemented abstract members of FilterWithNextNode
14.     public override bool FilterBody (BrushContext brushLineContext)
15.     {
16.        
17.         if (brushLineContext.IsLastPointInLine) {  
18.            
19.             Texture2D regionTexture = brushLineContext.Canvas.PageConfig.RegionTexture;
20.             Vector2 pixelPosition = brushLineContext.FirstPointPixelPosition;
21.             Color32 seedColor = (Color32)regionTexture.GetPixel((int)pixelPosition.x,(int)pixelPosition.y);
22.             PointColor pointColor = new PointColor(brushLineContext.LineConfig.Color);
23.             Vector2 gradientCenter = brushLineContext.FirstPointUVPosition;
24.             bool sendUndoStep = true;
25.  
26.             bool isUndo =brushLineContext.Points.Last.Value.PointAction == PointAction.DoUndo ;
27.             bool isRedo = brushLineContext.Points.Last.Value.PointAction == PointAction.DoRedo;
28.             if ( !isRedo
29.                 &&
30.                 (brushLineContext.Canvas.BucketHistory.IsLastStepFromRegion(seedColor, pointColor) || isUndo)){
31.                 //click on the same region - so let's just use previous one.;
32.                 sendUndoStep = false;
33.                 Stack<AreaHistory> historyStack = RegionController.Instance.AreaDB[seedColor].History;
34.  
35.                 // 1. remove step from undo history
36.                 brushLineContext.Canvas.BucketHistory.ForceRemoveLastStep();
37.  
38.                 // 2. remove last step from area history as we will overwrite it (partial undo here)
39.                 historyStack.Pop();
40.  
41.                 // 3. if we have another item use it otherwise use default color
42.                 if (historyStack.Count > 0){
43.                     AreaHistory ah = historyStack.Peek();
44.                     pixelPosition = ah.Center;
45.                     gradientCenter = new Vector2(pixelPosition.x/brushLineContext.Canvas.Width, pixelPosition.y/brushLineContext.Canvas.Height);
46.                     pointColor.Color = ah.Color;
47.                 } else {
48.                     pointColor.Color = brushLineContext.Canvas.DefaultBGColor;
49.                 }
50.                    
51.             }
52.  
53.             AreaBounds bounds = RegionController.Instance.AreaDB[seedColor].Bounds;
54.  
55.             Vector2 position = bounds.Center;
56.             Vector2 size = bounds.Size;
57.  
58.             //calculate max distance
59.             float x = Mathf.Max(pixelPosition.x - bounds.xMin, bounds.xMax - pixelPosition.x) / brushLineContext.Canvas.Width * brushLineContext.Canvas.Aspect;
60.             float y = Mathf.Max(pixelPosition.y - bounds.yMin, bounds.yMax - pixelPosition.y) / brushLineContext.Canvas.Height;
61.             float maxUVDistance = Mathf.Sqrt(x * x + y * y);
62.  
63.  
64.             LinkedListNode<Point> node = BrushContext.GetPointNode();
65.             node.Value.Position = brushLineContext.GetWorldPosition(position);
66.             node.Value.Size   = size;
67.             node.Value.Status = PointStatus.ReadyToApply;
68.             node.Value.Scale  = 1.0f;
69.             node.Value.PointColor = pointColor;
70.             node.Value.MaxUVDistance = maxUVDistance;
71.             node.Value.GradientCenterUVPosition = gradientCenter;
72.             brushLineContext.Points.AddLast(node);  
73.  
74.             if (sendUndoStep){              
75.                 AreaHistory areaHistory = RegionController.Instance.AreaDB[seedColor].AddNewHistory(brushLineContext.LineConfig.Color.Color, pixelPosition);
76.                 brushLineContext.Canvas.BucketHistory.AddNewStep(seedColor, areaHistory, isRedo);
77.             }
78.                      
79.             return true;
80.         } else {
81.             return false;
82.         }
83.     }
84.     #endregion
85.  
86. }
87.  

And this is the sahder with radial animation.

Code (CSharp):

1. // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
2.  
3. Shader "NewBucket region shader" {  
4.     Properties {      
5.         _MainTex ("Swatch", 2D) = "white" {}          
6.         _RegionTex("Regions Texture", 2D) = "white" {}
7.         _Scale("glow size relate to whole image", Range(0,1)) = 0.5
8.         _Aspect ("Aspect", Range(0,2)) = 1
9.     }
10.  
11.    SubShader {
12.     Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
13.     Cull Off
14.     Lighting Off
15.     ZWrite Off
16.     Blend One OneMinusSrcAlpha
17.     Pass {
18.      CGPROGRAM //Shader Start, Vertex Shader named vert, Fragment shader named frag
19.  
20.      #pragma vertex vert
21.      #pragma fragment frag
22.      #include "UnityCG.cginc"
23.      //Link properties to the shader
24.    
25.      sampler2D _MainTex;  
26.      sampler2D     _RegionTex;
27.          
28.      float         _ClickUVX;
29.      float         _Scale;
30.      float        _Aspect;
31.      float        _MaxDistance;
32.  
33.      struct v2f
34.      {
35.          float4  pos : SV_POSITION;
36.          float2  uv0 : TEXCOORD0; // noise      
37.          float2  uv1 : TEXCOORD2; // region
38.          float2     uv2 : TEXCOORD3; // radius glow
39.          float2  uv3 : TEXCOORD4; //  origin click (to compare regions)
40.          fixed4  color : COLOR;
41.      };
42.  
43.      float4 _MainTex_ST;
44.      float4 _RegionTex_ST;
45.  
46.      v2f vert (appdata_full v)
47.      {
48.          v2f o;
49.          o.pos = UnityObjectToClipPos (v.vertex);
50.          o.uv0 = TRANSFORM_TEX (v.texcoord, _MainTex);      
51.          o.uv1 = TRANSFORM_TEX(v.texcoord1, _RegionTex);
52.          o.uv2 = TRANSFORM_TEX(v.texcoord2, _RegionTex);
53.          o.uv3 = TRANSFORM_TEX(v.texcoord3, _RegionTex);
54.          o.color =  v.color;      
55.          return o;
56.      }
57.  
58.  
59.  
60.      static const fixed COLOR_DIFF = 0.20;
61.  
62.      fixed getColorAdd(fixed dist, fixed maxDistance){
63.          fixed d = 1 - smoothstep(0, maxDistance, dist);
64.          return COLOR_DIFF * d * d * d * d;
65.      }
66.  
67.  
68.      bool isInRegion(float2 uv, float2 origin){
69.          fixed4 region = tex2D(_RegionTex, uv);
70.          fixed4 original = tex2D(_RegionTex, origin);
71.           fixed4 tmp = (1 - (region - original));
72.          return tmp.r + (tmp.g*10) + (tmp.b*100) == 111;
73.      }
74.  
75.  
76.      half4 frag (v2f i) : COLOR
77.      {
78.         fixed4 color = i.color;
79.         fixed r = tex2D (_MainTex, i.uv0).r; //noise texture        
80.         float2 origin = i.uv3;
81.         float2 uvDistance = i.uv1 - origin;
82.         uvDistance.x *= _Aspect;
83.         float uvLength = sqrt(uvDistance.x * uvDistance.x + uvDistance.y * uvDistance.y);
84.         fixed maxDistance = i.uv2.x;
85.         fixed maskSizeScale = i.uv2.y;
86.         color.rgba *= uvLength < maxDistance * maskSizeScale;
87.         color.rgb += getColorAdd(uvLength, maxDistance); //glow
88.         color.rgb += lerp(-0.5/255, 0.5/255, r); //noise
89.         color.rgba *=isInRegion(i.uv1, origin);
90.         return color;
91.      }
92.  
93.      ENDCG //Shader End
94.     }
95.    }
96. }
97.  
98.  

To make fill multiple cell at once (I did it in another project fro my customer) something like this (I made it for brush, but bucket will works the same way)

You need to create a combined mask runtime (you create a temporary render texture where you copy regions one by one (i did that using graphic.blit and 'not' shader).

 

wow, the dot line effect is amazing~~ I wanna buy that!! you make the dot mesh run time . ?

 

No. this is SDF texture and then moving diagonal lines on top of that. SDF is used for outline layer rendering and for this moving ants effect.

 

Hi i am using paint craft pro package its ok with android but when i build in ios platform then it shows black screen.
how can i resolve this issue?

 

@unity_iLxAeHlWxpIIXw,
You can downgrade to 2017.x or just disable "Metal" api at the graphics API at the build settings

 

Hi nicloay, I'm using your Paint Craft package i run on PC it's ok but when i build on Android and IOS. It's look like this, how can i fix this?

 

Hello It looks like you are trying to use Unity 2018. If yes please remove "Metal" support

If it didn't help, please make sure that you imported the package from asset store using unity editor. otherwise you can miss materials and layer setup in the project.

Please let me know if it helps or not

Thanks.
//Nikolay.

 

i tried to follow you but it not help

 

Which version of unity do you use?
Can you give me the log from the device starting from beginning. here you can find the way how to retrieve the logs by platform.

 

Hi Nicloay
is it possible that we can use this kit for colour by number game? if yes then how? or if No then Why?

 

Hello.

I have experience in developing color and voxel by number games before, And I can say that there is no reason to use paintcraft package for these kind of projects. pixel images are small is something like 100x100 pixels. so you can use Texture.GetPixels() SetPixels. it relatively fast. and then you can use some shaders to render numbers on top of the painted texture.

I also saw the specific to color by number packages on asset store, I haven't use them and don't know anything about quality about them but maybe they will fit you.

 

but i want to use high resolution pixel and divided each (different colour) part assign a number. when i used high resolution image then it takes time to get pixel or set pixel which is not good for user experience so can you guide me how can i achieve my target in an efficient way.
thanx

 

In paintcraft there is no option to compare colors with desired color. which required in your case.

if you have just bucket fill - one click -> fill the whole region you can use following technics which I used in another project (antistress coloring book).

Assume that you have maximum 4096 regions. so basically you need a texture 64x64 where you can keep all info about your painted area.

1. You paint your source image in to color with unique colors, but you need to have a step 4 bytes for your colors and use just Red and green channel. like
RGBA(0,0,0,0), RGBA(4,0,0,0), RGBA(8,0,0,0)...RGBA(16,32,0,0,0)
2. In your shader which you paint you use 2 texture - one your region file, another one is lookup texture 64x64 pixels
3. Your shader take pixel from region (your color like RGBA(16,32,0,0) and use Red and Green as UV coordinates for your lookup texture which has the size 64x64
4. If you want to change region color you just modify the pixel in your lookup texture.


So you see that you will need to also need to make your source region texture make readable at least on the begining to iterate over all pixels and store info which color on which position does it have so when you click on the texture you can quickly access info to the UV coordinates and check pixel color.


Also you can see that to check whether you painted all colors correctly you just need to check all those 4096 pixels.

 

i want to assign one number to hole region and fill hole region on one click by pixel reading. i don't know about shader how to use it in coloring that's why i use pixel logic. can i use pixel logic in more efficient way?

kindly send me your game link antistress coloring book.

 

I'm sorry , those game is still in production.
Also I thought how to do that in paintcraft. but it still required customization and extensive c# coding.
In paintcraft everytime when you click region you need to store which color do you apply on it, (the same when you use undo/redo). and then just keep this info is this color expected or not.
It's so much customization so I'm not sure that paintcraft will fit you well

 

HI
I'm used in paintcraft plugin but android build not working in android phone so plz help me.

 

When you start build connect your phone to PC and int the console run ```adb logcat -s Unity``` then post error messages here.

Also can you provide more info what exactly desn't work for you.

Thanks.
//Nikolay.

 

Hello
first of all thanks Nikolay

i'm current working in unity do not working in Xcode so how to check unity error
- android apk complete build but install and open time "Blue Screen" stable

 

adb logcat is android developr tool which run through the console.
Blue screen - maybe you forgot to include proper scenes from your projects?

 

Hello
i'm use mac pc how to use "adb logcat -s Unity" this command
plz help me

 

- i'm use unity 2017.4.7f1
- first time open project that time three error show
code comet line
case TextureFormat.ATF_RGB_DXT1:// Flash-specific RGB DXT1 compressed color texture format.
// case TextureFormat.ATF_RGBA_JPG:// Flash-specific RGBA JPG-compressed color texture format.
// case TextureFormat.ATF_RGB_JPG:// Flash-specific RGB JPG-compressed color texture format.
// return 0;

 

you can find here https://docs.paintcraft.in/QuickStart.html how to setup texture format for images.

 

but i'm using github demo project
- github project not working apk install in android device than after open apk that time blue screen open dose not drowing screen open

 

I'm sorry there is no paintcraft on github. there is just old version "Colorus" there. I don't provide any support for that package. it was build on Unity 4.3 you can try to use that version, but I'm not even sure that it's compatible with mobern ios or android.