pichou Posted January 13, 2018 Share Posted January 13, 2018 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 Quote Link to comment Share on other sites More sharing options...
JohnK Posted January 14, 2018 Share Posted January 14, 2018 Here is one way to add shadow by replicating the text and offsetting https://www.babylonjs-playground.com/#XCPP9Y#407 Quote Link to comment Share on other sites More sharing options...
pichou Posted January 14, 2018 Author Share Posted January 14, 2018 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. Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted January 14, 2018 Share Posted January 14, 2018 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; Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 16, 2018 Share Posted January 16, 2018 Wait guys It is already supported http://doc.babylonjs.com/how_to/gui#controls Demo: https://www.babylonjs-playground.com/#XCPP9Y#411 Pryme8 and adam 2 Quote Link to comment Share on other sites More sharing options...
pichou Posted February 5, 2018 Author Share Posted February 5, 2018 Perfect! Just adding a shadowBlur and a shadowColor give a border on the text. Thanks GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.