Hexagon

Introduction

Hexagon shape and methods, extends from Polygon geometry object.

  • Author: Rex
  • Geometry object

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexhexagonplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhexagonplugin.min.js', true);
    
  • Add hexagon geometry object
    var hexagon = scene.plugins.get('rexhexagonplugin').add(x, y, size, orientationType);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import HexagonPlugin from 'phaser3-rex-plugins/plugins/hexagon-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexHexagon',
                plugin: HexagonPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add hexagon geometry object
    var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import Hexagon from 'phaser3-rex-plugins/plugins/hexagon.js';
    
  • Add hexagon geometry object
    var hexagon = new Hexagon(x, y, size, orientationType);
    

Create shape

var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);
or
var hexagon = scene.plugins.get('rexHexagon').add({
    x: 0,
    y: 0,
    size: 20,
    orientationType: 0     // 0|'flat'|'vertical'|1|'pointy'|'horizontal'
});
or
var hexagon = new Phaser.Geom.rexHexagon(x, y, size, orientationType);

  • x : Center X.
  • y : Center Y.
  • size : Distance between center to each corner.
  • orientationType : See here
    • 0, 'flat', or 'y'
    • 1, 'pointy' or ,'x'

Draw on graphics

See Polygon shape.

Set properties

  • All properties
    hexagon.setTo(x, y, size, orientationType);
    
  • Position
    hexagon.setPosition(x, y);
    
    or
    hexagon.x = 0;
    hexagon.y = 0;
    
    or
    hexagon.centerX = 0;  // equal to hexagon.x
    hexagon.centerY = 0;  // equal to hexagon.y
    
    or
    hexagon.left = 0;       // hexagon.x
    hexagon.top = 0;        // hexagon.y
    hexagon.right = 0;      // hexagon.x
    hexagon.bottom = 0;     // hexagon.y
    
  • Size
    hexagon.setSize(size);
    
    or
    hexagon.size = size;
    
  • Orientation type
    hexagon.setType(orientationType);
    
    or
    hexagon.orientationType = orientationType;
    
    • orientationType : See here
      • 0, 'flat', or 'y'
      • 1, 'pointy' or ,'x'

Get properties

See Polygon shape.

  • Position
    • Center
      var centerX = hexagon.centerX;
      var centerY = hexagon.centerY;
      
      or
      var centerX = hexagon.x;
      var centerY = hexagon.y;
      
    • Bound
      var top = hexagon.top;
      var left = hexagon.left;
      var right = hexagon.right;
      var bottom = hexagon.bottom;
      
  • Width
    var width = hexagon.width;
    
  • Height
    var width = hexagon.height;
    
  • Lines around hexagon
    var edge01 = hexagon.getLineA();
    var edge12 = hexagon.getLineB();
    var edge23 = hexagon.getLineC();
    var edge34 = hexagon.getLineD();
    var edge45 = hexagon.getLineE();
    var edge50 = hexagon.getLineF();
    // var out = hexagon.getLineF(out);
    
    or
    var edge = hexagon.getEdge(edgeIdx);
    // var out = hexagon.getEdge(edgeIdx, out);
    

Point(s) & shape

See Polygon shape.