2D canvas and life bar

[Raitch]

Hello, I'm a few weeks into Babylon and so far it's been working out well.

However now I'm at a crossroad on whenever how I should generate and display life bar above meshes. I've looked at a lot of documentation such as WorldScene Canvas 2D, sprites and what not but I fail to see which on would fit my needs.

Requirements:

* Follows mesh and is maybe 5y above it

* Can have width and color alterted easily (based on hp)

* On top of all other 3D objects

* Have alpha

* Face camera all the time

Basically from what I get World Scene can't be faced against the camera all the time, sprites would be a hazzle to make 100 frames for each % and using a Ground mesh with .lookAt() wouldn't be on top always (I have palms in the way). 

 

I don't need a fully complete code, just a direction on how I can accomplish this.

Bonus question: Should I make the GUI in html/css or Canvas2D? Canvas2D makes more sense for rendering and consistency, but I'm so used with styling in css. What do most people use?

[GameMonetize]

Ping @Nockawa

[Pryme8]

just go over the canvas2d tutorials. a day of studying and you'll have this knocked out.
https://doc.babylonjs.com/tutorials/Using_the_Canvas2D

 

and bonus answer, how dynamic will your GUI be?  I prefer using css and html... It sounds counter intuitive, but it makes it more consistent on the rendering for sure as they are standard dom elements and everything can handle that.

My personal favorite is to overlay another canvas and just draw on that.  @dbawel has been wanting me to upload my mmmPie library, which is a very loosely defined system for creating dynamic UI elements and has quite a bit of functionality already.  I actually got to deploy it on a paid project just recently you can also see it in action here:

If other are actually interested I will upload the library today... o_O with the disclaimer that it is pretty much alpha build right now so it will be on you to program the elements.... but the structure for it is there and I can write a couple demo files really fast.
 

[Nockawa]

2 hours ago, Raitch said:

Hello, I'm a few weeks into Babylon and so far it's been working out well.

However now I'm at a crossroad on whenever how I should generate and display life bar above meshes. I've looked at a lot of documentation such as WorldScene Canvas 2D, sprites and what not but I fail to see which on would fit my needs.

Requirements:

* Follows mesh and is maybe 5y above it

* Can have width and color alterted easily (based on hp)

* On top of all other 3D objects

* Have alpha

* Face camera all the time

Basically from what I get World Scene can't be faced against the camera all the time, sprites would be a hazzle to make 100 frames for each % and using a Ground mesh with .lookAt() wouldn't be on top always (I have palms in the way). 

 

I don't need a fully complete code, just a direction on how I can accomplish this.

Bonus question: Should I make the GUI in html/css or Canvas2D? Canvas2D makes more sense for rendering and consistency, but I'm so used with styling in css. What do most people use?

This can be a good starting point for you: http://babylonjs-playground.com/#1N9RJY#5

It was designed specifically for what you're looking for, basically it creates a ScreenSpaceCanvas2D which takes the full size of the Viewport, then you create one Group2D per "tag/bar" you want to create and you use the trackNode feature to specify that you want the Group2D to follow a given 3D Object.

Performance wise, if you use the default caching mode, everything will be rendered every time at each 3D render Frame, so it will cost you time, if your content changes a lot or if you don't want to get in trouble you can do that.

If each "tag/bar" you're going to create change few times per second, then I strongly encourage you to use the TOPLEVELGROUP caching strategy (more info here), performance wise it will be very fast, because I cache the whole content of all your "tag/bar" instances into one big texture and render them all in one draw call (if Instance Array WebGL extension is supported). So it can't be faster than that.

If you encounter issues of any kind, please ping me directly on this forum, I don't come everyday to read questions, but I do answer when DK or other ping me!

Last thing: don't forget to spend some time here: http://doc.babylonjs.com/overviews/Canvas2D_Home and feedback for improvement (concerning the documentation itself ) is welcomed.

Imho, using web/css in overlay doesn't suite for what you're trying to do, I've designed/developed Canvas2D for this exact purpose: in game UI, rendered in WebGL, the same way on every devices (in theory  ). I busted my *ss for performance to be good because I know people don't want CPU/GPU to be spent in this area, there's always room for improvement, but the foundations are good so far.

[Wingnut]

Hi guys.  There's also a "simpleton" way of doing a health bar.  http://www.babylonjs-playground.com/#WRH6X#14

Two planes, a little billboarding, a little parenting, a little scaling.    Check out #13 as well.  Party on!

