New loading pane for Hyzonia games

In order to better handle graphic rich games, we added a loading feature to the games. Using this feature the user can only start playing when the game finishes loading all its necessary objects. This way the user cannot try to play a game that is not fully functional yet.

This document describes the customizable elements of the "loading" feature.

The loading pane like other parts of Hyzonia games is customizable; Publisher can customize the style of the loading page very easily using the web forms that are accessible in his advergame control panel. If you are not familiar with basic customization for Hyzonia games you can read more in Hyzonia Docs.


The loading page is composed of two HTML DIV elements nested in each other; the parent DIV is the background, customizing it can be done by editing the "loading-div" class, while the child DIV contains the loading dialog where the 'loading…' text appears. This DIV is customizable by editing the "loading-dialog" class.

Both of those classes are added to the look customization section in docs.hyzonia.com.

Note in Blow the Bubbles, Hit the Monkeys, Blow the Balloons and Shoot the UFOs (generally if the game has a separate customizable CSS for Dialog Boxes) there are two places where the loading page appears. Hence two files Game Theme and Dialog Boxes needed to be edited by the same content.

The following is the default style of the loading pane elements:

• loading-div

  Description

  Changes the style of the loading pane. This pane appears when the game starts till all the game elements are loaded. The background is a "DIV" element, you can use any CSS instruction to style it.

  Code

  .loading-div
  {
  background-color: #aaaaaa;
  }
  





• loading-dialog

  Description

  Changes the style of the loading pane dialog. This dialog contains the loading text, normally it is "Loading…". The dialog is a "DIV" element; you can use any CSS instruction to style it.

  Code

  .loading-dialog
  {
  background-color:#ffffff;
  color: #000000;
  margin:auto;
  top:50%;
  }