Rectangle definitely smaller than image but: Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]

[Noaml1]

So i'm trying to crop an image and it isnt working - i keep getting 

Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]

 

But this isnt making sense to me because this is how making the rectangle:

 var currentHeart: Phaser.Image = this.heartFills[i][this.heartFills[i].length - 1];                this.cropRects[i] = new Phaser.Rectangle(currentHeart.x,currentHeart.y, currentHeart.width-10,currentHeart.height-10);                currentHeart.crop(this.cropRects[i]);                currentHeart.position.y = 56 - currentHeart.height;

Literally telling it "just go 10 pixels smaller than the image itself in both directions".

My end goal is to the x be currentHeart.x and my y be a fraction of the height based on the players health, but right now I can;t get it to crop and i dont understand why.
 

 

[XekeDeath]

Cropping a sprite is not something I have done, but have you tried this:

this.cropRects[i] = new Phaser.Rectangle(0, 0, currentHeart.width-10,currentHeart.height-10);

[Noaml1]

I have and that causes the image to just not be displayed...although no error is thrown haha - but then this would be a problem if i wanted to crop the left side anyway so idoubt that would be it.

 

I noticed something with the phaser code that seems off to me though, the error is thrown here:

  if(frame.x + frame.width > this.baseTexture.width  || frame.y + frame.height > this.baseTexture.height)    {        throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);    }

but then, what if the x of the frame (which is the passed in rectangle) is say, 100 but the width of the texture is 50
Maybe im not correctly interpreting the variables but shouldnt it be 

  if(frame.x + frame.width > this.baseTexture.width + this.baseTexture.x || frame.y + frame.height > this.baseTexture.height +this.baseTexture.y)    {        throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);    }

?

[XekeDeath]

Fairly certain a baseTexture doesn't have x/y properties, as it is just a texture, not an object to be directly displayed.

All cropping calculations are from the top left: 0,0.

 

So to crop out the left part of an image that is 100 wide, you can crop x:10, width: 90 and not exceed the width of the base texture.

The frame variable is the rectangle area that you want to have left over after cropping, it needs to fit inside the base texture.

 

 

One thing I heard about cropping is that it will affect all sprites using the same baseTexture.

If you have 3 hearts and crop one, then all 3 will be cropped.

What I did when I used hearts to represent HP was have a Tiling Sprite, and change the width based on how much HP was left.

With 1hp being 1 heart, 3 hp meant I made the  width of the tiling sprite 3 hearts wide, and it worked fine.

[Noaml1]

This helped a lot - knowing that cropping one effects everyone using the texture and knowing where 0,0 is placed at explained a lot.

I seem to still be having issues though, if i set the x,y to something other than 0,0 like this:

var currentHeart: Phaser.Image = this.heartFills[i][this.heartFills[i].length - 1];                var height: number = 55 * KillableInGame.players[i].hp / 1000;                //56 is height of picture                this.cropRects[i] = new Phaser.Rectangle(0,56-height,currentHeart.width,height);                currentHeart.crop(null);                currentHeart.crop(this.cropRects[i]);

the image is cropped and moved and i dont understand why.
Im trying to get it to drain from top to bottom.

[XekeDeath]

My assumption here would be that the y value of the final sprite will also need to be adjusted.

When you crop the sprite from 56x56 to 56x26, you change the height of the sprite.

It doesn't remain 56x56 with a transparent rectangle at the top, it becomes smaller.

Therefore to keep the bottom of the sprite in the same place, you need to shift the top down.