HUDs

I’m having lots of issues trying to make a HUD display properly.

I built a simple radar backdrop consisting of a green circle with crosshairs and a gradient backdrop (also green). So the color channel is basically green, and there’s a white circle + crosshairs + some grey gradient in the alpha channel.

Save as PSD – import to Unity. Looks good, renders as wrong color (it looks almost like an additive blend).

Save as PNG – import to Unity. Looks wrong (appears as a green disk) but renders more-or-less correctly in game.

Next, initially I set the coordinates to 0.5, 0.5 to center it on the screen. At some point it started positioning it about 2/3 of the way up and wouldn’t reposition it. This even occurs in a build app. And when I create a new HUD from scratch, it is also incorrectly positioned. (Edit: figured this one out, it was my unfamiliarity with property editing not “taking” unless you hit return.)

Next, Unity started posterizing my alpha channel (so it no longer shows a smooth gradient). I was monkeying with the settings, so maybe I messed something up. But no matter what I change it to, its alpha is showing as posterized, even when I just view it by clicking on the bitmap and checking “view alpha”. What gives?

Have you converted the transparency in the psd into a true alpha channel as shown in this mini-tutorial?

And regarding the position, have you placed the non-moving gui texture as a child object to an object with scale set to zero?

As per my edit above, I figured out the positioning issue. Wetware error :wink:

Surely being able to handle Photoshop files entails interpreting the transparency of layers correctly and inferring correct alpha channels as required. It’s not like Photoshop premultiplies the color channel.

In any event, if Unity can’t do this, I can handle that – I just need to know.

The tutorial states that if you make an alpha channel using this tutorial, it “won’t have a white halo around the edges when you are zoomed out, unlike a .png with a transparent background will”.

PNGs with transparency only have “white edges” when created incorrectly – e.g. with premultiplied edge pixels. (And the edges can be any color; black, for example, when 3DS Max R4.2 creates them with default settings.)

I can view my PNGs in GraphicConverter which explicitly shows color and alpha channels and verify everything is correct in my PNG. And – by the way – the PNG displays correctly at runtime, just the preview is wrong (it shows the color channel only).

The action doesn’t work (perhaps because I am using CS1 – I get error messages in two places). I assume what I’m supposed to do is create a greyscale image where white = opaque and black = transparent.

Assuming the image is a single layer with transparency I would do it thus:

a) Create a new layer
b) Make it black
b) Duplicate the image layer
c) Toggle on “preserve transparency”
d) Fill it with white
e) Merge it onto the black layer

or – perhaps better:

a) Right click the layer “Select layer transparency”
b) Click “quick mask” (Q)
c) Select all (ctrl-A)
d) Copy (ctrl-C)
e) Return to “normal mode” (Q)
f) Paste (ctrl-V)
g) Move the layer down (below the original) if you feel like it.

I have had odd problems with transparency from psds not displaying correctly, these seem to be fixed by choosing a shader from the Alpha section (I usually use Alpha → Diffuse) on the material you are using. This seems to sort out any transparency problems.