xcode and sprite sheet, how to crop an image when multi images exist in one sheet

Question

I know this is done with web programming, can it be also do with xcode and obj-c? I have a sprite sheet with two instance of a button (normal and clicked). I know I can use the click function in obj-c but can I import one sprite sheet and crop a portion of the sprite sheet (like with websites) to crop the desired portion of the image in the one sprite sheet? If so what are the functions needed and do you have any examples you can point me to?

How are you planning to display your sprites? Are you putting them in a `UIImageView`, `CALayer`, or something else? — Sergey Kalinichenko, Feb 27 '12 at 19:27
UIImageView, but open to other ideas if possibly a better solution — Famic Tech, Feb 27 '12 at 22:35

Sergey Kalinichenko · Accepted Answer · 2013-11-28T23:46:55.243

0

You can use CALayer for this: it is lighter-weight than UIImageView, and very simple to use. The idea is based on examples from this post, and is lifted from a working project.

    // "sprites.png" is a 192x128 picture containing two rows of three 64x64 sprites each
    NSString *path = [[NSBundle mainBundle] pathForResource:@"sprites.png" ofType:nil];
    CGImageRef img = [UIImage imageWithContentsOfFile:path].CGImage;
    imgLayer = [CALayer layer];
    imgLayer.contents = (__bridge id)img;
    // Frame defines the position of your sprite inside your view
    imgLayer.frame = CGRectMake(horOffset, verOffset, 64, 64);
    imgLayer.bounds = CGRectMake(0, 0, 64, 64); // The size of an individual sprite
    // Pick the sprite from the top row, left column
    imgLayer.contentsRect = CGRectMake(0, 0, 1.0/3.0, 1.0/2.0);
    // Top row, middle column
    // imgLayer.contentsRect = CGRectMake(1.0/3, 0, 1.0/3.0, 1.0/2.0);
    // Top row, right column
    // imgLayer.contentsRect = CGRectMake(2.0/3, 0, 1.0/3.0, 1.0/2.0);
    // Bottom row, left column
    // imgLayer.contentsRect = CGRectMake(0, 1.0/2, 1.0/3.0, 1.0/2.0);
    // Bottom row, middle column
    // imgLayer.contentsRect = CGRectMake(1.0/3, 1.0/2, 1.0/3.0, 1.0/2.0);
    // Bottom row, right column
    // imgLayer.contentsRect = CGRectMake(2.0/3, 1.0/2, 1.0/3.0, 1.0/2.0);
    [self.layer addSublayer:imgLayer];

edited Nov 28 '13 at 23:46

answered Feb 28 '12 at 03:25

Sergey Kalinichenko

714,442
84
1,110
1,523

You sir have caused me a lot of pain with this code. `imgLayer.contentsRect` should not be `64,64` it should be `1,1`.. The code from your example link upon closer inspection works. – The Muffin Man Nov 28 '13 at 22:11
@LéMuffinManm Thank you very much for a great comment! Upon closer inspection I realized that I copy/pasted `contentsRect` twice - once in place of `bounds`, and once in its right spot. This is now fixed. Thanks! – Sergey Kalinichenko Nov 28 '13 at 23:48
Thanks, I got it working, but I must say, wow! this was sure difficult to wrap my head around. – The Muffin Man Nov 29 '13 at 02:18
It seems to me it would be more natural to specify the sprite size in `bounds` like we are and have `contentsRect` take a `CGSize` which would be the x,y position. The current way in which it works is that you're putting in a value in the width and height properties which are on a 0 - 1 scale vs points or pixels. – The Muffin Man Nov 29 '13 at 02:45
This helps explain why `contentsRect` takes 0 - 1 range. http://stackoverflow.com/questions/10117755/can-someone-explain-the-calayer-contentsrect-propertys-coordinate-system-to-me – The Muffin Man Nov 29 '13 at 02:53

xcode and sprite sheet, how to crop an image when multi images exist in one sheet

1 Answers1