# How to programmatically cut a sprite?

**URL:** <https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255>\
**Category:** Phaser 3\
**Created:** [February 15, 2022, 5:53pm UTC](https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255 "2022-02-15T17:53:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jamyth](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jamyth/32/6228_2.png) [@Jamyth](https://phaser.discourse.group/u/Jamyth)\
**Post date:** [February 15, 2022, 5:53pm UTC](https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255/1 "2022-02-15T17:53:27Z")

</div>

# 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?

```ts
// 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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e3c8146116445bc4485fe96091c803e60a12efae.png)  
I am watching tutorials on Youtube about Game development, I found a great resource but it’s in lua, not js.  
[Youtube Link](https://youtu.be/pGpn2YMXtdg)

# Solution:

Thanks @samme for the answer.

```ts
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');
    }
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 16, 2022, 1:17am UTC](https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255/2 "2022-02-16T01:17:20Z")

</div>

👋

You should use `load.image()` as usual and then [Texture#add()](https://newdocs.phaser.io/docs/3.55.2/Phaser.Textures.Texture#add). I don’t have an example at hand.

---

<div class="post-metadata">

**Author:** ![Jamyth](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jamyth/32/6228_2.png) [@Jamyth](https://phaser.discourse.group/u/Jamyth)\
**Post date:** [February 16, 2022, 7:11am UTC](https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255/3 "2022-02-16T07:11:53Z")

</div>

I am using TypeScript with class extends Scene approach.

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 16, 2022, 3:44pm UTC](https://phaser.discourse.group/t/how-to-programmatically-cut-a-sprite/11255/4 "2022-02-16T15:44:43Z")

</div>

```nohighlight
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);
}

```