Thanks so much for the interest in this package – we think you're really going to like using Paintcraft to build and launch your high-quality drawing applications.
We are doing our best to make this pacakage artist firendly and really flexible so it will satisfy any of your needs. This quick tutorial is intended to walk anyone familiar with Unity3D through the basics of Paintcraft package in just about 15-30 minutes. Hopefully you'll learn how to make drawing application as fast as possible.
PaintCraft├── 3DParty| └── NodeInspector # (1) OpenSource graph editor used in brush configuration├── BrushPack # (2) Contains built-in tools (Ink, Cryon, etc)| ├── Advanced # available in both (Base and Pro version)| └── Basic├── Demo| ├── ColoringBook # (3) Complete coloring book project (fill free to use it for reskining)| ├── DrawingObjects # Moving by animation or by script drawing game objects| ├── DrawOnExistingImage # Drawing on top of existing image| | (eraser erase in to the original image rather than canvas coolor)| ├── OnePlayerBasic # Simple scene for one player coloring book| ├── PatternBrush # Scene where you can use pattern brush| ├── Prefabs # Prefabs used by Demo scenes| ├── StampBrush # Here you can use stamps(stickers)| ├── SwitchPageLive # Demonstrate that you can switch pages without actual reloading scene| ├── TransparentBackground # Demonstrate coloring book with transparent canvas color| ├── TwoPlayersOneCanvas # Split screen mode where each player draw on the same coloring page| ├── FullScreenBlankImage # PageConfig has the same size as the screen| └── TwoPlayersTwoCanvases # Split screen each player draw own image├── Engine # (4) Full source code of paintcraft package├── Prefabs # PaintCraft prefab gameobject├── Pro # (5) This folder available only for customers purchased pro package| ├── 3D # 3D scenes| └── SVG # SVG packages| ├ SimplySVG # Import this package for SimplySVG integration| └ SVGImporter # Import this package for SVGImporter integration└── StreamingAssets # Contains PageConfigs
Brush configuration is really flexible. You can controll your line almost at any point. And this plugin used to make it more user friendly. here is an example of one of the brush config
We included several brushes to this package so you can freely use them in your project. and for sure you can play with any parameters.
This is a source code of this package. if you are a programmer maybe it will be interesting to check the source code. It's available in base and pro package.
This folder available only for customers purchased PRO package and it contains SVG integration and 3D drawing implementation. If you are doing VR app probably it's what you need.
To start your first Drawing app project, the easiest thing to do is to use the
PaintCraft prefab which is located at
Find this object in your project and drag it to the scene
If you have a brand new scene you will get this structure
This object already contains necessary configs, but it won't work immediatly because we need to tell our canvas where we want to draw. In case if you have
DirectionalLight object just delete it. It comes from 3D default scene setup
If you try to scene you will see the error in the console
As you see it say that you have to provide page config. to fix that you need to Select PaintcraftCanvas game object and select page config. But first of all let's create new page config
Let's create a new Page config. This object will keep configuration just the size our canvas will be.
Create a new folder for this
Click right mouse button and select
Setup options at your page config
Actual size of you image in pixels like (800x600). You are free to use any sizes and this size does not relate to the screen size as you can zoom your image and draw more details
Path used to store user changes and icon
Size of the icon
After you set your configs you will get something like
Now you have a page config and you can use it with your canvas object
Select PaintcraftCanvas object in the hierarchy
Link your page config to the
Page Config property
You can also change default background color of your canvas in the same
Canvas Controller component change
Default BG Color. I'll use default
Here you go. Now press play button and you will be able to draw on your screen
Now we have a simple canvas. let's create some simple UI controls to change our tools.
As you can see we have
Advanced brush packs in the
Assets/PaintCraft/BrushPack folder. And you can freely use them in your projects.
Let's create standard unity buttons which will change some tools
Create one UI button
GameObject/UI/Button I'll put it to the left bottom corner and name it
ChangeBrushOnClickController on to it
Now you need to set 2 properties on this component so result will looks like this
LineConfig refference to our prefab subcomponent on our scene
PaintCraft/Canvas/LineConfig. Actually you can click right circle on the right side of this property and it will show you just one possible object, because we have only one right now.
And final step is to set link to our tools. use the same circle and select
Ink config from our basic pack. Don't forget to switch to
Assets tab because this is a config stored in our project and not a scene object
Now you can start your scene and try to draw with the brush (because it's already selected in our line config as default tool) and after you click
Ink button you will draw with ink
If you want to add more tools just clone InkButton object and change refference to the tool
To clone object select
Ink Button gameobject in the Hierarchy panel and then click
Edit/Duplicate or just
cmd+D on mac
Rename new object to
Change text on the button to
Change position of this object. I'll change PosY in the rect transform so it will be alligned with my
Setup Link to spray at
And now let's change our default tool in our line config. Select
PaintCraft/LineConfig object. Click on
Brush and select
Ink.You can also change default scale at LineConfig so your line will be thinner.
At this step we will create 3 buttons
As usuall let's create button using top menu
GameObject/UI/Button and put it to the right bottom control. To do that you can select RectTransform and change pivot and position at once. You need to click on the left top rect then hold down shift+alt click the bottom right corner
Set small ofset. set
PosY=10 so it won't be right on the corner and change
Name this button as
Now we need to ad event to this button. Click
Click on the object field and select
You can also drag and drop
PaintCraft/Canvas scene object to this property
Now you need to select the
Canvas.ClearCanvas()function. To do that click on
No Functionbutton select
Thats it. start your scene, try to draw something and then clear canvas
Let's repeat button creation process for undo/redo
Clear button 2 times.
(1) clonned button position. change caption, name and set following position:
PosX=-75 PosY=50 Width=55
(2) clonned button position. change caption, name and set following position:
PosX=-10 PosY=50 Width=55.You should get nicely alligned buttons at the right bottom corner, something like this:
Undo button and Remove
OnClick handler using
Canvasfor this controller you will get this. Make sure that
OnClick()is cleared properly
Redo and repeat steps 4 to 6 but this time add
Your systems buttons are ready and you can start your scene and check that everything is works properly. You can even see that undo/redo is clickable only if you have something to undo or redo. By default history size is 10.
Let's create several buttons which will shift our colors. First we need to create panel.
Select unity UI
Canvasand create a new child
Let's place it at the middle of our screen
ColorsPalette and set
Add standard unity ui
HorizontalLayoutGroup script on it set
childForceExpand=false. Then Add
ContentSizeFitter and set
Now our root objects for our colors is ready and it would have nice feature. it would grow automatically and you can add several colors and all of them would be automactically aligned. so let's do that
GameObject/UI/Buttonand make it as child for our
ColorsPaletteelement and name it 'ColorButton'
Text child object of our button. so you won't have any caption on it
Set button size
Now you can clone our buttons as many times as you want to have in your final app. I'll make 5 colors. here is hierarchy and how it looks on scene
Now we need to change color of our button. Select
ImageComponentand click on
Colorproperty and in dropdown list select required color. Repeat this step for each
Final step would be add color change controller to do that you need to select all color buttons buttons in inspector
ChangeColorOnClickControllerAnd finaly copy our colors from our Image component to this controller. To Do that you need to select component menu (little gear at the top right corner of our component) and select
Copy Color from Image
and then select
LineConfigad you did that in tool change step.Now check all your color buttons and make sure that all of them has link to
LineConfigand every one has the same color as button.
Click play button and try to change line of your color
Drawing on plane canvas it's cool but let me show you how to create a coloring page. where all your drawings 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
There are 2 properties here: StreamingAssetPath and Version. And because we have not provide any values we see 3 warnings that originalIcon, outline, region files are not found. Let's fix this
For example we want to create coloring book with name Bear. we enter the "MyPages/Bear" path to the StreamingAssetPath value
And Paintcraft notify you where it expect the files. So you need to place 3 files in to the Assets/StreamingAssets/MyPages Folder
In the project inspector it can look like this
Because it's under StreamingAssets folder, Unity do not import any files from it as usuall and just include them in to the build as is. So this is your responsibility to provide valid png files.
After you provide all images and fill in the proper path you will see the inspector without any warningns
You can miss any files if you like, like icon or regions and paintcraft will still works, but just not use proper logic like region handling.
You can also notice that you can change version here if you want to paint several instances of the same image once.
Moreover you can Build PageConfig (not SO-which means ScriptableObject) file runtime and feed it to the canvas controller. see the FullScreenBlankImage scene for refference which build page config the same size as the Screen.
As usual you need to setup
Start image if you want to use it and setup 3 image links. Right now let'd just define
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 and place our images(icon, outline and region) there.
In coloring page we use 2 layers. First layer is the same as on blank page where we draw our graphics. and second layer contains our actual image. On the screenshot below we havn't drawn anything yet and our back layer is blank and white. Outline layer contain Bear image.
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 like on the png image below (shadows below the bird and on wings)
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 (Default on Unity5 and later) 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 contains just user changes and looks like this (after result of floodfill with black and green color)
And we need to blend this with outline layer. It won't work well on older devices 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.
Icon size 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 paint 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 inside 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
And now you could start your scene and start drawing your image