Do you want to embed Unity in a weebly post? There are other sites that explain how to do it. But I found that wasn't working for me because I was trying to embed the player in a blog post. I find that there are some limitations in how javascript is processed in weebly blog posts.
I provide a (limited) workaround to make it work. Read the whole story that explain all the details and how I got more than expected when realized I have developed an automatic Unity player multi loader.
I provide a (limited) workaround to make it work. Read the whole story that explain all the details and how I got more than expected when realized I have developed an automatic Unity player multi loader.
Finding why it is not running
Following the instructions by various sites I just copied the html output from the Unity compilation. I saw it working, but when published it just presented me with the "install unity" image. It only works while I am editing the page. The situation was more complex since there is also a problem with chrome and the Unity web player which now I know is unrelated, but in the time made me left the problem unfixed.
It took me some time to try again and then I realized the problem was only happening when embedding inside a blog post. So I compared the source code from a page a and the blog post page and finally I saw it: Javascript and css data is enclosed in a CDATA section. That means it is being ignored.
Weebly doesn't allow to run <script> or <style> tags inside a blog post.
I had been looking for someone to explain if weebly has limitations to run javascript in custom html but I couldn't find any. And a lot of examples suggested there was no problem. But now I know it only happens in blog posts. Even then I couldn't find any reference about that on the web.
Once I know that, I thought were to put the script code outside the post. I try on the header section (at the page configuration page) but it is messy and doesn't work as expected because the script is called before the elements in the page exist yet. But placing the code on the sidebar gives a better result. It is loaded at the end of the body.
Developing a custom loader
At this point I know you can embed the unity web player by inserting the <script> section in a custom html tag in the blog sidebar. This is dirty, loads everytime the blog is visited and only works for one .unity3d file in whole blog. I am ok with dirty and loading everytime, but I want to embed more than one player in the blog.
The script looks for a element called "UnityPlayer" so I think. could I define the info in the id itself? I could find the elements with a preffix and parse the infor grom the rest. That would allow to add multiple players adding something as simple as this:
<div id="unity-http://path.unity3d&width&height"> content for missing player </div>
After some tests and fighting with basic javascript (which I barely know about) I suddenly get smarter and search for "embedding multiple Unity web players" and I get this piece of code to embed multiple web players! Thanks to the user "save" (That's his nickname).
Using this code as a base I worked on it and added the id-parsing to take out the info, with the help of a extended GetElementsByID function (note the plural in Elements) that searches all the object with ids starting with a string. Copied from "joksnet" who said: "That was a generic example. Not tested BTW." Uuups. Anway, it works enough for me.
Here it is the final code:
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
<script type="text/javascript"><!--
var debugid = document.getElementById("debug");
var frameslist = getElementsStartsWithId("unity-");
var upath = [], uwidth = [], uheight = [];
debugid.innerHTML += "debug is online.";
for (var i = 0; i < frameslist.length; i++) {
thisunityobject = frameslist[i].id.substr(6, 1000);
upath[i]=thisunityobject.split("&")[0];
uwidth[i]=thisunityobject.split("&")[1];
uheight[i]=thisunityobject.split("&")[2];
debugid.innerHTML += "PATH"+i+": "+upath[i]+"w="+uwidth[i]+"h="+uheight[i]+"</br>";
}
var unityObjectArray = new Array();
var players = frameslist.length;
for (i=0; i<players+1; i++) {
unityObjectArray[i] = unityObject;
}
function GetUnity() {
for (i=0; i<players+1; i++) {
if (typeof unityObjectArray[i] != "undefined") {
return unityObjectArray[i].getObjectById(frameslist[i].id);
}
return null;
}
}
for (i=0; i<players+1; i++) {
if (typeof unityObjectArray[i] != "undefined") {
unityObjectArray[i].embedUnity(frameslist[i].id, upath[i], uwidth[i], uheight[i]);
}
}
function getElementsStartsWithId(id) {
var children = document.body.getElementsByTagName("*");
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
child = children[i];
if (child.id.substr(0, id.length) == id) elements.push(child);
}
return elements;
}
-->
</script>
To make this code work properly the document must also have an id=debug. I will adapt the code to make it optional. And it can also break js code after it is there is id=debug always (/me writes to ToDo list). Anyway, right now it can be used with something similar to the following piece of html:
<p id="debug" style="visibility:hidden;"></p>
<div id="unity-http://www.weebly.com/uploads/1/9/2/5/19254693/21coins.unity3d&700&400"><div class="missing" style="margin: auto; position: relative; top: 50%; width: 193px;">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div></div>
This is actual code to embed the mini game 21 coins. Go play it!
RSS Feed
