Question

The question I am about to ask could be somewhat challenging. I will try to make this as clear and cohesive as possible.

I am currently making a game, in which I have a ‘laser ring,’ as shown here:

This laser ring, when prompted, will fire a ‘grappling hook’ which is simply the image shown below. This image’s frame.width property is adjusted to make it fire (lengthen) and retract (shorten.) It starts at a width of 0, and as the frames progress, it lengthens until reaching the desired point.

This grappling hook, when fired, should line up with the ring so that they appear to be one item. Refer to the image below for clarity:

*Note that the grappling hook’s width changes almost every frame, so a constant width cannot be assumed.

Something else to note is that, for reasons that are difficult to explain, I can only access the frame.center property of the grappling hook and not the frame.origin property.

So, my question to you all is this: How can I, accessing only the frame.center.x and frame.center.y properties of the grappling hook, place it around the laser ring in such a way that it appears to be seamlessly extending from the ring as shown in the above image – presumably calculated based on the angle and width of the grappling hook at any given frame?

Any help is immensely appreciated.

Answer 1

OK, I’ve done this exact same thing in my own app.

The trick I did to make it easier was to have a function to calculate the “unitVector” of the line.

i.e. the vector change in the line based on a line length of 1.

It just uses simple pythagorus…

- (CGSize)unitVectorFromPoint:(CGPoint)start toPoint:(CGPoint)end
{
    //distance between start an end
    float dX = end.x - start.x;
    float dY = end.y - start.y;
    float distance = sqrtf(dX * dX + dY * dY);  // simple pythagorus

    //unit vector is just the difference divided by the distance
    CGSize unitVector = CGSizeMake(dX/distance, dY/distance);

    return unitVector;
}

Note… it doesn’t matter which way round the start and end are as squaring the numbers will only give positive values.

Now you can use this vector to get to any point along the line between the two points (centre of the circle and target).

So, the start of the line is …

CGPoint center = // center of circle
CGPoint target = // target
float radius = //radius of circle

float dX = center.x - target.x;
float dY = center.y - target.y;

float distance = sqrtf(dX * dX + dY * dY);

CGSize unitVector = [self unitVectorFromPoint:center toPoint:target];

CGPoint startOfLaser = CGPointMake(center.x + unitVector.x * radius, center.y + unitVector.y * radius).

CGPoint midPointOfLaser = CGPointMake(center.x + unitVecotr.x * distance * 0.5, center.y + unitVector.y * distance * 0.5);

This just multiplies the unit vector by how far you want to go (radius) to get to the point on the line at that distance.

Hope this helps 😀

If you want the mid point between the two points then you just need to change “radius” to be the distance that you want to calculate and it will give you the mid point. (and so on).