Responsive Design

[AntoniaChimp]

Hey !

I was able to resize my canvas so it always fills the whole screen, with

  app.renderer.view.style.position = "absolute";
  app.renderer.view.style.display = "block";
  app.renderer.autoResize = true;
  app.renderer.resize(window.innerWidth, window.innerHeight);

But if I put sprites or graphics on it, their position is always pixel based. So if I change the resolution of the screen it isnt
on the same position anymore relatively.

Is it possible to position them with % or relatively to bottom left corner ? I mean without setting concrete pixels which are different on every screen resolution. Or do I have to write more or less a form of media queries ?


 

[botmaster]

pixi is not gonna do that job for you, you have to write your own code/solution to handle this.

[ivan.popelyshev]

Another possible solution is to fix canvas width/height and scale it saving the aspect ratio: https://github.com/ivanpopelyshev/pixi-starfighter

Its fine if linear filtering works for your case. Otherwise, you have to use "resize" and adjust stage scale. There's no packaged solution in pixijs for that.

[Olloverr]

It is also difficult for me to cope with the preparation of a high-quality presentation on my own, especially if it is a responsible task for a meeting with investors. In such cases, I use custom powerpoint slides  It helps me to convey a main idea that is supported by thorough research, graphs, charts and content that cannot be ignored.

Edited February 3, 2023 by Olloverr
specification