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

Unfortunately I can't reproduce this bug, but i'll reupload latest version to the google play when new version will be released.

No any issue to use portrait or landscape. It a standard orthographic camera which look at the canvas so you can adjust it as you want.

 

Sims like that latest feature for 1.04 release is ready. It's a stamps.

Just need a bit time to clean the code and make a refactoring. Hope to release it this week

 

New version (1.04) is live. Please use Unity5.5 or later version to download it from asset store, otherwise you will get 1.3.
Already asked to remove previous version but it could take another couple of days.

 

I the SVG integration completed?

 

Sorry but not yet. I've made some research and first prototype but i think it only be released at least within a month.

 

Okay, but can this asset still be used to make adult coloring books and fill in areas like mandelas?

 

This is my idea about svg. step by step

1. Render SVG to texture with transparency (this is what already tested, and partially works)
2. Calculate all transparent semitransparent pixels regions. eg. alpha < 0.95 (I have flood fill algorithm from my previous coloring book )
3. Paint this region automatically in to different colors
4. Create page config on runtime and feed it to the paint craft.

So it's really possible, just required time to implement and test it.

 

Okay, thank you. It would be awesome if you could implement it.

 

Just added new 1.04 features overview in one video
* stamps
* drawing game objects
* pattern brush
* drawing on existing image (with eraser)

 

Finally getting around to using your asset Nicloay, its come a long way since the sub 1.0's last year, congratulations!

I'm looking at your TextureUtil to parse through it and understand how to replace the regions portion with something that could support complex images such as this one:



Obviously using the current regions code with something this complex would be too time consuming to create hundreds and hundreds of unique colors per "area".

Users in these typs of apps do use the brush, but, they also like the concept of staying in the lines, which requires masking off areas (which in your app requires regions be preset).

Without having to implement a machine vision pre-fill on each image before uploading it, whats the best way to solve this problem?

 

Hi Nathaniel nice to see you are back =).

I hope to provide solution for this on the next release (within 1- 1.5 month). just not sure when it will ready. My idea is to use svg image as source file and then runtime generate outline layer and calculate region as well.
Another option could be to write adobe ai script which will paint your regions.
If you want to try to implement something by your self. open ColoringPageConfig.cs file you will see getter method for region texture there. so you can inject synchronous code here which will calculate your regions. and don't forget to add some threshold for your black color. with thick lines (0,0,0,1)(RGBA) won't be enough so it could merge neighbour regions. so use something like (0.05,0.05, 0.05, 1)

 

Hi Nicloay
The Asset is fantastic!

Can you please tell me, how do we transform (scale and position) the Canvas from the prefab?

Thanks

 

Hi nikoladimev. Thanks for purchase.
You don't scale prefab directly as the paint craft canvas rendered on the screen through separated camera viewport rect So if you want to change this rect position you need

1. find object with t:ScreenCameraController (use search box)
   
2. Change viewport offset in this component
   

 

Hello Nikolay,

I have a problem on scene DrawOnExistingImage (and maybe others also).

When I build for android and play it, it seems that drawing still occurs when I click a UI button although it is on top of the drawing canvas. (UI button/panel is in different canvas)

it work fine in unity editor but not for android.

how to fix this problem?

 

Hello Muhammad
Thanks for reporting this bug. here is solution:

Please open ScreenCameraController.cs in editor and on line 57 you will find Update() method.
Please replace it to the following one (remove the whole update method with the body and place code showed below)

Code (csharp):

1.  
2.         void Update()
3.         {            
4.             HandleZoomOnScroll();
5.             if (EventSystem.current.IsPointerOverGameObject() == false && EventSystem.current.currentSelectedGameObject == null){
6.                 if (!HandleTouch()){                
7.                     HandleMouseEvents();
8.                 }    
9.             }          
10.             CameraSize.LateUpdate();
11.         }
12.  

Difference with original is additional condition which check event system status.

I'll push this update to the asset store immediately but it will take some time when it will be live

Thanks

 

Thanks,

It fixed on the ui button..

but other ui still have the problem such as panel/image. Any solution?

right now I just put a empty button script on it.. lol.

 

just add button controller on your image. or write another script which will consume this event.

 

I've been asked several times about this question privately

So let me explain it here how everything is works here, as it could be useful for someone else.

