Jul
15
2014

[Asset Store] Mobile Paint

unity_mobile_paint_draw_1

Simple touch paint program, optimized for mobiles.

Asset Store: https://www.assetstore.unity3d.com/#!/content/19803?aid=1101lGti
Forum thread: http://forum.unity3d.com/threads/released-mobile-paint-with-multi-touch.262645/

Current features:

List below is not updated, use Github Issues instead : https://github.com/unitycoder/UnityMobilePaint/issues
– Optimized pixel drawing
– Multi-touch support (you can paint with 10 fingers or more if supported in device *have only tested 10 on ipad / android)
– Works with Unity indie & pro
– Basic UI included (see right side of the main image.. color palette, brush size, clear button. Those are just guitextures, images can be replaced easily)
– Feature: Basic Floodfill tool, fill directly into canvas [done]
– Option: To not paint on top of black outlines  [done – using mask layer]
– Better palette handling (with proper color picker from gradient image) [done – modal palette dialog]
– Option: Minimum brush size (currently its fixed to 1) [done]
– Feature: Texture as painting canvas mask/layer [done – phase#1]
– Feature: Custom brushes : already tested and it works,  without brush texture scaling.. [done]
– Feature: Transparency/Opacity :  tested, works with custom brushes also.. [done]
– Feature: Use texture as drawable canvas (instead of extra layer only) done]
– Feature: Only paint inside current mask area (locking mask) [done]
– Feature: Advanced Floodfill tool, fill based on mask [cancelled] *basically same as locking mask
– Feature: Floodfill threshold value [done]
– Feature: LockingMask threshold value (to avoid artifacts) [done]
– Feature: Floodfill using mask only (not checking paint canvas) [done]
– Hide / Show user interface (would give more drawing area) [done] *with new UI demo scene
– Optimization: Wrapping can be cleaned up a bit, tested on another project [done]
– Feature: Random lines example [done]
– Feature: CanvasWithMask “reversed”, draw in the overlay instead of back layer [done *use TargetTexture to set which texture gets painted)
– Feature: Paint with texture pattern [done]
– Feature: Better User Interface, using new UI [done]
– Feature: Save image (to local folder or web?) [done *example included to save .png with System.IO.File]
– Feature: Custom brush with custom colors (selected color) [done]
– Option: Allow precise canvas location setting (if want to limit drawing to certain position on screen) [kind of done, with reference position]
– Option: To set line drawing resolution (to avoid gaps between circles when moving fast) [kind of done, can use highResolution toggle]

Feature requests (and random ideas, with estimated progress percentage)
– Cleaning up the sources, add more comments, add documentation for public methods [25%]
– Feature: Confirmation dialog (on clearing image) [-]
– Optimization: Use better algorithms for line drawing [10%- stuck]
– Feature: Sprite shader version of canvas [-] *I think ‘it just works’ already
– Feature: Use webcam or camera roll to select image as canvas [-]
– Feature: Use webcam as live background [-] *you can do this with transparent canvas and your own background webcam plane
– Feature: Display brush at finger positions using Gizmos using GL.Lines [-]
– Feature: Image scaling options (otherwise image aspect ratio “breaks” on wide screens)
– Feature: Procedural brushes
– Feature: Fading paint strokes (and other dynamic canvas effects)
– Feature: Eraser
– Feature: Use splines for fast drawing curves (currently it becomes straight jumpy lines)
– feel free to request / suggest other features!

Bugs / Limitations:
– Cannot draw all the way on image borders *Fixed in v1.7 or so
– Custom brush image is somewhat tilted? (if you want it to be straight, make it as tilted image originally)
– Drawing fast movements with custom brush won’t connect the lines as in brush mode *Fixed in v1.7 or so
– You will need to modify existing C# codes if want to add custom features *v1.9 plus has override examples, so no need to modify original script so much

Stats: (from test devices with v1.0)
Ceros Revolution (android) (Texture resolution: ~2048 x 1536) : 36fps idle, 10-13fps while painting with 10 fingers. **Note: Completely empty scene displays only 40-44fps on this device
MySaga C3 (android) : (Texture resolution: ~800 x 480) : 45fps idle, 35-42fps while painting with 3 fingers
– iPad2 : (Texture resolution: ~1024 x 768) : 30fps idle, 29fps while painting with 5-10 fingers (thin line), 10-15fps with bigger brush
– iPhone5 : (Texture resolution: ~1136 x 640) : 30fps idle, 29fps while painting with 5 fingers

 

Download Android Demo (.apk) *Feel free to post your device and fps + resolution in the comments (so can compare different phones/tables)
– MobilePaintV10.apk (mediafire | dropbox) *old
– MobilePaintV11.apk (mediafire | dropbox) *old
– MobilePaintV195.apk (dropbox) *running at half device resolution

 

Webplayer demo (with mouse): *old
http://unitycoder.com/upload/demos/MobilePaint/v1/ (v1.0, mouse version)
(v1.1 – webplayer demo not available yet)

Documentation (.pdf) *old
MobilePaint_web.pdf (v1.0)
MobilePaint_web11.pdf (v1.1)

References (apps using MobilePaint)
http://www.pixelenvision.com/finger-painting-coloring-pages/

Image#2: *work-in-progress: Using texture mask (black & white line drawing), mask is preserved while painting (its separate shader layer)

mobile_paint_unity_mask_image_1

Image#3: Custom brushes

mobile_paint_custom_brushes_1

v1.2 images:

mobile_paint_12_ss3 mobile_paint_12_ss2

v1.4 images: using new UI 4.6

mobile_paint_unity_new_ui_46

Painting with texture pattern (v1.8)

 

 

pattern_painter


