GL_SCISSOR_TEST for very simple masking of SPImages

(16 posts) (6 voices)

Started 1 year ago by Ron
Latest reply from Daniel

Tags:

Hi all,

For my own project, I found it useful to create a SPCroppedImage which allows me to arbitrarily crop an image on my iPhone/iPad stage. You specify a rectangle of coordinates relative to the bottom left corner of your iPhone/iPad, and it will crop your image to that rect. You can then move the image around and it will respect the mask.

Here is the code:

@interface SPCroppedImage : SPImage {
@protected
    int mCropX; // x,y are offsets from the lower left physical corner of the iPhone
    int mCropY;
    int mCropW;
    int mCropH;
}
 
@property (nonatomic, assign) CGRect cropRect;
 
@end

#import "SPCroppedImage.h"
 
@implementation SPCroppedImage
 
- (void)render:(SPRenderSupport *)support {
    static float texCoords[8];
    static uint colors[4];
    float alpha = self.alpha;
 
    [support bindTexture:mTexture];
    [mTexture adjustTextureCoordinates:mTexCoords saveAtTarget:texCoords numVertices:4];          
 
    for (int i=0; i<4; ++i)
        colors[i] = [support convertColor:mVertexColors[i] alpha:alpha];    
 
    glEnable(GL_SCISSOR_TEST);
    glScissor(mCropX, mCropY, mCropW, mCropH);
 
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
 
    glTexCoordPointer(2, GL_FLOAT, 0, texCoords);
    glVertexPointer(2, GL_FLOAT, 0, mVertexCoords);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);
 
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_VERTEX_ARRAY);
    glDisableClientState(GL_COLOR_ARRAY);    
 
    glDisable(GL_SCISSOR_TEST);
 
    // Rendering was tested with vertex buffers, too -- but for simple quads and images like these,
    // the overhead seems to outweigh the benefit. The "glDrawArrays"-approach is faster here.
}
 
- (CGRect)cropRect {
    return CGRectMake(mCropX, mCropY, mCropW, mCropH);
}
 
- (void)setCropRect:(CGRect)rect {
    mCropX = rect.origin.x;
    mCropY = rect.origin.y;
    mCropW = rect.size.width;
    mCropH = rect.size.height;
}
 
@end

Of course, you can do this to any other class that has a method called:
- (void)render:(SPRenderSupport *)support

See SPRendering.m.

If people find cool uses for this, perhaps Daniel can add it to future versions of Sparrow.

Thanks,
Ron

Posted 1 year ago #

Ron
Moderator
I forgot to highlight the relevant lines. The render method is almost exactly the same as SPImage's, except for these three lines:
glEnable(GL_SCISSOR_TEST); glScissor(mCropX, mCropY, mCropW, mCropH); .... glDisable(GL_SCISSOR_TEST);
Posted 1 year ago #

baike
Moderator

Thanks, ronyeh!

Are there any side effects if you shorten it to this?

- (void)render:(SPRenderSupport *)support {
   glEnable(GL_SCISSOR_TEST);
   glScissor(mCropX, mCropY, mCropW, mCropH);
   [super render:support];
   glDisable(GL_SCISSOR_TEST);
}

Posted 1 year ago #

Shilo
Master Sparrow

This looks very neat, thank you!

If you have time, it'd be nice if you could add it to the Sparrow wiki as an extension (SXCroppedImage).

I haven't tested this out, but don't forget the imports.

SXCroppedImage.h:

#import <Foundation/Foundation.h>
#import "SPImage.h"
 
