koobas.hobune.stream
How do I create a Wordpress page for the WebGL Player?
These are the files created from a WebGL build. Which files to I need to bring into Wordpress, so it can work on my website.
Also, do the files need to be transferred to the server, or remain on the machine here? Thank you lots for any help in advance.
did you manage to get this working? I can't seem to get the code to work with my game. any help would be appreciated! :)
I know it's an old question, but I've just used the following piece of code to overcome this issue easily:
<iframe src="https://your.domain/buildfolder/index.html" width="900" height="600"></iframe>
You're welcome, @jakubu00! I hope it was able to help you somehow.
This solution seems to break the "fullscreen mode" button on the FireFox Browser... (at least for me)
I have managed to get a webgl unity game working on WordPress, although note that you will need to have your own hosted WordPress, not one from WordPress.org. to make it work I had the unity build files added to my Dropbox public folder (should also work if files are hosted on same hosting as site) using a plugin called iframe. With this you simply write in the text box [iframe src="insert public address of file here" width="1000" height="900" scrolling="no" style="margin-left:-35px;"] and it should work :)
I couldn't get it to work either, occasionally I search to see if there's any solutions, since I quickly realised it's something I don't have to knowledge required.
I tried the same method with google drive and had no luck. I even used the same plug in
Google drive I do believe won't work because the shared file needs to have a Google account to view it. Also it needs to be a public link, which I also believe Google has removed or hidden from Google drive. Dropbox will only work if you have an old account with a shared folder, new accounts either won't have this or have to pay for it, not sure which. Best bet would be to upload files to your server through the control panel, supplied by your hosting platform (so $$anonymous$$e is 123 reg and then control panel from their home page). Test a YouTube video link in the iframe source to see if that works. Don't forget, this will not work on wordpres.org sites. You must have your own hosting with companies like godaddy, 123 reg and many more. This will not work on the 'premium' WordPress sites sold by WordPress. This is because they do not allow iframes nor allow for the communications between the site and the files from outside WordPress.
And an added note, this must be in the 'text' part of visual edditor, rather than the 'visual' tab.
I got it to work by FTP'ing the TemplateData and Release folders under the wp-content/uploads folder. Then I created a page and added the following code in a code snippet element for my theme.
<pre><p class="header"><span>Your Game Name | </span></p>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<br>
<div class="logo"></div>
<div class="fullscreen"><img src="../wp-content/uploads/TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">BreakThoseBricks</div>
<p class="footer">« created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> »</p>
<script type='text/javascript'>
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
dataUrl: "../wp-content/uploads/Release/Default WebGL.data",
codeUrl: "../wp-content/uploads/Release/Default WebGL.js",
memUrl: "../wp-content/uploads/Release/Default WebGL.mem",
};
</script>
<script src="../wp-content/uploads/Release/UnityLoader.js"></script>
<script src="../wp-content/uploads/TemplateData/UnityProgress.js"></script>
<link rel="stylesheet" href="../wp-content/uploads/TemplateData/style.css">
<link rel="shortcut icon" href="../wp-content/uploads/TemplateData/favicon.ico" />
</pre>
The in front of the code is important since it instructs Wordpress not to mess with the code. You can check out the final result here: [http://breakthosebricks.com/break-those-bricks-game/][1]
Hope that helps!
[1]: http://breakthosebricks.com/break-those-bricks-game/