[Raitch]

Thanks for a lot of fast and helpful replies!  http://babylonjs-playground.com/#1N9RJY%235 looks like what I need

[adam]

 

[joshcamas]

oooooo I didn't realize we had a 2D canvas already in place! AWESOME!

[Nockawa]

6 hours ago, joshcamas said:

oooooo I didn't realize we had a 2D canvas already in place! AWESOME!

Yep, you can refer to the Home Documentation for more info, with a list of Playground at the very bottom for examples.
For a complete history of the Canvas2D Dev, go check that first post, read it in reverse order, because I update it regularly to let people know about new features and fixes.

There's also a GUI Library on its way, fully customizable/theming, more info here.

[Raitch]

Are there any examples on Canvas 2D with an UI? I'm trying to imagine how I would create a scalable and well looking UI with mostly rectangles. Am however really used to styling with css so I guess I could use that instead until a GUI Library is out?

[Nockawa]

5 hours ago, Raitch said:

Are there any examples on Canvas 2D with an UI? I'm trying to imagine how I would create a scalable and well looking UI with mostly rectangles. Am however really used to styling with css so I guess I could use that instead until a GUI Library is out?

Well for now all I can encourage you to do is wait, I'm working on the GUI lib, as stated in my previous post, it kinda slowed down lately because I didn't have time to work on it, but I should resume the work in one/two days, I hope to release and alpha by the end of the month now.

[dbawel]

I personally have invested allot of time with every available extension for building GUIs, and certainly have my preferences. And lately, this an area which we've seen allot of activity - mostly in using canvas 2D, and the open nature of this extension which will provide yo with most everything you need. Then there is the Dialogue Extension which has considerable value in it's own right. Take a step back more than 1 - perhaps 2 years, and you'll find bGUI - which I built several apps using quite easily. And I was totally bummed when Temechon roughly announced that he thought it to be obsolete with Canvas2D in play. However, I fully disagree with @Temechon as I was and still am finding bGUI very useful - especialy the foundation of the extension which handles widgets and canvas events specifically window resizing handled beautifully.

So for me - and I highly advise this as a broad approach - is to avoid limiting yourself in anyway by forcing a selection between widgets and forms - or HTML DOM using CSS - why not take advantage of all? So here's my approach which works well for me - is that I take ful advantage of objects in WebGL (BJS of course), for many of my GUI elements as WebGL provides me with beautiful and aesthetic user elements which I can then also take advantage of all other native functions and materials - which ends up providing me with very few limitations in creating uniquely functioning "buttons and elements" way outside "the box" in functionality.

However, for many other reasons including saving screen "real estate", I take full advantage of DOM objects such as forms for lists, info, etc, and launch these from my own code - however I also truly like CastorGUI as he has created a very simple and powerful extension which he has included a nice library of HTML objects which work nicely within the BJS framework.

So my personal approach is to take full advantage of all available objects and methods, and now find that building the GUI can often be some of the most enjoyable tasks within the develpment process. And on a personal note - yes, I'm looking forwrd to @Pryme8' forthcoming release of PIE - if he ever gets around to finishing it - since what I've already seen what it is capable in its current limitexd state of develoment is pretty dam cool.

Alright, time for that beer... the one that's had my name on it for the past few hours.

Cheers,

DB

 

[Nockawa]

Well, there are no Silver Bullet and people have to understand that Canvas2D is NOT meant to be a GUI Library, but a 100% WebGL accelerated 2D Engine that will serve as the foundation for a forthcoming GUI Library.

You can build your own GUI Controls based on Canvas2D: it was designed to meet this requirement, but it won't be easy. People have succeed, but it takes time.

For Game UI, I personally don't think an HTML/CSS overlay is the right answer, specially if you hit multiple web targets.

There're also two other points of concern:

1) Integration with the 3D Engine: I do believe that Canvas2D and its GUI Lib will be very good on this

2) Performances: same thing, as it's 100% WebGL accelerated, way more simple than HTML/CSS and built with a tight scope, I believe the perf will be very good.The least I've tried with HTML Overlay is fine for a game menu, but I wouldn't consider it for in game UI....

[Pryme8]

5 hours ago, Nockawa said:

Well, there are no Silver Bullet and people have to understand that Canvas2D is NOT meant to be a GUI Library, but a 100% WebGL accelerated 2D Engine that will serve as the foundation for a forthcoming GUI Library.

Thank you for putting this out there I've been trying to explain that but lacked the correct way.