CCSprite touches are triggered by the Spritesheet size, not the Sprite size

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

CCSprite touches are triggered by the Spritesheet size, not the Sprite size

(14 posts) (4 voices)

Started 2 years ago by carolight
Latest reply from carolight

Tags:

cpvdist

carolight
Member

Hi - I've been playing around for a few days now, and successfully got an animated MySprite (CCSprite) set up using a CCSpriteSheet (old AtlasSpriteManager, I think).

In my MySprite class, I am using the <CCTargetedTouchDelegate> protocol and successfully getting touches on my sprite. Just like in the TouchesTest example.

However, I think the touches are being triggered in my MySprite all the time, no matter where I click, because my CCSprite.rect.size.width & height are 512x512 (that's my Spritesheet size). My actual sprite is much smaller, about 80x60 pixels.

How should I get around this?

I'm using v0.99, as that seems to be the one that implements the Spritesheet plist stuff the best.

Thanks

Posted 2 years ago #
nash8114
Member

When you listen for touches you will receive all touches (unless some object swallows it before it gets to you)
You will have to manually figure out whether that touch is one you wish to respond to.
This is done by a hit test.
You do this by figuring out whether the touch is inside your sprite's rectangle. Don't forget to convert your touch to your node space first, or you may get weird results.

Posted 2 years ago #
nash8114
Member

To help you get on your way, you could use this:

-(BOOL)containsPoint:(CGPoint)point {
return CGRectContainsPoint(CGRectMake(self.position.x, self.position.y, self.contentSize.width, self.contentSize.height), point);
// return NO;
}

Though, don't forget that if you rotate your sprite or scale it, you must also do this to either the rect above (but rects don't rotate well ;-) ) or (easier) to the point you're testing against.

And again, you will probably want to convert the point to your local scope for this to work. Use [mySprite convertToNodeSpace:(CGPoint)worldPoint] or one of it's siblings.

Posted 2 years ago #
carolight
Member

Hmmm. Thanks. I guess I hoped that if I had half a dozen small MySprites then having the touch within the MySprite class would automatically pick up which MySprite was being clicked.

Like if I have half a dozen small subviews, and had the touch within the subview class, then the right subview would automatically be selected.

So my contentSize.width is 480 and the height is 320 (I guess because of the size of the Spritesheet.) If I change the sprite to just one frame not the spritesheet, the contentSize.width and height is correct (80x61).

Is it safe to use textureRect instead of contentSize? This appears to hold the correct size and width.

Posted 2 years ago #
georgeburns
Member

You can do what you are looking to do, even with a sprite sheet. I've got a test app with 100 balls that are 20px wide... each one is a touch delegate.

in the ball subclass touch began I have something like....
if (cpvdist(touchPoint, self.position) < 10.0 ) then its grabbed

I'm using Chipmunk... if you are not... then this cpvdist won't work for you... but you could use any distance/intersect function and it should work for you.

Posted 2 years ago #
nash8114
Member

I don't recall how things work in the older versions of cocos2d, thus I cannot answer your textureRect question. Have a look in the api documentation or look through the code. This should indicate where that comes from and if it's safe to use.

If you have half a dozen small sprites in the screen, and all of them are listening for touches, then they will all receive the touches. Each of them then has to test that against it's own touch area.

Seems like overhead? Perhaps. But otherwise, cocos2d will need to go through the list of sprites and see which one was touched.. and now, you have full control over your touch shape. You can make your shape larger, smaller or a different size than your sprite!

Sprites are always rectangular. Your touch surface might not be. Also, you may want to (in case of small sprites) make your touch surface larger than the image. Some people have thick fingers ;-)

Posted 2 years ago #
indy2005
Member

Hi,

Sorry to hijack. How does a sprite take ownership of the touch and stop any other sprites from taking action on it?

Regards

i

Posted 2 years ago #

carolight
Member

@indy2005

If you are doing ccTouchBegan in a MySprite class, then returning YES means that the touch is claimed by that sprite. Returning NO means that the next sprites will be checked. If no sprite claims the touch, then the layer's ccTouchesBegan will be performed.

I think my problems are all over :D - thanks. This is the code I used, if anyone else is having difficulties.

The problem:

Two sprites with animated spritesheets, created by zwopple with plists - how to detect the touch in the correct sprite area.

My answer (thanks to TouchesTest)

//This is in the CCLayer
-(id) init {
	if ( (self = [super init]) ) {
		self.isTouchEnabled = YES;
		CGSize s = [[CCDirector sharedDirector] winSize];
		[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"texture.plist"];
                //note - Anim00.png is the original name of the frame as held in the plist
		MySprite *sprite = [MySprite spriteWithSpriteFrameName:@"Anim00.png"];

		sprite.position = ccp(s.width/2, s.height/2);
		CCSpriteSheet *sheet = [CCSpriteSheet spriteSheetWithFile:@"texture.png" capacity:20];
		[sheet addChild:sprite];
		[self addChild:sheet];
		NSMutableArray *animFrames = [NSMutableArray array];
		for (int i = 0; i < 14; i++) {
		  CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
		  spriteFrameByName:[NSString stringWithFormat:@"Anim%02d.png", (i)]];
			[animFrames addObject:frame];
		}
		//repeat the above to set up the plist and spritesheet for the 2nd sprite
 }
	return self;
}

//This is in MySprite