@interface SXCroppedImage : SPImage {
...

SXCroppedImage.m:

#import "SXCroppedImage.h"
#import "SPRenderSupport.h"
#import "SPTexture.h"
#import <OpenGLES/EAGL.h>
#import <OpenGLES/ES1/gl.h>
#import <OpenGLES/ES1/glext.h>
 
@implementation SXCroppedImage
...

Posted 1 year ago #

Ron
Moderator
@baike, thanks for the post. Of course it makes sense to call the super.

I've revised the code to look like:
- (void)render:(SPRenderSupport *)support { glEnable(GL_SCISSOR_TEST); glScissor(mCropX, mCropY, mCropW, mCropH); [super render:support]; glDisable(GL_SCISSOR_TEST); }
Will post it onto the wiki.

@Shilo: I didn't need any additional imports. I referenced the Sparrow project from my project... perhaps that's sufficient?
Posted 1 year ago #
Ron
Moderator

http://wiki.sparrow-framework.org/extensions/sxcroppedimage

Posted 1 year ago #

Shilo
Master Sparrow

That might be fine if you add the extension directly into the Sparrow framework.

At the moment, if I add the class directly into a Sparrow project and test your code "as is". I get 12 warnings, and 14 errors.

After adding the needed imports, I get:

warning: incompatible Objective-C types initializing 'struct SPImage *', expected 'struct SPCroppedImage *'

So then I cast the initialization like so:

	SPCroppedImage *image = (SPCroppedImage *)[SPCroppedImage imageWithContentsOfFile:@"image.png"];
	image.cropRect = CGRectMake(0, 0, image.width, image.height);
	[self addChild:image];

Now I get a crash/error message:

