Really digging that there’s already support in here for GUIs and responsive design. I think I’m missing something though: Is there scaling mode for 2D Screens that is the equivalent of the “fit” rendering mode? Like, I would like my game to fill the screen always, but I’d like to design the UI in let’s say a 16:9 aspect, and I’d like that to be fitted and centered on the screen, no matter the window’s aspect ratio.
Does the fit mode for the elements work for you?
I don’t think so, as the fitting for elements is derived from the dimensions of the parent Screen, right? And I don’t think there’s a built in way to tell a 2D Screen to just fill the screen. I suppose I could add a script to do that instead though, right? I’m not sure I have enough insight to get the update order correct though, e.g. if I added a script that on init set a resize listener on the window which sets the dimensions of the Screen, how could I ensure the PC layout stack gets re-evaluated at least once more after? Does setting the Screen dimensions do that? Thanks!
Sounds like you want CSS ‘cover’ functionality for the whole screen? If that is the case, that would work with fit mode on the element.
https://playcanvas.com/project/1019090/overview/css-cover
Nope, that’s exactly what I don’t want: I want to design a HUD with a specific fixed aspect ratio, and guarantee that it’ll both: (1) never be cropped, and (2) be centered and as large as it can be, irrespective of the screen aspect.
Actually yes! I don’t understand the relationship between the 2D Screen and the Image in that project though. Why doesn’t the Image care what size the Screen is? Isn’t the Screen still claiming to be 1280x720, 0.5 blend scaled?
Let’s see if I can do a TLDR
Assuming we are using Scale Mode ‘Blend’. (I’ve never used None myself).
The resolution on the Screen is the reference resolution to position element. If it’s 1280 x 720, then any 16:9 window (irrespective of resolution, it could be 4K, 1080p, doesn’t matter) with have the Screen at 1280 x 720 internally for positioning and sizing of elements. An element positioned at 1280 on the x will always be on the right edge of the window.
When windows don’t exactly match the aspect ratio of the reference resolution, that’s where Scale Blend is important. Screens | Learn PlayCanvas?
This will affect the projected scale of the Elements based on the horizontal/vertical resolution of the screen and the blend value.
The positioning of the Elements are based on the anchors and local position Elements | Learn PlayCanvas
This allows you to position Elements at an offset from the edge of it’s parent (be it a Screen or another Element) using normalised value between 0 and 1. The offset is based on the local position of the Element in the Screen’s reference resolution units.
There’s also split anchors (Elements | Learn PlayCanvas) that allows you to anchor the edges of the Element to the Element’s parent and the have the width/height of the Element controlled by that.
In the CSS Contain example project we use split anchors
This is saying, anchor the left edge of the Element to the left edge of the parent, bottom of the Element to the bottom edge of the parent, etc. This gives the behaviour that the Element will always be the same size as the parent (plus the padding values).
Last, we use the Element’s fitMode to set the behaviour of the render.
Elements have two ‘parts’. The bounds which is what we’ve been talking about sizing and positioning above and the visual mesh which is what you see being rendered.
fitMode, changes the behaviour and size of the visual mesh, not the bounds and you can see the effects in the release notes linked earlier: Release v1.21.61 · playcanvas/editor · GitHub
1 Like
Got it, the Screen component calculates a uniform virtual fpixel scale for its kids, defining a bound with the same aspect ratio as the window. This is still surprising though, because I’d intuitively assume from the format of the reference resolution that a Screen defines a bounding rectangle of the same aspect as its definition. I think this is reinforced by the display of the Screen component in the editor.
I suppose this is one of those things you have to get used to, and it helps that there’s a live link to the launched game so you can tweak values to reinforce the idea. I think the documentation could use with a few improvements though, to clarify that the children’s layout space is in fact still the whole window, and not in the aspect ratio of the reference resolution. I think a few examples of items anchored to each edge in the blend example would help show how the blend affects the scale of items, but preserves the relative positioning of anchors?
The bounding display of the screen is related to the width and height set in project settings → rendering
It’s not to the whole window, but relative to it’s parent.
I should have been more specific: the direct children of the Screen (assuming it’s a root?) will be laid out in a rectangle that includes the whole (game) window, rather than a bounding volume with the same aspect ratio as the reference dimensions of the Screen component.
1 Like