Resize/Scale Canvas2D/ScreenSpaceCanvas2D

[vsh91]

Hello again, back with another issue I can't find a solution to.

Does anybody know how to resize/scale canvas2d? More specifically a (new BABYLON.ScreenSpaceCanvas2D).

I've looked through the documentation but can't find any functions that would do this.

On window resize I'm simply calling engine.resize().

As an alternative, I tried manually changing the size by calling...

canvasGUI.size = new BABYLON.Size(innerWidth/6.04, innerHeight/10.08);
canvasGUI.children[0].fontName = 10 + "pt Arial";

But it seems to cut canvas2d instead of re-scaling it.

Any simple solutions to this problem? Thank you!

 

**Update, I've managed to find a solution that works. I'm still working out a proper solution for the math, but so far this works in creating a window of width,height 300,100 and a font of 22 for a 1920x1080 +- a few decimal points on the divisions of width and height.

window.addEventListener('resize', function(){
  engine.resize();
  canvasGUI.dispose();
  canvasGUI = createGUI(scene, window.innerWidth, window.innerHeight);
  //1920/6.04 = 300
  //1080/10.08 = 100
});
var createGUI = function (scene, width, height, uWidth, uHeight, fontSize, message) {
    var fontScale = 3000/fontSize;
    var wn = 1920/uWidth;
    var hn = 1080/uHeight;

    var setFontSize = (width/fontScale + height/fontScale);
    
    var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
        id: "ScreenCanvas",
        size: new BABYLON.Size(width/wn, height/hn),
        backgroundFill: "#404040FF",
        backgroundRoundRadius: 5,
        children: [
            new BABYLON.Text2D(message, {
                id: "text",
                marginAlignment: "h:center, v:center",
                fontName: setFontSize + "pt Garamond",
            })
        ]
    });
    return canvas;
};

 

[Nabroski]

Hello,

i'm not sure, not tested it.

But i think it should work probably if you running your scetch local or on an external server as describe here.
https://doc.babylonjs.com/tutorials/Creating_a_Basic_Scene

Best

 

[vsh91]

Hmm I think we might be talking about different things. canvas2d https://doc.babylonjs.com/tutorials/Using_the_Canvas2D

This is the first tutorial presented by canvas2D http://babylonjs-playground.com/#2AVSFH#35.

Notice that this is also not resizing and more complicated examples follow the same behavior

[Nabroski]

Hello 
Sorry to hear your suffer. Playground is great for learning and discovering. 
If you click on the Debug Layer it is also non resizable - kind of Canvas2D Element, its coded in bGUi.(i think)

Your solution seem legit to me. Maybe put 

engine.getRenderHeight() engine.getRenderWidth() /RenderingCanvasClientRect...etc.

somewhere, makes it looks a bit smarter.

I think, i read few comments earlier that the main developer of Canvas2D is currently busy.

But i'm sure he will catch up soon.

Best 

[GameMonetize]

@Nockawa is pretty busy now but will be here really soon:)

[Nockawa]

@vsh91 first question: why do you want to resize the screen space canvas? if you set no size, the canvas will take all the size of the Viewport it's associated to. It can be an issue if you use a different caching strategy than the default one (which is DONTCACHE), but otherwise it's fine.

What are you trying to do that makes you wanted to change its size?

[vsh91]

Well, my objective is to have a have a user interface that is resizable based on the screen resolution for easy porting to multiple devices using Apache Cordova. Resizing is not the issue, but automated porting is.

Being a newb to babylonjs, I figured that I have to resize the screen space canvas... I know this is wrong now, I misunderstood the structure of canvas2d, screen space canvas being a child of canvas2d right?

I'm definitely not using a different caching strategy other than the default.

I don't know, maybe I'm thinking about this all wrong? I thought bGUI would be a solution to this problem but from the limited amount of time I tried to get that working, it seemed to have some inconsistencies? I also posted a question about it and somebody redirected me to canvas2d. Though the demo represents much of what I want, http://temechon.github.io/bGUI/

[Nockawa]

First, make sure you read all you need in the documentation: http://doc.babylonjs.com/overviews/Canvas2D_Home

I really put a lot of effort into it for people to get a good understanding of how things work. The link above also point to the first time tutorial, and also pretty much all the pages of documentation for canvas2D (around 20 now).

Does you UI will have controls all over the screen or just in some particular places like top/right, bottom/right, etc. ?

[vsh91]

No, there is no question about how amazing the documentation is. I have gotten much farther than I was yesterday thanks to it. I tend to skip over aspects to get to a solution as quickly as possible and it has cost me in the past.

