Jump to content

Canvas2D to GUI - frustration with unit values


Recommended Posts


Today i decided to start convert my Canvas2D code to GUI since C2D is no longer supported and i'm having rendering issues with it. Plus it's nice to have a more up to date Babylon version.

However, all the Canvas2D position values and such are numbers whereas with GUI they seem to be strings(?)

I have used a lot of simple +, -, and multiply math to position my things, but that no longer works because the values are no longer just numbers. Animating things seems really difficult as well for the same reason. I have to say i am not having fun with this combined value and unit with GUI.

Could we perhaps have a way to separately set the unit? I donno. Maybe i'm missing something but i'm having trouble. :(



Link to comment
Share on other sites


Well, that's not really what i mean. For example in your example i would like to be able to take the value of say rect1.height and subtract 30 from it. It being a string doesn't make this very user friendly experience. Or try animating the value rect1.height. You'd need to what, have a separate value that you animate and then use some kind of observer to make a string from that value and then apply that to the rect1.height.

Compare that to C2D where i can just animate the number of rect1.height.

It's just not fun. I find it way too complex. :huh:

Link to comment
Share on other sites


The babylon GUI is still very young, and it's basicly just HTML & CSS (hence the strings) rendered in the canvas :) 

But fear not, animations are easily done!
(the following example will only work on px values ofcourse, but it's a start :D)

PG; https://www.babylonjs-playground.com/#XCPP9Y#279

// Element, Target, INT to change target by, e.g. +10 (or just 10) to increase by 10 px, -10 to decrease by 10 px.
    guiPxAnimation(rect1, "height", +50);

function guiPxAnimation(element, target, change){
    if(!element || !target || !change) return;

        case "height":
            var _height = element._height.internalValue;
            if( change > 0 ){
                change -= 1;
                _height += 1;
            else if( change < 0 ){
                change += 1;
                 _height -= 1;
            element.height = _height + "px";
        guiPxAnimation(element, target, change);
     }, 25);
Link to comment
Share on other sites

@aWeirdo Mmm, but it used to be easier. With C2D i could just use CreateAndStartAnimation for example:

BABYLON.Animation.CreateAndStartAnimation('boxwidth', box1, 'width', 30, 120, 1.0, 1.5);

Now you need out of the box function.

So i know it's possible / how to change and animate the values but it's quite a bit more difficult with GUI than C2D, at least in my opinion, because fiddling around with string values just isn't as easy as fiddling with numbers.

But i do appreciate you giving me solutions,  even though this topic was more of a plea from me to have easier way for us to adjust GUI values. :)

I'ts entirely possible everyone else is happy with it the way it is, i don't know. My experience going from C2D to GUI isn't the most pleasant one.

Link to comment
Share on other sites

@Deltakosh Well, yeah, kind of i guess.

But if you look at this playground:


I think the way i'm trying position the rect2 is entirely reasonable, but it doesn't work ( even though it did with Canvas2D ). <_<

If you use the trick adam showed (demonstrated in rect3) then it works.

So it's fine, i can live with this, but i'm not sure it's as straightforward as it could be and i feel like there are going to be at least a few people who try to do what i'm trying to do in the rect2 example...

Edit: Well the blue rect3 worked when i posted this at least. Now that i closed and reopened the tab the blue rectangle is in the same place as the green one. Don't know what happened there. Just a few minutes ago it worked. :huh:

Edit2: http://playground.babylonjs.com/#E2TSU0#3

Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...