如何从cocos2d-x中的png图像中检索可见纹理

Question

我正在制作一个问题答案游戏，其中答案图像是作为png图像的精灵制作的。

答案图片是这样的：

我在图像上制作了这样的矩形：

Rect rect = Rect(answerSprites.at(i)->getBoundingBox().origin.x,
                    answerSprites.at(i)->getBoundingBox().origin.y,
                    answerSprites.at(i)->getBoundingBox().size.width,
                    answerSprites.at(i)->getBoundingBox().size.height);

然后我在矩形上检测触摸：

void HelloWorld::onTouchesBegan(const std::vector<Touch*>& touches,
        Event *unused_event) {
    auto target = static_cast<Sprite*>(unused_event->getCurrentTarget());
    auto touchPointBegan = (Touch*) touches.front();
    Vec2 locationBegan = touchPointEnded->getLocation();
    Point locationInNode = target->convertToNodeSpace(locationEnded);
    Size s = target->getContentSize();
        if (rect.containsPoint(locationInNode)) {
            log(“Correct Touch”);
        }
}

代码工作正常，但问题是它检测到完整png上的触摸，但我只想检测花朵上的触摸。 花可以在png的任何位置。

我怎样才能在花上做直肠？

Answer 1

使用以下代码检查触摸位置的透明度：

// Answer sprite
m_sprite = Sprite::create("answer-1.png");
m_sprite->setPosition( Vec2(winSize.width*.5, winSize.height*.5)  );
addChild(m_sprite);

bool HelloWorld::onTouchBegan(const cocos2d::Touch *touch, cocos2d::Event *event)
{
    _originPoint = touch->getLocation();
    _destinationPoint = _originPoint;

    Vec2 locationInNode = m_sprite->convertToNodeSpace(touch->getLocation());

    Rect rect = Rect(m_sprite->getBoundingBox().origin.x,
                     m_sprite->getBoundingBox().origin.y,
                     m_sprite->getContentSize().width,
                     m_sprite->getContentSize().height);


    if (rect.containsPoint(touch->getLocation() )) {

        if (tapsOnNonTransparent(locationInNode, "answer-1.png" )) {
            log("Correct Touch");
        }

    }

    return true;
}

const bool HelloWorld::tapsOnNonTransparent( const cocos2d::Point& tap, const std::string &spritePath )
{
    auto imgPtr = std::make_unique<cocos2d::Image>();
    imgPtr->initWithImageFile( spritePath );

    const int width = imgPtr ->getWidth();
    const int height = imgPtr ->getHeight();

    unsigned x = unsigned( tap.x ) % width;
    /// Don't forget to invert y coordinate.
    unsigned y = unsigned( height - tap.y ) % height;
    unsigned index = x + y * width;
    unsigned dataLen = imgPtr ->getDataLen();
    CCAssert( index < dataLen, "index is bigger than image size." );
    unsigned char* pixel = imgPtr->getData() + (4 * index);
    return !isZeroPixel( pixel );
}

const bool HelloWorld::isZeroPixel( const unsigned char* pixel )
{
    return 0 == pixel[0] && 0 == pixel[1] && 0 == pixel[2] && 0 == pixel[3];
}

Answer 2

您创建的矩形覆盖整个图像。将花和框架分开是一种更好的方法。

为帧图像创建一个Sprite，并为花朵图像创建一个Button。然后将该按钮添加为框架。

auto spriteFrame = Sprite::create("frame.png");
spriteFrame->setPosition(Vec2(300,300));
addChild(spriteFrame);

auto btn = ui::Button::create("flower.png");
btn->setZoomScale(0);
// Place in the middle of the frame sprite
btn->setPosition(Vec2(spriteFrame->getContentSize().width*.5, spriteFrame->getContentSize().height*.5));
btn->addClickEventListener([=](Ref* sender){
    log("Correct Touch");
});
spriteFrame->addChild(btn);