Confirm dialog

Introduction

Using json style to create confirm dialog, composed of simple-label title, simple-label content, with simple-label 0, 1, or 2 action button(s).

• Author: Rex
• Game object

Live demos

• Yes-no buttons
• Ok button
• Any-touch closing
• TextArea content
• Radio-choices

Usage

Sample code

Install plugin

Load minify file

• Load plugin (minify file) in preload stage

  scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
  

• Add dialog object

  var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);
  // var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);
  

Import plugin

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Install plugin in configuration of game

  import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';
  var config = {
      // ...
      plugins: {
          scene: [{
              key: 'rexUI',
              plugin: UIPlugin,
              mapping: 'rexUI'
          },
          // ...
          ]
      }
      // ...
  };
  var game = new Phaser.Game(config);
  

• Add dialog object

  var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);
  // var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);
  

Import class

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Import class

  import { ConfirmDialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
  

• Add dialog object

  var dialog = new ConfirmDialog(scene, config);
  // var dialog = new ConfirmDialog(scene, config, creators);
  scene.add.existing(dialog);
  dialog.resetDisplayContent(config);
  

Add dialog object

var dialog = scene.rexUI.add.confirmDialog({
    // x: 0,
    // y: 0,
    // anchor: undefined,
    // width: undefined,
    // height: undefined,

    // Elements
    background: {
        radius: 0,
        // radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}

        color: undefined,
        alpha: undefined,
        strokeColor: undefined,
        strokeAlpha: undefined,
        strokeWidth: undefined,
    },

    // SimpleLabelConfig
    title: {
        // width: undefined,
        // height: undefined,

        orientation: 0,
        // rtl: false,

        background: {
            radius: 0,
            // radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}

            color: undefined,
            alpha: undefined,
            strokeColor: undefined,
            strokeAlpha: undefined,
            strokeWidth: undefined,
        },

        // iconMask: false,
        // squareFitIcon: false,
        // iconSize: undefined, iconWidth: undefined, iconHeight: undefined,

        text: {
            fontFamily: 'Courier',
            fontSize: '16px',
            fontStyle: '',
            backgroundColor: null,
            color: '#fff',
            stroke: '#fff',
            strokeThickness: 0,
            shadow: {
                offsetX: 0,
                offsetY: 0,
                color: '#000',
                blur: 0,
                stroke: false,
                fill: false
            },                  
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
            // more text styles
        },
        // expandTextWidth: false,
        // expandTextHeight: false,

        // squareFitAction: false,
        // actionMask: false,
        // actionSize: undefined, actionWidth: undefined, actionHeight: undefined,

        space: {
            left: 0, right: 0, top: 0, bottom:0, 
            icon: 0, text: 0
        }

        align: undefined,  // 'left' | 'top' | 'right' | 'bottom' | 'center        
    },

    content: SimpleLabelConfig,

    /* TextArea
    content: {
        space: { left: 0, right: 0, top: 0, bottom: 0, text: 0, },

        background: {
            radius: 0,
            // radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}

            color: undefined,
            alpha: undefined,
            strokeColor: undefined,
            strokeAlpha: undefined,
            strokeWidth: undefined,
        },

        text: {
            fontFamily: 'Courier',
            fontSize: '16px',
            fontStyle: '',
            backgroundColor: null,
            color: '#fff',
            stroke: '#fff',
            strokeThickness: 0,
            shadow: {
                offsetX: 0,
                offsetY: 0,
                color: '#000',
                blur: 0,
                stroke: false,
                fill: false
            },                  
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
            // more text styles
        },

        // textWidth: undefined,
        // textHeight: undefined,
        // textMask: false,
        // alwaysScrollable: false,

        slider: {
            track: { 
                width: 1, height: 1,
                radius: 0, 
                color: undefined, alpha: 1,
                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
                shape: undefined
            },

            thumb: { 
                width: 1, height: 1,
                radius: 0, 
                color: undefined, alpha: 1,
                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
                shape: undefined
            },

            // input: 'drag',
            // position: 'right',

            // hideUnscrollableSlider: false,
            // adaptThumbSize: false,
            // minThumbSize: undefined,
        },

        // scroller: {
        //     threshold: 10,
        //     slidingDeceleration: 5000,
        //     backDeceleration: 2000,
        //     pointerOutRelease: true,
        //     dragRate: 1,
        // },

        mouseWheelScroller: false,
        // mouseWheelScroller: {
        //     focus: true,
        //     speed: 0.1
        // },

        clamplChildOY: false,
    }
    */

    buttonMode: 0,  // 0|1|2

    button: SimpleLabelConfig,
    // buttonA: SimpleLabelConfig
    // buttonB: SimpleLabelConfig

    // choice: SimpleLabelConfig,
    // choicesType
    // choicesWidth: undefined,
    // choicesHeight: undefined,

    // Space
    space: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,

        title: 0,
        titleLeft: 0,
        titleRight: 0,

        content: 0,
        contentLeft: 0,
        contentRight: 0,

        actionsLeft: 0,
        actionsRight: 0,
        action: 0,

        choices: 0,
        choicesLeft: 0,
        choicesRight: 0,
        choice: 0,
        choiceLine: 0,
        choiceColumn: 0, choiceRow: 0,
        choicesBackgroundLeft: 0,
        choicesBackgroundRight: 0,
        choicesBackgroundTop: 0,
        choicesBackgroundBottom: 0,
    },

    proportion: {
        title: 0,
        content: 0,
        actions: 0,
        choices: 0,
    },

    expand: {
        title: true,
        content: true,
        actions: false,
        choices: true,
    },

    align: {
        title: 'center',
        content: 'center',
        actions: 'center',
        choices: 'center',
    },

    click: {
        mode: 'pointerup',
        clickInterval: 100
    }

    // name: '',
    // draggable: false,
    // sizerEvents: false,
    // enableLayer: false,
}, creators);

