Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question UI Canvas object moves when the game is built but correct when in the editor

Discussion in 'UGUI & TextMesh Pro' started by dwapps, Jun 17, 2021.

  1. dwapps

    dwapps

    Joined:
    Oct 4, 2016
    Posts:
    8
    Help needed please, I am following some Udemy tutorials but also changing some aspects as I go to make my own variant on the game which is a 2d top-down RPG style. I have a couple of UI Canvas that behave as expected in the Editor but when I build my game one is placed as expected the other appears to be twice the size so where the UI it is set to be anchored from the middle it appears to be anchored to the side of the screen when in build – likewise an in game clock which appears in the upper right of the screen in editor is missing altogether in the build (I am assuming it is twice as high up and over to the right more so no longer rendered in view)

    The difference between the two are as such:

    Tutorial is using 16 pixels per unit.
    I am using 48 pixels per unit.

    Tutorial camera (with Cinemachine) is set to 480 x 270 at 16 PPU.
    My game camera (with Cinemachine) is set to 960 x 540 at 48 PPU.

    Both are set to 16:9 ratio in “Build Settings” => “player settings” => “player” => “Resolution and Presentation” with no other option aspect ratio ticked and both projects have:
    Screen.SetResolution(1920, 1080, FullScreenMode.FullScreenWindow, 0);
    attached via script.

    Under my main UI gameobject I have two gameobjects called MainGameUICanvas (which is the one that seems to double in size in the build) and PauseMenuCanvas (which works perfectly in both the editor and build)

    These two objects both have a canvas component with matching settings:
    Screen Space – Overlay
    Pixel Perfect (ticked)
    A different sorting order (to guarantee the Pause menu is displayed on top)

    They also have matching Canvas Scaler components with the following settings:
    Scale with screen size
    Reference resolution 960 x 540
    Screen match mode = expand
    Reference pixels per unit = 48

    The MainGameUICanvas then has a child gameobject with anchor pivot and position are set to stretch on both the x and y it also has a canvas group and an aspect ratio fitter which is set to “Fit In Parent” and “AspectRaito” of 1.777778

    After that the gameobject that behaves different in the editor and from a build (MainGameUICanvas) has another gameobject with a canvas group and aspect ratio fitter (again set to “Fit to parent” and aspect ratio of 1.77778) then child gamobejct with the various inventory bars, in game clock etc….

    The other consistently working gameobejct (PauseMenuCanvas) has a gameobject with aspect ratio fitter (again set to “Fit to parent” and aspect ratio of 1.77778) but this is consistent between both.

    I have downloaded the finished game from Udemy and compared the editor settings of the two and cannot see a difference – I also built the download tutorial game and tested and sure enough the UI behaves as expected.

    I am building this on Windows 10 Version 21H1 OS Build 19043.1052 using Unity 2020.2.1f1 (which I have built both games in to check)

    Can anyone please point me in what area I need to look? I am clearly missing something simple.

    Many thanks in advance!
     

    Attached Files:

  2. dwapps

    dwapps

    Joined:
    Oct 4, 2016
    Posts:
    8
    After updating to use the Universal Render Pipeline and the Pixel Perfect Experimental Camera (with the exact same settings as the standard Pixel Perfect Camera) then removing the original Pixel Perfect Camera and finally updating the Player Follow Virtual Camera to use the extension Cinemamachine Pixel Perfect component - build and editor now display all of the UI as expected.