189 Comments + Add Comment

  • Are u using setPixels?

    • Not using any of these SetPixel(), SetPixels() or SetPixels32().

      • What are you using instead?

        • Replied on the email. Source is included so have a look 🙂

          • Can I have the source too? Thanks 🙂

  • I have an immediate use for this. How long does it usually take to be approved in the Asset Store?

    • my average has been 1-3 weeks, so it could be still few weeks to go..(and ofcourse there is change that it gets rejected at first round..)

      If you want to purchase it “offline”, that is possible (i’ll send you an email).
      (and for information, asset store price is set at 5usd only)

      • Please email me, yes. Thanks.

  • First version now in the store (got in surprisingly fast)
    https://www.assetstore.unity3d.com/en/#!/content/19803

  • I purchased this – It prints circles obviously but when you are painting its not a smooth line, you can see circles being printed at a distance from each other.

    If you paint slowly, then the smoothness is there but it’s not when you paint fast.
    I hope you understand. What can be a solution for this?

    • It depends on this line (288) : int minDistance=brushSize-1;
      if you make it for example: int minDistance=1;
      or, int minDistance=(int)(brushSize*0.5f);
      Then it gets smoother, i’ll make it as public variable or better documented in next update.

      Floodfill is also coming up, using texture in the drawing plane, i’ll try to add it on next update also.

      • Excellent Thanks!

        Will be waiting for the update – do you have any timeline of when we can expect flood fill + other features? That will be awesome.

        • it shouldnt take more than ~half a day to make,
          but this and next week seems so busy that cannot promise it for this or next week..
          (will try to get started on early next week though).

          btw. if you have examples of what kind of textures you would use in the drawing plane,
          feel free to email me some images/links.

          One problem is, how to handle texture scaling on different devices, should it simply fit the texture on that drawing plane (by default this would happen), or should try to keep aspect ratio atleast..?

        • Added screenshot (2) how it looks with black & white linedrawing mask.

  • Hi, I’m interested in buying your script, but I really need a possibility of changing the brush. Do you think there is a chance to have such feature in the following days?

    • Was going to push ‘floodfill’, ‘new palette system’, ‘texture on canvas’ this week/weekend,
      but please check again here on this weekend, If I manage to add the custom brush for next update also..

      • custom brushes almost done, hopefully can submit to store during the weekend.
        If you have already purchased this and need it before asset store process, email me with the order number.

  • v1.1 submitted (new main features: floodfill, custom brushes, texture image layer)

  • Can this asset use masks to somehow achieve the effects (eyeshadow, lipstick, washing, etc) of this type of game?

    https://www.youtube.com/watch?v=7Qan2cJ1_zo

    Thanks!

    • with some modifications can do cleaning/washing, like here:
      http://forum.unity3d.com/threads/released-mobile-paint-with-multi-touch.262645/#post-1778628

      But having all those different color masks (eyebrows, hair etc) would need quite heavy modifications..
      personally maybe i’d try just small paintable textures for each of them or even vertex painting..

      so, basically its not possible, without heavy modifications to the code..(only benefit from this package could be just taking the painting part, which works fine even in bigger resolutions..)

  • So your asset can do the spa part (washing face, etc) out of the box, but the makeup (eyeliner, eyeshadow, etc) part will be difficult without modification right? I think it would be worth getting your package in that case.

    Do you have any recommendation for a good paintable texture or vertex painting tutorial?

    Thanks for your help!

  • Actually, what about a “locking mask” system like the one used in the following video…

    Basically, the first place you touch your finger, that area is “locked” as the only paintable area. If you lift your finger, you can touch down on any area again. Is this possible with your asset? Thanks again!

    • ‘Locking mask’ is planned, if not the next update 1.2 then after that..
      (it would just do a floodfill on touch and then use the filled area as an allowed paint area mask)

      • Awesome, sounds like this asset is becoming a do-it-all painting app. Any chance you will incorporate the new 4.6 ui with “prettier” buttons such as the crayons in the video above? Thanks for all your hard work.

  • v1.2 is submitted to store (might take a week or so)

    – Added: Alpha support for paintcolor (alpha value is now used), “soft / additive painting” now works
    – Added: Public variable “BrushAlphaStrengh”, it controls additive brush alpha strength, try 0.1f or 1 or 5 to see the difference
    – Added: Public variable “UseCustomBrushAlpha”, true = take alpha from brush, false = use paintcolor alpha value
    – Added: Public variable “useAdditiveColors”, true = colors adds up slowly, false = one click will instantly set color to brush or paint color value
    – Added: Initial canvas texture is now taken as an “clearing texture” (as an canvas texture) if assigned in the material maintexture in the inspector
    – Added: Public method “ReadClearingImage()”, reads initially set maintexture from canvas (to be used as an clearing image)
    – Added: Public method “DoUndo()”, basic undo system (restores one step only)
    – Added: Alpha value slider in the palette (color picker) dialog
    – Added: Demo scene “scene_MobilePaint_EraseCanvasAlpha”
    – Added: Demo scene “scene_MobilePaint_MaskImage”

    – Fixed: More guard clauses added (check for null mask texture, check if undo enabled before can do undo etc).
    – Fixed: Custom brush now uses brush colors (instead of paintcolor)

    – Changed: Floodfill now uses alpha also to compare fill spread (only RGB was used before)
    – Changed: Public variable “drawMode” is now using DrawMode enum (list is defined at top of MobilePaint.cs)
    – Changed: Renamed public variable “screenSizeAdjust” into “canvasSizeAdjust”
    – Changed: Renamed materials
    – Changed: “maskTex” variable is removed (“maskImage” is used instead, originally maskTex was copied from “maskImage”..)
    – Changed: GUIScaler.cs now runs at Awake() instead of Start()
    – Changed: Sample brushes are now with colors
    – Changed: Renamed original demo scene into “scene_MobilePaint_default”

    – Updated: Documentation for current version

    – Cleaning: Arranged scripts into different folders
    – Cleaning: Started moving helper methods into separate script Library/PaintTools.cs

    ps. ‘Locking mask’ was not included in the 1.2 yet

  • Awesome. This asset is getting better and better!

  • Basic locking mask now works, will be in the next update (submitted to store most likely within 5-10 days)

  • Expect to have more functions undo, redo and save the image.
    Thank you for this Asset!

    • Thanks!

      There is single step undo in 1.2,
      redo could be possible with the same technique,
      multiple undos could work, just worried if they use too much memory..

      Saving image is planned,
      just the problem is that its different in all platfoms, which platform you would need?

      pc is easy, just save current image as file,
      webplayer would need some php/server scripting,
      mobiles: not sure if ios allows saving to cameraroll without native plugins?
      Android supposedly allows you to write directly to the card (with system.io) ?

  • Submitted to store just now:

    v1.3
    – Added: Locking mask painting: Only paint in the area that you first click (determined by floodfill)
    – Added: Demo scene “scene_MobilePaint_PaintAreaLockMask”
    – Added: Option to disable full screen quad creation for canvas (and use existing mesh instead, used in mesh painting)
    – Added: Demo scene “scene_MobilePaint_MeshPaint”
    – Added: Option to disable previous & current brush stroke position connecting (if you paint & move fast, those positions get connected, but it causes problems when painting to custom mesh)
    – Updated: Documentation for current version
    – Cleaning: Code cleaning

  • Hi, we are thinking in buying your asset for a children book we are making. In some exercises the child has to draw something, and your plugin is perfect for the task. The only concern we have is that we have to save the drawing (any image format) , maybe locally or remotely in Parse, it is posibble to extract the image representation in binary or maybe Base64 image so we can save it to a file o in some cloud storage? … Does the area were you paint is a Texture or something like that?,

    Thanks in advance, and we think we still gone a buy it, and maybe we your help implement some kind of Saving method ..

    Rogger

    • Yes, you have direct access to the canvas main texture (as Texture2D), so just need to decide a way how/where to save it.. (that canvas is regular quad + material with texture(s))

      I am adding save examples in coming versions, only problem is, it seems for iOS devices you need native plugin to save into camera roll..(?)

      You could still save into webserver or into app data folder quite easily (system.io)

      • Excellent! Thanks for the reply! And yes, for iOS it will be necessary some kind of plugin to save to the camera Roll, But I think we can save it to the persistent path in unity , something as saving xml files or scores and then syncing them to the cloud!
        We will buy it later today and we will be in touch, to let you know how we did it and if it worked…

        • thanks, and feel free to report any small or big feature that would be nice to have etc.

  • Hello! I have purchased your app and it is amazing. This asset is a a huge time saver and well documented. I however have 2 minor problems though.

    1. instead of the toolbar being to the right of the screen I need for the it to be on the bottom. however when I got to Canvas Size Adjustment and off set Y to -30, it will offset the top and not the bottom. inverting the value (y=30) produces a clipping error.

    2. the undo system is Awesome! however I need for the user to be able to undo 2-3x not just one

    if you could get back to me at your convenience that would be great!

    • Hi,

      Ok, i’ll check about the Y problem.

      Multiple undos: Possible, currently it just creates 1 array to hold undo, but adding a list of arrays should work, i’ll try to add that in next update.

      thanks!

      • couldnt get multiple undo to work yet for this v1.4 update, i’m thinking need to make “smart undo” instead. Should only save the part of the image which was modified, not whole full texture..

    • Ok founded the Y-offset bug:

      MobilePaint.cs

      // find line:
      cam.ScreenToWorldPoint(new Vector3(cam.pixelWidth+canvasSizeAdjust.x, 0, cam.nearClipPlane + 0.1f))
      
      // replace that line with:
      cam.ScreenToWorldPoint(new Vector3(cam.pixelWidth+canvasSizeAdjust.x, canvasSizeAdjust.y, cam.nearClipPlane + 0.1f))
      
  • Hi,
    Can I customize the interface?

    • Yes, currently its just a bunch of GUITextures used as buttons. (and they just set the canvas public properties when clicked: for example PaintColor, BrushSize.. so it should be quite simple to add custom inferface).

      Next version has basic new UI example also.

      • Will the new UI support Unity 4.6 UI features? Thank you

        • Yes, 4.6 UI example will be included.

  • v1.4 submitted to store just now.

    Warning: Package is submitted with 4.6 and on the next update after this, the old demos will be replaced with new UI versions and old GUI wont be supported. (it would still work, but then you have to remove new UI related code, if want to use this in older unity versions).

  • Hello, i just purchased your package and it’s really great. I have one question: i would like to use
    the CanvasWithMask material, but i would like to use for the Canvas another texture(not a white texture). Can this be done? If so, can you please tell me how?

    • If you assign texture to the “CanvasWithMask” material, then it will use that as canvas material (instead of clearing to white).

      It happens at InitializeEverything() and there “usingClearingImage” gets set to true, if mainTex has some material.

      • Thanks for your quick reply. I tried to use another texture and it behaves the way you say, the only problem is that what i paint doesn’t show up over that texture. If i use a png texture with transparency then it behaves like a mask. So, what i want to achieve is to draw on top of that texture.
        Also, can i mix the custom brush texture with color? If i use a white brush texture, i would like to be able to draw with different colors of that brush texture. Can this be done?

        • hmm.. i guess cannot do that without few modifications in the current version, i’ll add example in next update. (temporary workaround could be: if make the canvas cleared with transparent and then have another full screen quad at the back, with your image..)

          Custom brush with selected color:
          Can add that in next update also. temporary workaround would be: Modify “DrawCustomBrush()”, inside the for loop, it takes color from “customBrushBytes”, so replace those with values from “paintColor”..

          • Thanks so much for your support. I managed to make it work the way i wanted 🙂
            Keep up the good work!

  • Hi,

    I just purchased your plugin and I’m trying to find a way to use an image as mask in your erasecanvasalpha example.
    Any hints?

    Thanks!

    • That needs a custom shader,
      if you need it today, email me with your order number i’ll email the new shader,
      but I’ll also submit to store today (takes usually few days).

  • v1.6 update on the way to store:

    read changes here,
    http://forum.unity3d.com/threads/released-mobile-paint-with-multi-touch.262645/#post-1987477

    **Note: price will go up by 5usd in this update**

  • Hi

    this works in a pc with windows 7 multitouch (with multitouch monitor) or only in mobile devices?

    • Have not tested with multitouch monitor..
      there are 2 “modes”:
      – Mouse painting ( uses Input.GetMouseButton() and mouse position)
      – Touch painting ( uses Touch() to get touch positions)

      So if win7+touch monitor supports those unity Touch() events, then multitouch paint should work.

  • I bought your product and I am trying to integrate to my project, I want to know how can I do to save what was draw to an image (like jpg or png)

    thanks
    Ricardo

    • In short:
      – Take mainTexture from painting canvas : http://docs.unity3d.com/ScriptReference/Material.GetTexture.html
      – Then convert to bytearray : http://docs.unity3d.com/ScriptReference/Texture2D.EncodeToPNG.html
      – Then save to file with System.IO: File.WriteAllBytes(Application.dataPath + “image.png”, bytes);

      But might have differences between platforms, and system.io doesnt work in webplayer

      • ^ actually that wouldnt work if the mask material is used..(it would only save the paint layer). Taking screenshot (after hiding UI) would be better, and saving that..

        • Just my 2 cents.
          I actually tested what you suggested for saving the image and it works, first taking the maintexture, encoding to png and saving it to persistentDataPath (instead of datapath).

          public override void Save()
          {
          Texture2D tex = painter.renderer.material.mainTexture as Texture2D;
          var bytes = tex.EncodeToPNG();
          // Not works for all platforms webplayer for example
          System.IO.File.WriteAllBytes(Application.persistentDataPath + “/” + KeyID + “.png”, bytes);

          }

          Then another user posted how to retrieve the image save, and also worked what you suggested, but instead of making public Initialize everything I added a public method to mobile paint to Load a image from a File.

          public void LoadCanvasImage(string FilePath, int height,int width)
          {
          if (System.IO.File.Exists(FilePath))
          {
          var bytes = System.IO.File.ReadAllBytes(FilePath);
          var tex = new Texture2D(height, width);
          tex.LoadImage(bytes);
          renderer.material.mainTexture = tex;
          InitializeEverything();
          }
          }

  • I want to load another image for fill in runtime. Do you know how I can do that? Thanks

    • To use as a mask or as canvas (paintable) ?

      Currently have to do something like this with your custom script:
      – Assign texture to the paint canvas material (_MainTex)
      – Call MobilePaint.InitializeEverything() // might have to make it public if it wasnt in the current version)
      – Test

      for mask:
      – Assign texture to the MobilePaint component: MaskTexture and enable [x]Use mask texture, if not enabled
      – Call MobilePaint.InitializeEverything() // might have to make it public if it wasnt in the current version)
      – Test

      I’m updating these methods so that image change is easier in coming versions though.

      • I posted my methods in another reply following your suggestions and Worked.
        I am currently using 1.3, do you recommend updating the plugin, actually it works well for me now, but I don’t know if there are major issues. For retrieving the image I added a public method to Mobilepaint (in the meantime you add yours) …
        public void LoadCanvasImage(string FilePath, int height,int width)
        {
        if (System.IO.File.Exists(FilePath))
        {
        var bytes = System.IO.File.ReadAllBytes(FilePath);
        var tex = new Texture2D(height, width);
        tex.LoadImage(bytes);
        renderer.material.mainTexture = tex;
        InitializeEverything();
        }
        }

      • Ahh, but now I spotted a problem. The ClearImage method doesn’t work well after loading the image the way you suggested, It does not clean it up, any suggestions to modify the ClearImage and leaveit blank ?

        Thanks

        • That most likely happens because it takes the current image as the clearing image (so if you click clear, it doesnt fill it with empty pixels, instead it uses that image which was read as clearing image)

          Look for “usingClearingImage = true;”, there it reads the current assigned texture from material as clearing image (into clearPixels[] array), probably should disable that or add option to do so..

          Other solution could be making ClearWithEmpty() function just to cleanup the pixels array with empty..

          • Excellent! I will try it. Thanks a lot!,

  • Support PC?I want to achieve the effect: can load a map as background, and then can draw?

    • Yes works with pc.

      There are few options:
      – Assign background image and draw on the top layer
      – Assign background image and draw on that background image

      Or what do you mean by “map as background”, what kind of map ?

  • Mate – would this work with a Surface Pro (2 and/or 3) pen input?

    • Not tested..but i believe it should work. (since you can enable either Mouse input or Touch input, surely it would get mouse events at least)

  • Works with unity 5??

    • Yes, it works. (but not yet uploaded to store with U5, that will happen probably after next 1-2 updates).

  • Is there anyway to share the Unity 5 version? I bought the 4.6 from the store, but we updated to Unity5…

    • It works, just import the project to Unity5 from asset store and let unity do that automatic script update. (where it says “Did you made backup… Yes, go ahead”) and then its ready to use.

      • Thank you for responding quickly, I tried that but examples do not work,

        I am on Unity 5 pro

        Initially I get, Material doesn’t have a texture property ‘5f4d61696e546578’
        I replace the targetTexture with _MainTex in the inspector, error goes away,
        however when I run it, both in editor or mobile, drawings do not appear.

        any suggestions?

        • hmm..that is strange. (I have tested on pro & personal, import from store, allow update, run demos, works). I guess you do have [x] EnableMouse checked there (it should be by default)

          Can you email me a screenshot how it looks like (with mobilepaint inspector visible).

  • Do you know if this asset will work with stylus on Surface Pro (2/3)?

    • Sorry about the double question. Have purchased and will test. I’ll let you know how I go.

  • Submitted v1.8 ** (with 4.6.0, next updates will most likely will be in Unity5 only) **

    – Added: painting with texture pattern (see scene “scene_MobilePaint_NewUI_PaintWithPattern”)
    – Added: public ReadCurrentCustomPattern(), reads current selected pattern texture pixels
    – Added: public GetCanvasAsTexture(), returns current drawing layer (the pixels array) as Texture2D
    – Added: public GetScreenshot(), returns current scene screenshot (without UI) as Texture2D
    – Added: “scene_SaveScreenshotToFile” example scene to test saving screenshots to file

    – Fixed: Now you can paint all the way to the image borders also

    – Changed: “canDrawOnBlack” is not properly working yet, now disabled on some fill modes

  • Is it possible to create a straight line with this tool so that I can make geometric objects?

    • Could be possible to add that, few questions:
      – How the painting of lines should happen:
      (a) Click start point, Click end point, line appears between them.
      (b) Click start point, keep dragging around, line preview is displayed from start to current position, lift finger/release button and line appears between start-end

      Also would it require snapping then?
      (like to ends of those lines, basically need to keep list of those points, since they are not separate elements, all is drawn into the texture)

      • Thank you mGear for your quick response. I’m really interested in purchasing this asset.

        For the painting of lines I prefer scenario B so that the user can have visual feedback. Also it should have snapping so that the geometry can close cleanly. If user can switch from free drawing to geometric drawing that would be great.

        Cheers!

        • Ok, I’ll have a look at it (probably within next week) and let you know.

        • Basic line drawing works now: http://pasteboard.co/1WhiuJh7.gif

          – Its separate drawing mode, so can switch between modes
          – currently using linerenderer as preview, not so pretty, but most likely will stay for initial release (could try to add rounding to end of lines)

          I’ll look into snapping later this week hopefully.
          And it still needs some other work too (make it work with touch also, adjust line width, color based on current brush size/color, etc)

          • Hi! Nice knowing that geometric line drawing is in the works. I hope it can also be done using mobile because that is where I need to use it. I’ll be arranging the process of purchasing this asset ASAP to test.

            Cheers!

  • Hey there! I’m interested in acquiring your plugin, it does seem great, but as far as I’m aware you’ve only got demos for much older versions (1.0 and 1.1, as far as I could tell) than the current one, which seems to be 1.8. I would really like to be able to test a more recent version before committing to the purchase, though, is there any way you could provide an updated demo?

    • yes, i’ll put a newer version soon

  • Hi there. Your asset looks wonderful. Before I purchase it, I was wondering if it is right for what I need. I have a chalk board and an easel that is only about a fifth of the screen…I was wondering if I can somehow attach the script to one of these objects (such as the easel or the chalkboard) and allow the player to just draw on that item. It will be tiny, but it is part of a little dollhouse game, so it is just supposed to be a cute little extra for the game. Would this script be right for that?

    Thank you!

    • Hi! yes, you can attach the script to mesh (with mesh collider)
      and then in the inspector:
      disable option “[ ] Create canvas mesh”. (so it uses the current mesh, instead of full screen quad)
      and probably need to set separate layer for the object and assign “Paint Layer Mask” (so that the drawing raycast doesnt hit other objects).

      • Thank you so much for your help. I just purchased your wonderful asset. I did what you said and for some reason, it makes it so the entire scene is zoomed out so you can’t see it. Here is a picture of what happens:

        http://alldrawnoutgames.com/images/mobilepaintscene.png

        and here is a picture of the settings I have:

        http://alldrawnoutgames.com/images/mobilepaint.png

        Could it have anything to do with this being a 2d game and using a 3d plane for the shape to put the mesh on?

        Thank you in advance.
        Rachel

        • Aha, good catch! There is one line of code, MobilePaint.cs around line 214 or so:
          Camera.main.orthographicSize = Screen.height / 2;
          Comment that line out, its not needed.

          Also you can disable “[ ] Hide UI While painting”, so the paint UI wont cause errors.

          • Thank you so much for your help. That fixed that problem. It isn’t drawing though. I’m assuming I did something wrong with the plane. Is it possible I can email you it to see if I did something wrong with the plane? Thank you in advance.

            Rachel

        • Yes, you can also email the scene, address is on the documentation.

          Or test these:
          – Check that the EaselPlane has “CanvasDefault” material assigned to it

          in around line 259 or so, manually assign some texture size, instead of using screen size:
          // original
          texWidth = (int)(Screen.width*resolutionScaler+canvasSizeAdjust.x);
          texHeight = (int)(Screen.height*resolutionScaler+canvasSizeAdjust.y);

          // try with this or other values
          texWidth = 256;
          texHeight = 256;

          That is actually limitation/bug when using custom mesh, I’ll have to fix that in next version.

  • Nice Asset ,

    [link removed]

  • Hi MGear,

    Just purchased your asset. One question. How can i use a texture as my canvas?

    Cheers!

    Randell

    • assign texture to the material maintexture. (then it will be read on start and if you press clear, it will clear to that texture)

      example: open demo scene “scene_MobilePaint_NewUI_Default”,
      Select “DrawingPlaneCanvas” gameobject,
      Scroll down to “CanvasDefault” material in inspector,
      assign texture to the material. *Texture needs to be readable: [x] Read/Write enabled in texture import settings

  • Hi there. In order to use a background image (like you would in a coloring book), it looks like you use a transparent png file. I did that, but it doesn’t work on my image, although it works perfectly with your sample image..(sample_linedrawing_noalpha.png). How do I save my png file so it will work on my image? (I’m talking about in the mask texture). Thank you!

    • Should it work as in “scene_MobilePaint_NewUI_MaskImageOverlay” example scene? (that one uses “sample_linedrawing_alpha.png”, which has [x] alpha is transparent enabed in texture importer settings.

      • Thank you! That worked! Is there any possible way to make it so that the background isn’t white? I wanted to be able to have this brown paper background…

        http://alldrawnoutgames.com/images/outside.png

        or does it need to be transparent?

        Thank you!

        • If you assign that brown paper as main texture to the drawingcanvas material, it should work. (basically you are then painting on that image..)

          I’ll try to remember to add example scene for having static background (separate from drawing canvas),
          or you could test scene “scene_MobilePaint_NewUI_EraseCanvasAlphaWithMask”, make your own separate gameobject with brown paper background (where the example has that cube) and set paint color alpha to 255 (not transparent), and set clear color alpha to 0, so the drawing area is transparent.

          • Wow! Worked like a charm…thank you so much! One more question. Is there a way to make the brush size less than 1. I tried doing it in the code to change the brush size variable to float so I could make it less than 1 but that didn’t work. Its fine if there is no way, just asking.

            Thank you!

        • brush size, 1 pixel is minimum.. If you need it to be smaller, have to increase the resolution. (you can test it with scene “scene_MobilePaint_NewUI_Default”, set resolutionScaler=2 *double resolution, and remove any texture from material maintexture, if there is any).

          Currently resolutionScaler doesnt support scaling images, so if any image or mask is assigned, it will take the texture resolution, so then you could double your texture resolution to have higher resolution.

          • Thank you very much for explaining that to me. It did work nicely in the “scene_MobilePaint_NewUI_Default” scene. Like you said, it wouldn’t work on the texture in my scene. When you say make the texture a higher resolution, do you mean in Photoshop, or do you mean in Unity?

            Thank you!

        • Higher resolution image: make it outside unity, If you texture size is for example 1024×512, then that is the canvas resolution.

          • Thank you so much … it worked perfectly!

  • Hi! I’m interested in buy this plug in. I want to develop a make up game with one layer for each make up tool.
    1 – Can I use your plug-in for this purpose?
    2 – Does this works with unity Free v4.6 ?
    3 – Is the paint api code separed from the gui code as mentioned some coments above?
    4 – Do you use RenderTexture? or Texture2D? Or what?
    5 – Does this asset has public methods api, or it’s only intended for use as a “visual” plug-in?
    Thanks.

    • 1. Not without modifying code (Currently the “layer” is just separate texture in the shader, so that would need custom shader to allow more layers, or alternatively, maybe could have multiple drawing canvases, transparent, and toggle between them depending which layer you are painting..)

      2. Yes, but latest version is uploaded with 5.1, so the example scenes wont open in 4.x

      3. Not completely yet, next version will have custom override example, to override UI hiding/showing methods from main class, but it doesnt solve all UI reference issues yet.

      4. Texture2D on full screen quad mesh+mesh collider (painting with raycast)

      5. It has few public methods, like for directly drawing to coordinates, clearing, getting image as texture, setting draw modes, set brush sizes, set paint colors.. new ones can be added by request.

      So in short, you would need to modify the main script to use it for your app, and probably shaders also. But of course i’ll add those into wishlist, so that eventually could use it easier for makeup apps (*still that probably takes a month or 2 for bigger few features)

      • 4- then, do you use setPixels to draw the píxels on the Texture2D? Afaik GetPixels/Set Pixels + Texture2D are TOO Slow for performance.

        • Not using SetPixels.

          For makeup app I think SetPixels would still work fine
          (because you could have smaller separate texture planes, 1 around eyes, 1 for lips etc, instead of full screen textures)

  • Hi Mgear,

    Is there a way to take snapshot from device camera and use it as the texture on my canvas?

    Cheers!
    Randell

    • Hi MGear,

      Follow up question. Is there a way to paint on a transparent canvas? my top layer would be the canvas and the bottom layer would be the image snapshot.

      Cheers!
      Randell

      • Transparent drawing canvas works and next update (v1.9) includes example scene with UI Image behind drawing canvas (so you can for example erase canvas and reveal the image behind).

        Getting image from device, not tested, will try to test that soon.
        Are you mainly using iOS or Android?

        (Buf if you can access the image, then it should be just matter of passing it as Texture2D to mobilepaint canvas, or as separate image behind it)

  • Hello,

    Does the asset support zoom-in/zoom-out?
    If not, how do you go about implementing it (sorry newbie)?
    I plan to use it for complex coloring pages so need to zoom in to fill in detailed areas.

    Thanks in advance.

  • Can I have the latest demo version. I want to buy that asset, but first I want to see how is working your latest version.

    • Yes, soon(tm), after I get the next update out.

      • Hi, when will be the next update planned?

        • Hoping to get it submitted to store within 1-2 weeks.

          Actually will try to make the new demo build before that, since the next update doesnt add anything to that.

          • Hi, did you managed to make a demo apk? (sorry to bother you)

        • yes, the MobilePaintV195.apk in the main post up ^

  • 1- can this plugin paint on mesh with transparent color but when start coloring over existing color it does not mix the 2 colors instead it display only the new color

    2- flood fill does it work for any texture2D that the user upload from the camera roll or it has to be predefined images

    • 1. It should work, but the current package doesnt have mesh paint shader which supports transparency(alpha)..
      2. It doesnt have to be predefined image, as long as the texture can be written (drawn) to it would work (in the editor it needs that [x] read/write enabled). I have not tested camera roll images, but loading image from web with “www . texture” and setting it as mask texture works (if its same resolution as the canvas, as it wont currently get resized..)

      • hey I bought it it looks good but I’m wondering if u can add 2 important features
        – Eraser
        – undo – redo buttons

        • Yes, should have basic eraser demo in next update (probably it just uses background color to “erase”, and sets brush size to some default eraser size when eraser mode is enabled)

          Undo/Redo is currently bit complicated, as the system now always paints directly to the texture (meaning, would have to keep several copies of the whole texture or painted areas, and that would take much more memory, which could cause problems in mobile..)
          So that one needs a bit more thought.. (one option being that painted strokes would be separate meshes, and would be applied to the main texture only after certain steps..)

          • man ur work is awesome i’m trying to do something but it not working for me but I’m sure it’s there in ur plugin im doing game where u take a picture of ur room and paint ur wall with some colors
            i manage to do everything but my issue is after the user floodfill or brush the wall he can use the eraser to erase the extra selection so when the user erase an area this area should go back to the original color and is there a way to make the undo 4 steps rather than 1 thank u so much again

      • any update about my question

        • If you want to have fixed image as canvas (basically a background) then could assign it behind the canvas as separate image, instead of having it in the drawing canvas. (that way it doesn’t get modified with paint or erase etc). Would that work in your app?

          • but if the user select part of the image with the wand tool then erased part of his selection (using transparent color) then the user cant select the part that he erased with the wand tool again cuz it has the transparent color.
            example :
            1- user select the car wheel with the magic tool
            2- the magic tool will select the wheel with some part of the door
            3- user erase the part of the door selection and keep only the wheel
            4- the user want to select the door now but he cant select the whole door cuz part of the door was colored with transparent color (Eraser) and if the user tries to select the erased area it will be selected as solid color area not as image pixels colors.

            could you please help me work around this problem
            i hope it make sense

        • Ok, I understand now, eraser needs to restore original image.

          That is easier to add, made a quick test:
          http://pasteboard.co/270FHBWe.gif

          It just uses the clearPixels[] as brush color, will be included in this next coming update.

          *doesnt yet support locking mask or other features though

          • so exciting when is the update is going to be release cuz i need to add this features or at least send me this function so i can add it for now

        • Email me so i’ll create package.

          Going to submit to store on this sunday (but it might take several days to get approved as usual)

          • I sent u an email thank u so much for the support

  • Hello, I bought your script. As mentioned previously it should have an eraser and maybe some other basic stuff like tools to draw a square, or circle of a certain size. The fact that you thought it was more important to paint with stars than to erase stuff kind of concerns me, but don’t worry I made it myself. The texture you paint on does not translate well at all to other resolutions. It jumps all around the screen or change size. I would like it to preserve its original size always, no fancy stuff that implements Screen.width and height to god knows what, the only thing I know is that it breaks the whole thing when you change the resolution.

    • Yeah, could be so (although dedicated eraser tool was quite a recent new request, maybe since
      its possible to assign one button as “eraser”, by having color selector for background color)

      Multi-resolution has not been requested before either, it would be certainly useful, and it does breaks currently because of depending on screen sizes. Would need to re-initialize canvas on screen size change.

      • If you could do that, that would be awesome!

  • I have run into a problem. Whenever I call upon the paint scene it increases the memory with 2.5-2.6 MB! This increase NEVER, it only happens once, but it’s still annoying. I tried running System.GC.Collect() and Resources.UnloadUnusedAssets(). So what is causing this increase and how do I dispose of it?

  • *NEVER disappears

  • Hi all,
    There is a problem in UnityCoder/CanvasWithMask. ( http://i65.tinypic.com/2mqudft.png )
    When Unity was 5.2.x there was no problem, after update it isn’t working now.
    What can i do ?
    Thanks.

    • With pc 5.3.0 it doesnt give that error, looks like your screenshot is from mac?

      I’ll check.

    • didnt get errors on mac.. (with 5.3.1)

      which scene you are using, which target platform, does the error come on opening the project or at build, any specific settings selected in player settings (metal, opengl2) ?

      • Today, i tried the project with two version, same projects. Unity 5.3.1 (last version) Didn’t work, Unity 5.2.x it was working. Target platform Android, Problem is on opening the project and of course at build. I have selected OpenGL2. I will send detail about the problem tomorrow.

  • if you are getting error message: “Fatal error: Current shader doesn’t have a property ‘5f4d61696e546578’ “, see fix: https://github.com/unitycoder/UnityMobilePaint/issues/13

  • Hey, I’m having a problem where the eraser is not connecting between frames (so when I draw quickly, there’s just a bunch of disconnected circle-shaped holes rather than erasing as a line). Is there a fix for this?

    Thanks!

  • Hi, I have some questions in 1.95.
    In Custom Brush Draw Mode.
    Brush Size is Not work?

  • Does it supports the transparent background and the “real” eraser ?

    • yes, can have transparent drawing canvas (so can see through). Eraser has 2 “modes”: erase with background color, or removing the painted pixels from the drawing texture (basically restoring them to original).

      • Thanks for reply.
        Can I draw on the ugui image or rawimage compoment with it ?

        • Not possible in current version (would need modifications, to use the texture in rawImage).

          And the drawing plane currently needs mesh renderer, mesh collider to work, also it checks if UI element is active (clicked) during drawing to detect if UI buttons are clicked.. so that would need to be modified also..

  • I´m new in Unity. I want that the finger of the user paints a mask on a black image and erase that black to reveal a background photography. I need that the finger paints an alpha channel to reveal the static photography. Will this asset help me?

    • Hi, Yes, its possible (there are examples scenes to reveal image on background), but you still need to implement the logic to load your own images as background, or if you want to access device photos – apparently that needs native plugins to get access for gallery..

  • Hi, Mobile Paint looks pretty good!

    I plan to use it on a mac with different inputs acting as brushes – similar to touches.
    Is it possible to have a different brush or color assigned to each input?

    And could you please confirm these? Reading these posts it seems like it is possible but not really clear:
    – Import my own brushes
    – Paint on a transparent plane (a texture with alpha channel?)

    Cheers!

    • Hi, sorry for the delay,

      What are the different inputs?
      Currently there is one “paintColor” that is used for each touch (paints with same color),
      so you would need to change paintColor when each input takes place.. not 100% if it works properly when 10 inputs would happen at the same time, but in theory yes.

      – Can use custom brushes, which are just textures (so it splats them while drawing, but not exactly realistic brushes..)
      – Yes, can paint with alpha 0-1, or draw into canvas that is transparent (cleared with clear color)

  • Hi,
    – Can i use SVG image ?
    – I’m drawing mandala etc. images with this package, the details are very important. How should it be image format in Unity for best performance, for minimum file size?

    • svg:
      – I tested it briefly here, https://forum.unity3d.com/threads/released-mobile-paint-with-multi-touch.262645/page-3#post-2301934
      But not supported in the package (meaning, you need to do some modifications, to import svg yourself using some svg plugin, create texture2D from that svg, and put that texture into the drawing canvas..)

      resolution:
      – In general: the higher the resolution, the slower the drawing.. (especially android devices start to get slow with full resolution)
      Someone mentioned that he modified the plugin to use Alpha8 texture format for the mask (black outlines), https://docs.unity3d.com/ScriptReference/TextureFormat.Alpha8.html that is faster and smaller than RGBA

      • Thanks for informations.
        I want to use SVG but you know, the package has no support about it. I’m trying some things about SVG with Mobile Paint. SVG is first layer, Mobile Paint is only mask mode. And i want to set transparent (or alpha : 0) for MaskTex. Can i solve it with shader ?

        • You mean, SVG image would create the mask layer?
          If you look the example scene “scene_MobilePaint_NewUI_PaintAreaLockMask.unity” that should work then, if you get the svg image into that mask layer.. or try the “scene_MobilePaint_SetNewLockingMask.unity” scene, it shows how to assign new mask image.

  • Hi there. I came back to Unity after a long break and now my game gives me the following errors

    Assets/MobilePaint/Scripts/MobilePaint.cs(617,25): error CS0103: The name `userInterface’ does not exist in the current context

    Assets/MobilePaint/Scripts/MobilePaint.cs(616,25): error CS0103: The name `isUIVisible’ does not exist in the current context

    Assets/MobilePaint/Scripts/MobilePaint.cs(610,25): error CS0103: The name `userInterface’ does not exist in the current context

    Assets/MobilePaint/Scripts/MobilePaint.cs(609,25): error CS0103: The name `isUIVisible’ does not exist in the current context

    Did something update with the game that I need to change something within the code?

    Thank you in advance.
    Rachel

    • Hi,

      Did you update your unity? (which version? and if so, try doing Re-import all to see if that helps)
      Or just imported the latest package to your project?

      • Hi there. Thank you for your quick response. Well the current version is 5.4.2f2 and it was about a year ago that I last used Unity. So whatever version was the most current, is what I was using. I tried Re-Import all and that didn’t help. Any other ideas? Thanks. 😀

        • I think it probably didn’t import all the scripts from the package..if you had modified the old sources.. Can you search the MobilePaint.cs script if it has this line inside: “private bool isUIVisible = true;”

          • Sorry to take so long to respond. Yes, I found it in the file, just as you wrote it.

            Thank you for your help. <3

  • Hi! i want to know if works in a windows unity app in a pc with touchscreen, and if work with unity 5.3.5.
    Thanks!

    • It uses unity Touch events https://docs.unity3d.com/ScriptReference/Touch.html , and what i’ve heard previously, unity doesnt support pc touchscreens for those..

      this plugin works in 5.3.5 (package is submitted to store with 5.1, but next version will be probably submitted in 5.3.6f1 or later..but that is sometime next year)

  • Hi could you help me with setting up my scene?

    I have a game object with 2d sprites in it. On Top of that I have my canvas that is an irregular shape.

    I would like to be able to only paint on my canvas. I guess it needs to be “Transparent” and have a “mask”.

    I have tried various settings but my painting either does not appear or appears behind my background sprites.

    Thanks,

    Adam

    • If you open scene “MobilePaint_EraseCanvasAlphaWithImage”,
      then add sprites (at Z = 0), then set “DrawingPlaneCanvas” gameobject Z = -1 or so,
      then sprites are behind the canvas.

  • Also is there a way to make the Mask Image not scale with the window? Currently it makes the brush change size depending upon your screen aspect ratio. THanks

    • No option in mobile paint, maybe you can force [x] use aspect ratio in the window.. (but that would leave empty borders).. only option then would be to create properly sized mask texture and use that..

  • I have bought mobile paint plugin from unity asset store and trying hard to get perfect paint result by flood filling in an oulined image but unable to get desiered result.

    Right now I am getting white dots around black outline of image.

    Please help me to resolve the issue.

  • Does this work with WebGL builds?

    • Hi, seems to work (tested mouse version with 5.3.7p4 webgl build), not sure if touches would be supported with touch screen..

  • Hi, can this work on the the UI (canvas) image? (Not 3d or world space, but screen space- overlay).
    I have an Image (Image1) as the background, and would like to overlay this as a transparent drawable layer above Image1.

    My second question is, can this work in the background? I already have a separate UI for use, and would just like to integrate the paint function to my original UI.

    • With canvas ScreenSpace – Camera it works, can have UI image as background and drawing plane on top of it (there is example scene for that), but with Overlay, need to move the canvas a bit manually (basically set as a child of camera and adjust to good distance, and need to disable raycasting in the Canvas, so that it doesnt block drawing.. so needs some adjusting)

      2) There is example scene for getting reference size and position from canvas panel (so drawing area appears on that spot, actually example seems to use ScreenSpace overlay, so it might work). But might need some manual adjusting, depending on your canvas settings..

      i think i have asset store vouchers left for this plugin so email me if you want a free version.

      • That would be awesome. Thank you.
        Email sent to your address in the About webpage

  • Hello, I recently bought the plugin in the asset store and I have a question:
    I’m trying to set the reference area field but only works if the object alignment is stretch and I need to align in a specific position.
    Can you help me?
    Thanks

  • Hi, Mobile Paint good use.
    I wonder about custom brush size adjustment
    Does the source have custom brush sizing?
    I can’t find it.
    So I was thinking. Modify the size of the brush texture
    Is it a good idea to think about it?
    Or is there a good way?

Leave a comment

@unitycoder_com

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.