1. As you see very brush use some material. and after that swatch use this material. (Line contains of many swatches which positioned on interpolated line)
2. In this 2 folders you can find shaders used by default tools
   Paintcraft/BrushPack/Advanced/Common
   Paintcraft/BrushPack/Basic/Common
3. As you can see there is pages with and without region texture, and engine take different shaders for both of this
4. For pages which support regions you need to take shader which handle those regions and in the shader code in fragment shader you will see following lines
   
   Code (csharp):

   1.  
   2. half4 frag (v2f i) : COLOR
   3.      {
   4.          fixed4 color = i.color * tex2D(_MainTex, i.uv);
   5.          color.rgb *= color.a;
   6.          fixed4 region = tex2D(_RegionTex, i.uv3);
   7.          fixed4 original = tex2D(_RegionTex, float2(_OriginX, _OriginY));
   8.          color.a *= (region.a == original.a);
   9.          color.a *= (region.r == original.r);
   10.          color.a *= (region.g == original.g);
   11.          color.a *= (region.b == original.b);
   12.          return color;
   13.      }
   14.  
   
   
5. So here you can see the part which handle regions it's a 4 lines with color.a *= ...
   I think it's very straight forward. original is a color where you clicked first time when started drawing and color is a current texel color and if they are equals this telex will have original color. otherwise it will have alpha = 0 (as (region.b == original.b) evaluates to false and false means zero
6. So if you want to define region which is not paintable easiest way is to ignore e.g. everything where region color has alpha =0 so you need to add this row
   
   Code (csharp):

   1.  
   2.          color.a *= (region.a == original.a);
   3.          color.a *= (region.r == original.r);
   4.          color.a *= (region.g == original.g);
   5.          color.a *= (region.b == original.b);
   6.  
   7.          color.a *= (region.a != 0); //<--- here is additional check
   8.  
   9.          return color;
   10.  
   or if you want to compare that all channels has a zero value most efficient way would be this
   
   Code (csharp):

   1.  
   2.          color.a *= (region.a == original.a);
   3.          color.a *= (region.r == original.r);
   4.          color.a *= (region.g == original.g);
   5.          color.a *= (region.b == original.b);
   6.  
   7.          fixed sum = region.a + region.r + region.g + region.b; // <--- here we take a sum of all channels
   8.          color.a *= (sum != 0); // <--the same new check
   9.  
   10.          return color;
   11.  
7. Just use this for all materials of you brushes and that's it. If you don't know where to find material. select any tool config in inspector like PaintCraft/BrushPack/Basic/Brush/Brush Tool.asset then open brush setup in the unity window menu
   
   Then find filter which use some materials and click on it. so it will point you to the proper file in the project inspector
   

And I also forgot to mention that starting from 1.04 version you can define regions for all RGBA channels. that's mean that you could have 256*256*256*256 unique regions. Just make sure that you have FilterMode=Point in the texture import settings

 

Hello Nicolay,

I am trying to modify the existing pencil tool to have several layers that will have different color tones. I want to make some of the pixels appear in lighter shades (highlight effect) and some in darker shades, but this only works for point coloring (paints over other regions). When I try to include a region material, the effects are gone and the pencil paints like it did originally.

Can you please tell me how to configure the materials so the brush will work with regions as well?

I've attached the brush effect for reference.

 

did you use handmade filters? please export your tool and include your custom filters, also please provide result drawing screenshots as i don't completely understand what is an issue and how do you make your layers.

 

Hi Nicloay

Sorry for the conclusion. Here is a bit more detailed explanation:

We wanted to create a 3d like brush effect - like when using oil colors and the tool setup along with the brush texture are the following:

Brush:


tool setup:


result:


However this method does not allow us to paint within a region. So instead of using SetMaterial and PenderSwatchWithPointMaterial we're using the RenderSwatch



When we use RenderSwatch we get the ability to render within the regions, but the texture of the brush is lost.



Thanks,
Nikola

 

Ok. I see.

