Bounds checking - best way « cocos2d for iPhone

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

Bounds checking - best way

(11 posts) (4 voices)

Started 2 years ago by SpicyNikNaks
Latest reply from chrisco

Tags:

SpicyNikNaks
Member

Hi,

I have multiple sprites on a layer and I want to be able to drag them within a rectangle on the screen, but I don't want them to be able to be dragged outside of the rectangle.

I have tried several ways and I either get the sprites stuck at the boundary without being able to be dragged again or they can sometimes be dragged through the boundary. I have also checked all of the cocos2d samples, but I can't see any that have the same behavior as what I am trying to achieve.

Has anyone done something like this already ?

Any suggestions would be appreciated.

Thanks.

Posted 2 years ago #
chrisco
Member

Without seeing code, my guess is that you're close in the implementation you have now. When you determine that the collision with the bounds has occurred, are you moving the sprite away from the bounds slightly so that the collision isn't constantly occurring (causing the sprite to stick)? As far as passing through the bounds, you may not be checking often enough. You'll probably want to perform the check outside of your -ccTouchesMoved method (assuming that's where you're doing it now) - maybe in a scheduled method that checks every couple of frames?

Box2D could probably help with this as well, but may be a little to complex for something like this.

If you can post the relevant code, it might help. I may be (and quite possibly am) wrong about all of this :P

Posted 2 years ago #
shazbox
Member

Here is some code from my touchesMoved function. We have a background which is 3x3 times the size of the screen, so I had to put this in to stop it from going too far.

Just realized I had to change X/Y because I didn't realize the coord systems were different when I started this code lol

//get current position of layer
CGPoint newPos = CGPointMake([self position].x, [self position].y);

//if newY isn't too high/too low, change the y position
if(newY >= (0 - bg.texture.contentSize.width) && newY <= bg.texture.contentSize.width){
newPos.x = newY;
}

//if newX isn't too far right/left, change the x position
if(newX <= bg.texture.contentSize.height && newX >= (0 - bg.texture.contentSize.height)){
newPos.y = newX;
}

//update layer position
[self setPosition:newPos];

Posted 2 years ago #
chrisco
Member

Just a shot in the dark, 'cause I'm running out the door, but what if you remove the = sign from each condition?

edit - actually that probably won't make a difference - sorry for talking :P

Posted 2 years ago #
Lam
Member

From the logic of the code, you are doing a check if a point is inside the bg rect.

Don't you want to include the sprite content size in that check as well?

So you want to check position 'newPos'+spritesize is inside the bg rect 'bgr'.

First you need the 2 corners/extents of the sprite rect {bottomleft and topright}.

for example bottomleft of the newPosition of the sprite assuming an anchor of 0.5,0.5f.
sprite.bl = ccp(newPos.x - self.contentSize.width/2, newPos.y - self.contentSize.height/2)

i'll let you figure out the topright

Now i guess we assume that the bg 0,0 is bottom left and (bg.texture.contentsize.width, bg.text......height) is the topright. Let it be bg.bl and bg.tr

Then it's 2 checks to make sure the rectangle is inside the bg rectangle:

1. bg.bl <= sprite.bl
2. bg.tr >= sprite.tr

I hope that clarifies.

If you want to be really fancy and have collision detection for rotated sprites, look at OBB (Oriented Bounding Box) algorithm for some clues on creating an axis aligned box from an OBB

This website may help understanding OBB's
http://www.flipcode.com/archives/2D_OBB_Intersection.shtml

Posted 2 years ago #
shazbox
Member

That code works for what I want, I was just poting it as an example to help.

I guess I should have put that there are 9 background sprites. Originally we only had one, so it was called bg. Then we added in bg2-bg9.

So That checks if the layer (which starts at position (0,0)) is about to go past -(screen width) or past -(screen height) basically for the bottom and left. Since bg sprite is same size as the iphone screen. That way since there are 3x3 "bg" images, it can only go completely left by the width of one of them, which won't allow it past the point where they end. It also makes it so it cant go past screen width or height for the right and top bounds.

In that way it never goes beyond the 3x3 screen size images.

Posted 2 years ago #
Lam
Member

@shazbox
Oh whoops confusion on my part :)

Posted 2 years ago #
SpicyNikNaks
Member

Thanks for the suggestions guys, that has confirmed that I am probably going about it the right way.

I am just new to cocos2d and objective-c so my lack of experience was causing me to doubt myself.

Incase anyone else is in the same position, what I eventually came up with was a combination of what was suggested above.
@chrisco I took your tip of moving the sprite away from the boundary I was checking and that stopped it getting "stuck". Although I still had the problem of being able to drag it really quickly and "break" through the boundary, so I added an extra check which seems to have prevented this issue.

I would still appreciate if anyone can feedback on the code below to say if they see anything wrong with the way I am doing this.