I want to say all over the screen.  I am trying to create something like Final Fantasy Tactics/Tactics Ogre. The UI is going to be a big part of this. I currently have multiple canvas2d objects, one for character stats such as health/movement... and another for the user to select what to do such as move/wait/defend...

[Nockawa]

Ok, this sample may be the most interesting for your case: http://babylonjs-playground.com/#1N9RJY#5

You only need to create one Canvas which will cover all the screen, no matter the device, if it's resized, etc. You don't have to care about that: if you don't set a size for the Canvas it will always fit the whole screen/viewport.

What you need to do after is create Group2D objects, children of the Canvas, consider a Group2D as a "mini Canvas", in fact, that's what it is. Each group will  contains all the display object for your players, etc. I highly recommend you to create a make that create the group and all its content for say a type of player (ogre), and do the same for other types.

[vsh91]

Ok, Thank You! It's really cools you guys are directly answering these questions. I and I'm sure many other people really appreciate all this. It makes me confident in my transition from threejs.

[Nockawa]

I'm glad to help!

The feature is pretty big, I tried to make as much doc as possible but I know it's hard for people to start working with it because there're many use cases.

Happy coding to you!

[Nabroski]

@vsh91Hello 
i think the trouble you run in is simple, the renderCanvas has his own drawcalls.
it's good, coz' we all want hit 60fps in our games and apps.
It's kind of window in a window - a layer and the playground is designs for usability for all kinds of tasks.

With a simple error message you can avoid the engine to request Drawcalls, at this point it sticks again with the "outside" window.

I found the playground great for learning, at some point you should start, to debug your app beyond that. 
Maybe you are thinking over problems, that are not, when you ready for poring your code to on an external server.

Good Luck
 

[webGLmmk]

On 7/10/2016 at 2:24 AM, Nockawa said:

Ok, this sample may be the most interesting for your case: http://babylonjs-playground.com/#1N9RJY#5

You only need to create one Canvas which will cover all the screen, no matter the device, if it's resized, etc. You don't have to care about that: if you don't set a size for the Canvas it will always fit the whole screen/viewport.

What you need to do after is create Group2D objects, children of the Canvas, consider a Group2D as a "mini Canvas", in fact, that's what it is. Each group will  contains all the display object for your players, etc. I highly recommend you to create a make that create the group and all its content for say a type of player (ogre), and do the same for other types.

 

On 7/10/2016 at 0:27 AM, Nockawa said:

@vsh91 first question: why do you want to resize the screen space canvas? if you set no size, the canvas will take all the size of the Viewport it's associated to. It can be an issue if you use a different caching strategy than the default one (which is DONTCACHE), but otherwise it's fine.

What are you trying to do that makes you wanted to change its size?

Hey there @Nockawa. This is a slightly older thread but my question is exactly relating. In answer to why its important to have the canvas2d responsiviely resized:

I created a set of camera movement controls. Here is the playground scene:

http://www.babylonjs-playground.com/#LYEU3#8

But a live page will illustrate it a bit better:

http://3dwebgs.github.io/miscWebGLpages/starfield.html

There's a set of controls on the left, which translate the camera, and a set on the right which adjust rotation. IF you resize the window from the right hand side, it doesn't resize itself. This is pretty important for this scene idea because i designed this to be viewed on smartphones, ...if you start in landscape, then go back to portrait, you can't see the right side controls anymore. IF you start out in portrait, then move to landscape, it'll be too far over to the left.  Putting everything on the left disrupts my dual-thumb design....

I have one main group parented to other groups, but the right size of the canvas2d itself isn't automatically responsive. Canvas2D is amazing, and it was a huge piece missing in being able to complete actual games and interactive scenes with Babylon, you're documentation is great as well...without being able to make the right side of the canvas2d automatically responsive though, its going to limit my design quite a bit when you consider mobile use, and alternating landscape/portrait. I'm trying to figure out what @vsh91wrote above..also,  @vsh91 did that end up working out the way you needed it?

[Nockawa]

@webGLmmk looks like everybody have the same requirements these days, good I'm glad to see that. In this particular case, I totally understand that it's mandatory for your guys.

In order to answer this need I've developed the "designSize" feature, which lets you specify the "ideal" size of your ScreenSpaceCanvas, then position every primitives inside regarding this size. After I will scale the content to make sure it fit the "real htmlCanvas' size". You can find more info to the latest update of this post and I encourage you to monitor this thread as I try to post only when new features/bug fixes are release, for you to be aware of what's new. And I try to make people creating specific topics to prevent unnecessary notifications.

Read about the feature and tell me if that's what you were looking for or if there's something I can do to make it better. I didn't write a documentation about it and I think I should because many people are willing to use this mode now.