Sign in to follow this  

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?

Share this post

Link to post
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.

Share this post

Link to post
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;


Share this post

Link to post
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!

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.