Text with border or bold

[pichou]

Hi, 

I am using BABYLON.GUI in my project and sometimes the text is not really readable when displayed with no background.

I want to add a text shadow or at least bold the text so that you can correctly read it. But I didn't find a way to do that with BABYLON.GUI.

Do you have an idea?

Thanks, Pichou

[JohnK]

Here is one way to add shadow by replicating the text and offsetting

https://www.babylonjs-playground.com/#XCPP9Y#407

[pichou]

Of course! So simple I regret I haven't thought to do that! Thanks @johnK
I gave me the idea to just rise the fontsize of the replicated text to have a border everywhere : https://www.babylonjs-playground.com/#XCPP9Y#408
 But there is a horizontal spacing between letters and I didn't find any property to avoid that.
 

[aWeirdo]

Hi @pichou 
Here's another method using context.strokeText, it does however require overwriting the _drawText function.

https://www.babylonjs-playground.com/#XCPP9Y#410

BABYLON.GUI.TextBlock.prototype._drawText = function (text, textWidth, y, context) {
        var width = this._currentMeasure.width;
        var x = 0;
        switch (this._textHorizontalAlignment) {
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
                x = 0;
                break;
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
                x = width - textWidth;
                break;
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
                x = (width - textWidth) / 2;
                break;
        }
        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
            context.shadowColor = this.shadowColor;
            context.shadowBlur = this.shadowBlur;
            context.shadowOffsetX = this.shadowOffsetX;
            context.shadowOffsetY = this.shadowOffsetY;
        }
        if(this.drawOutline){
            context.strokeStyle = (this.outlineColor ? this.outlineColor : "black");
            context.lineWidth = (this.outlineWidth ? this.outlineWidth : 5);
            context.strokeText(text, this._currentMeasure.left + x, y);
        }
		
        context.fillText(text, this._currentMeasure.left + x, y);
    };


var text1 = new BABYLON.GUI.TextBlock();
    text1.text = "Hello world";
    text1.color = "white";
    text1.fontSize = 24;

    text1.drawOutline = true;
    text1.outlineColor = "black";
    text1.outlineWidth = 4;

 

[GameMonetize]

Wait guys  It is already supported

http://doc.babylonjs.com/how_to/gui#controls

Demo: https://www.babylonjs-playground.com/#XCPP9Y#411

[pichou]

Perfect! Just adding a shadowBlur and a shadowColor give a border on the text. 

Thanks