How to reverse Crop Rect across x-axis?

[mattbrand]

I am trying to make an hourglass graphic that disappears from the top down. I am doing it using a crop rect. But I don't know how to make the crop rect start from the top and move down - I can only get it to start from the bottom of the graphic and move upwards.

Here's the code that I use to create the graphic and the crop rect:

timeTop = game.add.sprite(0, 0, "sandTop");
timeTop.scale.setTo(scale.x, scale.y);
timeTop.x = gameWidth * 0.823;
timeTop.y = gameHeight * 0.01;
timeTop.cropEnabled = true;
var timeTopHeight = timeTop.height;
var timeTopCropRect = new Phaser.Rectangle(0, 0, timeTop.width / scale.x, timeTop.height / scale.y);
timeTop.crop(timeTopCropRect);

var percent = .5;
timeTopCropRect.height = timeTopHeight * percent / scale.y;
timeTop.crop(timeTopCropRect);

I have tried a few things already:

1. flipping the crop rect's scale.y:

timeTopCropRect.scale.y *= -1;

2. using a negative value for the crop rect height:

timeTopCropRect.height = -1 * timeTopHeight * percent / scale.y;

But neither give what I want. Flipping the y scale doesn't seem to do anything, and making the crop rect height negative makes the graphic appear above where it should be.

Anyone know how to do this? Or have another idea of how to mask a graphic to make it only partially display, and disappear from the top down?

[samme]

Try

timeTopCropRect.y = timeTopHeight * percent;
timeTop.updateCrop();

etc. (See http://phaser.io/examples/v2/sprites/dynamic-crop)

[mattbrand]

Thanks, but with that I get the same results, with the very top of the graphic showing, and the mask below it, instead of the mask being on the top.

[samme]

Aha, you have to move the sprite to keep it still: http://codepen.io/samme/pen/bBYBpq?editors=0010

[mattbrand]

That seems to work in that example, but I can't get it to work in mine. I think the difference is that the example has the sprite at 0,0. My example has the sprite in a place in the middle of the screen, and if I move the sprite to the position of the crop rect, weird things happen.

Anyone else know how to invert a crop rect?

Right now I can only make a sprite crop from right to left, and from down to up, not the opposites (left to right or up to down).

[samme]

http://codepen.io/samme/pen/QGavWG?editors=0010

[mattbrand]

OK thank you so much!

[mattbrand]

@samme I realized why mine doesn't work, using the same exact code. I have my sprite scaled (I'm making a game that uses 3 different resolution scales). When I scale the original sprite, the crop rect gets weird. I can't seem to get the shape correct. When I use this code:

 

meter = game.add.sprite(50, 50, "meterFill");
meter.origPosition = meter.position.clone();
cropRect = new Phaser.Rectangle(0, 0, meter.width, meter.height);
meter.crop(cropRect);

cropRect.x = 50;
meter.x = meter.origPosition.x + cropRect.x;
meter.updateCrop();

 

It correctly shows like the first screen shot.

But if I add this line:

 

meter.scale.setTo(scale.x, scale.y);

 

It shows up way too small (not the proper scale), and also does not show the right edge of the sprite properly. It looks rectangular. See screen shot #2.

[mattbrand]

Ah, I figured it out. I have to scale the crop rect by the inverse scale:

cropRect = new Phaser.Rectangle(0, 0, meter.width / scale.x, meter.height / scale.y);