Jump to content

DynamicTexture - Draw text on rect without stretching


Recommended Posts

Hey guys, i got the following scene: 989085648_Bildschirmfoto2018-06-11um08_20_18.thumb.png.61cf42e7c66a47b380b73ef0ad1356f1.png

As you can see the text is stretching. How do i draw a text and keep the ratio ?

My code so far: 

createRect = function(scene, bId, id,  x, y, z, width, depth, height, rotation) {
    //Add example mesh to the scene
    let cube = BABYLON.Mesh.CreateBox(bId, 1, scene);
    let moduleTexture = new BABYLON.DynamicTexture("dynamic texture", 2048, scene, true);
    let cubeMat = new BABYLON.StandardMaterial(bId, scene);
    cubeMat.diffuseTexture = moduleTexture;
    cubeMat.diffuseTexture.uOffset = 0.02;
    cubeMat.diffuseTexture.wAng = 1.57;
    cubeMat.diffuseColor = new BABYLON.Color3(0.92, 0.92, 0.92);
    cubeMat.specularColor = BABYLON.Color3.Black();
    cube.material = cubeMat;
    cube.edgesWidth = 5.0;
    cube.edgesColor = new BABYLON.Color4(0.4, 0.4, 0.4, 1);
    cube.position = new BABYLON.Vector3(x,y,z);
    cube.scaling = new BABYLON.Vector3(width, height, depth);
    cube.rotate(BABYLON.Axis.Y, rotation * Math.PI / 180 , BABYLON.Space.WORLD);

    var clearColor = "white";
    var font = "bold 50em Arial";
    var invertY = true;
    var text = id;
    var color = "black";
    var x = 200;
    var y = 1224;
    moduleTexture.drawText(text, x, y, font, color, clearColor, true, true);

PS: I got a orthographic camera with a top down view

Link to comment
Share on other sites

Have you seen this thread?

I would try to switch to GUI.  I'm not recommending this, but here is a way to center text without stretching:

var planeTexture = new BABYLON.DynamicTexture('dynamicBABYLON.Texture', 512, this.scene, true);

// remove typing if you are using JavaScript
let textureContext: CanvasRenderingContext2D = planeTexture.getContext();
// needed for measuring
textureContext.font = 'bold 200px verdana';
let size = planeTexture.getSize();

textureContext.fillStyle = '#BBBBBB';
textureContext.fillRect(0, 0, size.width, size.height);

let textSize = textureContext.measureText(text);
textureContext.fillStyle = 'Black';
textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height + 20) / 2);



Link to comment
Share on other sites

Using GUI is probably the best idea. However if you want to use dynamicTexture then read on. For the text not to stretch the width and height of the mesh must be in the same proportion as the width and height of the dynamictexture.  Instead of a single number as the second parameter you can use an object which has width and height as properties ie {width:  width, height: height}. The next issue is that when the fourth parameter (generateMinMaps) is set to true the width and height of the dynamictexture will be changed to the closest power of two and so also change the proportion of width to height.

Two methods

1.  rectangle width = 100, height = 120 then for any n use

dynamicTexture("mytexture", {width:100*n, height:120*n}, scene, false)

2. Use powers of two for width and height of rectangle

rectangle width = 128, height = 256

dynamicTexture ("mytexture", {width:128*n, height:256*n}, scene, true)


Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...