Need some help embedding webgl build(s) in webpage.

Howdy,

First off I am not much of a web guy. I would love a little help on embedding webgl builds into a webpage. I have art that I would love to show on a webpage. I am specifically using Rapidweaver and if anyone could give me a few pointers that would be greatly appreciated.

Thanks for your time.

Gary

 

Easiest way I have found is to upload the entire build folder that Unity creates to your web server (or even a public dropbox folder). Then use an iframe to embed that page into your site.

 

<iframe src="Source url (I'm using dropbox)" style="border:0px #000000 none;" name="Game name" scrolling="no" frameborder="1" marginheight="px" marginwidth="320px" height="320px" width="480px"></iframe>

This does not work for me, it shows just a grey box and nothing loads.

Any insight would be great.

Thanks,
jrDev

 

Yes, here test this Demo.

Thanks,
jrDev

 

Hmm. Well that's interesting...I am using Safari so I don't know...I can try with Firefox and Chrome to see if there is any difference though...I will post back in a few minutes.

Thanks,
jrDev

 

Hey,

Ok so it works on Firefox lol. I checked on Safari again but still no loading...checked error console and it gave a 404 error....I cannot believe I have been doing it correctly the entire time, wasted countless hours trying and asking people why it isn't working.

Thanks a lot but why does it not work on Safari?

Thanks,
jrDev

 

Hmm, well I cleared the cache and I am on Safari 9.01 and it still doesn't load. Apparently Web.js had an error when checking Network Requests part of the Web Inspector.

Thanks,
jrDev

 

Yea, that definitely sounds like its from Apple's end or is Unity supposed to update Webgl builds for this weird change?

Thanks,
jrDev

 

My code had some problems, comment removed for now

 

I would love an update to this thread with a more appropriate answer. iframes are a major web faux pas these days. It is not 1999 anymore.

 

Can't find the post where i got this info from but it seems that an iframe is needed because otherwise there is no possibility to unload and reload the unity-web-gl builds without a page reload. I use iFrames on the page in my signature (just don't click Shooter or Visibility, i failed to build there web-GL version)

Basically i set up some variables for loading the weg-GL-build from the correct folders and then i start a master.html in the iframe that fetches it. I am a Web-noob and this page is the only thing i ever done. It should work on every major browser, except IE, i deliberately excluded it because i could not get it to display the page how i wanted.
Also, i can't get the master.html to load the specific loading bar because it seems that the .js files in Release have hardcoded targets or something.

 

Amazing... Unity includes a web build option that can only be embedded into a webpage via an iFrame. No means of just adding it directly to a page? Nice.

I wanted to add WebGL demos to my Wordpress site but WebGL is turning out to be the greatest waste of time in my life. One problem after the rest.

I wanted to ask how to embed into a Wordpress page but I guess iFrames are the best answer there is since I haven't heard anything else yet

Sorry for my tone but I have had nothing but trouble with WebGL since LITERALLY the very first time I clicked on it as a build platform and the problems has continued till this very second. Absolute, complete, total and utter waste of a build platform. Unity would be better off without a web platform at all rather than this. WebGl and Flash should share the same fate.

Uggghhh... let me just go... I don't see any answers cmoing any time soon...

 

Actually I'm working on this as a contract programmer, being a web guy I'm certain iframes are not the only answer. I just am not at the point where I need to solve it yet. I'll be sure to update this when I do.

EDIT: I looked at the files, this will be easy. I can't confirm completely because I'm on the wrong computer right now. Though it seems people are running into issues when working with MVC platforms and not understanding what's happening. A lot of these files will need to be placed into a publicly accessible directory and update the file paths referenced in the build. I'll make a little walk-through for what generally needs to happen so people can take that and apply it to their framework of choice. Expect an update in a few days.

 

What's the problem with an iframe? Could you guys enlighten me? The cross-domain restriction?

 

There are plenty of reasons why an iframe is bad and even specific cases where it can be useful. Though generally the need to use an iframe these days is the result of bad design and they are used as a band-aid. Quick fixes to bigger issues are never a real solution and cause maintenance nightmares down the road.

Basically, it's just a tool. One that was heavily abused in the early web days and left a bad taste in everyone's mouth. I dare say there is always a far more elegant solution that would be better and easier to work with.

 

Well said. I would have taken at least 5 times as long to articulate the same sentiment.

I read once that using tables nowadays is also a sign of bad coding. It's just used for layouts and that is what CSS is for.

I would add that an iFrame is similar to a goto statement in other languages. It exists but using it is a sign that you suck at doing things right and just looked for the first shortcut you could find.

My main gripe is the fact that I want to have a page I can maintain in Wordpress. I don't want to open the editor in Wordpress and see: "The file is located here. Download via FTP, fix and upload right back again" and that is exactly what an iframe does.

 

