I have a PlayCanvas instance embedded within a webpage in relation to HTML elements.
To make sure that content fits within the frame, I’m applying a CSS transform (scale) to my PlayCanvas div container object when the screen width goes beneath a particular size. All of the PlayCanvas content seems to render correctly when scaled down; however, I’m noticing that button click zones/hotspots don’t scale down with everything else, which leads to a lot of seemingly broken buttons.
I’m new to PlayCanvas and haven’t seen this mentioned anywhere in the documentation - is there a correct way to handle this type of scenario?
The engine doesn’t take canvas CSS scaling into consideration when handling input Not quite sure how to get around this without patching the engine for UI element input system in particular.
If you are only using screenToWorld, you can inverse scale the X and Y values by the CSS transform before passing them to the function.
Do you have to use CSS transform? Is the issue around when the width is shorter than the height, the objects/scene stops to shrinking in size?
Say I want to have my PlayCanvas content sitting alongside HTML content and, based on the size of the user’s browser window, I want to scale the PC instance (as I would with images or other content) to fit neatly with everything else onscreen – is there a proper way to handle something like this?
Not sure that canvas scaling is needed here, as long as the canvas height and width are set to be 100% of its parent DOM element, that should be fine here. I don’t think CSS transform is needed here.
Would it be possible to provide an example with source of the layout please?
I assume you are using CSS media queries to resize elements based on window width?
Not quite sure how to get around this without patching the engine for UI element input system in particular.