This is just a modified version of the ccTouchMoved function from the TouchesTest sample which comes with cocos2d.

- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
// If it weren't for the TouchDispatcher, you would need to keep a reference
// to the touch from touchBegan and check that the current touch is the same
// as that one.
// Actually, it would be even more complicated since in the Cocos dispatcher
// you get NSSets instead of 1 UITouch, so you'd need to loop through the set
// in each touchXXX method.

NSAssert(state == kPackingItemStateGrabbed, @"PackinItem - Unexpected state!");

CGPoint touchPoint = [touch locationInView:[touch view]];
touchPoint = [[Director sharedDirector] convertCoordinate:touchPoint];

CGSize s = [self.texture contentSize];

NSLog(@"X:%f Y:%f",self.position.x, self.position.y);

// Check to see if sprite is to the right of the defined boundary
if ((self.position.x - (s.width / 2)) > kcaseBoundaryLeft)
{
self.position = CGPointMake(touchPoint.x, touchPoint.y);
}

// If sprite for any reason is beyond the left boundary then force it back to the right side
if ((self.position.x - (s.width / 2)) <= kcaseBoundaryLeft)
{
self.position = CGPointMake(kcaseBoundaryLeft + (s.width / 2) +1, touchPoint.y);
}

}

This seems to work for my boundary requirements and I will add boundary checking for the other three sides of the rectangle which I want to constrain the sprites to.

Posted 2 years ago #
chrisco
Member
I see how you're going about this - I think the main issue (and the reason why you have to perform a second check) is that you're checking against the sprite's current position and not the proposed position (which is touchPoint). So while the sprite may not be over the boundary, the new position will put it there.

The code below checks for both the right and left boundaries. It would be pretty easy to adjust this for your top and bottom boundaries as well (note: this was typed pretty quickly and might contain errors - I think the idea is right though):
```
float halfWidth = s.width / 2;

// check to see if the touchPoint is to the left of the left boundary
if ((touchPoint.x - halfWidth) < kcaseBoundaryLeft) {
   self.position.x = kcaseBoundaryLeft + halfWidth;

// if it's not to left of the left boundary, check to see if it's to the right of the right boundary
} else if ((touchPoint.x + halfWidth) > kcaseBoundaryRight) {
    self.position.x =   kcaseBoundaryRight - halfWidth;

//if it's not too far right or left, the just use the touchPosition
} else {
    self.position.x = touchPosition.x;
}
```
Just repeat that for your top and bottom boundaries, assigning the result to self.position.y (and of course, changing the other variables).

Hope that helps :)

Chris
Posted 2 years ago #
SpicyNikNaks
Member

Thanks Chris,

I got it working but your solution looked far more elegant so I did it your way and it works great. Many thanks for your help.

Below is the updated code just for the benefit of anyone else who may be trying to do something similar - hopefully save someone some time.

At the top of my dot-m file I have some constants defined.

#define kcaseBoundaryLeft 10
#define kcaseBoundaryBottom 10
#define kcaseBoundaryRight 400
#define kcaseBoundaryTop 280

then in the ccTouchMoved function I now have...

- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{

NSAssert(state == kPackingItemStateGrabbed, @"PackinItem - Unexpected state!");

CGPoint touchPoint = [touch locationInView:[touch view]];
touchPoint = [[Director sharedDirector] convertCoordinate:touchPoint];

CGSize s = [self.texture contentSize];

float halfWidth = s.width / 2; // Half the width of the sprite
float halfHeight = s.height / 2; // Half the height of the sprite
int newX = touchPoint.x; // This stores our new x position
int newY = touchPoint.y; // This stores our new y position

NSLog(@"X:%f Y:%f",self.position.x, self.position.y);

// check to see if the touchPoint is to the left of the left boundary
if ((touchPoint.x - halfWidth) < kcaseBoundaryLeft) {
newX = kcaseBoundaryLeft + halfWidth;

// if it's not to left of the left boundary, check to see if it's to the right of the right boundary
} else if ((touchPoint.x + halfWidth) > kcaseBoundaryRight) {
newX = kcaseBoundaryRight - halfWidth;

//if it's not too far right or left, the just use the touchPosition
} else {
newX = touchPoint.x;
}

// check to see if the touchPoint is below the bottom boundary
if ((touchPoint.y - halfHeight) < kcaseBoundaryBottom) {
newY = kcaseBoundaryBottom + halfHeight;

// if it's not below the top boundary, check to see if it's above the top boundary
} else if ((touchPoint.y + halfHeight) > kcaseBoundaryTop) {
newY = kcaseBoundaryTop - halfHeight;

//if it's not too far above or below, then just use the touchPosition
} else {
newY = touchPoint.y;
}

self.position = CGPointMake(newX, newY);

}

Posted 2 years ago #
chrisco
Member

Cool - glad I could help :)

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.