• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by jebthedev · Feb 03, 2018 at 06:03 AM · uishadertextcolorinvert

How do I invert the color of ui text to make it more readable, on a messy background?

I want to invert text color against a background, in order to make it more readable.

This is the effect I want (It's a photoshop): alt text I've tried setting the text's material to a material with an inverting shader, and it works, but it makes the text go blocky: alt text

Any ideas on how I should do this?

-Thanks

screen-shot-2018-02-03-at-64314-pm.png (5.3 kB)
screen-shot-2018-02-03-at-64232-pm.png (4.5 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

4 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by jebthedev · Feb 10, 2018 at 03:46 AM

I found an answer here that seemed to work.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
2

Answer by Pangamini · Feb 03, 2018 at 01:42 PM

You can create different inversion effects by playing with blend options and the output color (for example, only invert one or two of the channels). For more advanced background processing, you can use unity's GrabPass and have the background accessible in a texture from your shader, but that's far more expensive

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
2

Answer by lassade · Feb 05, 2018 at 02:16 PM

Donwload the build in shaders then use the text shader as a base for your shader. You can find them here in the unity download archive.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by Harinezumi · Feb 05, 2018 at 12:07 PM

I think the best way is to convert the RGB color to HSV space (where the color is in the H value), and invert it, then convert it back:

 public static Color Invert(Color rgbColor) {
     float h, s, v;
     Color.RGBToHSV(rgbColor, out h, out s, out v);
     return Color.HSVToRGB((h + 0.5f) % 1, s, v);
 }
Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Hurri04 · Feb 05, 2018 at 12:27 PM 0
Share

this would invert the color for the entire text, not just parts of it (as shown in the images).

avatar image Harinezumi Hurri04 · Feb 05, 2018 at 01:33 PM 0
Share

Oh, it wasn't clear for me that it should only invert part of the image!
Hmmm, inverting only a part, like in the image seems to be more complicated.
@jebthedev, are you using Text$$anonymous$$eshPro for your texts?

avatar image jebthedev Harinezumi · Feb 10, 2018 at 03:40 AM 0
Share

No, I'm not yet.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

172 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

UIMask and UIText problem 0 Answers

How to apply effects to UI Text in Unity 4.6 1 Answer

FPS problem with Multi-Colored text on Unity 5 uGUI via Rich Text 0 Answers

Replacing transparency of text with a solid color? 1 Answer

Invert Color Shader (without see-through) 0 Answers

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges