Unity WebGL (GUIDE)

A topic by Paris created Jul 29, 2023 Views: 538 Replies: 7

Viewing posts 1 to 6

ParisSubmitted288 days ago (1 edit) (+2)

As we are approaching the final day I wanted to share this guide for getting perfect Web GL builds in unity (use Unity 2022+)

Steps for web gl build in unity: Make sure you have web gl module installed in unity hub:

if you can’t select it here then it means you need to install the module.

Once you have web gl installed and you restart unity, you can go to build settings window and click on WebGL, choose “Switch Platform”.

Next in the bottom left click Player Settings button (on the same window you’re on)

select webGL tab:

Choose these settings:

Publishing Settings (Important)

(Needs Gzip, Decompression Fallback = on)

Now you are ready to build (make sure your scenes are in the build index

Any scene not here wont be in the game on build#

Select Build:

Next choose an empty folder (must be empty, you can make a new one)

once the game is built, open the folder it output into and select all files > Send to zip

Make sure it’s the files in the folder, not the whole folder itself.

Now you can upload this .zip file to Itch.io game page.

This should provide you a perfect working web-build!

NjitRamSubmitted288 days ago (2 edits)

Unity automatically adds a fullscreen button so you don't need to check that (or you end up with 2 fullscreen buttons.
Also, Unity adds a bar below your game stating your project name and containing the fullscreen button.
You should add 40 pixels to your Viewport dimensions in Itch to make sure this bar is fully visible or you end up with a half visible bar instead.

Good tutorial !

See these screenshots for example:

Double fullscreen button:

Half visible bar:

Edit:
I see your game does not have the bar below on Itch. Any idea what you did to prevent that from happening?

ParisSubmitted288 days ago

Yep, follow my guide exactly and you won’t have these issues this step happens in the web gl player settings, there is a new option for unity 2022+

It has no bar and works perfectly with itch.io fullscreen mode! :]

NjitRamSubmitted288 days ago(+1)

Ah that makes sense, I am still on 2021.

So anyone like me who is behind the times, don't add a fullscreen button and add 40 px to your viewport.

Everyone in the future should follow Paris' instructions to the letter ;P

DevGio287 days ago

Im on 2021 too, you can choose Minimal in the player settings and then select to add the fullscreen button option on itch and I think that looks better than the bar under the game

tremorlivesSubmitted288 days ago

As an alternative one guy already solved this issue quite some time ago by coding a custom webGl player, here it is:https://seansleblanc.itch.io/better-minimal-webgl-template.

I use that in all of my projects and onestly i think it's incredible.

This also works for the 2021 version, so now you know how to get rid of that bar :D

SerKidedanSubmitted287 days ago

This is an awesome guide! Would have loved to have this days ago :D

SerKidedanSubmitted287 days ago

Worked like a charm but the game had visual and audio glitches when played in the browser for some reason. oh well.

itch.io

DAY 5 - Pass the GAME Challenge 2023

Unity WebGL (GUIDE)