How to get the angle between two points to draw an inclinated line sprite?

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

How to get the angle between two points to draw an inclinated line sprite?

(11 posts) (4 voices)

Started 1 year ago by karnak
Latest reply from spoolup

Tags:

Hello,

In my game prototype, once I touch the screen it adds a point, then I touch the screen again and it adds another point and then try to draw a line between these two points.

Note that the both the point (which I call "circle") and the line are sprites. So the line is being scaled according to the distance between the points.

The problem I'm facing is how to inclinate the line to connect it between the two points?
I'm trying the following:

-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
	CGPoint touchLocation = [touch locationInView: [touch view]];
	touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
	touchLocation = [self convertToNodeSpace:touchLocation]; 

	CCSprite *newCircle = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"circle"]];
	newCircle.position = ccp(touchLocation.x, touchLocation.y);
	newCircle.anchorPoint = ccp(0,0);

	if(openCircle != nil) {
		CCSprite *newLine = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"line"]];

		newLine.position = openCircle.position;
		newLine.anchorPoint = ccp(0,0);

		float deltaX = newCircle.position.x - openCircle.position.x;
		float deltaY = newCircle.position.y - openCircle.position.y;

		float distance = ccpDistance(openCircle.position, newCircle.position);

		NSLog(@"Angle: %f\n", CC_RADIANS_TO_DEGREES(ccpAngle(openCircle.position, newCircle.position)));
		[newLine setScaleX:distance];
		[newLine setRotation:CC_RADIANS_TO_DEGREES(ccpAngle(openCircle.position, newCircle.position))];

		[self addChild:newLine];

		openCircle = nil;
	} else {
		openCircle = newCircle;
	}

	[self addChild:newCircle];
}

I thought that:
[newLine setRotation:CC_RADIANS_TO_DEGREES(ccpAngle(openCircle.position, newCircle.position))]

would put the line sprite on the right inclination. But it just doesn't work at all.
Any tips / ideas?

Here is what I'm getting:

Thanks.

Posted 1 year ago #

karnak
Member

Managed to make it work (code below). But if I have 2 points in vertical, the line goes a little off the path.

Example image showing perfect connections and some off the circles:

Code for this almost working example:

-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
	CGPoint touchLocation = [touch locationInView: [touch view]];
	touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
	touchLocation = [self convertToNodeSpace:touchLocation]; 

	CCSprite *newCircle = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"circle"]];
	newCircle.position = ccp(touchLocation.x, touchLocation.y);
	newCircle.anchorPoint = ccp(0,0);

	if(openCircle != nil) {
		CCSprite *newLine = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"line"]];

		float degreesDif = 0.0;

		if(newCircle.position.x < openCircle.position.x) {
			newLine.position = ccp(newCircle.position.x + (newCircle.contentSize.width/2), newCircle.position.y);
			degreesDif += 90.0;
		} else {
			newLine.position = ccp(openCircle.position.x + (openCircle.contentSize.width/2), openCircle.position.y);
			degreesDif -= 90.0;
		}

		newLine.anchorPoint = ccp(0,0);

		float distance = ccpDistance(openCircle.position, newCircle.position);

		double Pi = 3.14159265;
		double radians, degrees;
		radians = atan2(newCircle.position.x - openCircle.position.x, newCircle.position.y -openCircle.position.y
							); //this grabs the radians for us
		degrees = ((radians * 180) / Pi) + degreesDif;

		NSLog(@"degrees: %f // openPosition: %f,%f // Line position: %f,%f\n\n", degrees,
			  openCircle.position.x, openCircle.position.y,
			  newLine.position.x, newLine.position.y);
		[newLine setScaleX:distance];
		[newLine setRotation:degrees];
		[self addChild:newLine];

		openCircle = nil;
	} else {
		openCircle = newCircle;
	}

	[self addChild:newCircle];
}

Posted 1 year ago #

karnak
Member

Anyone about the problem posted on the 2nd example?
Again, why does for some angles the line just doesn't perfect connect between the points and why does for most angles it does connect?

Example:
http://i29.tinypic.com/vo4dw5.png

Posted 1 year ago #

Mark Sawicki
Member

Karnak,

using your method, maybe like this:

the .h

#import "cocos2d.h"

// HelloWorld Layer
@interface HelloWorld : CCLayer
{
	CGPoint lastTouchPoint;
}

// returns a Scene that contains the HelloWorld as the only child
+(id) scene;

