Jump to content

HTML Health Bar Following A Mesh


Go to solution Solved by Tom Krueger,

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • Solution

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 4 months later...

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.

×
×
  • Create New...