Animating a TextBlock() color with InterpolateValueAction()

Questions
1

Hello,

I am trying to create some color animation using InterpolateValueAction().

While I can successfully achieve this for the material of standard meshes, I am struggling with the color of a TextBlock().

Here is an extract of my code:

const myMeshActionManager = new BABYLON.ActionManager(scene);
myMesh.actionManager = myMeshActionManager;

const myText = new GUI.TextBlock();
...

myMeshActionManager.registerAction(
  new BABYLON.InterpolateValueAction(
    BABYLON.ActionManager.OnPointerOverTrigger,
    myText,
    "color",
    "#CC0000",
    200
  )
);

Thanks in advance for any hints!

1 Like
2

Hi danilopasquariello,

If you can make a Playground that tries to do what you’re attempting, that’s probably the easiest way for us on the forum to look into it and see what’s going on. If for whatever reason that’s not an option, can you describe what this code is not doing that you would like it to do? Thanks!

3

Hi @syntheticmagus , thank you for getting back to me.

Sure, here is the link to a PG:
https://playground.babylonjs.com/#GFQDB6

In a nutshell, I am trying to animate the color of a textBlock() when hovering over another mesh, but with not success.

I have added detailed comments in the PG for clear reference.

Thanks again!

4

Hi danilopasquariello,

Thanks for the Playground! I think the issue you’re encountering is that the text block’s color is represented by a hex string, not a Color3 object. It’s not inherently clear how to interpolate between strings in a general case, so I don’t think that’s supported. You can overcome this with a pretty naive approach like the following, though:

Text color animation test | Babylon.js Playground

Essentially all I’ve done is stuck a Color3 property numericalColor onto the text block (line 71), then pointed the animation at that because it knows how to interpolate between numerical colors. I then add a naive setter on lines 91 through 93 to update the string color property (which is what actually controls the color) with the hex form of numericalColor every frame. This probably isn’t the most efficient thing to be doing, but if what you’re looking for is a way to control a text block’s color using Babylon’s built-in interpolations and an ActionManager, this is a fairly straightforward option to try. Hope this helps, and best of luck!