ScreenSpaceCanvas2D Resize behavior in Babylonjs Preview Version

[AlbertTJames]

Hey,

My code is :

var canvass = new BABYLON.ScreenSpaceCanvas2D(scene, {
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50
  });

I was wondering if this resize behavior was normal, when the canvas is set up it fills the whole screen, i can resize it down with the window, but when the wondow gets bigger than the original size the canvas stop resizing :

Begining :

Smaller:

Larger:

The position of the sprite changes between the images, sorry if its confusing, its really the limits of the canvas as seen with rounded borders and color that matters. On the larger size, the rounded border disappear on the right: This happens if I resizes down before resizing up.

How can I make it resize to the canvas size for larger sizes ?

[AlbertTJames]

Ok now if I set the designSize it seems the screencanvas resizes to the current window size.. but something weird happens. The background is not resinzing up nor down, but the sprite can move around the screen.... :

 

 

My whole code :

var canvass = new BABYLON.ScreenSpaceCanvas2D(scene, {
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50,
    designSize: new BABYLON.Size(1500, 1500)
  });

  /* --- Load assets --- */
  var rabbitFaceTexture = taskObject.cloneAssetIntoScene(taskObject.assets.rabbitFaceTexture, scene);
  var wolfFaceTexture = taskObject.cloneAssetIntoScene(taskObject.assets.wolfFaceTexture, scene);
  wolfFaceTexture.hasAlpha = true;
  rabbitFaceTexture.hasAlpha = true;

  /* --- Create Sprites --- */
  var wolfFaceSprite = new BABYLON.Sprite2D(wolfFaceTexture, {
    parent: canvass,
    id: "sprite1",
    x: 0,
    y: -50,
    origin: BABYLON.Vector2.Zero()
  });

  taskObject.wolfFaceSprite = wolfFaceSprite;

  var timerId = setInterval(function () {
    //wolfFaceSprite.scaleToSize(new BABYLON.Size(_.random(0, taskObject.renderSize.width), _.random(0, taskObject.renderSize.height)));
    wolfFaceSprite.x = _.random(-2000, taskObject.renderSize.width);
    wolfFaceSprite.y = _.random(-2000, taskObject.renderSize.height);
  }, 500);

 

[AlbertTJames]

Ah !

 

This only happens with the new preview version of babylon... so maybe due to recent changes in the alignment of canvas2D ? @Nockawa

I am obliged to use this version as my sprites do not show in the current one.. (size problems corrected in the new version)

[Nockawa]

Ok, let's take the issues, one by one.

The first one doesn't involve designSize, can you share a PG or code that demonstrate the issue?

[AlbertTJames]

Hmm i cant do a PG, it is only in the new preview version of the code that this happen.

 