 *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[SPImage setCropRect:]: unrecognized selector sent to instance 0x605ebf0'

Ok, no biggy. I then add the initialization methods to your extension.

SPCroppedImage.h:

- (id)initWithTexture:(SPTexture *)texture;
- (id)initWithContentsOfFile:(NSString *)path;
+ (SPCroppedImage *)imageWithTexture:(SPTexture *)texture;
+ (SPCroppedImage *)imageWithContentsOfFile:(NSString *)path;

SPCroppedImage.m:

- (id)initWithTexture:(SPTexture *)texture {
	self = [super initWithTexture:texture];
	return self;
}
 
- (id)initWithContentsOfFile:(NSString *)path {
	return [self initWithTexture:[SPTexture textureWithContentsOfFile:path]];
}
 
+ (SPCroppedImage *)imageWithTexture:(SPTexture *)texture {
	return [[[SPCroppedImage alloc] initWithTexture:texture] autorelease];
}
 
+ (SPCroppedImage *)imageWithContentsOfFile:(NSString *)path {
	return [[[SPCroppedImage alloc] initWithContentsOfFile:path] autorelease];
}

So now that I got that all ironed out. Here is what I added:
- needed imports (even if it's just for precaution)
- properties to access crop values seperately
- initialization methods to return the right class and set the initialize crop values
- flipped the y axis so it crops from the top-left

SXCroppedImage.h:

#import <Foundation/Foundation.h>
#import "SPImage.h"
@class SPTexture;
 
@interface SXCroppedImage : SPImage {
  @protected
    int mCropX;
    int mCropY;
    int mCropW;
    int mCropH;
}
 
@property (nonatomic, assign) CGRect cropRect;
@property (nonatomic, assign) int cropX;
@property (nonatomic, assign) int cropY;
@property (nonatomic, assign) int cropWidth;
@property (nonatomic, assign) int cropHeight;
 
- (id)initWithTexture:(SPTexture *)texture;
- (id)initWithContentsOfFile:(NSString *)path;
+ (SXCroppedImage *)imageWithTexture:(SPTexture *)texture;
+ (SXCroppedImage *)imageWithContentsOfFile:(NSString *)path;
@end

SXCroppedImage.m:

#import "SXCroppedImage.h"
#import "SPRenderSupport.h"
#import "SPTexture.h"
#import <OpenGLES/EAGL.h>
#import <OpenGLES/ES1/gl.h>
#import <OpenGLES/ES1/glext.h>
 
@implementation SXCroppedImage
 
@synthesize cropX = mCropX;
@synthesize cropY = mCropY;
@synthesize cropWidth = mCropW;
@synthesize cropHeight = mCropH;
 
- (id)initWithTexture:(SPTexture *)texture {
	if (self = [super initWithTexture:texture]) {
		CGSize screenSize = [UIScreen mainScreen].bounds.size;
		mCropX = 0;
		mCropY = 0;
		mCropW = screenSize.width;
		mCropH = screenSize.height;
	}
	return self;
}
 
- (id)initWithContentsOfFile:(NSString *)path {
	return [self initWithTexture:[SPTexture textureWithContentsOfFile:path]];
}
 
+ (SXCroppedImage *)imageWithTexture:(SPTexture *)texture {
	return [[[SXCroppedImage alloc] initWithTexture:texture] autorelease];
}
 
+ (SXCroppedImage *)imageWithContentsOfFile:(NSString *)path {
	return [[[SXCroppedImage alloc] initWithContentsOfFile:path] autorelease];
}
 
- (void)render:(SPRenderSupport *)support {
	int screenHeight = [UIScreen mainScreen].bounds.size.height;
	glEnable(GL_SCISSOR_TEST);
	glScissor(mCropX, screenHeight-mCropH, mCropW, screenHeight-mCropY);
	[super render:support];
	glDisable(GL_SCISSOR_TEST);
}
 
- (CGRect)cropRect {
    return CGRectMake(mCropX, mCropY, mCropW, mCropH);
}
 
- (void)setCropRect:(CGRect)rect {
    mCropX = rect.origin.x;
    mCropY = rect.origin.y;
    mCropW = rect.size.width;
    mCropH = rect.size.height;
}
 
@end

It'd be a honor if you could add these changes into your class/wiki.

Posted 1 year ago #

Ron
Moderator

Woah, nice. Well, since it IS a wiki, I don't mind if the extension page is treated Wikipedia style. If you want, you can replace my existing code with your updated class, and add yourself as an author.

Best,
Ron

Posted 1 year ago #
Ron
Moderator

Although, if we're gonna optimize this sucker... would it be more efficient if we precomputed the screenHeight, screenHeight-mCropH, and screenHeight-mCropY, so that we don't have to do math on every call to render?

Posted 1 year ago #
Shilo
Master Sparrow

Yes, that optimization was the first thing I thought about. Just figured id keep it simple and leave it up to you to add a new instance variable if you would like. I'll go ahead and make those changes.

Posted 1 year ago #
j_talevska
Member

Hey, first I wanna say thanks to all involved in the sparrow development and also to everyone contributing with extensions. This framework is awesome.
I am using this extension to clip an image, but I need a circle clip.
I read that I can not implement this with glScissor, turns out you can only clip rects with it. I was wondering if there is some other simple solution?

Thanks to all

Posted 3 months ago #
borrrden
Moderator

That depends on whether or not the clipped object is moving.

Posted 3 months ago #
j_talevska
Member

The object is not moving, but I will need to use Tween to make the circle wider, like a lens effect, I got this working with the SXSimpleClippedImage extension, but with a square shape which is not what I need...
This extension uses setTexCoords to clip an image.
Still looking for a solution on how to clip a circle.
Thanks

Posted 3 months ago #
borrrden
Moderator

In that case, no, there is not an easy solution. In regular OpenGL you could use a stencil test, but that feature is omitted in OpenGL ES 1.x. If you need an animated mask, there is not an easy solution. The solution would be much easier in OpenGL ES 2.0, but that version of Sparrow has yet to be released.

Posted 3 months ago #
j_talevska
Member

Thanks for the reply, what I did was create an SPMovieClip on top of my SPImage to simulate the effect, since the top image is always the same.
Thanks

Posted 3 months ago #
Daniel
Primary Feather

I'm glad you found a solution! And thanks for the nice words about Sparrow! =)

Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.

Sparrow Forum

GL_SCISSOR_TEST for very simple masking of SPImages

Reply