Text color in GUI3D HolographicButton

Questions
1

How do you control text color of HolographicButton?

Button itself has backMaterial and frontMaterial and that works as expected.

Text can be a string or a TextBlock set as content and color can be set there, but no matter what alpha values are chosen, its always blended with background making it incredibly difficult to read.

And this happens even if buttons front and back material have alpha=1 - basically button becomes opaque, but text color is still blended with the background!

I’ve tried playing with outlineColor and shadowColor for TextBlock and they have the same issue.

Note that blending happens at the time of the first render only, it is not updated when scene is rotated.

createTextBlock(text: string) {
  const textBlock = new TextBlock();
  textBlock.text = text.replace(' ', '\n').toUpperCase();
  textBlock.color = Theme.btnFontColor;
  textBlock.alpha = 1;
  textBlock.fontFamily = 'Lato';
  textBlock.fontSize = 40;
  window.text = textBlock;
  return textBlock;
}

createButton(name: string, callback: Callback) {
  const btn = new HolographicButton(name, true);
  btn.onPointerDownObservable.add(() => callback(this.person));
  this.panel.addControl(btn);
  btn.backMaterial.albedoColor = Color3.FromHexString(Theme.btnBackColor);
  btn.backMaterial.alpha = Theme.btnBackAlpha;
  btn.frontMaterial.albedoColor = Color3.FromHexString(Theme.btnHighlighColor);
  btn.frontMaterial.hoverColor = Color4.FromHexString(Theme.btnHighlighColor);
  btn.frontMaterial.alpha = Theme.btnHighlightAlpha;
  btn.content = this.createTextBlock(name);
  window.panel = this.panel;
  return btn;
}
1 Like
2

Hi vladmandic,

You can access the text or other contents of the holographic button by using its content property. I don’t think it’s guaranteed what this is out of the box, so be careful taking dependencies on the default implementation, but right now it will default to being a StackPanel containing the TextBlock with the text in it. The safest way to manipulate this would probably be to replace that control with your own, but you can also access the elements that happen to be in there directly and change the color that way, as shown on line 26 of the following Playground.

Hope this helps, and best of luck!

3

@syntheticmagus That’s exactly what I’m doing, see example above - the problem is that TextBlock.alpha property never goes to 1, it’s always blended with the background.

1 Like
4

Hmm, interesting, this is pretty funky. One thing you can do to strengthen the visibility is to change the diffuse color on the plate material to match the text color:

Hopefully that’s helpful, though probably not ideal. Ideally I think we’d like to be able to replace the plate material altogether, for example with an unlit PBR material, to give substantially more control over the appearance. That doesn’t seem to be possible with the current implementation, though, so if you need that much control you might need to make a new feature request on the main repo.

2 Likes
5

setting HolographicButton.plateMaterial.diffuseColor to the same color as textBlock.color does the trick - thanks!

1 Like