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

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

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!

Alternatively you can use Conditional Compilation, i.e.

#if UNITY_ANDROID || UNITY_IOS
  gameObject.SetActive(true);
#endif
// or
#if !UNITY_ANDROID && !UNITY_IOS
  gameObject.SetActive(false);
#endif

that wouldnt work on webgl build?

i guess this might work,
Application.isMobilePlatform
https://discussions.unity.com/t/645467/22

i used this previously (to detect if its touch or mouse)
https://discussions.unity.com/t/824198/3

#if UNITY_WEBGL for WebGL :slight_smile:

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.

@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:

  JSIsMobileBrowser: function () {
    return (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent));
  }

@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 :roll_eyes:

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.

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:

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:

#if !UNITY_EDITOR
  if (!Application.isMobilePlatform) gameObject.SetActive(false);
#endif

The above examples expect your UI_Canvas_StarterAssetsInputs_Joysticks GameObject is active in the scene.