Jump to content

Showing cropped image


Recommended Posts

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?

Link to comment
Share on other sites

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;


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

Link to comment
Share on other sites

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;

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


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 4 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...