[Released] Mobile Paint (with multi-touch)

Hi,

**Update: 26/10/2018, this package is now free in asset store.
(due to not having time to update this, last update was few years ago…)

What:
Simple multi-touch (mobile) painter.
*Still work in progress, more new features are to be added later.

News:
Going to submit v1.1 update to the store today (includes floodfill, custom brushes etc).
*NEW: Price will be increased to 15usd in one of the coming updates (2015)

Asset Store:

More info: (with images, .apk demo, etc.)

Screenshot:
1736685--109662--mobile_paint_custom_brushes_1.jpg

Hello,

Very nice asset and it helped me alot.

I have a quick question if you can help me please.

The canvas texture example is great and all and I did my own version where I create a material with a shader of unityCode/TextureCanvas to put a back ground image as a Mask without overlapping its colors. Works great and all.

But I hit a bump when I tried to apply a texture containing some transparent pixels. It is a 2D app with a full camera size image containing a circle. See attached Image

. When i set that as a texture, the circle pixels spread all over the place . Do you know what shader i can use for this? I tried all shaders and nothing worked (including the ones in the transparent section). I used the same approach, empty gameObject with a mesh renderer and filter etc… and let the code do its work.

The theme here is that there is a mist (blue circle in the attached image) and I need the user to wipe it (use transparent pixels)

Please let me know if you can help me.

Hi,

Ok, it seems to happen when [×] alpha is transparent, is selected from importer settings.
I’ll try to check whats going on.

At least the image is shown properly,
if you add this blend line into UnityCoder/CanvasTexture.shader:

Tags { “RenderType”=“Opaque” }
Blend SrcAlpha OneMinusSrcAlpha

*if you can email me your sample scene (or the modified shader/material version),
then I can try to fix it on that. > email address <

Ok, i think its working now, added alpha support for brush and few shader modifications…
i’ll send the package by email.

1778628--112897--mist_texture.jpg

1.2 update is now alive in the store.

V1.2 whats new:
– Added: Alpha support for paintcolor (alpha value is now used), “soft / additive painting” 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

I’m interested in this but I have a few questions.

Can I modify the texture by code (paint brush at x,y)?
Is it possible to scale and rotate brushes?
Is it possible to paint over a mesh?
Will it support layers and blendmodes in the future?

Thank you.

hi,

Right now this is still quite half baked / work in progress,
so any custom features would need modifying the existing c# code…

Not without modifications in 1.2, but I can add that to next version.

There is already public function DrawPoint(int x,int y), but
bool textureNeedsUpdate would need to be made public also…

Default circular brush has size adjust, but custom brushes cannot be rotated or scaled,
I can add it to wish list.

Not tested…
Current it creates full screen quad with mesh collider for the drawing plane…
In theory it could work, but as before, would need modifying the code…
And i think there are other/better mesh painting tools available…

Its possible to add those, give more details what/how you would like to use them.

Thank you, I sent you a PM with a better example of what I need.

nice 1

Submitted update 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


I think the asset is amazing. Thanks for the effort!

I have some concerns about it though and maybe you can help me. I’m having some issues when I’m trying to set colors. When I pick a color and start to paint with it, it’s always a bit softer than the one I choose. For example, if I want to color with red, when I start to paint it’s some kind of pink. Which property should I tweak to paint with the color I choose?

Another issue is about edges. When I paint near edges (in PaintAreaLockMask scene) it’s not very accurate. The painting around edges becomes a bit pixelated. I have a custom canvas to paint in. Do I have to do anything special in the import settings or something?

Talking about edges too and this same scene, when I accidentally start to paint over an edge, it allows me to keep painting over the line. Is there any way to avoid this?

EDIT: I forgot to mention. It works fine on devices, but I was wondering if is there any way to test the painting in the Unity Editor? I’m using Unity Pro 4.5.4p1.

Thank you! :slight_smile:

Thanks!

Which scene you are using? Can post a screenshot?

Yeah, there is no threshold value (yet), so it only matches with exact colors.
That sample image was set to some ‘round to nearest power of two’ in the texture import settings, so it gets artifacts in the scaling… You can set it to “Non Power of 2 - None” and then it looks nicer.

