Objects fail to render when changing the render bounds #595

nukadelic · 2018-04-01T05:35:36Z

My objective is to preserve aspect ratio while user resizes browser window ( this is needed for portrait / landscape orientation support for mobile ). The problem appears when matter-js is being scaled, and some of the bodies stop being rendered and disappear when they approach the edges of the screen ( sometimes this also happens in the middle of the screen )

CSS

html, body 
{
  padding: 0;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}

HTML

<body>
  <div><canvas></canvas></div>
</body>

Script

Constructor

// ...
    this.container = container; // div element reference 
    this.canvas = canvas; // canvas element reference 
    this.engine = Engine.create();
    this.render = Render.create({
      element: container,
      canvas: this.canvas,
      engine: this.engine,
      options: 
      {
        hasBounds: true,
        width: 400,
        height: 400,
        background: '#AAA',
      }
    });
    Render.run(this.render);
    Engine.run(this.engine);
 
   // ... 
   // add a simple physics objects
   // ...

   // reset min bounds ( ? )
    this.render.bounds.min = { x:0,y:0 };
    
    // Save starting render bounds to calc scale ratio later  
    this.renderBounds = 
    // Autofit max bounds to current render bounds
    this.render.bounds.max = 
    { 
      x : this.render.options.width,
      y : this.render.options.height 
    };

    // Initial render bounds ratio 
    this.renderRatio = this.renderBounds.x / this.renderBounds.y;

    // attach event listener & force event resize
    window.addEventListener("resize", this.eResize.bind( this ) );
    this.eResize();
// ...

Resize event

// On browser resize, change canvas size to fit full width
function eResize() 
{  
    // resize canvas
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerWidth * this.renderRatio;

    // Current screen scale ratio relative to starting canvas size
    var screenRatio = this.renderBounds.x / window.innerWidth;
    
    // calculate new render bounds based on old size times new ratio
    this.render.bounds.max = 
    { 
      x : this.renderBounds.x * screenRatio,
      y : this.renderBounds.y * screenRatio
    };
}

I have also tried changing Render.lookAt & world.bounds but the issue doesn't seem to go away.

See also: #408

The text was updated successfully, but these errors were encountered:

nukadelic · 2018-04-07T07:22:19Z

I did get the aspect ratio working properly in this, see demo: https://matter-genetic-car.stackblitz.io, but there still is an issue with non rendering objects within the visible screen bounds, try changing the window size to see the bug ( Source code )

andreasjeppsson · 2020-11-10T08:07:30Z

Hi, I have the same issue. Did you manage to fix this? @liabru @nukadelic

andreasjeppsson · 2020-11-12T07:50:48Z

I solved this by commenting out this row in Render.js (:346)
Render.startViewTransform(render);
Now I can set the render bounds without everything being scaled.

liabru added question investigate labels Apr 30, 2018

liabru mentioned this issue Mar 18, 2023

Proper way to handle resizing. #955

Closed

liabru closed this as completed in fc05839 Mar 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Objects fail to render when changing the render bounds #595

Objects fail to render when changing the render bounds #595

nukadelic commented Apr 1, 2018

nukadelic commented Apr 7, 2018

andreasjeppsson commented Nov 10, 2020 •

edited

Loading

andreasjeppsson commented Nov 12, 2020

Objects fail to render when changing the render bounds #595

Objects fail to render when changing the render bounds #595

Comments

nukadelic commented Apr 1, 2018

CSS

HTML

Script

nukadelic commented Apr 7, 2018

andreasjeppsson commented Nov 10, 2020 • edited Loading

andreasjeppsson commented Nov 12, 2020

andreasjeppsson commented Nov 10, 2020 •

edited

Loading