Here is a bit of code with a lot of weird stuff happening :

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50
  });

  var root = new BABYLON.Rectangle2D({
    id: "root",
    parent: canvas,
    marginAlignment: "h: center, v:top"
  });

  var frame = new BABYLON.Rectangle2D({
    id: "frame",
    parent: root,
    fill: '#000000FF'
  });

  var group = new BABYLON.Group2D({
    parent: root,
    id: "group",
    layoutEngine: "verticalstackpanel",
    //marginAligment: 'h: center, v: top',
    children: [
      new BABYLON.Rectangle2D({
        parent: group,
        id: "rect1",
        width: 100,
        height: 100,
        fill: "#40C040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect2",
        width: 100,
        height: 100,
        fill: "#C04040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect3",
        width: 100,
        height: 100,
        fill: "#4040C0FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
    ]
  });


  /* --- Load assets --- */ 
  var wolfFaceTexture = taskObject.cloneAssetIntoScene(taskObject.assets.wolfFaceTexture, scene);
  wolfFaceTexture.hasAlpha = true; 

  /* --- Create Sprites --- */
  var wolfFaceSprite = new BABYLON.Sprite2D(wolfFaceTexture, {
    parent: frame,
    id: "sprite1",
    x: 0,
    //y: -50,
    origin: BABYLON.Vector2.Zero()
  });

  wolfFaceSprite.scale = 0.1;

By scaling the sprite, all the siblings and parents are scaled.

 

Also, if I do not add the sprite:

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50
      //cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_CACHECANVAS
  });

  var root = new BABYLON.Rectangle2D({
    id: "root",
    parent: canvas,
    marginAlignment: "h: center, v:top"
  });

  var frame = new BABYLON.Rectangle2D({
    id: "frame",
    parent: root,
    fill: '#000000FF'
  });

  var group = new BABYLON.Group2D({
    parent: root,
    id: "group",
    layoutEngine: "verticalstackpanel",
    //marginAligment: 'h: center, v: top',
    children: [
      new BABYLON.Rectangle2D({
        parent: group,
        id: "rect1",
        width: 100,
        height: 100,
        fill: "#40C040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect2",
        width: 100,
        height: 100,
        fill: "#C04040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect3",
        width: 100,
        height: 100,
        fill: "#4040C0FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
    ]
  });

All is stacked up

 

Now if I diminish the size of the parent object and increase the scale of the sprite...

var frame = new BABYLON.Rectangle2D({
    id: "frame",
    parent: root,
    fill: '#000000FF',
    height: 150
  });

wolfFaceSprite.scale = 0.3;

 

Weird stuff... should't children be cropped if going out of their parent content aera ?

[AlbertTJames]

Scaling seems to behave normally if I set a size for the frame : 

var frame = new BABYLON.Rectangle2D({
    id: "frame",
    parent: root,
    marginAlignment: "h: center, v:center",
    fill: '#000000FF',
    size: new BABYLON.Size(1000, 500)
  });

 

[AlbertTJames]

Ok sorry for that, to come back to the first problem of canvas resize, even if I set the canvas to the window size the canvas does not update visually although the size property is correctly changed:

 window.addEventListener('resize', function () {
    canvas.size = taskObject.renderSize; 
  });

 

[Nockawa]

hello, I don't forget about your issue, I just have something to finish first then I take a closer look to yours.

[adam]

19 hours ago, AlbertTJames said:

This only happens with the new preview version of babylon

The PG is using the preview version.

[Nockawa]

3 minutes ago, adam said:

The PG is using the preview version.

yes, but DK didn't  update the PG with my latest commit, so @AlbertTJames is right that the issue only happens in local so far and not in the PG

[GameMonetize]

PG updated

[Nockawa]

Ok, I'll take this thead, post by post!

The first post: I repro the same issue, when the windows is getting bigger the background is somehow clipped. I believe it's a recent regression also, so I'll investigate right now. But it's may be something like setting the webgl viewport incorrectly at some point.

[Nockawa]

On 9/25/2016 at 10:09 PM, AlbertTJames said:

Hmm i cant do a PG, it is only in the new preview version of the code that this happen.

 

Here is a bit of code with a lot of weird stuff happening :

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50
  });

  var root = new BABYLON.Rectangle2D({
    id: "root",
    parent: canvas,
    marginAlignment: "h: center, v:top"
  });

  var frame = new BABYLON.Rectangle2D({
    id: "frame",
    parent: root,
    fill: '#000000FF'
  });

  var group = new BABYLON.Group2D({
    parent: root,
    id: "group",
    layoutEngine: "verticalstackpanel",
    //marginAligment: 'h: center, v: top',
    children: [
      new BABYLON.Rectangle2D({
        parent: group,
        id: "rect1",
        width: 100,
        height: 100,
        fill: "#40C040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect2",
        width: 100,
        height: 100,
        fill: "#C04040FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
      new BABYLON.Rectangle2D({
        id: "rect3",
        width: 100,
        height: 100,
        fill: "#4040C0FF",
        //marginAligment: 'h: center, v: top',
        marginTop: 10
      }),
    ]
  });


  /* --- Load assets --- */ 
  var wolfFaceTexture = taskObject.cloneAssetIntoScene(taskObject.assets.wolfFaceTexture, scene);
  wolfFaceTexture.hasAlpha = true; 

  /* --- Create Sprites --- */
  var wolfFaceSprite = new BABYLON.Sprite2D(wolfFaceTexture, {
    parent: frame,
    id: "sprite1",
    x: 0,
    //y: -50,
    origin: BABYLON.Vector2.Zero()
  });

  wolfFaceSprite.scale = 0.1;

 

Ok, some remarks about this code:

• even if it's commented, pay attention to the fact that it's "alignment" and not "aligment"
• "rect1" is initialized with "parent: group" which is incorrect because "group" is not yet assigned, and you don't have to specify a parent anyway. I don't know how it behaves in such case.
• you create a rectangle "root" width no size and then make "group" a child of it. I realize it's misleading: "root" won't be autosized to its content (group), this behavior is specific to Group2D only!

If you make "group" a child of "ScreenCanvas", then the stack layout of the rect is working.

What I would like to know is what you want to achieve to try to design a solution and see if it's a clean one. So can you explain me a bit more what you want to do? You can also explain what were your expectations in term of behavior that weren't met (e.g: "I would have thought that Rectangle2D with no given size would auto size to its content).

Thanks!

Btw, I've fixed the Canvas Auto Size bug when getting bigger, it was indeed a regression, the code will be commit shortly.