Web Preview Customization Workflow
Starting with v2.2, Cocos Creator supports for custom web preview.
Custom Web Preview
preview-templatesfolder in the project path.
project-folder |--assets |--build |--preview-templates
Start customizing the web preview, you can refer to the editor's builtin
preview-templates. After the customization is complete, you need to restart the editor, then select the Browser above the editor and click the Preview button to see the effect.
The editor's builtin
preview-templatesfolder are placed here:
preview-templates folder is equivalent to a normal web template, which contains:
preview-templates // Required entry file |--index.html // Other files can be added as needed
Developers can customize
index file as needed. You can use .jade or .ejs rather than .html.
Creator provides a sample project in the Dashboard -> New Project panel, which comes with a simple example of preview-templates.
Creator will parse the ejs syntax in the html template. And Creator currently supports the following custom variables:
|title||CocosCreator + project name|
|cocos2d||The path where the engine script is located|
|enableDebugger||When preview on a mobile browser platform, the value is true|
Note: The html template in the example uses
<%=cocos2d%> of the custom variable. If you want to customize other variables, then you need to parse them on your own.
If you are not familiar with the three file types, you can refer to the following basic documents: