How to auto adjust with different screen size on the browser?

[caymanbruce]

I have found a very strange issue in regards to positioning the containers on the screen on different screen size. For example, I have set my screen size as window.innerWidth X window.innerHeight. So the center of the screen is centerPoint = (window.innerWidth / 2, window.innerHeight / 2). When I place some circle shape container at (centerPoint.x + 570, centerPoint.y + 370), I expect that it would be displayed at the bottom right corner of the browser screen. But the display is different on my macbook and PC. On my Macbook it display correctly and I can see the entire container. But on PC I can only see the left edge of the container at the bottom right. The rest of container is outside the screen, I have to move it back to (centerPoint.x + 510, centerPoint.y + 370) to display it fully on PC. However this change makes it shift left on my Macbook browser screen.

How can I make them work like the same? I use a camera so I hope I can position containers relative to the camera center.

[Taz]

You have to make the adjustments to handle the window's size. From other posts it sounds like you're drawing your assets programmatically for a Slither/Agar -style game? ( Me too:) So for a window that is twice as big you'd draw assets that are twice as big and position them twice as far apart and move them twice as fast. So a food that is positioned 10 pixels from center on 800x400 window would instead be positioned 20 pixels from center on a 1600x800 window (and it would be drawn twice as big and move twice as many pixels per frame). To maintain the aspect ratio you'll apply the same factor to both axis (x and y) when calculating the sizes and distances and speeds. It's common to use the smaller factor for both axis: e.g., it's better to fit more content on the screen than not enough for a Slither/Agar-style game.

The other approach is to scale by this factor (but if you're programmatically creating all of your assets then you can avoid the scaling artifacts by doing like above). You can use or reference kittykatattack's scaleToWindow function for this - I learned a lot by studying it myself. Also there's posts here and tutorials on the web about scaling to the window - I don't think it's changed much (at all?) over the last few years. I can't think of any in particular to refer you too but "pixi scale to window" should turn up some good Google or forum results I think

[caymanbruce]

@Jinz Thanks I think I get a basic idea. One problem is that when I config the renderer's autoResize property to be true, how does PIXI know I am going to scale and maintain a certain aspect ratio? For example if the player decides to play the game full screen, the camera center will be adjusted too, so are the minimap and other information texts. I usually just resize the screen once before the game starts. But if the game need to resize to different scale correspond to the screen size do I need to manually listen to some event? Do you have experience doing so?

UPDATE: I just found out I have used windows `onresize` event in my project somewhere before. But that is only for the first screen. I think I have tried to add this feature but then didn't continue after I realize I need to change the scale of everything on a resize event. Because I can see nothing but the background when I resize my browser window to a very tiny window.

[ivan.popelyshev]

autoResize is just two lines. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L233

Also I dont recomment to use scaling for it, it'll get blurry. Its better re-position all of your UI after resize, relative to screen. There's "renderer.screen" rectangle for such purpose, you can reference it anywhere and it'll be updated automatically after every resize.

I think its time for you to clone pixijs github repo and use sublime or an IDE to search features you want to know about before you ask questions, that'll make your question more concrete. Source code is the best docs ^_^.

[caymanbruce]

59 minutes ago, ivan.popelyshev said:

autoResize is just two lines. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L233

Also I dont recomment to use scaling for it, it'll get blurry. Its better re-position all of your UI after resize, relative to screen. There's "renderer.screen" rectangle for such purpose, you can reference it anywhere and it'll be updated automatically after every resize.

I think this is the correct way to do it. It saves me from other hassles. This is also the fastest solution performance-wise.

[ivan.popelyshev]

That's why I recommend to use "renderer.screen" or "app.screen" to get width and height of stage. It wont change when you start experimenting with "resolution" options, while "Renderer.width" and "renderer.height" willl go crazy multiplied.

[caymanbruce]

On 6/29/2017 at 6:18 PM, ivan.popelyshev said:

That's why I recommend to use "renderer.screen" or "app.screen" to get width and height of stage. It wont change when you start experimenting with "resolution" options, while "Renderer.width" and "renderer.height" willl go crazy multiplied.

I get very close to perfect resizing. But I am bogged down by a bug. 

I use a camera to display my local player and other local information. Its position is calculated as followed (center on the screen):

camera.x = sprite.x - camera.width / 2;

camera.y = sprite.y - camera.height / 2;

I add a windows "resize" listener in my project.

windows.addEventListener('resize', this.resize.bind(this));

resize(event) {
    this.camera.width = this.renderer.screen.width;
    this.camera.height = this.renderer.screen.height;

    this.renderer.resize(windows.innerWidth, windows.innerHeight);
}

Using this configuration, I manage to do most of the windows resizing correctly. For example, manually dragging the edge of the browser window to resize the it. Then the player and texts information will redraw accordingly. Except that when I open a Chrome developer tools tab on the left of the browser window, this time I can only see the texts info at each corner of the screen, but I can't see the local player which is supposed to be in the center of the screen. Another issue is that when I play the game in full screen mode in any browser, local player will not be in center. It is displayed above center point of the screen.

[ivan.popelyshev]

Please do not use "camera.width" and "camera.height", it has side effects. What do you think width of container is? It is width of rectangle that has all children inside it.

I lost my temper several times explaining it to users, so i just leave some links:

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L570

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L235

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L343

As you see, it changes the transform temporarily, re-calculates all children coords, taking bounds from them. Its not "width" css property, it is pure evil.

[caymanbruce]

@ivan.popelyshev Thanks ivan. Maybe I haven't put it clearly. The "camera" object is not a PIXI.Container. It is just a plain object written in KittyKatAttack's GameUtilities class (https://github.com/kittykatattack/gameUtilities).

[Taz]

For me when I go full screen on my MacBook there's a small black bar across the bottom of the screen, so if my background is black then it looks like center is a little too high. But this happens with all web games that I play, not just my Pixi projects..

[caymanbruce]

@Jinz But this doesn't happen in slither.io on PC. I can resize it to any resolution without any problem. I have tried it on Mac but the resizing only works in Safari. In Chrome I can't move the player to other directions when it is full screen. But still, this result is much better than my project.