unity web player in chrome

... when using dropbox, use http:// instead of https:// (thanks to Tim Pellikaan)
and ... thanks to Julien Lehuen: for help (to) those who have trouble putting their Moodspace online: How to post a Unity3D player... 


How to post a Unity3D player on a Google Site

This is a short page to help other students display their Moodspace on their portfolio. This only applies to Moodspace realised with Unity, and portfolios made with Google Sites.

Build the project

First step is to build the Unity project as a Webplayer. Select Build Settings... from the File menu, make sure the scene(s) you need to include are all in the list, select webplayer and click Build & Run. That should be it. The picture below shows all the steps, and let you see the build settings which worked well for me!

BuildScreenshot

When you click "Build & Run", you have to pick a folder and give a project name. Unity3D spends some time compiling everything, and putting all the assets together. Once it's done, it should open the result in your webbrowser.

Upload the Webplayer

Now if you go to your folder, you can see what was exported by Unity. An HTML file which contains a web page displaying your project. The project is in the Unity3d file, which is the actual webplayer. If you checked the Offline Deployment options, you will have more files (icons, Javascripts...) which make your export able to run without a connection to internet. Otherwise those icons, scripts, etc. are accessed through internet. Below is a screenshot of my exported folder...

ExportScreenshot

This folder can be shared on a dropbox or a ftp, to let people view your project. If you upload this whole folder, you will have a result like THIS: an autonomous page with the webplayer in the middle (note that I changed the colors and the content of the page, the default one is white...)

Update: If you use a dropbox to upload your project, you have to copy the entire folder into the Public folder of your Dropbox. It is important that you use the Public folder, to be sure that anyone can access it. Once it's in your public folder, you should be able to right click on the HTML file, and do "Dropbox > Copy public link". You can then paste the link on your portfolio, and you're done !

On a Google Site...

It can also be nice to regroup everything on the Google Site itself, and this is surprisingly easy to do! First, upload the .unity3d file on your Google Site. Then edit the page where you want to place the webplayer, and chose Insert > More Gadgets... Then you should chose the option "Add Gadget by URL", and enter the following URL: http://hosting.gmodules.com/ig/gadgets/file/107336974425229758999/unity1.xml.

Once you click OK, you can fill in the parameters for the Unity Gadget.

OptionsScreenshot

The most important thing is to give the URL of the .unity3d file, wherever it has been uploaded. Fill in the right width and height, and choose the options as you prefer them... And you should finally be able to insert the gadget with a Unity Player into your Google Site! An example of such page is here...

Update: Note that this gadget doesn't display the webplayer correctly in Google Chrome. It is advised to provide a link to the HTML page Unity generated for Anton Eliens to be able to see your Moodspace.

Issues

On my laptop, the webplayer is well displayed in Google Chrome when I run a local version, but the dropbox versions and the Google Site versions are always displaying a "Download Unity Webplayer" button while I already have it installed. In Safari, everything works fine. I didn't test in other browsers, but if anyone knows more about those compatibility issues, please contact me!

Update: Using the dropbox public folder seems to work fine on any browser.

Comments