This example shows how to use the SWAG API with Unity.
See SwagAPI.cs for a list of available plugin methods.
See this PDF for more comprehensive documentation. (subject to change)
An end-to-end example can be found in this repository in the SampleScene scene.
- Add a SwagObj to your scene. Make sure the SwagAPI script is attached.
- Navigate to the WebGL player settings (Edit -> Project Settings -> Player -> WebGL settings) and choose the SWAGAPI template.
- Navigate to the project build settings (File -> Build Settings) and choose the WebGL platform.
- Build the project!
- Add a SwagObj to your scene. Make sure the SwagAPI script is attached.
- Add the following snippets of HTML to your template:
Just before the closing </head> tag:
<script type="text/javascript" src="https://swagapi.shockwave.com/dist/swag-api.js"></script>
<link rel="stylesheet" type="text/css" href="https://swagapi.shockwave.com/dist/swag-api.css"></link>Just after the opening <body> tag (replacing the existing <canvas> tag):
<div id="webgl" class="webgl-content">
<div id="swag">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance && unityInstance.SetFullscreen(1)"></div>
<div class="title">{{{ PRODUCT_NAME }}}</div>
</div>
</div>
</div>Update your createUnityInstance call to initialize the SWAG API when ready:
createUnityInstance(document.querySelector("#unity-canvas"), {
...
})
.then((unityInstance) => {
window.unityInstance = unityInstance;
document.swagBrandingShown = 0;
SWAGAPI.showBrandingAnimation('webgl', function (){
document.swagBrandingShown = 1;
});
})- Navigate to the project build settings (File -> Build Settings) and choose the WebGL platform.
- Build the project!
For now you will need to edit your etc\hosts file.
- On Windows you can find it at c:windows\system32\drivers\etc\host
- On MacOS you can find it at /etc/host
and add the following line
127.0.0.1 local.shockwave.com
Install http-server
npm install -g http-server
Launch a local web server from your /build directory, where your index.html is
http-server -p 8888
launch your game with http://local.shockwave.com:8888
- The SWAG API is provided via a JSLIB external plugin. There is currently a quirk in Unity which prevents the plugin from working in editor mode, so you will need to build your project to test SWAG API features in your game.
- SWAG API calls are secured via CORS and as such will only work properly in dev mode when coming from
local.addictinggames.comorlocal.shockwave.comon port 8888. You will need to add these to your HOSTS file and run your game using an external web server to get passed CORS restrictions (ie Unity's "Build and Run" won't work for testing SWAG API features).