HTML5 Setup & Best Practices

VNgen partially supports HTML5 as a target platform. Many advanced features available to other platforms will not work in HTML5, however it is still possible to create basic visual novels with VNgen which can be enjoyed right within your web browser.

Before exporting, it is recommended to disable the following two settings in order for VNgen to function best in HTML5:

  1. Global Game Settings > HTML5 > Graphics > WebGL - disabled
  2. Global Game Settings > HTML5 > Graphics > Center the game in the browser - disabled

These settings are optional, and may be left enabled depending on your intended usage of VNgen in HTML5. However, some features may not work as you expect, and others may not work at all. That being said, please keep these additional points in mind:

  • Centering the game in the browser should only be left enabled if view scaling with vngen_set_scale is disabled. However, due to the varying dimensions of browser windows, it is highly recommended to enable view scaling with HTML5.
  • HTML5 will render VNgen at renderlevel 2 by default. This is the simplest and most compatible rendering method, but lacks many advanced features like shaders and deformations. To enable these features again, renderlevel can be overridden with vngen_set_renderlevel, where renderlevel 0 is the highest method and renders all features, and renderlevel 1 renders most features, but with some compromises to visuals for compatibility. Many of these features require WebGL to work properly, and some will not work with HTML5 even if the renderlevel setting is overridden.
  • Build HTML5 games for HTML5 first. It is much easier to work within the constraints of HTML5 and then add additional effects for other platforms, rather than create a highly advanced visual novel first and then port it down to HTML5.

Note that these recommendations are subject to change with further updates to VNgen and the HTML5 export module for GameMaker Studio itself.