Line Color and Thickness


Let's create several buttons which will shift our colors

  1. Select unity UI Canvas and create a new child
    empty child
  2. Let's place it at the middle of our screen
    middle bottom pivot
  3. Name it ColorsPalette and set PosY=10
  4. Add standard unity ui HorizontalLayoutGroup script on it set spacing=10 and childForceExpand=false
  5. on the same ColorsPalette object add ContentSizeFitter and set horizontalFit=PreferredSize so your object will looks as
    colors palette

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

  1. create GameObject/UI/Button and make it as child for our ColorsPalette element and name it 'ColorButton'
    color button
  2. remove text Text child object of our button. so you won't have any caption on it
  3. Add LayoutElement to our ColorButton and set "PrefferedWidth=30"
    layout element
  4. 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
    color hierarchy
    and this is how it looks on the scene
    colors on scene
  5. Now we need to change color of our button. Select ColorButton object ImageComponent and click on Color property and in dropdown list select required color
    button color
  6. Final step would be add color change controller to do that you need to select all color buttons buttons in inspector
    all color buttons
    then add ChangeColorOnClickController And 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
    copy color from image
    and then select LineConfig ad you did that in tool change step.
    Now check all your color buttons and make sure that all of them has link to LineConfig and every one has the same color as button.

Click play button and try to change line of your color
colored lines

Back Next: Coloring Page