Quick Start

Lively WebGL Template is a beast of a template, with over 1000 hours invested into it, over a dozen features, and over 110 configurable properties. It can be quite confusing, so if you have any questions come ask!http://BumblingWizard.com

Youtube Setup Videos: https://www.youtube.com/playlist?list=PLjRwfcC78KCdyBYeKeVVTqVzCWcze_cJX

You'll need to import the dependencies along with the asset into your project.

Ensure all scenes you would like to build are in your scene list. The shortcut for the scene list menu is (ctrl+shift+B). The first scene in the list, is going to be your first loaded scene.

Make sure you select WebGL (Web) under platforms, otherwise you wont see the LivelyWebGL Template in the upcoming step.

Open Player Settings, and under resolution and presentation, select the LivelyWebGL Template. (Edit→Project Settings→Player→Resolution and Presentation)

• NOTE: You’ll be prompted to change your webgl template before configuring any settings.
• There are no template options in the player settings.

——————————————————————————————————–

With the LivelyWebGL Template now selected, open the LivelyWebGL Editor window under (Window→Devon Lively→LivelyWebGL →LivelyWebGL Editor)

——————————————————————————————————–

Under WebGL Setup, select one of the default presets. But, I highly suggest you duplicate it so that when I make updates you don’t lose your customized settings later (Unity may overwrite the default preset when you update the asset). You can of course configure your own from scratch by pressing ‘Create New’.

For now, we will Disable supabase since we have some setup to do first, in order to function correctly.

Go through the settings / change them as you see fit.

Press the big red save button.

• Note: Be sure to press ‘Save’ before you build to ensure all changes have been saved!

——————————————————————————————————–

(You can skip this step for now if you want, and come back to it later)

Now we need to update the art under TemplateData > Graphics; this includes:

• logo.png is the image that displays when the game is loading in the browser
• favicon.icon is the image that displays in the browser tab, favorites bar..
• PWA icons and screenshots
• SEO preview image
• background Images (if using them)

These files need to stay where they are, and their names shouldn't change.

Note for later: The only time you should change the names of the files, is when you upload your own custom menu buttons into the hamburger menu/icons folder.

——————————————————————————————————–

If you’re planning on showing the player a ‘Tap To Start’ screen, you’ll need to add the WebglCallbackHandler Prefab to your first loaded scene. (Assets/ DevonLively/ LivelyWebGLTemplate/ WebGLCallbackHandler/ WebGLCallbackHandler), and it’s GameObject Name must never, ever change!

——————————————————————————————————–

If you’re planning on using any of the API, or getting callbacks from Plays Data / the Rating System, you’ll need to add the WebglCallbackHandler Prefab to your first loaded scene, and make sure it persists across scenes. (Assets/ DevonLively/ LivelyWebGLTemplate/ WebGLCallbackHandler/ WebGLCallbackHandler).

• The WebGLCallbackHandler’s GameObject Name must never, ever change!
• If you need it to persist through scenes, there is an option to enable it on the component, in the inspector.
• Note: This rating / plays system only works on servers with access to server-side code (such as PHP, Node.js, Python, etc.). It will not function on purely static hosting (like GitHub Pages or itch.io without backend support).

Before you build or preview, you must always click the big red button and save your settings, or they will not appear in the build

Conclusion: Before you build or preview, you must always click the big red button and save your settings, or they will not appear in the build.

Once saved, you’ll know you can preview and build when it looks like this:

You can now preview the Template by pressing Preview (Follow Preview Setup steps).

Now its time to build.

< Previous - - - - - - Next >