Name input dialog

Introduction

Enter first name and last name via a dialog.

• Author: Rex
• Game object

Live demos

• Horizontal-layout
• Vertical-layout

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.nameInputDialog(style).resetDisplayContent(config);
  // var dialog = scene.rexUI.add.nameInputDialog(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.nameInputDialog(style).resetDisplayContent(config);
  // var dialog = scene.rexUI.add.nameInputDialog(style, creators).resetDisplayContent(config);
  

Import class

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Import class

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

• Add dialog object

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

Add dialog object

var dialog = scene.rexUI.add.nameInputDialog({
    // x: 0,
    // y: 0,
    // anchor: undefined,
    // width: undefined,
    // height: undefined,
    // origin: 0.5
    // originX:
    // originY:

    // Elements
    background: backgroundStyle,
    // background: null,

    title: titleStyle,  // SimpleLabelConfig
    // title: null,

    firstNameTitle: titleStyle,  // SimpleLabelConfig
    // firstNameTitle: null,

    firstNameInput: inputTextStyle, // CanvasInputTextConfig

    lastNameTitle: titleStyle,  // SimpleLabelConfig
    // firstNameTitle: null,

    lastNameInput: inputTextStyle, // CanvasInputTextConfig

    content: contentStyle, // SimpleLabelConfig, or TextAreaStyle
    // content: null,

    button: SimpleLabelConfig,

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

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

        names: 0,
        namesLeft: 0,
        namesRight: 0,
        firstName: 0,
        firstNameTitle: 0,
        lastNamTitle: 0,

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

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

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

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

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

    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,

        defaultBehavior: true,
    },

    // name: '',
    // draggable: false,
    // sizerEvents: false,
    // enableLayer: false,

    // nameInputButtonIndex: 0,
    // cancelButtonIndex: 1,

}, 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, aspectRatio : 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'.
  • aspectRatio :
    • undefined, or false : Does not keep aspect ratio. Default behavior.
    • true : Use the current width and height as the aspect ratio.
    • A number : Use given number as the aspect ratio.
  • onResizeCallback : A default resize callback will be assigned interanlly.
• width, height : Minimum width, minimum height.
• origin, originX, originY : Set origin of this sizer. Default value is (0.5, 0.5).
• background :
  • Style of Background : Create Round-rectangle, Nine-slice, or Image as background element.
  • null : Don't create any game object.
• title, firstNameTitle, lastNameTitle :
  • Styles of simple-label
  • null : Don't create any game object.
• firstNameInput, lastNameInput :
  • Styles of canvas-input
• button :
  • Styles of simple-label, optional.
• 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.names : Space between names and action buttons.
  • space.namesLeft, space.namesRight : Extra left/right padding of names.
  • space.firstName : Space between first name and last name.
  • space.firstNameTitle : Space between firstNameTitle and firstNameInput.
  • space.lastNameTitle : Space between lastNameTitle and lastNameInput.
  • 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.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.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.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.
• modal : Configuration of modal, See Modal behavior.
• 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.
• nameInputButtonIndex, cancelButtonIndex : Button index for firing 'nameInput', 'cancel' events. Default values are 0, 1.
• creators : Callbacks for creating components.

  {
      background: undefined,
      title: undefined,
      firstNameTitle: undefined,
      lastNameTitle: undefined,
      button: 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.firstNameTitle, creators.lastNameTitle, creators.button : Creators of simple-label, included these properties

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

Custom class

• Define class

  class MyDialog extends RexPlugins.UI.NameInputDialog {
      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: '',
    firstNameTitle: '',
    lastNameTitle: '',
    button: '',

    firstName: '',
    lastName: '',
});

or

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

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

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

    },

    firstNameTitle: {
        text: '',

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

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

    },

    lastNameTitle: {
        text: '',

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

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

    },

    button: {
        text: '',

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

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

    },

    firstName: '',

    lastName: ''
});

• title, firstNameTitle, lastNameTitle : Display content
  • A string : Set text of simple lable
  • Configuration of simpleLabel.resetDisplayContent(config) : Set icon, text, action icon of simple label.
  • null : Hide title or firstNameTitle, lastNameTitle element.
• button : Display content
  • A string : Set text of simple lable
  • Configuration of simpleLabel.resetDisplayContent(config) : Set icon, text, action icon of simple label.
• firstName, lastNmae : A string

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, close this modal dialog when clicking action button.

dialog.modal(onClose);  // Use default modal config

or

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
}, onClose);

or

dialog
    .modalPromise(config)
    .then(function(data){
        var firstName = data.firstName;
        var lastName = data.lastName;
    })

• 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 firstName = data.firstName;
      var lastName = data.lastName;
  }
  

  • data : Contains these properties
    • data.firstName : Enter string of firstNameInput.
    • data.lastName : Enter string of lastNameInput.

Names input

• First name
  • Get

    var firstName = dialog.firstName;
    

  • Set

    dialog.setFirstName(value);
    // data.firstName = value;
    

• Last name
  • Get

    var lastName = dialog.lastName;
    

  • Set

    dialog.setLastName(value);
    // data.lastName = value;
    

Get element

• Get element
  • Background game object

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

  • Title game object

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

  • FirstName-title game object

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

  • FirstName-input game object

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

  • LastName-title game object

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

  • LastName-input game object

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

  • Button game object

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

• 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.

Events

• Click confirm button

  dialog.on('confirm', function (data) {
      var firstName = data.firstName;
      var lastName = data.lastName;
    }, scope);
  

  • data : See modal