HTML Health Bar Following A Mesh

[Tom Krueger]

Hello,

 

I'm trying to make a health bar follow a mesh around the screen.  I was trying to make it work using HTML element.  The trouble I'm running into is with the proper values for top and left of the element.  I was taking the mesh.position.x and mapping it to left.  The problem from what I gather is that the html elements left is zero at the left edge of the screen but the position.x is zero in the middle of the screen.

 

My questions:

1) Is this the right approach to use html elements to travel along with a mesh such as a player or asteroid?

2) Is there a standard technique for calculating the html elements position from a mesh position?

 

Thanks much,

Tom

[Convergence]

Not documented , but discussed before: http://www.html5gamedevs.com/topic/14637-translating-a-meshs-vertices-to-screen-coords/

[davrous]

Hello,

You should use a sprite or dynamic texture for that directly injected into the 3D canvas. You won't be able to properly use a HTML element for that.

DynamicTexture: http://doc.babylonjs.com/classes/2.2/DynamicTexture

Check also our MVA course, there is a chapter where deltakosh is demoing exactly what you'd like to do with dynamic texture.

David

[Convergence]

 You won't be able to properly use a HTML element for that.

 

 

What would be the downside?

 

 

http://www.babylonjs-playground.com/#1YES9W#1

[Tom Krueger]

Thanks for responding.

 

Convergence, thanks for the sample.  I'm sure I can get this working now using html elements.

 

Davrous, thanks for the pointer on an alternate way to solve the problem using dynamic textures.  Couple questions:

1) What would you say are the advantages of using Dynamic Textures for this?

2) Thanks for the pointer to the MVA Course.  That looks to be great.  I have a couple hours later today to work on this.  If you would know which chapter this is in, I would appreciate a knowing.  I promise to post the dynamic texture solution here so others can easily use it.

 

Others, Here is a link to the MVA Course.

https://www.microsoftvirtualacademy.com/en-US/training-courses/introduction-to-webgl-3d-with-html5-and-babylon-js-8421

 

Thanks much,

Tom

[davrous]

What would be the downside?

 

 

http://www.babylonjs-playground.com/#1YES9W#1

 

It's very hard and sometime impossible to synchronize HTML elements on top of the 3D canvas for various reasons. You will fall also in the problem of handling the various resolutions, zooming, etc.

 

Much easier to do it directly inside the canvas using Babylon.js to handle positions & 3D.

[davrous]

The DynamicTexture sample is there: http://doc.babylonjs.com/tutorials/04._Understanding_Materials_and_Inputs (MVA videos are also on on documentation site ) around 36:00 min

 

David

[Wingnut]

Hi guys!  Hey Tom... you might consider using a bar-graph for your health meter... and no text.  Not only do you get automatic language translation with a bar graph, but it's somewhat easy to do.... with two planes.  The front plane is scaled on x-axis... per the amount of health.  Here's a badly-coded example.

 

I used grounds instead of planes... but you can adjust to your liking. 

 

http://www.babylonjs-playground.com/#WRH6X#7

 

Just a thought.  Party on.

[JCPalmer]

What would be the downside?

 

 

http://www.babylonjs-playground.com/#1YES9W#1

 

When I first tried this playground, was on an iPad (iOS 9.0.1) & my couch as well.  I started the playground, but got no following html element.  True, playground is not very good on mobile, but thought this might qualify as a "downside".

 

FYI, I did something similar back when I was doing 3D rig testing https://googledrive.com/host/0B6-s6ZjHyEwUfkRGTUVVTUxaT01UZUlieGdCODF1blFZZHJFMnRJUHBpcG1KcnBjUVluYXc.  This is 100% webGL.  Do agree with Wingnut, text is lame for your purpose.

[Tom Krueger]

Thanks All.

 

I played a bit last night.  Learned a quite a lot from the tips.  I decided the "right" direction is to use mesh's and not use html elements.

 

Here is what I came up with:

 

This one shows a health bar that moves with a player mesh.

http://www.babylonjs-playground.com/#1855Z7#5

 

This one builds on the previous one and adds dynamic texture to write out text to display the health percentage.

http://www.babylonjs-playground.com/#3HQSB

 

I still have much to learn on how to make things look good.  As an example, I don't know how to make boarders and add padding etc.

 

Thanks All for the help.  Please if you want to make these samples better I certainly would like to hear feedback or see what you come up with.

 

Tom

 

btw - JCPalmer - I noticed a library for Dialogs in your sample.  Looked cool.  I couldn't find the dialogs1.1.js version you were using.  Is it public?  I found 1.0 in bablyon extensions.

[davrous]

Very cool Tom! Glad you've managed to do it.

 

David

[JCPalmer]

No, but will be.  I have made many fixes, but just could not commit it, before I got distracted.  Forgot I did not do it. 

 

I have many things going right now, but will put it out when I can.  Probably need to code review it, retest everything.

[Tom Krueger]

Note: The way that I Created Planes was using a new feature.  I set Height and Width.  This worked in the playgroud.  However, when I went to add it to my app it did not work. I see in the release notes that the ability to specify Height and Width is in version 2.2 of Babylonjs.

 

Hopefully you see this, before spending time on it.

 

Anyone know when the Nuget Package will be available for version 2.2.

 

Have a great day,

Tom

[JCPalmer]

Ok, Dialog extension version 1.1 commited & posted in Github.  Changes are a new hide / show feature, & fixing of FreezeWorldMatrix for all the meshes of an LCD Digit, which can add up.

 

I updated test scene here, https://googledrive.com/host/0B6-s6ZjHyEwUfjlzYXJKMC1zLXdIaV81REJhbjdfRmczQTJFOEpjWWg2SUIwZVRRS0VsR28

 

There is a Hide button in the bottom right, available when using the 2nd, system camera.  Still no documentation, however the js of the test scene  is in the repository @ https://github.com/BabylonJS/Extensions/blob/master/Dialog/testing/dialog_common.js

[GameMonetize]

Nuget package was updated to 2.2

[Wingnut]

Hi

I updated Tom's playground... http://www.babylonjs-playground.com/#3HQSB#7

Looks like Adam beat me to it... with #5, though.  (thanks Adam)

Oh well.  It's nice when a thread ends with a working playground.