Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

One, foreword

When we were developing WEBGL projects, we encountered a problem. The exported WEBGL interface was very simple and not very beautiful. Therefore need to modify the js file, or CSS files, and images of replacement operations But if the work is to say a word, but the program development to change many times, always change these things, each time will seem tedious, so have set up a template, when generated are generated according to this template?

Unity3D has already thought about this for us, providing a feature called custom Templates that sets up Templates for us every time we build.

Let’s take a look at how WEBGL templates are used.

Two, say in front

To use a WEBGL template, there are the following steps:

1) Take a look at the contents of WEBGL’s index.html file generated by default:

As you can see, the contents of the script in the middle are very important to display, so our template index. HTML must have this line of code to execute properly.

<script>
var gameInstance = UnityLoader.instantiate("gameContainer"."Build/VOXL.json", {onProgress: UnityProgress});
</script>
Copy the code

Json. VOXL is a json file automatically generated by Unity based on the folder name. This file name must be the same as the name in the template.

2) Inside Assets, create a folder called “WebGLTemplates”. In that folder, you can create a folder with your templates’ text, for example, “TestTemplates”. Does not affect.

3) Then you can put your modified Index file or any other resources into this folder.

Note: The thumbnail. PNG file will be displayed as a thumbnail in the inspector in the player Settings

4) Then click File→Build Setting→ Click Build Setting on the screen that appears… Then you can see the template in Resolution and Presentation.

OK, this is the general process, now let’s look at the detailed operation

Three, the official start

1) First let’s look at the effect to be achieved:

The title, style, picture and progress bar have all been changed. We need to put these files into the template.

Note: These files are in the TemplateData folder, so we’ll keep this path and import the entire folder

2) Import the set WEBGL resources:

Note: The Build file does not need to be imported because it is automatically generated.

3) Create a folder according to the name set in the script code in the index.html file in the template, and then specify this folder in the Build file

4) Click File→Build Setting→ Click Build Setting on the screen that appears… Then select the template in Resolution and Presentation, click Build, and create a new “WisdomRanch” folder with the custom folder name set in the previous step:

Just wait for the Build to finish.