[Released] Mobile Paint (with multi-touch)

I am redoing much more effectively my implementation of Mobile Paint.

Before, I basically modified some of the source scripts and it would have made MP a mess to update.

I had to make two methods in ColorUIManager and MobilePaint virtual in order to override their implementations.
MobilePaint.cs:
HideUI()
ShowUI()

ColorUIManager.cs:
ResetAllOffsets()
SetButtonOffset(Button button,float offsetY) — I have my color palette placed horizontally, so I need to hide it on the Y axis.

Two questions:
- I'm almost reaching the intermediate C# skill level but I was wondering if what I'm doing is perfectly fine or if you should make methods virtual to allow for some scalability?

- Also, when will you release the next version of MP?

Thanks

 

Yes, you are doing it correctly, all the UI & unrelated code to actual drawing should go away from the main script,
i'm slowly cleaning it up, but that is still some time away until it gets cleaned..

Finishing up ludumdare today, so from tomorrow will start preparing the next update,
hopefully submitting within a week, couple issues & new updates left to do.

 

Awesome

Look forward to the official update and (almost seamless) update.


Thanks

 

So everything's doing great with the new implementation of MP. I'm loving your asset even more now that I'm redoing it this way.

I have a little request though. When you move and hold the slider, it will be great to have a mechanism to avoid painting while moving the slider away from the handle. For instance when you move and hold the slider vertically things behave fine but if you have a small handle and/or move (while holding) the mouse/touch away from the slider you can effectively paint on the canvas.

Would there be a solution to this?


Thanks

 

if there is some UI element behind the slider, it should block any drawing, but I'll check also.

 

How could I add a texture to the DrawingPlaneCanvas?

Suppose I wanted it to have a paper texture, or in my specific case a substance ( .sbsar )


Thanks

 

Would that basically be just as background? (then could do the same as in scene "scene_MobilePaint_SeparateBackgroundImage" , but intead of Image place mesh behind the canvas, with the substance)

Have not tested substances.. not sure are their generated textures read/write enabled(?)

Also that slider thing, for me it doesnt draw if there is UI element behind slider (like panel),
but it does draw if you press slider and move out from the UI elements.. have to check if can stop that.

 

The package you sent me worked fine using Unity 5, but when using Unity 4.6.8 it loads empty scenes with nothing in the hierarchy screen. Except for one scene. (I forgot which one).
My current project is on Unity 4.6.8 and it'll be on that version for a little while.

My project is running along though thanks to MP. I will use a background to mitigate the moving-brush-away-from-slider drawing issue but it'll cool if there was a permanent solution. Also the fact that I can now update MP almost seamlessly is the best part.

Keep the updates coming!

 

Just submitted v1.9 to store **Uploaded with 5.1**

Other notes:

Code (CSharp):

