Need some clarification on these terms

[Jaxium]

Hello,

I've started learning Pixi not so long ago, and everything seems to be going well so far, whenever I get stuck I consult the docs or the past posts.

But these few terms actually confuse me a lot,
app.renderer, app.renderer.view, app.screen, app.renderer.screen

In this case I'm using app as the constant for the PIXI.Application.
Can someone tell me what's the direct difference between those terms, and if there are others related/similar to them too that I should be aware of?

Thanks in advance.

[ivan.popelyshev]

view is canvas, so "width" and "height" are in real pixels.

screen is a rectangle, and according to CSS.

new Renderer({width: 800, height: 600, resolution:2 , autoDensity:true}) makes a renderer with view of 1600x1200, but screen is still 800x600, and those numbers will apppear in "view.style.width="800px""

All your stage has to be adjusted to 800x600 size in this case, not 1600x1200.

- this helps for Retina displays or when tab is zoomed, or on modern phones.

Its rare when someone makes it right from first try

As for app in general, here's explanation: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop . Application on itself doesnt have any magic, it just creates a few components and consists of number of getters.

[Jaxium]

Thanks for replying,

However, in addition to your post, I have played a bit with them, and I don't really see a difference between view and screen (I figured out that app.screen is the exact same as app.renderer.screen)

But view (canvas) and screen both have the same Width and Height, (screen also starts at X = 0, and Y = 0, and I suppose the canvas too)

So what's the real difference between both of them?

For example, if I want to make the UI for my game, would I do it in Screen, considering it's the rectangle around the screen, or in the view?

Edited July 12, 2020 by Jaxium

[ivan.popelyshev]

they are same unless you start messing with pixel density. Retina, modern phones, all that stuff.

YES, for UI and all stage objects you should depend on "screen". That's why I introduced it , people were relying on "view" and it depends on pixel density.

[ivan.popelyshev]

Also its good for tricks like "container.filterArea = renderer.screen" - and filterArea wont have to be changed after resize  Screen is just a rectangle that is updated on resize

[Jaxium]

Thank you! That made it clear.

That filterArea property is used to render stuff only in the screen of the player, for more optimization, right?
So I can do app.stage.filterArea = app.renderer.screen, and it will make the stuff on the screen only render.

Other than that, for the UI I was thinking of creating a container, then setting its width and height to the app.screen's width and height, and sticking/pivoting it to the player (who will be in the middle of the renderer screen).
Is this a good approach or?

Edited July 12, 2020 by Jaxium

[ivan.popelyshev]

No, its used with filters to show pixi that it doesnt have to calculate affected area and always should use full-screen extra framebuffer.

> Other than that, for the UI I was thinking of creating a container, then setting its width and height to the app.screen's width and height, 

Bad idea. You see, pixi containers dont have width,height, those are calculated. They aren't like DOM div's. width/height actually sets SCALE. That thing came from flash, and it relies on fact that pixi and flash both DONT HAVE LAYOUT. AT ALL. its user problem. If we do it, then it'll be slow as heck.

UI and world should be separate containers. world position has to be screen/2, world pivot equals to character coords in map. Basically you "pin" particular point on map to the center of screen.

[Jaxium]

Ah, I see. So the better approach is to make the UI using HTML/CSS outside Pixi, for example in a different DIV?

And yeah, I already managed to make a working Viewport (by the position/pivot technique).
 

Quote

No, its used with filters to show pixi that it doesnt have to calculate affected area and always should use full-screen extra framebuffer.

If this is the case, then is there a way through pixi to make the stuff on the screen only render, or is it a longer process of me calculating it each frame on the gameloop and rendering to it? For more optimization.

Thanks! And sorry for my many questions.

Edited July 12, 2020 by Jaxium

[ivan.popelyshev]

> So the better approach is to make the UI using HTML/CSS outside Pixi, for example in a different DIV?

For prototyping - definitely yes, use the power of html. For real app on mobile phones - need performance testing

[Jaxium]

Ah, thanks!

Quote

If this is the case, then is there a way through pixi to make the stuff on the screen only render, or is it a longer process of me calculating it each frame on the gameloop and rendering to it? For more optimization.

As for this, I actually figured out that the app.renderer does that automatically apparently.

[ivan.popelyshev]

it doesnt. pixi doesnt have culling mechanism inside. WebGL itself does - fragment shader is not called for stuff outside of framebuffer