Create a bar that has 4 colours in it

Hi, I’ve been stuck on this one for awhile, I am trying to make a bar that has each players colour inside of it and depending each players percentage value the fill will change.

I am trying to create a way to visually represent 4 players scores against each other and thought this might be the best way.

I was trying to use a gradient for this purpose but couldn’t get my head round it (documentation is quite scarce on it).

Simplest way is to create a bar container (empty game object) with whatever total size you want. Then create 4 (or however many) UI Images you want, and color each of them to whatever color you need.

Now for the layout:

  • Container object needs Horizontal Layout Group
  • Each image needs Layout Element with Flexible Width checked
  • From your script set the value of that Flexible Width to whatever percentage each player should have

Notes: this way uses UI system, so you will need all the things associated with it, like Canvas etc

Just to add to this answer.

In Horizontal Layout Group, make sure to check Control Child Size Width.
Then uncheck Child Force Expand Width and Height.