• x, y : Position of this object, it is valid when this object is the top object.
• anchor : See anchor.
  • left, right, centerX, x, top, bottom, centerY, y : Position based on visible window, which composed of
    • Percentage of visible width/height : 'p%', p: 0 ~ 100.
      • 'left'(=0%), 'center'(=50%), 'right'(=100%)
      • 'top'(=0%), 'center'(=50%), 'bottom'(=100%)
    • Offset : '+n', or '-n'.
  • width, height : Set size (invoke onResizeCallback) based on visible window, which composed of
    • Percentage of visible width/height : 'p%', p: 0 ~ 100.
    • Padding : '+n', or '-n'.
  • onResizeCallback : A default resize callback will be assigned interanlly.
• width, height : Minimum width, minimum height.
• background : Styles of simple-label
• title : Styles of simple-label
• content : Styles of simple-label, or TextArea
  • Style with slider, or scroller properties : TextArea
  • Otherwise : SimpleLabel
• buttonMode : 0, 1, or 2
  • 0 : No action button, any touch can close modal dialog
  • 1, 2 : Dialog with 1 or 2 action buttons, clicking any action button to close modal dialog.
• button : Styles of simple-label, optional.
• choice : Styles of simple-label, optional.
• choicesType : Sizer type (Buttons/FixWidthButtons/GridButtons) and behavior (''/'radio'/'checkboxes') of choice buttons.
  • undefined, '', or 'y' : Buttons in vertical/horizontal without any extra behavior, default behavior.
  • 'radio', or 'x-radio' : Buttons in vertical/horizontal, with radio behavior.
    • Name of selected button game object (gameObject.name) will be returned via method dialog.setChoicesSelectedButtonName().
  • 'checkboxes', or 'x-checkboxes' : Buttons in vertical/horizontal, with checkboxes behavior.
    • Name of selected button game object (gameObject.name) will be return via method dialog.getChoicessButtonStates().
  • 'wrap' : FixWidthButtons without any extra behavior, default behavior.
  • 'wrap-radio' : FixWidthButtons with radio behavior.
    • Name of Selected button game object (gameObject.name) will be returned via method dialog.setChoicesSelectedButtonName()
  • 'wrap-checkboxes' : FixWidthButtons with checkboxes behavior.
    • Name of selected button game object (gameObject.name) will be return via method dialog.getChoicessButtonStates().
• choicesWidth, choicesHeight : Minimum width, minimum height of choices.
  • Must assign choicesHeight value if using GridButtons choices.
• space : Pads spaces
  • space.left, space.right, space.top, space.bottom : Space of bounds.
  • space.title : Space between title game object and below game object.
  • space.titleLeft, space.titleRight : Extra left/right padding of title game object.
  • space.content : Space between content game object and below game object.
  • space.contentLeft, space.contentRight : Extra left/right padding of content game object.
  • space.action : Space between each action-button game objects.
• proportion : Keep height of element, or expand height of element.
  • proportion.title : Set to 1 to expand height of title. Default is 0.
  • proportion.content : Set to 1 to expand height of content. Default is 0.
  • proportion.actions : Set to 1 to expand height of actions. Default is 0.
• expand : Expand width of element
  • expand.title : Set true to expand width of title game object. Default is true.
  • expand.content : Set true to expand width of content game object. Default is true.
  • expand.actions : Set true to expand width of actions game object. Default is false.
• align : Align element
  • align.title
    • 'center', or Phaser.Display.Align.CENTER : Align game object at center. Default value. Will add Spaces at right and left sides.
    • 'left', or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center.
    • 'right', or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. Will add a Space at right side.
  • align.content : Align content game object to 'left'/'center'/'right', if expand.content is false.
  • align.actions : Align action game objects to 'left'/'center'/'right', if expand.actions is false.
• click: Configuration of button clicking.
  • click.mode :
    • 'pointerdown', 'press', or 0 : Fire 'click' event when touch pressed.
    • 'pointerup', 'release', or 1 : Fire 'click' event when touch released after pressed.
  • click.clickInterval : Interval between 2 'click' events, in ms.