- (void)onEnter
{
	[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
	[super onEnter];
}
- (void)onExit
{
	[[CCTouchDispatcher sharedDispatcher] removeDelegate:self];
	[super onExit];
}
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
	CGPoint touchPoint = [touch locationInView:[touch view]];
	touchPoint = [[CCDirector sharedDirector] convertToGL:touchPoint];
	CGRect spriteRect = CGRectMake((self.offsetPosition.x),
								   (self.offsetPosition.y),
								   self.textureRect.size.width,
								   self.textureRect.size.height);
	if (CGRectContainsPoint(spriteRect, touchPoint)) {
		NSLog(@"MySprite Click Successful");
		state = mySpriteTouched;
		return YES; //Swallows touch
	}
	return NO; //Checking will go on to next sprite, and end up in
				//ccTouchesBegan in the CCLayer, if nothing is swallowed.
}

Posted 2 years ago #

indy2005
Member

Hi,

Could I ask how this works. I am thinking - how is the sprites position being accounted for? When you refer to offsetPosition here - are you referring to the position of the sprite on the spritesheet. i.e. if spritesheet is 1000x1000 pixels and you are using a sprite from the sheet which is 50x50 starting at x=100, y=100 - offsetPosition.x = 100 and offsetPosition.y =100.

But if that sprite is positioned so it sits at GL position 200,200 - do you not need to add 200 to x and y??

Hope that isn't too confusing - just trying to understand if you have to account for a sprites physical position as well as the offset into the spritesheet.

Thanks!

i

Posted 1 year ago #
carolight
Member

This is quite a hard thing to explain, unless you have created a Zwoppel spritesheet.

So you load up your 30 frame animation, which is at the iphone 480x320 resolution, into zwoppel. Zwoppel then gets rid of the excess transparency, and makes a frame just containing your sprite.

In the plist file, Zwoppel records the x and y position of the frame on the spritesheet, the width and height of the frame on the spritesheet, and the originalWidth and Height of the frame animation.

The offsetX and offsetY are the offset of the frame on the original 480x320 transparency. Like if you have a small fish at the bottom right, then the offset might be 148,-63.5, which is its position on the screen.

So in answer to your question, if I haven't confused you more :), is that the Zwoppel plist file holds the sprites physical position as well as the offset on the spritesheet.

Posted 1 year ago #
indy2005
Member

Hi

Thanks. I think I understand the plist and Zwoppel format (just). I am just trying to understand if you have to take into account the sprites position on screen. i.e. if a sprite is at x=100,y=100 on screen, don't you have to take this physical screen placement of the sprite into consideration when detecting if the touch co-ordinate is touching a sprite!?

i.e. Zwoppel offset for sprite A: x=500, y=500, width = 20, height = 20.
Sprite A positioned physically at x=100,y=100.
Touch comes in at GL screen co-ordinate x=105,x=105.

This should be a hit for the sprite I think?

My interpretation of your code is that touchPoint is x=105,x=105 and your spriteRect is x=500,y=500,w=20,h=20.

So in my mind, this registers a miss?

Sorry for confusing things!?

Regards

i

Regards

i

Posted 1 year ago #
carolight
Member

Lol - you made me look at the internals :) - the great thing about this is that you don't have to understand how it all works, as long as you render out to 480x320 resolution. There's a fair bit of conversion between co-ordinate systems going on (because cocos2d and the iPhone screen use different co-ordinates) but cocos2d does all the conversion for me.

I don't really understand your example, because I would never have a x=500 y=500 on a 480x320 resolution screen.

I will give you my real life example that works for me.

I have a 30 frame animation of a small fish that I rendered out into 480x320 transparent pngs.

I don't care what the coordinates of the fish are, because when I play those pngs back as a 480x320 movie, the fish jumps.

Then I put the pngs through zwoppel, and it removes all the transparency, leaving just the small fish in 30 differing size squares on the spritesheet. zwoppel also creates a plist file for me. The offsetX and offsetY fields in the plist effectively give the sprite's position on the screen.

For the first frame, in the plist file, the originalWidth is 480 and the originalHeight is 320 and offsetX = 148 and offsetY = -63.5. This is the offset of the fish within the original size 480x320 png. (I think in this co-ordinate system, the 0,0 point is dead centre, so 148 is to the right of center, and -63.5 is below the center line.

Anyway, when my sprite is created, cocos2d does a coordinate conversion (I guess to GL coordinates), which changes the offsetX (= 148) to offsetPosition.x = 347 and offsetY (= -63.5) to offsetPosition.y = 66.

So my spriteRect is (347, 66, 81, 66), which puts a small fish in the bottom right quadrant of the screen.

The touchPoint position is converted to GL coordinates, so when I touch at 379,107, the touch is successful.

In summary, Cocos2d and zwoppel do all the work. The plist file holds the four coordinates necessary to extract and display the sprite in the right place:

The x,y of the sprite on the spritesheet
The width,height of the sprite on the spritesheet
The offsetx,y of the sprite on the original size
The width, height of the original size

So as long as your original size is the same size as the iPhone screen (480x320), then the cocos2d/zwoppel positioning will happen automatically.

Posted 1 year ago #
indy2005
Member

Hi,

THanks. Although I was thinking you can position sprites at 500,500 in the node space. If you have a huge background sprite /CCNode which is scrolling around. In this situation I was wondering of you have to take this into account.

Regards

i

Posted 1 year ago #
carolight
Member

I guess that you would have to work out what part of the sprite is actually displaying on the screen to receive touches. I haven't worked with big off-screens sprites, so I don't know how zwoppel would handle it. Sorry :(.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.