I'm working with an Incisor TextBox and having trouble changing the colors. It seems that I cannot update the text and background colors independently. Here’s the code I’m using:

class ProjectMain {

    init() {
        let textBox = new TextBox();
        textBox.string = "Hello World";
        textBox.backgroundColor = new Color(0, 1, 0, 1); // Green background
        textBox.colorMultiply.red = 1;  // Attempting to make text red
        textBox.colorMultiply.green = 0;
        textBox.colorMultiply.blue = 0;
    }
}

I expected the text to appear in red with a green background, but instead, I see red text on a black background.

However, if I remove my calls to colorMultiply, the background is green and the text is white.

let textBox = new TextBox();
textBox.string = "Hello World";
textBox.backgroundColor = new Color(0, 1, 0, 1); // Green background with white text

Could someone explain how to correctly set both the text color and the background color of the TextBox?

I'm working with an Incisor TextBox and having trouble changing the colors. It seems that I cannot update the text and background colors independently. Here’s the code I’m using:

class ProjectMain {

    init() {
        let textBox = new TextBox();
        textBox.string = "Hello World";
        textBox.backgroundColor = new Color(0, 1, 0, 1); // Green background
        textBox.colorMultiply.red = 1;  // Attempting to make text red
        textBox.colorMultiply.green = 0;
        textBox.colorMultiply.blue = 0;
    }
}

I expected the text to appear in red with a green background, but instead, I see red text on a black background.

However, if I remove my calls to colorMultiply, the background is green and the text is white.

let textBox = new TextBox();
textBox.string = "Hello World";
textBox.backgroundColor = new Color(0, 1, 0, 1); // Green background with white text

Could someone explain how to correctly set both the text color and the background color of the TextBox?

• javascript
• game-development
• incisor

1 Answer 1

It looks like the confusion may stem from how the colorMultiply effect works. When you apply colorMultiply to a TextBox, it affects the entire graphic, including both the text and the background. This means the effect is applied after the TextBox has been rendered into a graphic, impacting all visual elements at once.

By Default:

• The TextBox background is black (RGB: 0, 0, 0).
• The text color is white (RGB: 1, 1, 1).

In your code, you’re setting the red component of colorMultiply to 1 and the green and blue components to 0. When those values are multiplied with your background color the resulting values are 0,0,0. When those values are multiplied against the default text color, the resulting values are 1,0,0. This leaves the text appearing in red on a black background.

To achieve a green background with red text, you can do the following:

let textBox = new TextBox();
textBox.string = "Hello World";
textBox.backgroundColor = new Color(0, 1, 0, 1);  // Green background

// Apply colorMultiply to the text to make it red
textBox.textFormat.characterMaterial.colorMultiply = new Color(1, 0, 0, 1);  // Red text

In this updated code, we apply the colorMultiply effect only to the text, leaving the background unaffected.

Pro Tip: If you're unsure about the available properties for your objects, the Incisor Object Inspector Panel is a great tool to explore and inspect your objects. It allows you to drill down into your objects and view all properties.