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
  3. Dismiss Notice

Question Developing a WebGL game that hides UI elements on PC and shows on Mobile.

Discussion in 'Accessibility' started by jamjam1000, Oct 1, 2023.

  1. jamjam1000

    jamjam1000

    Joined:
    Sep 22, 2023
    Posts:
    3
    I'm pretty new to forums, but here goes.

    So I'm currently developing a game using Unity and I'm expecting this game to be playable on mobile and PC, the issue is how do I hide UI elements such as onscreen joystick and button when someone runs the game off a PC? Ideally, PC users would use keyboard and mouse without mobile UI elements getting in their way.

    hoping someone can help solve this, thanks.

    J
     
  2. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    709
    Hello! You can use Application.platform to determine in which platform the game is currently running and make the decision to hide/show controls like that. Hope this helps!
     
  3. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,556
    Alternatively you can use Conditional Compilation, i.e.
    Code (CSharp):
    1. #if UNITY_ANDROID || UNITY_IOS
    2.   gameObject.SetActive(true);
    3. #endif
    4. // or
    5. #if !UNITY_ANDROID && !UNITY_IOS
    6.   gameObject.SetActive(false);
    7. #endif
     
  4. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,546
  5. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,556
    #if UNITY_WEBGL for WebGL :)

    Edit: Ah - mobile or desktop WebGL - I use a jslib for detecting that, will look for it hang on.. can't remember where I got it originally though or if I've modified it since.
     
  6. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,556
    @mgear iirc the isMobilePlatform has worked for a while now, but prior to that or due to older bugs, I was using this in jslib:
    Code (JavaScript):
    1.   JSIsMobileBrowser: function () {
    2.     return (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent));
    3.   }
     
  7. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,556
    @mgear WebGL always complicates the simplest answers lol (I just meant to give alternative method vs. Application.platform), but will also mention here that your solution of waiting for touch / having start screen is also good for WebGL because some (all?) browsers require interaction before audio can be played. So all at once you get detection of touch vs mouse and the initial interaction to enable audio.

    Also worth noting here that desktops/laptops can have touch (many designers have screens they can draw on for example, many newer laptops have touch screens also). So can't say if it's a mobile or desktop just by it having touch, although I do think in most cases the mobile detection that way would be accurate enough.. because if they're touching their screen they probably want to use touch anyway (even if they do have a mouse), so may as well treat them like a mobile user.

    Edit: I actually skimmed right over the WebGL part of the thread title originally, I had just read OP and answer by @JuliaP_Unity and didn't realize the topic was actually specific to WebGL to begin with :rolleyes:
     
    Last edited: Oct 3, 2023
  8. jamjam1000

    jamjam1000

    Joined:
    Sep 22, 2023
    Posts:
    3
    I'm really thankful for the quick responses. I want to hide the UI canvas which is called something along the lines of 'UI_Canvas_StarterAssetsInputs_Joysticks', where within the script would I need to add this for it to be functional? And could I just attach the script to an empty object in my hierarchy for it to work? Thanks.
     
  9. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,556
    The best way would be to instantiate your mobile controls into the scene only if it's a mobile device, but there's a bunch of ways to set that up and a number of possible complications (references you might have between objects in the scene etc.), so here's a quick answer that will just disable/hide your existing mobile controls if it's not mobile, based on Unity's Application.isMobilePlatform as suggested earlier by @mgear (vs. alternative approaches, which you might try if this way doesn't work as expected).

    Select your UI_Canvas_StarterAssetsInputs_Joysticks in the scene hierarchy, then in the Inspector, click Add Component, create a new one and call it whatever you want (for example "DisableUnlessMobile"), then open it in your code editor and put this in the Start function:
    Code (CSharp):
    1. if (!Application.isMobilePlatform) gameObject.SetActive(false);
    If you always want to show the mobile controls while you're working in the editor / running in Play Mode, and only hide them when it's running in a build, you could do this instead:
    Code (CSharp):
    1. #if !UNITY_EDITOR
    2.   if (!Application.isMobilePlatform) gameObject.SetActive(false);
    3. #endif
    The above examples expect your UI_Canvas_StarterAssetsInputs_Joysticks GameObject is active in the scene.