HTML 5 Export

As of version 2.2, Scrolling Game Development Kit can export projects in HTML 5 format. HTML 5 introduces powerful new features to the web's common HTML format that allow high performance graphics and more to be represented in web pages on browsers across a variety of platforms. This makes HTML 5 a powerful tool for cross-platform development (and in the case of SGDK2 projects, game development in particular). This dialog, launched from the file menu, allows control over how the HTML 5 code is generated.

The HTML 5 code generated by SGDK2 does not entirely support all SGDK2 features, but the majority of functionality is present, including all graphics, framesets, maps, layers, tiles (including animated tiles), counters, sprites, sprite definitions, tile categories, sprite categories, solidity, sprite states, and most rules and custom code. There are a few rules not yet supported, and custom code does not support embedded data, so audio support is not straightforward. (See details online.) SGDK2 also outputs HTML5 code to implicitly allow the mouse or touch screen to scroll around the maps if scrolling is not overridden by other rules.

Display Area

This option determines the behavior of the map display area (HTML 5 canvas).

Fixed size defined in project settings

Maps will be displayed in a fixed-size area (canvas) on the page. The size is determined by Project Properties.

Fill browser window

The display area (canvas) will automatically resize to fill the window. This is useful when displaying the page on a mobile device. However, it does not work well in conjunction with the option to generate buttons to switch between maps.

Output Format

This determines whether code is generated to a single file or multiple files.

Embed images in HTML file

Graphics are embedded into the HTML file. This is recommended when viewing the HTML file from a local file system because security restrictions apply and tend to interfere with some of the generated code's operation when the images are stored in separate files on a local file system. These restrictions do not apply to files served from a true web server. Un-checking this option when appropriate can improve code readability by separating the image data, and reduce the overhead introduced by encoding image data as text.

Embed JavaScript in HTML

All JavaScript code is embedded within the HTML file. Combined with the Embed images option, this allows your entire project to be generated to a single HTML file with no external references.

Single external JavaScript file

All the JavasScript code is generated to a single JS file separate from the HTML file.

Separate JavaScript file per object

General JavaScript code is generated to a file separate from the HTML, similar to the Single external JavaScript file option. However, code specific to sprite definitions and maps are generated to individual files specific to those objects (and named after those objects). Custom JS files added to the project's source code folder also retain their independence when generating with this option.

Directory

This specifies the location where the output files will be generated. If multiple files are being generated, it's good to specify a dedicated directory here rather than a directory containing other files.

File Name

This specifies the name of the HTML file that will be generated. Other files may be generated in the directory specified above, but this is the only file that is always generated regardless of the options selected above, and whose name can be specified.

Generate buttons to switch between maps

If checked, a series of buttons is added below the map viewing area that allows the user to switch to all the maps defined in the project. This is not recommended in conjunction with the option to fill the browser window.

Force rule function calls to camelCase

If checked, generated JavaScript code that calls Sprite rule functions and Plan rule functions will automatically force the first letter of the function name to lowercase. This allows you to use uppercase function names in C# and camel-case function names in HTML5, which is the convention in JavaScript coding. This affects only the code generated by sprite rules and plan rules. It does not affect the source code files in the project's source code folder. That means if you choose not to force camel case you must either switch all the C# source code functions to be camel case or change all the JavaScript source code functions to match the C# names.

Other Resources

Project Properties