1. Use your first approach which partially works (don't draw within region currently)
2. Make sure that you use material with proper shader (include "region" keyword in it)

Iet me know if it didn't help.
thnaks.

 

Hello Nikolay,

Is there any way to implement a color picker into the ui?

 

Is the question how to implement color picker in unity, or how to integrate any existing color picker in to paintcraft.
If it's the last question then check ChangeColorOnClickController script it has the link to the LineConfig and the code LineConfig.color = SomeColor
So if you have color picker just in your handler (when color change) just assign new color to the LineConfig.

 

Hi, I am getting bug with undo manager. When fill brush is selected try to fill two zones and click undo - both of them would be cleared. It happens with all last two zones. Also if other brush used, you can see the situation, when snapshot seems like made not at HandleTouchesCancelledOrEnded.

Can you please help me to solve this problem?

 

Problem fixed with inserting of

snapshotHistory[snapshotOrderId].RenderTexture.DiscardContents();
Graphics.Blit(cameraTargetTexture, snapshotHistory[snapshotOrderId].RenderTexture);

to GetCurrentSnapshotData() method, which seems strange for me. Still cant figure out what cause the bug

 

Kalyyta Thanks for reporting this. I'll check this out and include a fix in to the next build.

 

Hi Nicolay,

We are having problems with the view port rect of the canvas controller. It doesn't scale properly on different resolutions. For example when testing on 4:3 ratio it looks like it should, same with 512x384 resolution, but when switched to 1024x768 it's already displaced (and canvas takes too much space). When testing on other aspect ratios the camera expands more than the image and leaves blank space.
Can you please help solve this?
I'm including some reference images:
4x3

1024x768

16:9

Inspector values

 

So can you please tell the exact reason of the bug?

 

sorry i can't investigate this problem right now, but i'll give you reply within a week.

 

nikoladimev this is default behaviour. as you see it just try to show you the whole image, otherwise you need to zoom this image and cut the image on top and the bottom edges.

 

Hi Nicloay,

Thanks for the great product. Its been a joy to use. I have a question I'm hoping you can help me with.

Is it possible to have the background or Back Layer be transparent? Ideally I'd be able to see the rest of the scene and then paint on top of it. I've tried a number of things such as changing the shader to various options such as transparent but I was unable to get it to work. I also tried using a transparent PNG as a background image but that didn't work either. Any help is greatly appreciated.

Thanks for your time.

 

znerolnoht Thanks for feedback.
I tried to implement this some time ago, but unfortunately with no luck. i don't know right now how to make transparent background, so don't think that I'll implement this in near future.

 

I suspected it might be a bridge too far. Thanks for the help

 

I found what was the issue.

1. I've enabled debugging for snapshot pool (the array which store render textures which keep the states) and found that initial snapshot contains correct state but final snapshot doesn't contain any changes.
2. Then i recognized that this is a camera PosRender related issue.
   Correct flow is following:
   1. Camera render changes (line drawing or bucket fill) to the canvas
   2. Snapshot pool fix changes to separated texture
   But what's happen is
   1. User input finished
   2. Snapshot make fixed changes before bucket behavior made a changes on the actual canvas

So. to proper fix this problem please open ScreenCameraController.cs script and scroll down to the last method MakeSnapshot replace the whole method to the following one

Code (csharp):

1.         bool finalSnapshotInProgress = false;
2.         IEnumerator MakeSnapshot(){
3.             yield return null;
4.             finalSnapshotInProgress = true;
5.             snapCommand.AfterCommand();
6.             Canvas.UndoManager.AddNewCommandToHistory(snapCommand);
7.             Canvas.SaveChangesToDisk();
8.             finalSnapshotInProgress = false;
9.         }

Then find the method EndLine in the same file and at the end replace (it should be somewhere at line 163)

Code (csharp):

1. MakeSnapshot();

to the

Code (csharp):

1. StartCoroutine(MakeSnapshot());

And finally change Update() function replace it with the following content

Code (csharp):

1.         void Update()
2.         {          
3.          
4.             HandleZoomOnScroll();
5.             if (EventSystem.current.IsPointerOverGameObject() == false
6.                 && EventSystem.current.currentSelectedGameObject == null
7.                 && finalSnapshotInProgress == false){ //HERE IS THE CHANGE - we just make sure here that we don't handle input until our snapshot is done (it's rarely possible when user click every frame on the screen)
8.                 if (!HandleTouch()){              
9.                     HandleMouseEvents();
10.                 }  
11.             }        
12.             CameraSize.LateUpdate();
13.         }

Or just wait couple of days until new version is accepted on asset store
Thanks again for reporting this bug and have a nice weekend =).

 

