Images appear with incorrect colors in the editor and in-game

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Eric De Sedas

Hi, we seem to be struggling with how godot is displaying our assets. We are using Godot version 3.1.2.stable.official

For some reason, godot seems to display our image’s colors incorrectly even though other programs show them just fine.

We first noticed something was wrong with this image (godot on the left, aseprite on the right):

Aseprite is displaying the real colors, while godot’s appear washed out for some reason.

The error became more apparent when we tried to use a dark image, like in this example:

The left one is our game running, and the right one is how aseprite displays it (again, aseprite shows the correct colors). This time the image just appears way darker than what it should be.

Another thing we noticed is that the texture property displays the image properly, but when we clicked on it the preview appears just as dark as what the game shows:

We tried changing every import property and re-importing the asset, but nothing appears to be working. We though that maybe the image’s color profile was broken, but creating a new clean project, importing the image and assigning it to a sprite displayed it just fine.

We already checked for the following possible issues:

  • There are no overlays that could be covering the image (notice in the second one how the characters look way brighter than the background)
  • No shader is assigned to the Sprite’s material.
  • There are no light/shadow nodes running in the scene.

We even created a separate scene with just the sprite, ran it, and the problem persisted.

These are the import flags we used:

I’m not sure if its a bug, or if there’s something we are missing, Any ideas?

:bust_in_silhouette: Reply From: ATom 1

Do you know the hdr property of the viewport, turn it on or off, and see if it works.

Or try change compress mode to uncompressed.(It doesn’t look like this, but try it)

Just tried changing the compress mode to uncompressed and it doesn’t seem to help. Where do I change the viewport HRD? I’m not quite that familiar with the project settings structure yet.

Thanks for helping btw!

Eric De Sedas | 2020-01-07 13:58

All I know is that if the resource has a color problem, most of it is related to “hdr” and “linear color”. For the root viewport, you should search “hdr” and “linear color” related options in the project setting. If you have an independent viewport (viewport node you can see in the scene tree) you should look for related options in the property interface on the right.

The meaning of hdr is to expand the color mapping range. Linear color means that the sdr value is a floating point value (0 ~ 1.0). When hdr is turned on, the color value can exceed 1.0. The range is dynamic range(which means that in theory it can be infinitely large, as if you suddenly see a very bright light, No other objects can see), but when rendering, the viewport will Remap the linear color to 8-bit color (rgba8 on screen).

The image resource is stored according to rgba8,after importing the linear range of the resource is 0 ~ 1.0。

Example: if a pixel in the picture‘s red value is 255, and the range of hdr in the viewport is 0 ~ 2.7(Depends on the largest and smallest linear color values in the scene) , then the mapping order is:
resource rgba8 (255)-> import linear color (1.0)-> viewport color range (0~2.7)-> render mapping (255*(1.0/2.7) =93.8 → to 8bit (94))。This is why the colors are darker or the contrast is lower

This is my understanding, if you want to know more, just google it, there is a related explanation in the godot documentation

ATom 1 | 2020-01-07 14:52

:bust_in_silhouette: Reply From: ATom 1

I happened to see a similar problem (there is a solution)