Wow, seriously? iFrames are making a comeback? lol I used to love using iFrames till I was told AJAX or bust. Right now the only reason I don't want to use an iFrame for my content is because I use a CMS and the content of the iFrames are NOT editable via the CMS. Will probably have to roll out some form of custom solution for that... or use FTP.

I used to use it with my Webplayer builds and hated it It worked at least, but I hated it

I did not know they were making a comeback, though.

 

wow loads of talk about iframes.. but no remedy regarding embedding WEB GL content created from a Unity 5 Build

 

Allow me to remedy that then, @Banksy

After much struggling with getting the WebGL build to just WORK (i do database accessing stuff and security issues cause problems with WebGL. Pain in the ass. Won't go into it here), I managed to load it into a page on my wordpress site by using ..wait for it... an iFrame

Build it in Unity, upload everything as is to a folder on your website, create a page, add in an iFrame, tell it to load the index.html you just uploaded and there you have it.

 

I tried using the iframe as described above but all that does is download the index.html file(which is hosted in dropbox) when I load my webpage.

 

Are you kidding guys. There is web developers in here and they aren't telling you how to do this? I guess they are too busy to take a good look.

Luckily in the last couple weeks I've been doing nothing but HTML and CSS, cause my website built with concrete5 broke and didn't want to go back to a PHP website builder. Before this I didn't know how to write 1 line of HTML.

Ok so here is what you do.

Spoiler: Old, Finished one in comment below

Step 1
In your web GL's index.html file, you will see <head> and lower down a </head>.
Copy everything in there, and open up the index.html for the webpage you want your game to be in.
Locate the <head> </head> again, and paste all your code above the </head>.

Step 2

If you are using something like concrete5, wordpress, etc, create a custom HTML block.

Again in your web GL's index.html, copy everything in between the <body> </body> and paste it in the HTML block.

Before you try it out, because it will work, but it will overlap anything below it, so you need to add a this above it all.

<div style="height:650px, width:100%; margin:auto;">

You want the height to be 50 pixels more then your game window, which will see in the code you pasted.

And close it with a </div>

Now in the code you pasted you will see <div class="footer"> with a closing </div>, copy that as well as everything in it, and post it before the closing div that starts like this <div id="gameContainer".....

Should now look like this.

<div id="gameContainer" style="width: 960px; height: 600px">
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">Bound</div>
</div>
</div>

On that game container line you need to add a margin:auto;

Ok now you need to go and open style.css which is in the TemplateData folder, straight up delete every bit of text like this.
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

You are done! You may want to change the width from 100% depending on how big the container your custom html block is actually sitting in.

I do want to say when I loaded the page my browser gave me an error, something to do with a js file, but the game loaded fine. Will post back later when I figure that out.

Enjoy!​

Edit: I just noticed that I'm still getting overlapping issues in some situations, it has to do with the css class webgl-content. The position is set to absolute with some other stuff, I'll do some tweaking and get back to you guys shortly.

Edit2: So I figured out what I need to do to fix it, was in the middle of writing it up but then I realized the UnityLoader actually changes the HTML causing the changes I did in windows edge to not exist. The UnityLoader.js is literally 4 lines of code that are thousands of characters long, so tomorrow I will try to write a program that makes it somewhat readable so I can go figure out how edit the HTML created when it loads. Good Night!

 

Based what @LittleRainGames mentioned you have to tweak the the css a bit. You can find the ccs in TemplateData/styles.css

Edit line 2 as follows
.webgl-content {position: relative; top: 0%; left: 25%; }

position: relative - Will align the WebGL content with your website relative to the other tags of your html file
top: 0% - We don't want any vertical offset, tweak this as you like, you may need to add webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); and adjust accordingly
left: 25% - The WebGL content has a width of 50%, 25% offset from left will align it to the center

The rest you have to do to embed your WebGL export is pretty much straight forward. Change the id and title as you like

<div class="webgl-content" id="mySpecialId">
<div id="gameContainer" style="width: 960px; height: 600px;margin:auto;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">My WebGL stuff</div>
</div>
</div>

add these scripts to the bottom of your page

<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webgl.json", {onProgress: UnityProgress});
</script>

add these scripts to the head of your page

<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">

Make sure that both the TemplateData/ and Build/ folder are in the same folder you have your index.html file in, or change the path in the script and link Tags

 

...or use an iFrame. Fare less work...
<iframe src="mygame/index.html" style="width:750px; height:500px">

Can't see why you would want to go through all the above fuss when you don't absolutely have to. The example above of an iframe downloading an html page... that is some sort of miracle that is. When embracing iframes you can get quite creative... whereas NOT using iFrames looks to be quite tedious...

I currently have one page on which I have 5 buttons that each link to a different game and clicking on it loads a different WebGL game into the location I created for the demo.

http://mybadstudios.com/source-code/the-dialogue-engine/ in case you want to see it in action:

MyScripting:

Code (csharp):

1. <script language="JavaScript">
2. function ChangeFrameContent(which)
3. {
4. var gamename = (which < 4) ? "UDEA"+which : "MudDemo";
5. document.getElementById('webgl_content_area').innerHTML =
6. '<iframe src="/BUILDS/wuss_index.php?game='+gamename+'&#038;h=580&#038;autoload=true" style="width:860px; height: 680px"></iframe>';
7. }
8. </script>

My links:

Code (csharp):

1. <div id="navmenu">
2. <ul>
3. <li><a href="JavaScript:ChangeFrameContent(0);">Visual Novel</a></li>
4. <li><a href="JavaScript:ChangeFrameContent(1);">RPG Classic</a></li>
5. <li><a href="JavaScript:ChangeFrameContent(2);">RPG Alt</a></li>
6. <li><a href="JavaScript:ChangeFrameContent(3);">Point n Click</a></li>
7. <li><a href="JavaScript:ChangeFrameContent(4);">Text Based</a></li>
8. </ul>
9. <hr>
10. </div>
11.  

My iframe area:

Code (csharp):

1. <div id="webgl_content_area">
2. <iframe src="http://mybadstudios.com/BUILDS/wuss_index.php?game=&amp;h=680px" style="width:860px; height:680px"></iframe>"
3. </div>

Now mind you, my use case is very specific because I wanted to create a WordPress shortcode system so the above is not a "How you should do itt" example but rather a "This is how useful iframes can be" example.

For example, this URL: http://mybadstudios.com/source-code/the-dialogue-engine/rpg-classic-demo/
The source for that page is only this:

Code (csharp):

1. [wuss_webgl_player game=UDEA1 width=860 height=680]<br>
2. One of the prefabs included in <a href="http://mybadstudios.com/source-code/the-dialogue-engine/">THE Dialogue Engine</a>

The wuss_webgl_player shortcode is replaced with an iframe. Job done.

 

I made a full tutorial with pictures here. The links to the files aren't up yet though.

Ya I did end up editing the styles.css, but there is still one problem and that's the <div id="gameContainer actually gets recreated when it starts to load, and the UnityLoader.js edits its styles, undoing the work in styles.css.
​

I usually have a really hard time getting the iframe's to fit the pages style and in the right spot. Then there's an issue with the full screen button being out of sight as well, and the whole thing not being responsive for smaller screens.

If you look on your page if you shrink your browser to the size of a ipad it starts to trail off the side of page, but yes I admit it looks good on desktop, I had a harder time with the iframe.

Loading different games is pretty slick though!

This way really doesn't take too long, once I figured it out it only takes about 5 minutes, and now that I have the edited css files, and the new ones I made it will be even less time. The tutorial looks a little daunting, but its really not that bad.

Here's my result The game has to be full screen for the UI to be proper, made the game for ludum dare and just didn't have enough time to fix it. If you open it on the regular build its like that too.

 

Granted, when I specifically say "Show me the game at 860x680" it is not going to scale down for smaller devices. If you have your game's size automatically adjusting to be responsive then kudos to you
perhaps that is something I should consider adding to my code. Hmmm...

 

Doesn't work for me, i use Vivaldi, here is what i get

Spoiler

If it is any help:
I still use the same stuff that i used a year ago. I get some errors too, but it still works everywhere afaik (minus IE), http://marrtgames.com/?page=6 (don't try my other builds, they are still broken, mostly, i never have time for that)

It is just a single index.html and a single master.html that manage loading and unloading the playerfiles. But don't ask me how i did it, it was so long ago i can't remember a single line i wrote or copied
http://marrtgames.com/index.html
http://marrtgames.com/master.html

 

Hmm that's weird Marrt. I like I said in the first post I made I do get an error, its the one at the top of your list there, Cannot Read Property Defaults. But all I did was click Ok and it doesn't seem to actually affect anything.

What is Vavaldi?

I really like what you've done though, that's really sick! Was that with Unity Web Player or the Web GL?

 

A concrete5 website broke? Let me know mate what was the problem, as I'm going for its concrete5 hosting and want to take all the necessary precautions. Your feedback would be appreciated, thanks!

 

<!DOCTYPE html>
<html lang="en-us">
<body>
<h1 style="color: blue; background: red;">"Ello Games Site"</h1>
<p style="border:5px turquoise double;">Hello. My name is Ello, and this website allows you to play some games iv'e made. The best part is that they are free!</p>
<p>I hope you have fun playing my games.</p>
<iframe src="Source url (I'm using dropbox)" style="border:0px #000000 none;" name="Game name" scrolling="no" frameborder="1" marginheight="px" marginwidth="320px" height="320px" width="480px"></iframe>

<p>P.S.(Games will be updated occasionaly.)</p>
</body>
</html>


im using this line of code but it doesnt work. can i get some help?