IvaMartyno Posted June 8, 2021 Share Posted June 8, 2021 Hello, Let's say we want to make a simple 2D game, e.g. Ping-Pong or Asteroids. I have seen that sometimes people use window.innerwidth/height to initialize a PIXI.Application and sometimes they use document.body.clientWidth/clientHeight. app = new PIXI.Application({ width: Math.max(1, window.innerWidth), height: Math.max(1, window.innerHeight), resolution: devicePixelRatio, autoDensity: true, }); Similar for resize events: window.addEventListener('resize', onResize); function onResize(): void { app.renderer.resize(window.innerWidth, window.innerHeight); } This is used for a very simple setup, having an index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Simple PIXI App</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <script src="./main.ts"> </script> </body> </html> So, my question is: what is the best practice to initialize/resize application's width and height? Should I use window, or document.body, or create a <div name="#frame"> and specify its size? I would prefer that the initial application takes full screen and in the code I would resize according to the needs. However, it is confusing which data to use as a reference for the screen size. Ideally, that simple app, call it ping-pong, should work on any device/browser. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 8, 2021 Share Posted June 8, 2021 (edited) > what is the best practice to initialize/resize application's width and height? nobody gave complete answer on that for all years of pixijs. Here is the most basic setup: https://github.com/ivanpopelyshev/pixi-starfighter just do 720 x 1280 and CSS resize. Yes, it does not make 1:1 pixel, expect some soap. There are many problems with balancing pixels, because you cant use 1:1 in HTML5, many devices have very big screens and slow video. Edited June 8, 2021 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
Exca Posted June 8, 2021 Share Posted June 8, 2021 (edited) My current resize solution is to have canvas resize to certain size (determined so that no asset gets upscaled, downscaling is ok) and if the screen is larger than that size, then render at the aspect ratio of the screen with the maximum supported size and upscale the canvas with css to fill rest of the screen. Also swapping out the method how css upscale happens based on game content. For example if it's pixel art then image-rendering:crisp-edges will mitigate some of the css scaling issues. And for how the objects are positioned & scaled inside pixi stage, that is a long problem with very many solutions. I have done one post about this some time ago. Will edit the post after finding it. About how to read the screen size: If you have full control over your html file and it doesn't get embedded by some other site without iframe then using window.innerWidth & window.innerHeight as your size targets is good. Just remember to have margin & padding set to 0 on body & other elements that are above your canvas. On the other hand if you are embedding to some site then they might have their own resolution requirements, in those cases the resolution is usually just fixed or they provide an object / hook / something that provides the data. [Edit] Found the link to older post, this wasn't so complete as what I remembered https://www.html5gamedevs.com/topic/37686-responsive-pixijs/?tab=comments#comment-215138 Edited June 8, 2021 by Exca Added link Quote Link to comment Share on other sites More sharing options...
IvaMartyno Posted June 9, 2021 Author Share Posted June 9, 2021 Great, thanks for the tips! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.