Search Unity

  1. Unity 2020.1 has been released.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by nicloay, May 17, 2016.

  1. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
    AlphaGTR likes this.
  2. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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
     
    ayk and AlphaGTR like this.
  3. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  4. AlphaGTR

    AlphaGTR

    Joined:
    Oct 26, 2013
    Posts:
    38
    I the SVG integration completed?
     
  5. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    Sorry but not yet. I've made some research and first prototype but i think it only be released at least within a month.
     
  6. AlphaGTR

    AlphaGTR

    Joined:
    Oct 26, 2013
    Posts:
    38
    Okay, but can this asset still be used to make adult coloring books and fill in areas like mandelas?
     
  7. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  8. AlphaGTR

    AlphaGTR

    Joined:
    Oct 26, 2013
    Posts:
    38
    Okay, thank you. It would be awesome if you could implement it.
     
    nicloay likes this.
  9. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    Just added new 1.04 features overview in one video
    * stamps
    * drawing game objects
    * pattern brush
    * drawing on existing image (with eraser)

     
    ayk likes this.
  10. SwabbyNat74

    SwabbyNat74

    Joined:
    Oct 27, 2014
    Posts:
    17
    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?
     
  11. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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)
     
    Last edited: Mar 1, 2017
  12. nikoladimev

    nikoladimev

    Joined:
    Dec 29, 2016
    Posts:
    4
    Hi Nicloay
    The Asset is fantastic!

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

    Thanks
     
  13. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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)
      Screen Shot 2017-03-01 at 12.06.54.png
    2. Change viewport offset in this component
      Screen Shot 2017-03-01 at 12.08.09.png
     
  14. syamilsynz

    syamilsynz

    Joined:
    Dec 22, 2013
    Posts:
    29
    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?
     
    Last edited: Mar 14, 2017
  15. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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
     
  16. syamilsynz

    syamilsynz

    Joined:
    Dec 22, 2013
    Posts:
    29
    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.
     
  17. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    just add button controller on your image. or write another script which will consume this event.
     
    syamilsynz likes this.
  18. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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
      Screen Shot 2017-03-16 at 16.18.09.png
      Then find filter which use some materials and click on it. so it will point you to the proper file in the project inspector
      Screen Shot 2017-03-16 at 16.18.59.png

    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
     
  19. nikoladimev

    nikoladimev

    Joined:
    Dec 29, 2016
    Posts:
    4
    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.
     

    Attached Files:

  20. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  21. nikoladimev

    nikoladimev

    Joined:
    Dec 29, 2016
    Posts:
    4
    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:
    brush-middle-expl.png

    tool setup:
    tool-1.png

    result:
    brush-u.png

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

    tool-1-2.png

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

    brush-u1.png

    Thanks,
    Nikola
     
  22. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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) Capture.PNG
    Iet me know if it didn't help.
    thnaks.
     
  23. pandemik

    pandemik

    Joined:
    Mar 23, 2017
    Posts:
    9
    Hello Nikolay,

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

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  25. Kalyyta

    Kalyyta

    Joined:
    Feb 12, 2016
    Posts:
    13
    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?
     
    nicloay likes this.
  26. Kalyyta

    Kalyyta

    Joined:
    Feb 12, 2016
    Posts:
    13
    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
     
  27. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    Kalyyta Thanks for reporting this. I'll check this out and include a fix in to the next build.
     
  28. nikoladimev

    nikoladimev

    Joined:
    Dec 29, 2016
    Posts:
    4
    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
    4x3.jpg
    1024x768
    1024x768.jpg
    16:9
    16x9.jpg
    Inspector values
    inspector.jpg
     
  29. Kalyyta

    Kalyyta

    Joined:
    Feb 12, 2016
    Posts:
    13
    So can you please tell the exact reason of the bug?
     
  30. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    sorry i can't investigate this problem right now, but i'll give you reply within a week.
     
  31. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  32. znerolnoht

    znerolnoht

    Joined:
    Apr 20, 2015
    Posts:
    3
    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.
     
  33. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  34. znerolnoht

    znerolnoht

    Joined:
    Apr 20, 2015
    Posts:
    3
    I suspected it might be a bridge too far. Thanks for the help
     
    nicloay likes this.
  35. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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 =).
     
    Kalyyta likes this.
  36. jrisberg

    jrisberg

    Joined:
    Mar 14, 2017
    Posts:
    1
    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?
     

    Attached Files:

  37. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    jrisberg You can use canvas screen controller to adjust offsets. please see this comment
     
  38. Kalyyta

    Kalyyta

    Joined:
    Feb 12, 2016
    Posts:
    13
    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.
     
  39. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  40. AlphaGTR

    AlphaGTR

    Joined:
    Oct 26, 2013
    Posts:
    38
    Hi Nicloay, any updates with SVG support?

     
  41. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    Sorry, but it's not yet ready. Hope to finish it at the end of the months maybe at beginning of May.
     
  42. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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"
     
  43. AyreGuitar

    AyreGuitar

    Joined:
    Oct 12, 2013
    Posts:
    35
    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?
     
  44. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  45. AyreGuitar

    AyreGuitar

    Joined:
    Oct 12, 2013
    Posts:
    35
    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:
    Stamp_GreyAliasing.png

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

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

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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.
     
  47. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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?
     
  48. madmoredie

    madmoredie

    Joined:
    Jan 18, 2013
    Posts:
    7
    are you planning playmaker support on the future?
     
  49. nicloay

    nicloay

    Joined:
    Jul 11, 2012
    Posts:
    477
    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
     
    Kalyyta likes this.
  50. AyreGuitar

    AyreGuitar

    Joined:
    Oct 12, 2013
    Posts:
    35
    Glad you managed to fix it. When will the new version be out?
     
unityunity