Coloring Page

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.

Page Conifg

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 RightClickButton/Create/PaintCraft/ColoringPageConfig

blank coloring page config

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 NewPage1


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.

layer positions

And as you see Outline layer must have transparency. you could have any colors on it. something like shades color injections and so's not mandatory to have black and white image. You can open demo project pictures and see that it has some transparent shades.

bird icon

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.

outline import settings


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

bear stored icon

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 440x330

preview icon size

For import settings you could have the same import settings which you used for outline layer

Predefined Regions

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

region export parameters

Final config

At this point you should have all 3 images. let's setup links to them in our config file

filled coloring page config

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 White

canvas controller with coloring page config

And now you could start your scene and start drawing your image

drawing coloring page