How to programmatically cut a sprite?

Phaser 3
1

Issue:

I have a image like below, I want to create paddles with different size, (blue, green, red, purple)
and each color has four sizes.

How can I correctly index the sprite?

// I tried to create a Frame, but don't know where to use it
for(let i = 0; i < 3; i++) {
  new Phaser.Textures.Frame(resource, `short-${i}`, 0, x, y, 32, 16
  new Phaser.Textures.Frame(resource, `medium-${i}`, 0, x + 32, y, 64, 16)
  new Phaser.Textures.Frame(resource, `long-${i}`, 0, x + 96, y, 96, 16)
  new Phaser.Textures.Frame(resource, `huge-${i}`, 0, x, y + 16, 128, 16)
}

sprite
I am watching tutorials on Youtube about Game development, I found a great resource but it’s in lua, not js.
Youtube Link

Solution:

Thanks @samme for the answer.

class MainScene extends Phaser.Scene {
    preload() {
       this.load.image('sprite', 'url');
       this.load.once('filecomplete-image-sprite', () => {
         this.textures.get('sprite').add('brick-blue', 0, 0, 0, 32, 16);
         this.textures.get('sprite').add('brick-green', 0, 128, 0, 32, 16); 
       })
    }

    create() {
       this.add.image(20, 20, 'sprite', 'brick-blue');
       this.add.image(52, 20, 'sprite', 'brick-green');
    }
}
2

:wave:

You should use load.image() as usual and then Texture#add(). I don’t have an example at hand.

3

I am using TypeScript with class extends Scene approach.

How can I do the Texture#add() ?
and where should I place the codes ?

4 
function preload() {
  this.load.image('balls', 'assets/sprites/balls.png');
  this.load.once('filecomplete-image-balls', () => {
    const tex = this.textures.get('balls');

    for (let i of [0, 1, 2, 3, 4]) {
      // add(name, sourceIndex, x, y, width, height)
      const frame = tex.add(i, 0, i * 17, 0, 17, 17);

      console.log(i, frame);
    }
  });
}

function create() {
  this.add.image(32, 32, 'balls', 0);
  this.add.image(64, 64, 'balls', 4);
}