Zimbofly

dynamic texure - drawText attributes - get text to wrap?

Recommended Posts

Hey all !

 

I',m playing around with dynamic texture and drawText to layer some text over my mesh.

 

anyone have any idea on how to wrap the text on the box?

 

I'm able to position, change font and size as per the documentation - but wrapping is a bit of a mystery!

 

here - I'm able to layer text over an image of a yellow sticky, but so far - no wrapping....

var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);    	if (farWall) {    		sticky.rotation.x = sign * (Math.PI);    		sticky.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		sticky.scaling = new BABYLON.Vector3(0.01, 1, 1);    		sticky.rotation.x = sign * (-Math.PI / 2);    	}    	sticky.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	sticky.material = new BABYLON.StandardMaterial("matPaint", scene);    	sticky.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);    	sticky.material.specularColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var content = new BABYLON.Mesh.CreateBox("content", 0.5, scene);    	if (farWall) {    		//sticky.rotation.x = sign * (Math.PI);    		content.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		content.scaling = new BABYLON.Vector3(0.01, 1, 1);    		content.rotation.x = sign * (-Math.PI / 2);    	}    	content.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	content.material = new BABYLON.StandardMaterial("matPaint", scene);    	content.material.specularColor = new BABYLON.Color3(0, 0, 0);    	content.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	content.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);    	content.material.diffuseTexture = backgroundTexture;    	    	backgroundTexture.drawText(stkyContent, null, 80, "50px Segoe UI", "black", "#F7FAA9");    	//hover over image    	sticky.actionManager = new BABYLON.ActionManager(scene);    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sticky, "visibility", 1, 100));    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sticky, "visibility", 0.6, 100));
 
 

cheers!

Share this post


Link to post
Share on other sites

I think this should best operate. With ......        ....  => bad englich

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);stickyMat.specularColor = new BABYLON.Color3(0, 0, 0);stickyMat.diffuseColor = new BABYLON.Color3(0, 0, 0);stickyMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var contentMat = new BABYLON.StandardMaterial("matPaint", scene);contentMat.specularColor = new BABYLON.Color3(0, 0, 0);contentMat.diffuseColor = new BABYLON.Color3(0, 0, 0);contentMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);content.material.diffuseTexture = backgroundTexture;

Share this post


Link to post
Share on other sites

Hi Z!  Are you talking about WORD-wrapping the text, or uWrap and vWrap of the dynamicTexture?  (I'll assume word wrap.)

 

I don't think there is a way to word-wrap the text... unless you build your own word-wrap function.  (I could easily be wrong)

 

But you can use multiple drawText lines...

 

backgroundTexture.drawText(stkyContentLine1, null, 80, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine2, null, 160, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine3, null, 240, "50px Segoe UI"...

 

(To get the most text in the least width, choose your font family carefully.)

 

You know all this already... so why am I babyloning-on?  :)

Share this post


Link to post
Share on other sites

Hi dad - I'm not really sure i understand what you mean - are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);  ?

is it just cleaner code - or something I'm doing wrong?

 

Hey Wingnut!

yes - word-wrapping is the game!

I'm taking the content from a database

I'm making yellow stickies for the walls on my room.

 

Maybe I need to find/make a little function that takes the database content, works max characters per line then splits content into those different lines as you show....

ouch!

Share this post


Link to post
Share on other sites

Yes Zimbofly this:

 

""

are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene); 

""

 

exemple:

var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);
stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);

sticky.material = stickyMat;

 

it is faster and more secure. After I do not know if will solve your problem. but I find this method more secure, more reliable.

Share this post


Link to post
Share on other sites

Thanks Dad - just making those changes to see if any improvement...

 

Next question.....

 

at the moment, I can double click on yellow sticky on the wall and edit content - then update database - BUT

 

HOW do I make it refresh the test with new value??????

 

I have var LoadImagesFromHTML = function () 

I have tried to put this again after submit button - no change...

 

also tried to copy:

engine.runRenderLoop(function () {
                scene.render();
            });
after submit button - no joy
 
Any ideas?

Share this post


Link to post
Share on other sites

This is what i currently use to wrap my text:

function wrapText(context, text, x, y, maxWidth, lineHeight) {	var words = text.split(' ');	var line = '';		for(var n = 0; n < words.length; n++) {	  var testLine = line + words[n] + ' ';	  var metrics = context.measureText(testLine);	  var testWidth = metrics.width;	  if (testWidth > maxWidth && n > 0) {		context.fillText(line, x, y);		line = words[n] + ' ';		y += lineHeight;	  }	  else {		line = testLine;	  }	}	context.fillText(line, x, y);}

which gets used as follows:

	textureContext = menuTexture.getContext();	textureContext.font = "bold 40px Calibri";	textureContext.save();	textureContext.fillStyle = "white";	textureContext.textAlign="centre";	wrapText(textureContext,"Lots of really long and exciting text",null,80,300,25);	textureContext.restore();	menuTexture.update(); 

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.