Dialog

Definition

The Dialog system is used to display text and response options through a standard interface.

A Dialog is the following:

• List of states (each with - Text (optional) & List of options (optional))
• Selector (icon or character (pending))
• Windows (optional)

Container

Dialog Data

var Dialogs = ig.global.data.dialogs;

Dialog Object

var Dialog = ig.support.dialog;

Data Format

Notes:

• The dialogsSampleSettingsBase is an optional separate object for easy reuse across dialog objects. All fields indicated in the dialogsSampleSettingsBase object are applicable to the 's' object of a Dialog .
• If the next state cannot be determined (due to data error or just not specifying) the Dialog will close.
• The data for a Dialog can be thought of as a conversation with the capability of a branching conversation based on requirements to reach given states.

Format

var dialogsSampleSettingsBase =
{
    f:'04b03.font', // font ('media/' is prepended and '.png' is appended automatically)
    w:200, // width of the dialog space (for text wrap purposes) (default: 0)
    h:0, // height does nothing for now... probably need to scroll (default: 0)
    seq:false, // Flag indicating the states of the dialog are sequential (default: false)
    x:30, // x location (default: 0)
    y:0, // y location (default: 0)
    si:'img', // selector icon (optional) (default:null)
    sia:
    {
        sx:0, // source x of the selector image (default: 0)
        sy:0, // source y of the selector image (default: 0)
        w:0, // width of the selector (default: image width)
        h:0, // height of the selector (default: image height)
        yo:-2 // y offset when drawing the selector(default: 0)
    },
    o:
    {
        x:0, // x position of the rectangle of options (default: 0)
        y:0, // y position of the rectangle of options (default: 0)
        w:0, // width of the option box (inclusive of selector icon/image)
        yo:0, // offset between options (default: 0)
        xo:0 // offset from the right edge of the selector to the first character of an option (default: 0)
    },
    r:null, // requirements to show this dialog (default: null)
    win:[], // array of windows drawn in order specified by array (default: null)
    winex:[], // additional array of windows (allowing for both base and object setting) (default: null)
    c:'' //class (string) - used for key translation for localization + menu item actions (default: null) ('ig.global.' is prepended when associating to the class object)
}

Dialogs.sample =
{
    s: // settings object
    {
        base:dialogsSampleSettingsBase , // base settings for this dialog (see base functionality (TODO link))
        x:52, // base x override 
        winex: [] // extension to the windows [] (so the base and each dialog can have their own)
    },
    sa: // array of dialog state objects
    [
        {
            n:'A', // state name (default:'')
            t: 'Hi!', // text to display when this state is active
            ns:'B', // next state (if there are no options that specify a next state) (default:'')
            r:null, // requirements to enter this state (TODO: link to requirements) (default: null)
            a:null, // action when exiting the state (TODO: link to actions) (default: null)
            o: // array of options to display when the state is active (default: null)
            [
                {
                    t:"Hello", // text
                    ns:'B' // next state name (if null or non-existent - exits the dialog)
                    a:null // action when option is selected (default: null) (default: null)
                    ca:'' // class action (only applicable if the dialog is configured with a class) (TODO: reference class docs)
                    cav:{} // class action variables (only applicable if the dialog is configured with a class) (TODO: reference class docs)
                    r:null // requires object (used to show/hide options) (default: null)
                    d:false, // The option to default on when this state is set (default: false)
                },
                { // Note: this option is trimmed down to just the essentials (and will exit on selection)
                    t:"Goodbye"
                }
            ],
            win:[] // windows for the given state (default: null)
        },
        {
            n:'B',
            t: 'Well good talking to you.',
        }
    ]
}

Selector

By default the selector for choosing an option is represented by the > character. Alternatively you can use a selector image which can be configured with the si and sia properties.

Sequential

Sequential dialogs are those where the array of states are intended to display in order with no need for specifying the ns value. This can be enabled with seq:true in the settings. Requirements may be used to skip a given state in a sequential dialog.

Next State

The next state ns field controls what state should be next after leaving another.

ns value	result
some string	will attempt to switch to the given state by name
null	will determine the next state based on requirements
undefined	will close the dialog

Sequential dialogs do not need the ns specified.

Animation Actions

Dialogs support an additional field in their Action functionality: anim. This field can be used to specify an Animation to play immediately after progressing past a dialog section (pressing the input to continue) and/or after selecting a given option.

Animation Action Format

anim:'sparkle' // name of the animation to play from the Animations data structure

Code Usage

Dialog Controller Object (Optional)

Dialogs can be further controlled by an object in the code. The functions supported are:

• getNextState - prototype: getNextState(nextState) { return null; } Returns the next state object.

Other functions can be configured and called through the class action variables (ca and cav).

Dialog Handling

In your main game mode's update() (before calling parent) add the following:

if(Dialog.update())
{
    // updating the dialog (all other game updates are halted)
    return;
}

Setting the current dialog

Any time you need to pop open a dialog simply initialize the data by calling Dialog.initData:

var Dialog = ig.support.dialog;
// entity that popped the dialog (may be null) -- this is to allow the dialog to call .kill() on the entity if the data is setup to do so
// dialogObject - the dialog definition (ie. Dialogs.sample from above)
Dialog.initData(entity, dialogObject);