Making a HUD using advancedTexture on GUI image

Questions
1

I am trying to make a HUD that displays constantly changing data (distance to enemy, etc.).

I was thinking that using a GUI.Image. In order to do that, I would need to have access to the canvas element where I could update the canvas by hand and then call an .update() like you do with a dynamicTexture texture.

  var wallTexture = new BABYLON.DynamicTexture('', someCanvas, scene)
  ...
     // do things to somCanvas
  ...
  wallTexture.update()

Is this a good idea and is it possible?

var image = new BABYLON.GUI.Image("but", "textures/grass.png");

how would I reference the “wallTexture” since it is not attached to a material?

Thanks

2

This forum post seems to indicate that it is possible, but the syntax is not included.

3

clancy
clancy1254Ă—642 696 KB

Deltakosh said: well, DynamicTexture internally uses a canvas, so you can set this canvas as the source of your image (or at least directly copy it onto the GUI element)

So I am trying to figure out how to set a GUI.Image source as a DynamicTexture (canvas) but I am getting an error.

4

So I have made some progress. Feels like a hack.

5

@Pryme8 was the original poster on that topic, so maybe we can ask them how they did it? :smiley:

6

Great idea. Thanks.

7

First thing is to review how a GUI element draws itself.

Then we jack this and replace what we need!

The one thing you need to do though is set a property on the main container that changes otherwise the image wont draw because the GUI wont see any elements as dirty. In my example that would be the rotation, but you can literally toggle an element like isReady = false, then isReady = true and it will mark it dirty.

@anyone paying attention, can we get a setDirty method?

1 Like
8

Ok. I can make that work. Thank you so much.

9

We already have a public _markAsDirty method (marked hidden on the docs), @Deltakosh @sebavan any objections on making it visible on docs?

1 Like
10

Hey, _markAsDirty() works!

Thanks Carol.

1 Like
11

Love how you where paying attention. :heart:

2 Likes
13

We should expose a markAsDirty public function :slight_smile:

14

Create markAsDirty and markAllAsDirty functions on Control by carolhmj · Pull Request #11765 · BabylonJS/Babylon.js (github.com) PR up!

1 Like
15

Aaaand merged now!