Create a dotted line in phaser

Phaser 3
1

Hey
Is there any way to create a dashed/dotted line in phaser ?

2

Not exactly, but you could do it in Graphics or CanvasTexture.

3

Hey @Srishti

I found a way to do this using Graphics.

const config = {
   type: Phaser.WEBGL,
   width: 800,
   height: 600,
   backgroundColor: '#2d2d2d',
   parent: 'phaser-example',
   scene: {
       preload: preload,
       create: create
   }
}; 
const game = new Phaser.Game(config); function preload ()
{
}  function create ()
{
   let graphics = this.add.graphics();
      graphics.lineStyle(5, 0xffffff, 1);
      graphics.beginPath();
      let dash_length = 10;
      let gap_length = 10; /* staring point of your line */
      let x = 200;
      let y = 400;
      graphics.moveTo(x, y);
      while (x < 310) {
          x += dash_length;
           y += dash_length;
          graphics.lineTo(x, y);
          x += gap_length;
          y += gap_length;
          graphics.moveTo(x, y);
          graphics.closePath();
          graphics.strokePath();
      }
}

Hope that helps. :slight_smile: