Editor: PlayCanvas | HTML5 Game Engine
Live: PlayCanvas | HTML5 Game Engine
Wouldn’t it be helpful if we could attach screen shots to these posts?
How do I get the 2D screen in the editor to appear as it does in the compiled, live view?
Thanks.
As a new forum user, it’s disabled until you’ve made a few posts/read a few topics to prevent image spam
I’ve updated your account so you can skip that step and post images
What is the intention here with the UI?
The UI is in screen space so what you are seeing in the launch tab is correct.
This rectangle represents the screen
And is put into screenspace as though it’s facing the screen.
Thanks, I didn’t know that about images, I am new here and new to PlayCanvas.
It looks like the 2D interface aligns to the camera at runtime, but can be anywhere in the editor? I want a UI to control things like animations my model has, and to show/hide parts of the model and place hotspots that show and hide information cards, similar to what I do in AnimateCC like this for example: Parker Wheel Loader / Front End Loader Industrial Interactive Product Guide
I create interactive media for an engineering company and they are interested in VR/AR interactive 3D experiences for marketing. I’m creating some demos for the team to review.
I managed to make the 2D UI a child of the camera and move it to where it appears similar to the runtime view, which should be useful for now, however, any elements I place near the center of the UI are hidden by my featured model in the editor. Is there a way to place the UI on some kind of layer above the scene, closer to what we see at runtime?
Thanks again.
For screen space UI, this is correct.
Sounds like you just want UI in 3D space? If so, untick Screen Space on the screen component
Or just use elements/buttons/text without a parent Screen entity.
I’m not quite sure what end result you looking for and the project you linked to doesn’t seem to do much with UI.
As you mentioned VR/AR, this example may be more relevant? WebXR UI Interaction | Learn PlayCanvas
Thanks for the info, I just created the UI, no functions yet. I simply want a persistent 2D UI overlay that is not affected by camera movement in the 3D space.
By default, placing the 2D Screen as a camera child sets the 2D Screen coordinates at 0,0,0 making it not visible in the editor:
By manually moving the 2D Screen’s Z axis I can kind of get a preview of what runtime will look like, making it easier to determine a layout for the UI elements:
I think I know what you are getting at now.
Unfortunately, there’s no way to preview true screen space UI through the camera in the Editor View.
The way that most users do it is to have the screen entity just under the root of the scene and changing the Editor camera angle to ‘Front’
It’s also worth mentioning that the launch tab is live tweakable to a point so you can see changes from the Editor to the launch tab.
To position elements relative to edges/corners etc, I recommend reading our documentation on the UI and anchors in particular Elements | Learn PlayCanvas
Thanks for the info, so the way I am doing this is the best known way to see what runtime will look like with a 2D screen, in the editor view?
Not really. You currently have the screen under the camera which can make it hard to work with. The screenspace part doesn’t apply in the Editor views and the size of the UI screen is not using the viewport(s) so it will still look wrong through the camera preview viewport and the Editor view.
The recommended way is the way(s) I mentioned above.
Specifically:
I appreciate that, but having the 2D screen off to one side doesn’t look like an editor preview of the runtime state I wanted, I get the principle, previewing the runtime while tweaking the UI layout seems a little disconnected, but it is what it is. Thanks again.