@end

the .m

// Import the interfaces
#import "HelloWorldScene.h"

// HelloWorld implementation
@implementation HelloWorld

+(id) scene
{
	// 'scene' is an autorelease object.
	CCScene *scene = [CCScene node];

	// 'layer' is an autorelease object.
	HelloWorld *layer = [HelloWorld node];

	// add layer as a child to scene
	[scene addChild: layer];

	// return the scene
	return scene;
}

// on "init" you need to initialize your instance
-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init] )) {
		self.isTouchEnabled = YES;
		lastTouchPoint = ccp(-1.0f,-1.0f);

	}
	return self;
}

// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
	// in case you have something to dealloc, do it in this method
	// in this particular example nothing needs to be released.
	// cocos2d will automatically release all the children (Label)

	// don't forget to call "super dealloc"
	[super dealloc];
}

 - (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	UITouch *touch = [touches anyObject];
	if( touch ) {
		CGPoint location = [touch locationInView: [touch view]];
		location = [[CCDirector sharedDirector] convertToGL:location];
		CCLOG(@"location(%f,%f)", location.x, location.y);

		if( CGPointEqualToPoint(lastTouchPoint, ccp(-1.0f,-1.0f) ) )
		{
			lastTouchPoint = ccp(location.x, location.y);
			CCSprite *circle = [CCSprite spriteWithFile:@"circle.png"];
			[circle setPosition:lastTouchPoint];
			[self addChild:circle];
			CCLOG(@"initial touchpoint set. to (%f,%f)", lastTouchPoint.x, lastTouchPoint.y);
		}
		else {
			CCLOG(@"lastTouchPoint is now(%f,%f), location is (%f,%f)", lastTouchPoint.x, lastTouchPoint.y, location.x, location.y);
			CGPoint diff = ccpSub(location, lastTouchPoint);
			float rads = atan2f( diff.y, diff.x);
			float degs = -CC_RADIANS_TO_DEGREES(rads);
			float dist = ccpDistance(lastTouchPoint, location);
			CCSprite *line = [CCSprite spriteWithFile:@"line.png"];
			[line setAnchorPoint:ccp(0.0f, 0.5f)];
			[line setPosition:lastTouchPoint];
			[line setScaleX:dist];
			[line setRotation: degs];
			[self addChild:line];

			CCSprite *circle = [CCSprite spriteWithFile:@"circle.png"];
			[circle setPosition:location];
			[self addChild:circle];

//			lastTouchPoint = ccp(location.x, location.y);
			lastTouchPoint = ccp(-1.0f,-1.0f);
		}

	}
}

@end

Does that work for you?

-Mark

Posted 1 year ago #

karnak
Member

Mark,

Amazing, thanks a lot!

I want independent lines: once I have 2 points, the line is drawn and then I may draw another line elsewhere with two brand new points (not connecting to the last one). But that was easy to implement with your code!

I noticed that what fixed the fact some of my lines were "off the road" was this:
[line setAnchorPoint:ccp(0.0f, 0.5f)];

I was using 0,0 and you 0, 0.5. But I can't understand why has this fixed my issue.
Any thoughts?

Thanks again!

Posted 1 year ago #
Mark Sawicki
Member

Karnak,

if x is the anchor point, the rotation is around the anchor point, so having the the anchor point at 0,0 is rotating around the bottom left corner of the sprite

ooo
ooo
xoo

rotating about 0,0.5, it's rotating around the mid point of the left side of the sprite, which is what you were wanting, to keep it 'centered' at the circle
ooo
xoo
ooo

HTH,

Mark

Posted 1 year ago #
karnak
Member

AnchorPoint was never clear for me, now it's been perfectly understood. Thanks a lot!

Posted 1 year ago #
spoolup
Member

this is a great post!
quick question for a small mod.
once i touch the screen twice and have my line drawn, how can i make the circles and line disappear when i lift my fingers off the screen?
thanks

Posted 1 year ago #
hm50
Member

in touchesEnded just remove them.

Posted 1 year ago #
spoolup
Member

how would i be able to use cctouchesEnded with pairs though?
I 'll need the pair with the line removed and not all the pairs....
ie both players have a pair but one lifts their fingers. i would like only this player's pair to clear not both players'
does it make sense?

Posted 1 year ago #
spoolup
Member

could someone point me in the direction of a sample?
i'm completely lost....

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.