Drawing on plane canvas it's cool but let me show you how to create a coloring page. where all you lines would be restricted to predefined regions. We would need to setup 3 image and i'll explain you where each of them is used for.
First of all we need to create a new page config go to your
Configs folder and create new page config file. but this time select
As usual you need to setup unique id property. and setup 3 image links.
Here i should notice you that every image used as coloring page must be stored somwhere in
Resources folder so it won't be loaded automaticaly to the memory and your app will works on any mobile device even if you will have on handreed pages. So let's create Resources folder first and one subfolder for our image
In coloring page we use 2 layers. One layer is the same as on blank page where we draw our graphics. and 2 layer contains our actual image. On the screenshot below we hasn't drawn anything and our back layer is blank and white. Outline layer contain Bear image.
And as you see Outline layer must have transparency. you could have any colors on it. something like shades color injections and so on.it's not mandatory to have black and white image. You can open demo project pictures and see that it has some transparent shades.
Then you need to fix import settings. By default unity could use power of 2 settings so your image would be stretched. to fix that select your outline image and then in inspector change
TextureType=Advanced and then
Non Power of 2 = None and also we don't need MipMaps so you could disable them as well. Here you could check what i have.
We need separated downscaled icon because of the following reason. When you make any changes on the canvas we store this state on the disk. so when your player would comeback it will be able to work with this image. And we do not store mix of the backgraound layer (where you draw) and outline layer and it's just a lines which you made. The stored layer is looks like this
And we need to blend this with outline layer. It won't work on older device if we will blend this with original outline layer. because each image would consume to much memory. and this is why we need to add downscaled image.
It depends on you which size of image do you want to have. if you will open canvas controller you will see the settings for the icon size by default it
For import settings you could have the same import settings which you used for outline layer
To make region texture what you need to do is just paint your texture in image editor. where every region has own unique color. And if you want to merge some regions you can assign the same color to it. For example you can make the same color for all grass on the image. or for all body parts so if player click on one region with bucket all body parts will be filled with the same region.
Any regions where alpha = 0 will be ignored for painting. This means that if you don't want to allow user some regions just assign alpha = 0 to it.
Finally you need to make proper setting for the texture. Critical part here is a FilterMode it must have "Point (no filter)" value
At this point you should have all 3 images. let's setup links to them in our config file
If your images would be stored not in Resource folder. this inspector will notify you about this. Also if you will change location of this images you would nedd to setup this link again. unity won't change lnks to them automatically as it does for scene or prefab objects.
Now you could select this config in your
CanvasController component. Also i'll change default background color to
And now you could start your scene and start drawing your image