1. v1.9
2.  
3. Added:
4. -   "realTimeTexUpdate" and "textureUpdateSpeed" to allow texture update speed (0=instant, 0.5f = every 0.5 seconds,
5.    big performance gains). if "realTimeTexUpdate" is checked, then texture is always updated instantly when needed.
6. -   "getAreaSize" inspector option (boolean). Gets painted area fill amount
7.    see example scene "scene_MobilePaint_LockingMaskWithAreaCalculation"
8.    *See gameobject "@PaintEventListener" *Requires also useThreshold and useMaskLayerOnly enabled.
9. -   Drawing straigth lines *Still some issue where line doesnt start exactly from the start position
10.    (visible with big brush size)
11. -   public method "SetMaskImage(Texture2D newtex)" to assign new mask texture easily
12.    (previously you had to manually assign it, then call InitializeEverything())
13. -   "HiQualityBrush" inspector option (boolean), paints more often while moving.
14.    Very slow on mobiles, use lower resolution if want to use with mobile
15. -   Example scene "scene_MobilePaint_SeparateBackgroundImage"
16.    (Note: UICanvas rendermode:ScreenSpace-Camera & PlaneDistance:12, so that drawing plane appears above it)
17. -   Example scene "scene_MobilePaint_Canvas_Size_From_Panel" (Gets canvas size and location from UI Panel,
18.    linked to referenceArea field in inspector *Note: UI Canvas is parent from the reference object,
19.    cannot be deeper in hierarchy
20. -   Example scene "scene_MobilePaint_SoftCustomBrush", custom brush texture with smooth edges
21.    (Note: No rescaling of the brush yet, would have to create different sized soft brush textures and use those)
22. -   Example scene "scene_MobilePaint_SetNewLockingMask"
23.    has example script for changing locking mask texture by calling mobilePaint.SetMaskImage()
24. -   Editor script "CustomMobilePaintInspector.cs", will be later used for customizing mobilepaint inspector
25. -   Example scene "scene_Custom_Override" for overriding mobilepaint methods
26.  
27. Changed:
28. -   Optimizations in DrawCircle(), DrawPatternCircle()
29.    Before: 1.43ms, After:1.03ms with 64px brush+additive, canvas 1600x960 *Pc desktop
30. -   UPixelPerfectCamera.cs is now attached to the main camera (in some scenes),
31.    instead of setting orthographic size in MobilePaint.cs
32. -   DrawLine() now uses integers, instead of float2 (float2 overload is still there, but rather use the int version)
33. -   Renamed "scene_MobilePaint_NewUI_PaintWithPattern" into "scene_MobilePaint_NewUI_PaintWithPatternAndLockMask"
34. -   Function CreateFullScreenQuad() had many changes, could cause problems with older scenes
35. -   Changed: Moved folder DX11/ inside Misc/ folder
36. -   StartupValidation() will eventually hold all pre-start checkups (check settings, check assigned textures etc)
37. -   "Scenes/Old/" folder is removed (those were the old GUI demo scenes)
38. -   Updated example scene "scene_MobilePaint_NewUI_SoftBrush" (now softer)
39. -   Updated example scene "scene_MobilePaint_NewUI_Default" to include line drawing & pattern drawing modes
40.    (Had to squeeze the buttons little bit to fit all)
41. -   HideUI() and ShowUI() are now marked as "public virtual void" to allow overriding
42.    (see example scene "scene_Custom_Override")
43. -   Instead of manually referencing MobilePaint at inspector field on other scripts,
44.    @PaintManager static variable is used instead: mobilePaint = PaintManager.mobilePaint; (See BrushSizeUI.cs)
45. -   Clear button now uses script "ClearImageButton.cs"
46.    instead of directly calling referenced MobilePaint Clear() at click event
47. -   Added temporary spacing to inspector fields (with [Space(10)] inside MobilePaint.cs)
48.  
49. Fixed:
50. -   InitializeEverything() added multiple mesh colliders if called again
51. -   Line drawing didnt work on touch mode
52. -   iOS notification center pull down crash bug with getAreaSize
53.    (temporary fix: clamps coordinates if too high y-value is returned)
54. -   Several other small bugs & added more checks on missing inspector references
55.  
56. Notes:
57. -   Scenes in the Misc/ folder wont work if Player settings, Rendering Path is set to Legacy VertexLit
58.    (except "scene_RandomPainter" and "scene_SaveScreenshotToFile")
59. -   Scene "scene_MobilePaint_NewUI_Tesselation" requires DX11 mode enabled
60. -   For most scenes, main camera "UPixelPerfectCamera" pixelsToUnits value should be 1,
61.    otherwise some scenes might cause issues, like "scene_MobilePaint_DrawLines".
62. -   If canvas is WorldSpace, taking reference size from it fails
63.    _(only canvas Screenspace-overlay & Screenspace-camera works for reference size)
64. -   "getAreasize" doesnt work with custom brush (because custom brush doesnt support area locking mask yet)
65. -   if "referenceArea" is assigned, it must have Canvas as direct parent, otherwise drawing canvas gets wrong size
66. -   Linedrawing preview is size (thickness) is not accuare (especially if canvasScaler is not 1)
67.  

* oh those long lines look horrible and tabs are broken.. see attached txt for same text
** well text doesnt look much better there either..

 

Hello, I've been developing a small applicaiton that is being used to collect signatures, is there a way to smooth out the edges of the lines being drawn so that they aren't as jagged? The top image is what it looks like right after I draw and the bottom is what I want it to look like

 

Latest update (still pending in asset store since 3.9) has more features for smoother painting (and example scenes for it).

or,
If you pm/email your order number i can send the latest package, or wait probably few days until it gets accepted to store.

 

Hello,

Does it support pinch to zoom? My images are really complex/detailed so user would need to zoom in/out to color.

Thanks.

 

There is no pinch zoom code included,
but the drawing works if you adjust camera position, fov or ortho size.

Also would have to add some code to block drawing while user is (pinch) zooming,
as currently touch paint will draw on all touched points.

 

Thanks for your response.
I'm just getting started with using unity. I found this tutorial:
https://unity3d.com/learn/tutorials/modules/beginner/platform-specific/pinch-zoom

Would it work if I add the code in the tutorial in your app? Where would I add it?
Also you mentioned "add some code to block drawing while user is (pinch) zooming". Is there an easy config for your app to allow "single-touch" mode to paint/draw? Then we wouldn't need to block drawing while user is pinch zooming. Or is that harder then adding code to block drawing when detecting two-finger pinch/zoom?
Sorry for newbie questions. I'm not a programmer.

Thanks.

 

Yes, add that pinch code to your camera.

Then could try it just by adding something like this in the mobilepaint to stop drawing with multiple touches (inside TouchPaint() as first line:

Code (CSharp):

1. if (Input.touchCount > 1) return;

But there could be problems if you start pinching, 1 touch might register before the other and draw on that spot already..

I'll add these to todo list, so in coming updates there should be easier way to do that.

 

Thank you. I really appreciate it if you can get this into your next update.

 

^Thanks, will test it soon.

also v1.9 seems to be now live in store

 

Really impressive product. Have you thought about a Playmaker integration?

 

Not.. but could have a look if there is interest.

Actually havent even used playmaker, so is there some specific features that the integration should have (from mobile paint side) ? Or could playmaker already be easily used for calling color or brush changes etc.?

 

Just for me not bring a strong coder Playmaker makes hard things a hell of alot easier.

 

Hi there!

Is there a way to get the locking masks to work for the custom brushes and not just for standard brush?

Every example seems to have the custom brush not adhere to the mask lock boundaries :/

 

Any news on this? =)

Thanks

 

Yes, that is not supported yet (it is in the todo list, but most likely still few updates away)

 

It works, but theres few problems to fix if want to use it properly,
at least would need to add (into UnitySVG plugin):
- Alpha support (so that could use it as a mask with transparency)
- Texture size option (not sure where it takes the size now)
- Texture is flipped

But heres quick & dirty example to read SVG and assign to mobilepaint canvas mask:

Code (CSharp):

1. - Open UnitySVG project in Unity (let it autoupdate scripts)
2. - Import MobilePaint package from asset store *Fix TargetTexture value to "_MaskTex" if its some random string (asset store bug?)
3. - Open "test" scene (comes with UnitySVG)
4. - Select "Plane" from scene, disable MeshRenderer from it
5. - Copy "Plane" gameobject from scene
6. - Open scene "scene_MobilePaint_NewUI_MaskImageOverlay"
7. - Select "DrawingPlaneCanvas", Set TargetTexture to "_MaskTex" (so we will paint on top of the image)
8. - Paste "Plane" object there
9. - Open Invoke Script (from "Plane")
10. - Find line:
11. void Start (){
12. - After that line insert this line:
13. unitycoder_MobilePaint.MobilePaint mobilePaint = unitycoder_MobilePaint.PaintManager.mobilePaint;
14. - Find line:
15. GetComponent<Renderer>().material.mainTexture = m_implement.GetTexture();
16. - After that line insert these lines:
17. mobilePaint.SetMaskImage(m_implement.GetTexture());
18. mobilePaint.InitializeEverything();
19. - Run..Now the svg image is on the mask layer and can paint on it

 

Hello,

I purchased the asset and playing around with it. I have some questions hopefully you can shed some light.
I purchased "one minute GUI" asset so I can add menu/navigation before getting to the coloring page.

Apologize in advance for newbie questions.
1. Right now the test project has 2 scenes, one for Menu/navigation, and the other one for MP. I know you can click on a menu button and jump to another scene. But is it better if I keep/load them separate or do I load them in the same scene? Does it matter from a performance standpoint?

2. For MP, how do I use my custom image? I'm using the "scene_mobilepaint_newUI_useonlymaskforlocking.unity-->DrawingPlaneCanvas", but when I try to change the "Mask Tex" to my png, the image shows up but I cannot color. Is there a special setup to my own images?

3. Ideally the coloring app will have multiple categories, with multiple images under each category. Does that mean all I need to do is navigate to the same scene and programmatically call different images based on what user select?
Do you have examples on how to do that?

4. Pinch Zoom - We discussed this briefly before. Are you working on this for the next release?

Thanks!

 

Hello,

I'm quite happy with the product so far, but I have run into something.

if I change the canves in real time - by changing the maintexture in the shader (the mesh renderer in DrawingPlaneCanvas) - paint doesn't work. i've tried the InitializeEverything() method with the switch, as well, but still nothing. Also, clearing the canvas doesn't help.

Any help you can offer would be great. Thanks!

 

Hello mgear.

I'm having an issue with this asset. sometimes the screen flickers when touching the screen. Using it on android build with Unity 5.2.1.

to be more deatailed. triangles pop up on screen very quickly. It happens alot when I move the SliderBrushSize.
Can you test this asset with Unity 5.2.1 please?

Thanks

 

1. Same scene would be better of course, but its not really noticeable delay when it initializes the canvas, so if its easier then just have separate scenes.

2. To set new mask image, call SetMaskImage(yourtexture), see example scene "scene_MobilePaint_SetNewLockingMask"

3. Yes, that would be the ideal solution. Next version will also have easier method to Swap the canvas image (not just the mask), with example scene for that.

4. Yes, still planned for next update, have few ideas for it, but not yet added.


* current estimate for next update is roughly ~2 weeks *

 

It should work if you do:

Code (CSharp):

1. myRenderer.material.SetTexture(targetTexture,yourNewTexture);
2. InitializeEverything();
3.  

Next update will have example scene for that included.

*Some notes: If the canvas doesnt support alpha, then use images without alpha.(otherwise the image is just black.)

 

Which example scene you are using, or does it happen with all of them?

But i'll test with that version+android also.

 

all of them

 

Great! I look forward to your next update for the pinch zoom.
Also if you can include some examples on how/where to extend/integrate with other third-party assets. For example, add multiple palettes, add IAP, etc.

 

@mgear thanks for the great plugin!

Our new kids coloring book app just released (not visible on all stores as of now) and it's 100% powered by Mobile Paint. It's free, so make sure to check it out. Link goes to our app page with direct links to all stores...

http://www.pixelenvision.com/finger-painting-coloring-pages/

 

@PixelEnvision Very nice release! =) What is the magic for the 18mb of the Android Version including images? Would you mind to share the secret?

 

wow, nice! - downloading.

* Works perfectly so far. Really nice (simple) menu system, and that brush-size-from-speed is good idea too.

 

Thank you!

Of course.. Too keep the performance we have decided to use 512x512 mask images instead of something bigger, that also saved some space but I guess the biggest gain was setting mask images to "Alpha 8" format. So each mask image is just 256kb.

 

have you tested it with 5.2.1? are you seeing the flickering I was talking about?

I'm not sure if it's releated to your plugin. it could be just another bug with Unity.

 

Thank you. Yeah, we came up with that idea to save some UI space as we needed a simple one level UI.

 

Tested android build with 5.2.1p1, didnt see any problems..
Maybe you can send me your .apk so can test that also.

 

btw. With 800x480 4inch android, the side palettes are quite small for kids,
could probably take half the pencils away when resolution is so small.

 

Thank you, I'll see what can I do...

 

tested it more with small humans, some notes:
- From the drawing selection pages, they didn't immediately know that you can scroll left/right to get more drawings (maybe the next set of images would be bit visible in the edge (like in main menu), so you know must scroll there)
- Sometimes felt like the buttons didnt respond to each click (back button in drawing selection, home button in drawing view, or maybe the hit area is bit too small)

some things related to mobilepaint:
- Locking mask "resets" if touch goes outside the screen, since its registered as a new touch (it happened quite often as the images were near the edges). Maybe there could be option to keep original locking mask, if new touch is coming from the edge..
- Locking mask wont work with multitouch (if click in 2 or more separate areas, then it uses the later one)

 

hey no worries. I think it's related to Unity and my device.. its happening with others.

Thanks anyway

 

Hi mgear,

What's the best way you can think of to take a screenshot of your drawing?

 

There is example scene in misc/ folder: "scene_SaveScreenshotToFile", it uses ReadPixels().
Other option would be to save the drawing texture itself (but then it wouldnt save mask layer if its separate, unless manually blend those 2 textures together).

To save image into device camera roll needs native plugin..(or so i've heard before)
*if anyone has more info on how that works, i could include those plugins for ios/android.

 

Thank you! I'll check those as well...

Are you planing to work on those mobile paint related stuff? I might find a workaround for the first one but multitouch locking mask fix seems out of my scope...

 

Yes, added those to check list.

There is "wentOutside" bool that is set to true when going outside drawing area, so that might help there (if went outside, and came back, keep same locking mask instead of creating new)

MultiLocking, probably have to disable lock mask creation, if 1 touch is already registered and more touches are coming.
Since there is no option to use different colors per finger yet, so multi-locking areas wouldnt really do anything useful.

*Or maybe additive lockmask, First touch creates mask, 2nd touch adds to that mask..

 

Initial pinch zoom test
- using this code to zoom : https://unity3d.com/learn/tutorials/modules/beginner/platform-specific/pinch-zoom
- results so far: http://pasteboard.co/10CLm6l2.gif

Still some issues there, since have to early exit the painting mode,
if it seems like user is pinch zooming instead of painting..

Also what should be done for panning the image?
(cannot be single touch as that is for painting, maybe 2 or 3 touches + drag to pan image?)

 

-looks like pinch zoom is almost there.
-How does other paint apps handle/support one-finger paint and pan? Will it only work for paint buckets since it uses tap to fill color, and the one finger drag can be used to pan when zoomed in.
For very detailed images, enable pinch zoom and one finger panning only for paint bucket (tap to fill).
Perhaps adding a configuration GUI option to turn on pinch zoom/panning vs. one-finger draw.

What do you think?

 

Hi mgear,

I'm testing your screenshot function, and it appears not to function correctly. When you fill the drawing canvas it saves the texture full with color. But when I only color in the edges of the drawing plane you see the square with whitespace on the left and right side. Check the attached saved shots:

Drawing fully colored


Only edges colored: