Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hosting Unity WebGL Game using Laravel Framework

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>
like image 296
Nasrul Arif Avatar asked Oct 06 '18 04:10

Nasrul Arif


People also ask

Does Unity still support WebGL?

In version 2021.2, Unity marked support for the WebGL 1 Graphics API as deprecated. In Unity 2021.2, there are no changes in behavior and Unity still includes the WebGL 1 Graphics API if you enable the Auto Graphics API Player Setting.

Can Unity WebGL run on mobile?

Unity Technologiesyes, Build and Run works.

How do I make a Unity game playable in my browser?

First you need to install a plugin from Unity called unity web player. Then export your game to the web format, i think it is the first option in the build menu. You upload it to your server and just play.


1 Answers

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.

like image 191
Nasrul Arif Avatar answered Oct 04 '22 02:10

Nasrul Arif