Hey @nicloay, I'm using Paintcraft in my project, and I'm attempting to have a small canvas component within a larger UI ( screenshot is in the attachment ). The panel on the left is just an image, and I want the panel on the right to be a small drawing canvas. I'm having issues reconfiguring Paintcraft to handle drawing only in the panel on the right. Any advice or examples of something like this?

 

jrisberg You can use canvas screen controller to adjust offsets. please see this comment

 

Thanks for reply! I understood the problem. Can I ask you, why couldn't we just remove snapshotHistory from SnapshotPool and all the logic in SnapshotPool? And save only creating of new snapshot on MakeSnapshot() calling.

I mean, snapshotHistory just doubles the data, stored in UndoManager::commandHistory, which provides all undo logic by itself. UndoManager needs SnapshotPool just for creating new snapshots, and that is all.

I think it would be better to make the whole undo system simpler.

 

Kalyyta
This is different entities. one is know how to take snapshot and store them. another one just know that some events happened, and know how to navigate over them back and forth. Just check e.g. cupcake android/ios coloring books. they have stickers which not applied to the canvas but draggable at any time (even after 100 different lines), and they have glitters which shine on top of the whole picture (maybe some kind of particle system). and all of this could be a unity game objects, which store on the scene. not on the render texture. So if you are making app like this what you have to do is implement some drag'n'drop gameobjects on the player camera, and record this event in the UndoManager, by implementing interface and adding this event to the queue.

Hope this make sense about why do i have those 2 classes there. Let me know if you have further questions.

 

Hi Nicloay, any updates with SVG support?

 

Sorry, but it's not yet ready. Hope to finish it at the end of the months maybe at beginning of May.

 

another request by email

And here is the code which you need to include to CanvasController (in next version it should be there already)

Code (csharp):

1.         public void SaveImageWithOutlineLayer(){
2.             StartCoroutine (DoSaveImageWithOutlineLayer ());
3.         }  
4.  
5.         IEnumerator DoSaveImageWithOutlineLayer(){
6.             yield return new WaitForEndOfFrame();
7.             RenderTexture previous = RenderTexture.active;
8.             RenderTexture resultTexture = RenderTexture.GetTemporary ((int)Width, (int)Height, 0);
9.             Graphics.Blit(BackLayerController.RenderTexture, resultTexture, BackLayerMaterial);
10.             Graphics.Blit(OutlineMaterial.mainTexture, resultTexture, OutlineMaterial);
11.             RenderTexture.active = resultTexture;
12.             Texture2D save = new Texture2D ((int)Width, (int)Height, TextureFormat.RGBA32, false, true);
13.             save.ReadPixels (new Rect (Vector2.zero, Size), 0, 0, false);
14.             save.Apply ();
15.             System.IO.File.WriteAllBytes(PageConfig.UniqueId + ".png", save.EncodeToPNG());
16.             RenderTexture.active = previous;
17.         }  
18.  

and then just call it when you want and don't forget to adjust save file. right now it's a PageConfig.UniqueId + ".png"

 

With the new Stamp feature - is there a way to place the stamps on top of the Outline layer, rather than underneath? Maybe by adding another Canvas layer that only the Stamp brush can paint to?

 

No. it's not possible. at least with current render mechanic. Only if you implement by your own placing sprite on top of all layers.

 

nicloay - Thanks for the quick response.
Is there a way to remove the grey aliasing on the edges of the stamps? So instead of this:


it does something more like this (without the grey aliasing on the white stamp edges):


I suspect it's something in the Shader code?
Thanks in advance!

 

I'll check what i can do. I use standard shader approach. so maybe it's just material used by this tool. I'll update you soon.

 

I finished integration with SVGImporter and SimpleSVG. do you want a early build or you are ok to wait week or two while it will be released on asset store?

 

are you planning playmaker support on the future?

 

AyreGuitar
Yes. it was a shader specific problem. I fixed this (updated shaders blending mode, from post multiplied alpha to premultiplied alpha. so, right now it works as you expected). It will be fixed in new version

rizkankutu
No, i didn't have any plans with playmaker

 

Glad you managed to fix it. When will the new version be out?