• name : Set name of this game object.
• draggable : Set true to drag top-most object.
• sizerEvents : Set true to fire sizer events. Default value is false..
• enableLayer :
  • false : Add child game objects into scene's display list. Default behavior.
  • true : Add child game objects into an internal layer game object. See also.
• creators : Callbacks for creating components.

  {
      background: undefined,
      title: undefined,
      content: undefined,
      button: undefined,
      buttonA: undefined,
      buttonB: undefined,
  }
  

  • creators.background : Callback to create background of dialog. Default behavior is creating a round-rectangle-shape.

    function(scene, config)  {
        return gameObject;
    }
    

  • creators.title, creators.content, creators.button, creators.buttonA, creators.buttonB : Creators of simple-label, included these properties

    {
        background: undefined,
        text: undefined,
        icon: undefined,
        action: undefined,
    }
    

Custom class

• Define class

  class MyDialog extends RexPlugins.UI.ConfirmDialog {
      constructor(scene, config, creators) {
          super(scene, config, creators);
          // ...
          scene.add.existing(this);
      }
      // ...
  }
  

• Create instance

  var dialog = new MyDialog(scene, config, creators);
  

Reset display content

dialog.resetDisplayContent({
    title: '',
    content: '',
    buttonA: '',
    buttonB: '',
});

or

dialog.resetDisplayContent({
    title: {
        text: '',

        icon: undefined, iconFrame: undefined,
        iconSize: undefined,

        action: undefined, actionFrame: undefined,
        actionSize: undefined,

    },

    content: {
        text: '',

        icon: undefined, iconFrame: undefined,
        iconSize: undefined,

        action: undefined, actionFrame: undefined,
        actionSize: undefined,

    },

    buttonA: {
        text: '',

        icon: undefined, iconFrame: undefined,
        iconSize: undefined,

        action: undefined, actionFrame: undefined,
        actionSize: undefined,

    },

    buttonB: {
        text: '',

        icon: undefined, iconFrame: undefined,
        iconSize: undefined,

        action: undefined, actionFrame: undefined,
        actionSize: undefined,

    },

    choices: [
        {
            text: '', value: undefined,

            icon: undefined, iconFrame: undefined,
            iconSize: undefined,

            action: undefined, actionFrame: undefined,
            actionSize: undefined,
        },        
        // ...
    ]
});

• title, content,buttonA, buttonB : Display content
  • A string : Set text of simple lable
  • Configuration of simpleLabel.resetDisplayContent(config) : Set icon, text, action icon of simple label.
• choices : Array of display content
  • A string : Set text of simple lable, also use this string as option value.
  • Configuration of simpleLabel.resetDisplayContent(config) : Set icon, text, action icon of simple label.
    • Property value : Option value.

Run dialog.layout() after this method, to layout children again.

Layout children

Arrange position of all elements.

dialog.layout();

See also - dirty

Modal

Pop this dialog as modal dialog, clicking any action button to close this modal dialog.

dialog.modal({
    // cover: {
    //     color: 0x0,
    //     alpha: 0.8,
    //     transitIn: function(gameObject, duration) { },
    //     transitOut: function(gameObject, duration) { },
    // },
    // cover: false, 

    // When to close modal dialog?
    // touchOutsideClose: false,
    // anyTouchClose: false,
    // timeOutClose: false,
    // manualClose: false,

    // duration: {
    //     in: 200,
    //     hold: 2000,
    //     out: 200
    // }

    // transitIn: 0,
    // transitOut: 0,

    // destroy: true
});
// dialog.modal(config, onClose);

or

dialog
    .modalPromise(config)
    .then(function(data){

    })

• config : See Modal behavior
  • config.defaultBehavior :
    • undefined, or true : Will close modal dialog when clicking any action button.
    • false : Disable default behavior.
• onClose : Callback when closing modal dialog

  function(data) {
      // var index = data.index;
      // var text = data.text;
      // var value = data.value;
      // var button = data.button;
      // var dialog = data.dialog;
  }
  

  • data : Contains these properties
    • data.index : Index of clicking action button
    • data.text : button.text, this property is valided if button game object is a label.
    • data.value :
      • A single value : Return selected value, if choicesType is 'radio'
      • A dictionary contains {value: boolean} : Return selected values, if choicesType is 'checkboxes'
      • undefined : Default value
    • data.button : Clicked button game object.
    • data.dialog : This dialog game object.

Get element

• Get element
  • Background game object

    var background = dialog.getElement('background');
    

  • Title game object

    var title = dialog.getElement('title');
    

  • Content game object

    var content = dialog.getElement('content');
    

  • Buttons game object

    var buttonA = dialog.getElement('buttonA');
    var buttonB = dialog.getElement('buttonB');
    

• Get by name

  var gameObject = dialog.getElement('#' + name);
  // var gameObject = dialog.getElement('#' + name, recursive);
  

  or

  var gameObject = dialog.getByName(name);
  // var gameObject = dialog.getByName(name, recursive);
  

  • recursive : Set true to search all children recursively.

Other properties

See dialog, sizer object, base sizer object, container-lite.