Working with WebGL in Unity

In order to make my games easily available, I have compiled some of the Android games to WebGL version(which is replacing the old Unity Web Player).

The transitions for the games Target Practice and Hit The Fan were very easy, the only code change I had to make was for the device orientation and resolution set.

Things to note from my first experience with Unity’s WebGL:

  • It’s important to note WebGL is still inĀ development, so it still can’t use all features from HTML5 and browsers yet.
  • When in WebGL, some information from the SystemInfo will not work. Fortunately I was still able to get the device type, in order to identify if I’m in a mobile, desktop or console.
  • Make sure Canvas is correctly configured expand, shrink or fit to size. Depending on what you need.
  • The compiled version did not work on Chrome when running it locally. I only worked when I accessed it from a host. Make sure to test it from a host, if it doesn’t work on Chrome locally.

 

Since I use different cameras for mobile orientations, I had to change the code for it to work fine on Desktop as well. Here is a simple example of device orientation I use in Target Practice:

 	public void DetectOrientation(){
		if (SystemInfo.deviceType == DeviceType.Desktop) {
			if (!cameraLandscape.enabled) {
				cameraLandscape.enabled = true;
				camera = cameraLandscape;
				cameraPortrait.enabled = false;
			}
			return;
		}
		if (Screen.orientation == ScreenOrientation.LandscapeLeft || Screen.orientation == ScreenOrientation.LandscapeRight) {
			if (!cameraLandscape.enabled) {
				cameraLandscape.enabled = true;
				camera = cameraLandscape;
				cameraPortrait.enabled = false;
			}
		}
		else {
			if (!cameraPortrait.enabled) {
				cameraPortrait.enabled = true;
				camera = cameraPortrait;
				cameraLandscape.enabled = false;
			}
		}

	}