UI Troubles

Hello! When developing my game, I noticed that the camera doesn’t display an accurate representation of the final view. Here’s an example that I can show from the given tutorial on scoreboards.


This is what it looks like when testing, however…


This is what it looks like when in the editor.

Unfortunately, this has been trumping my ideas as it has made it insanely hard for me to accurately create my games UI. Are there any solutions? Also, how can I make images and elements scale with my screensize?

@Cryptonaph I don’t know if this will be helpful or not but… When I edit my UI’s in the editor I switch the perspective to Front not Camera(as shown I think) and then with the UI screen selected I uncheck the following. (Screen Space)

image

Make sure you re-enable afterwards. I have not had the time to understand why this works for me.

Well the thing is, I would do that, but when there are objects in the corners of the screen space in the editor, they don’t show up in the actual game, not sure why. It doesn’t seem to scale any of the objects to the correct size or position, and rather just keeps them in the same spot regardless of what I do.

@Cryptonaph Sorry I am seeing it more clearly that you have pointed it out. Can you zoom out at all? Or post a link to your project if you can so others can look.

Can you share the project. It’s a bit hard to see what the issue you are having is?

Yes, here it is.

https://playcanvas.com/project/978072/overview/fps-project

Overall, I wish there was an easier way to edit player gui, kind of like how ROBLOX does it in their studio.

Oh, you have a World Space Screen. The tutorial you were looking at with the high score table is screen space so as long as all the elements are positioned relative to the 2D screen, it doesn’t matter where in the world the screen entity is.

In the case where you want UI on top of players in world space, you can just use elements without a screen and have it has a child of the player

We also want the world space elements to face the user camera at all times so we should add some code so that it’s always looking at the camera.

We also add it to World layer so it doesn’t render over everything

Example:

https://playcanvas.com/project/978580/overview/f-fps-project

For the 2D screen, the issue is that you are using sprites instead of image UI elements.

As it’s 2D, lets move it from the camera and under the root entity and replace the sprites with image elements.

We can also move the screen entity out of the way of the rest of the game entities and make the editor background blue

Now change the camera perspective to Front so we get a clear view of the UI

And lets update the sprites to image elements

And the game looks like this

TLDR, for UI, you should be using the UI components such as Element, Button etc to display the UI relative to the UI screen

And when you resize your window, the gui objects resize too?

Yes according to the blend and scale modes set on the screen element:

You may need extra logic in place such as using split anchors or code if you need specific scaling of elements

In my case, I use a 3D model for the gun so it’s relative to the world and the camera rather than the screen.

https://playcanvas.com/project/950571/overview/fps

You may want to change the gun in your case to be a sprite in the 3D world and a sprite as the child of the camera instead

eg https://playcanvas.com/project/978587/overview/f-fps-project-2

It has it’s own problems but they can be solved depending on how you want to go about it

1 Like

Sounds good, I’ll try it

I know this is unrelated to the topic, but how would I make the bullet holes where you shoot?

I currently have a list of things I need to do, and need to grab help for them, should I make a new thread or post them here? @yaustar

Can you post a new topic for this because it is unrelated. One subject per thread please.