在Cocos2d中由Sprites创建的两个点之间绘制线条 [英] Draw a Line Sprite Between Two Points made by Sprites in Cocos2d

问题描述

我一直在试图在sprite和Xcode上的鼠标事件之间绘制一个sprite线。

I've been trying to draw a sprite line between 2 points made by sprites with mouse events on Xcode.

我一直在按照论坛上的步骤在此链接中：
cocos2d论坛

I have been following the steps given on a forum in this link: cocos2d forums

但是当我运行代码，我得到了模拟器的所有路线。就像这样。

But when i run the code, i get the line going all the way of the simulator. just like this.

snapshot1

该行应该由第二个鼠标精灵生成的代码停止，但它不会并一直继续。

The line should stop by the second mouse sprite generated code, but it doesn't and keeps going all the way.

我的场景是这样的。

我的.h类

#import <Foundation/Foundation.h>
#import "cocos2d.h"
#import "Constants.h"
#import "SceneManager.h"


@interface EscenaInfo : CCLayer{  
    CGPoint lastTouchPoint;        
    CCSprite * background;
}

@property (nonatomic, assign) BOOL iPad;

@end

My .mm

#import "EscenaInfo.h"  

@implementation EscenaInfo  
@synthesize iPad;


- (void)onBack: (id) sender {
    /* 
     This is where you choose where clicking 'back' sends you.
     */
    [SceneManager goMenuPrincipal];
}

- (void)addBackButton {

    if (self.iPad) {
        // Create a menu image button for iPad
        CCMenuItemImage *goBack = [CCMenuItemImage itemFromNormalImage:@"Arrow-Normal-iPad.png" 
                                                         selectedImage:@"Arrow-Selected-iPad.png"
                                                                target:self 
                                                              selector:@selector(onBack:)];
        // Add menu image to menu
        CCMenu *back = [CCMenu menuWithItems: goBack, nil];

        // position menu in the bottom left of the screen (0,0 starts bottom left)
        back.position = ccp(64, 64);

        // Add menu to this scene
        [self addChild: back];
    }
    else {
        // Create a menu image button for iPhone / iPod Touch
        CCMenuItemImage *goBack = [CCMenuItemImage itemFromNormalImage:@"Arrow-Normal-iPhone.png" 
                                                         selectedImage:@"Arrow-Selected-iPhone.png"
                                                                target:self 
                                                              selector:@selector(onBack:)];
        // Add menu image to menu
        CCMenu *back = [CCMenu menuWithItems: goBack, nil];

        // position menu in the bottom left of the screen (0,0 starts bottom left)
        back.position = ccp(32, 32);

        // Add menu to this scene
        [self addChild: back];        
    }
}

- (id)init {

    if( (self=[super init])) {

        // Determine Screen Size
        CGSize screenSize = [CCDirector sharedDirector].winSize;  

        //Boton en la Interfaz del iPad
        self.iPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;

        //  Put a 'back' button in the scene
        [self addBackButton]; 

        ///
        self.isTouchEnabled = YES;
        lastTouchPoint = ccp(-1.0f,-1.0f);                       
        ///

        [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGB565];
        background = [CCSprite spriteWithFile:@"background.png"];
        background.anchorPoint = ccp(0,0);
        [self addChild:background z:-1];
        [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_Default];

    }
    return self;
}

- (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

$ b b

有人知道如何工作吗？我一直在尝试很多事情，但没有什么为我工作，或者也许指出我的错误。我真的很感谢这个。

Does anyone knows how to work this out? i have been trying lots of things but nothing has worked for me, or maybe point out my mistake. i would really appreciate this.

推荐答案

我没有运行代码，但它看起来很简单。此问题的原因在于此部分：

I've not run the code but it looks fairly straightforward. The cause of the problem lies in this section:

float dist = ccpDistance(lastTouchPoint, location);
CCSprite *line = [CCSprite spriteWithFile:@"line.png"];
[line setAnchorPoint:ccp(0.0f, 0.5f)];
[line setPosition:lastTouchPoint];
[line setScaleX:dist];

此代码计算两个接触点之间的距离（像素），创建一个新的sprite将成为线），并将锚点设置为右侧，垂直居中。它将它定位在最后一次触摸的点，然后根据先前计算的距离设置精灵宽度的比例。

This code calculates the distance between the two touch points in points (pixels), creates a new sprite (that will become the line) and sets the anchor point to the right hand side, centred vertically. It positions this at the point of the last touch and then sets the scale of the sprite's width based on the distance calculated earlier. This scaling factor will ensure the sprite is 'long' enough to reach between the two points.

您遇到的问题：

Your issue:

这并不考虑您加载的图片的初始尺寸（ line.png ）。如果这不是一个1x1维度png，那么 setScale 会使得到的sprite太大 - 你遇到的溢出。

This isn't taking into account the initial dimensions of the image you are loading (line.png). If this isn't a 1x1 dimension png then the setScale is going to make the resulting sprite too large - the overrun you are experiencing.

解决方案

制作 line.png 一张1 x 1像素的图片。你的代码将会完美地工作，虽然你会有一个非常细的线，是不美观的。

Make line.png a 1 x 1 pixel image. Your code will work perfectly, though you will have a very thin line that is not aesthetically pleasing.

或者，为了最好的结果，计算sprite的比例，计算 line.png 的宽度。

Or, for best results, calculate the scale for the sprite by taking into account the width of line.png. This way the sprite can be more detailed and won't overrun.

将 setScaleX 行更改为：

[line setScaleX:dist / line.boundingBox.size.width];

这篇关于在Cocos2d中由Sprites创建的两个点之间绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！