Search the Community

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?