DEV Community

Math17
Math17

Posted on

Run Unity web project with Angular

Hi,
Here a way to run a Unity project with Angular.
(with hardcore method!)

1 - Unity settings:

  • go on edit > Project Settings > Player
  • choose the webGL tab (install the module if you don't have it)
  • in Resolution and Presentation set to "minimal"
  • in Publish Settings set Compression Format to "Disabled"

2 - Build to your Angular assets directory

  • go on file > Build Settings
  • choose the webGL platform
  • click on build and set the path to your Angular assets directory

3 - implement it on Angular

  • add a script src in the angular index.html (or where you want):
<script src="/assets/yourProjectName/Build/yourProjectName.loader.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • add a canvas with the id "unity-canvas" like so:
<canvas id="unity-canvas" width=960 height=600 style="width: 960px; height: 600px; background: #231F20"></canvas>
Enter fullscreen mode Exit fullscreen mode
  • wright the code below in the ts component you want to use in the ngOnInit for example:
ngOnInit() {
        //@ts-ignore
        createUnityInstance(document.querySelector("#unity-canvas"), {
          dataUrl: "/assets/yourProjectName/Build/yourProjectName.data",
          frameworkUrl: "/assets/yourProjectName/Build/yourProjectName.framework.js",
          codeUrl: "/assets/yourProjectName/Build/yourProjectName.wasm",
          streamingAssetsUrl: "StreamingAssets",
          companyName: "YourCompagny",
          productName: "yourProjectName",
          productVersion: "1.0"
        });
  } 
Enter fullscreen mode Exit fullscreen mode

Done!
Now you just have to build your project after updates from unity in the angular assets path and it should be all to use it on your project.
For production you can delete the unless index.html file generated in the assets/yourProjectName

Top comments (0)