6

How do I put my Unity game built in WebGL into Laravel?

FYI, Unity WebGL, when built gives me these files: - Build (folder) - TemplateData (folder) - index.html

Let me tell what I have done:

[ How I test if the game works in WebGL using XAMPP ]

  1. I built a Unity game in WebGL
  2. I put the built folder in xampp/htdocs directory
  3. I run xampp, then turn on apache server
  4. I open my browser and went to localhost/mygamefolder
  5. It works fine, but this is using xampp

Now what I want is, how to test if the game works using server hosted using Laravel framework...

[ What I did ]

  1. I put the built folder into mylaravelproject/public directory
  2. I copied the content of index.html file from the Unity built project and paste it in one of my views file (.blade.php).
  3. I changed the stylesheet and references at the tag according to the path where I put the built folder is.
  4. I open the terminal and run 'php artisan serve'
  5. I open browser and go to the IP address as shown in the terminal
  6. I went to the page where I put the game, but the game does not load. (Game only, other thing like navbar and button I put etc works fine)
  7. I open console, it said:
    • "Uncaught ReferenceError: UnityLoader is not defined
    • "Failed to load resource: the server responded with a status of 404 (Not Found)" at demo:15"

Any ideas? Or if you can direct me to tutorial on how to put your Unity WebGL game into Laravel that would be good. Since I tried to search for it and so far I found nobody is putting Unity in their Laravel website.

--- Edit: Here is the index.html file as produced by Unity WebGL ---

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Projectile</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/OrangeCodeGame.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">Projectile</div>
      </div>
    </div>
  </body>
</html>
Nasrul Arif
  • 165
  • 1
  • 12
  • Please show us the source code of `index.html`. – user2094178 Oct 06 '18 at 07:21
  • I have updated it, kindly help me. Still not getting the solution. – Nasrul Arif Oct 08 '18 at 07:48
  • `` make sure the path is correct. – Voyowsky Oct 28 '18 at 12:22
  • I did change the path for TemplateBuild and Build, it works. The fullscreen button and the game name appeared. Even the Laravel authentication able to be passed to the Unity page. But now I face this: An error occurred running the Unity content on this page. See your browser JavaScript console for more info. The error was: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data – Nasrul Arif Nov 18 '18 at 12:38

1 Answers1

7

Figured it out:

When you build Unity game with WebGL, Unity will provide this files:

  • index.html
  • Build (folder)
  • TemplateData (folder)
  1. Copy the index.html into the resources/views folder and change the extension of "index.html" into "index.blade.php"
  2. Open public folder in the Laravel project, copy and paste the Build and TemplateData folder.
  3. Go to routes/web.php, add the controller that will route to the index.blade.php.

    4. You can test it with button or anything you like.

Done, now it will works fine. You can even put Laravel content inside the index.blade.php of unity with your navbar or anything you like.

Plus, the authentication session can also be passed normally.

Nasrul Arif
  • 165
  • 1
  • 12