Showing cropped image

[Trance]

What property do I need to use to crop an image? I feel I must be missing something utterly obvious, but without any docs I'm a bit lost. I adding an image from a loaded texture thus: -

this.add.image(x, y, image);

The image is (say) 64 x 64 pixels, but I want to only display 32 x 32. Whatever property I set, it either has no effect at all, or it scales the image instead of cropping it.

Could someone point me to the right property please?

[Lizard]

I'm also faced with same problem. I did not find anything similar with cropRect from phaser 2 in phaser 3.

But same mechanic which cropRect used for phaser 2 works well in phaser 3. So in your case follow code will work.

var image = this.add.image(x, y, image);

image.frame.height = 32;

image.frame.width = 32;

image.frame.cutHeight = 32;

image.frame.cutWidth = 32;

image.frame.updateUVs();

also there is cutX and cutY if you need some offset.

[Trance]

Hi Lizard - thanks for the info, that's great!

I'm guessing the Frame belongs to the Texture, rather than the instance of the image I'm creating? Because this method seems to work fine for the first copy of the image I create, but a second copy with a different size messes things up - it's changing the first image to the dimensions of the second (code snippet pasted below).

Any idea how I might go about making this work with multiple copies of the image?

    var image1;
    var image2;

    image1 = this.add.image(400, 300, 'scroll');
    image1.frame.height = 200;
    image1.frame.width = 200;
    image1.frame.cutHeight = 200;
    image1.frame.cutWidth = 200;
    image1.frame.updateUVs();

    image2 = this.add.image(700, 300, 'scroll');
    image2.frame.height = 32;
    image2.frame.width = 32;
    image2.frame.cutHeight = 32;
    image2.frame.cutWidth = 32;
    image2.frame.updateUVs();

 

[Lizard]

Try way with adding frames to texture. In this case you will be able to use needed frames in needed places.

this.textures.list.NAMEOFIMAGE.add(index, 0, startX, startY, width, height);

index - number of frame

startX and startY - coordinates for upper left corner cropping rectangle

width and height - size of cropping rectangle

You can easily wrap it into cycle and crop  your spritesheet to frames.

 

Example is on codepen, best regards!

[phaserlover]

A few things:

 

 =- Changing cutY, will change the position, I can't find anyway to fix it without manual offset

 - you can only change one of the images, if you need more than one you need to clone the frame