hmm… yes, seems to do that, I’ll look for some fix into that.
Basically the problem is: it keeps track of the previous drawing point and puts line between them,
so just have to move the previous point to current point if going/coming outside the screen or such…

In the versions below v1.4, you can enable mouse painting from the code.
Inside Update() loop the mouse paint was disabled by default, so just un-comment it:
//MousePaint();
TouchPaint();

But in the latest version there is toggle button on the inspector for enableMouse/Touch.

also v1.4 is now in store *Note, its using Unity 4.6 and later updates will start using the new UI only.

  • Added: 4.6 New UI sample scene “scene_MobilePaint_NewUI_Default”
  • Added: Public booleans for enableMouse & enableTouch (previously you had to comment them from code)
  • Fixed: Y offset was broken (bottom right border didn’t use the offset value)

Image: new demo using 4.6 UI
1940702--125476--mobile_paint_new_ui_ss_7.jpg

1 Like

Thank you, mgear.

About the first issue I mentioned, it was because I was using a custom image as canvas and it was transparent except for the lines. I changed the shader to UnityCoder > CanvasWithAlpha and doing this everything was working fine except for the color issue I said. After some trial/error I stopped using an alpha canvas and started using one with a white background (I changed the shader again to Default) and the color issue went away.

About the rough edges, I think I will have to wait until the threshold gets implemented. Is it in your TODO list for the next release?

I really appreciate the effort you’re taking with this asset and I already posted a 5* review in the store. Thank you :slight_smile:

@mgear ,

I was looking for something like this and after researching all the available options, I’ve decided to go with yours. And I’m glad I did, great product and works perfectly (only tested on galaxy tab 7 so far) with our own art assets.

There are two issues I’ll need to take care of, I can probably figure out those myself but figured I should ask first.

  • Is there a way to keep aspect ratio of the mask/lock image. When playing the the demo scenes, my square art asset ended up stretched.
  • Is there way to change the image at runtime? ClearImageWithImage() maybe?

Thanks in advance…

@DeCeOnline , thanks! yes, it’s added into TODO list (but not sure if in next update, but hopefully the one after that)
White background probably helps since those artifacs are basically some transparent white color.

hmm…not possible (yet)…
So, if screen resolution is for example 1024x512, and mask image is 1024x1024,
what would be the ideal scaling for that?

  • Cropping anything that doesnt fit (but keeping original size)
  • Scaling with aspect ratio (but leaving empty areas on side/sides)
  • Other solutions…?

Not directly (yet), but should be able to do this: (not tested)

  • Assign new texture as the material mainTexture
  • Then call ReadClearingImage() // this one reads the texture pixels
  • Then call ClearImageWithImage()

I’m waiting for a threshold support too even tho it seems it might be easy to add myself if I only care about it near black color (cartoon image lines).

Is there something on the todo list to have fill tool follow the original image fill regions? like in you example image if I paint 2-3 lines on the sky and then just want to fill the sky with blue and overwrite the lines too as they did not exist in the original. I assume it would only mean that sampling fill area would happen from the original/refence image but filling would happen on the one you are working with.

Currently this happens:

  • Solid lines do get “filled in”, but it wont fill that circle there…
    1948882--126004--filltest.png

Ok, I guess I got what you mean, floodfill would only consider the overlay/mask image lines, not anything from the paint layer. Yeah that would be quite easy to do, i’ll try to add some option for that in coming updates. (hopefully the next one).

I think scaling with aspect ratio would be the best option, at least in my case. Cropping might leave crucial parts out especially considering different screen sizes on Android devices, etc.

I guess it currently creates a mesh based on device screen res/aspect and maps the texture on it right?

And thanks for the runtime suggestion, I’ll try that…

Yeah exactly this :slight_smile:

Paint threshold works:
It’s currently using simple RGB values comparison (it sounds like HSL, CIE would be better, but needs more math so will see about it later…)

Still better solution is to have good source images, without scaling, compression etc.

2 Likes