{"id":2733,"date":"2021-04-25T17:23:40","date_gmt":"2021-04-25T22:23:40","guid":{"rendered":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/?page_id=2733"},"modified":"2021-04-25T18:11:14","modified_gmt":"2021-04-25T23:11:14","slug":"unity-building-to-webgl","status":"publish","type":"page","link":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/daily-notes\/04-26-unity\/unity-building-to-webgl\/","title":{"rendered":"Unity: Building to WebGL"},"content":{"rendered":"

Setup<\/h2>\n

Install WebGL module through Unity Hub if you haven’t already. To start, in Unity, go to Menu -> File -> Build Settings. You will see the below popup –<\/p>\n

\"\"<\/p>\n

IF you see “No WebGL module loaded”, click on the “Install with Unity Hub” button. Otherwise, skip this section.<\/p>\n

\"\"<\/p>\n

It should open Unity Hub with this view. Just click done and wait for it to install. Once it’s open, restart Unity and reopen your project.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Switch platform<\/h2>\n

Now, when you open Build Settings, you should see this instead.<\/p>\n

\"\"<\/p>\n

Select the “Switch Platform button”. It will start converting assets and this might take a minute or two.<\/p>\n

Build!<\/h2>\n

Once it’s done, when you look at Build Settings, you should see this instead:\"\"<\/p>\n

Hit the build button! It will ask you where you want to save it. Once you confirm, it will start building your project. This process usually takes a few minutes. When it’s done, locate the folder that it built the files to. For example, I named my folder Build, and here it is. Zip the folder so that it’s PROJECTNAME.zip.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Upload to itch.io<\/h2>\n

Now we’re going to upload to itch.io, which you should already have an account for.<\/p>\n

    \n
  1. Make a new project<\/li>\n
  2. Select HTML for Kind of project<\/li>\n
  3. For embed options, you probably want “click to launch in fullscreen”<\/li>\n
  4. Upload your zipped file where it says upload! Make sure to select “this file will be played in the browser”<\/li>\n
  5. And that’s it!<\/li>\n<\/ol>\n

    If you want to know what it should look like, you can check out my test project on itch<\/a>.<\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Setup Install WebGL module through Unity Hub if you haven’t already. To start, in Unity, go to Menu -> File -> Build Settings. You will see the below popup – IF you see “No WebGL module loaded”, click on the “Install with Unity Hub” button. Otherwise, skip this section. It should open Unity Hub with … Continue reading “Unity: Building to WebGL”<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"parent":2770,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2733","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/2733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/comments?post=2733"}],"version-history":[{"count":3,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/2733\/revisions"}],"predecessor-version":[{"id":2754,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/2733\/revisions\/2754"}],"up":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/2770"}],"wp:attachment":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/media?parent=2733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}