Loading a cropped texture

[ylluminarious]

Hi all,

 

I'm having problems in a project where I load a portion of a texture. When I hover over the image, I want another image to load. However, when my cursor leaves the image, I want it the original texture to load again, but at its cropped size. I'm not really sure how to do this.

 

Here is a demo of what I'm talking about and here is its source code:

var game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {preload: preload, create: create, update: update});var block;function preload () {  game.load.image("logo", "phaser.png");  game.load.image("space_guy", "exocet_spaceman.png");}function create () {  bmd  = game.make.bitmapData(150, 150);  mask = game.make.bitmapData(500, 500);  mask.fill(50, 50, 50);    rect = new Phaser.Rectangle(100, 100, 100, 100);    bmd.alphaMask("space_guy", mask, rect);    sprite = game.add.sprite(10, 10, bmd);  game.physics.arcade.enable(sprite);  sprite.inputEnabled = true    over = function () {    sprite.loadTexture("logo");  };  out = function () {    sprite.loadTexture("space_guy");  };    sprite.events.onInputOver.add(over, this);  sprite.events.onInputOut.add(out, this);}function update () {}

As you can see in the demo, the spaceman sprite is originally cropped to a certain size. When you hover over it, another image loads in its place. The problem that I'm having is that I'm not sure how to put the cropped image back once the cursor goes off of the image, as the image is loaded but without its cropped size.

[Tom Atom]

Hi, If you need rectangular areas then use cropRect instead of alphaMask. There are three simple examples:

 

http://phaser.io/examples/v2/sprites/dynamic-crop

http://phaser.io/examples/v2/sprites/horizontal-crop

http://phaser.io/examples/v2/sprites/vertical-crop

 

 Also, I would not not use loadTexture. I would put two images into group and set their exists property to true or false...

 

 Finally, if you need some wild masking area (but not too wild ). Take a look at mask made with Phaser.Graphics: http://phaser.io/examples/v2/sprites/mask