用Cocos2d-x實現2D光線效果

 

2015.3.23優化修改，現在已經能達到穩定60幀了。。

 

本博客地址：http://www.cnblogs.com/wolfred7464/

創意來自於：http://ncase.me/sight-and-light/

 

我要介紹的，就是這樣的效果：（創意和素材都來自於上文的網址）

由於原文介紹的過於簡練，導致像我這樣的小白根本看不懂，所以我想要介紹的更易懂一點。。

一、畫線段

在Cocos2d-x中，已經封裝了通過Opengl ES的畫線函數，只需要創建一個DrawNode對象，就可以畫線了，畫幾條線段，就像這樣：

二、畫射線和線段的交點及軌跡。

這里需要一點點幾何知識了。（我也是惡補的）

     直線的參數表示：

直線可以用直線上的一點P₀和方向向量v表示，直線上的所有點P滿足 P = P₀ + tv。

參數方程最方便的地方在於直線、射線、線段的方程形式是一樣的，區別在於參數t。直線的t沒有范圍限制，射線的t>0，線段的t在0~1之間（t >=0 && t <= 1）。

     直線交點：

設直線分別為 P+t₁v 和 Q+t₂w，設向量u=QP，設cross(x, y)為向量x和y的叉積，則：

t1 = cross(w, u) / cross(v, w)

t2 = cross(v, u) / cross(v, w)

當cross(v, w) == 0時，兩直線平行，無交點。

所以把屏幕中心作為光源，方向指向鼠標所在的位置，畫一條射線，t即是光源與交點的距離，選一個最近的交點（即t最小），連接光源和這個點，就會得到這樣的效果：

主要代碼：

bool HelloWorld::getIntersection(const Line& ray, const Line& segment, 
                                 Point& point, float& distance)
{
    Vec2 v1(ray.p2 - ray.p1);
    Vec2 v2(segment.p2 - segment.p1);
    float cross = getCross(v1, v2);
    if(cross == 0) {
        return false;
    }
    Vec2 u(ray.p1 - segment.p1);
    float t1 = getCross(v2, u) / cross;
    float t2 = getCross(v1, u) / cross;
    if(t1 < 0 || t2 < 0 || t2 > 1) {
        return false;
    }
    point = v1 * t1 + ray.p1;
    distance = t1;
    return true;
}

 

三、以鼠標為光源，畫射向線段端點的光線

改動一下剛才的代碼，以鼠標作為光源，畫射向每個端點的光線，在每條光線的兩側同時畫出極角偏移1e-4的兩條光線，用來穿過線段端點，與端點后面的線段相交。看起來就像這樣：

四、畫多邊形，標記出光亮區域

上一步畫的光線表示出了光亮區域，還需要畫出填充多邊形來標記一下，但是opengl只能畫凸多邊形。所以為了畫出需要的不規則多邊形，要分割成三角形來畫。

容易看出，任意相鄰的兩個交點與光源，可以組成一個三角形，接下來就是找相鄰的點。所以極角排序一下，依次取相鄰的點就可以了。畫完三角形后的效果就像這樣：

 

五、實現本文開頭的效果

Cocos2d-x提供了ClippingNode類，可以做出不規則的裁剪圖形，以上一步畫的多邊形為模板裁剪就可以了，不多贅述，代碼中有詳細。但是目前還有兩個問題：1、沒有實現出原文中的陰影效果 2、編譯到安卓看不到效果。

希望有大牛能指教一下。

六、附上Cocos2d-x寫的主要代碼

#ifndef __LIGHTSCENE_H__
#define __LIGHTSCENE_H__

#include "cocos2d.h"

class Line
{
public:
    cocos2d::Point p1;
    cocos2d::Point p2;
    Line(const cocos2d::Point& p1, const cocos2d::Point& p2) {
        this->p1 = p1;
        this->p2 = p2;
    }
};

class LightScene : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(LightScene);
private:
    void initVertexs();
    void drawSegments();
    void initSingleVertexs();
    void calcAngles(const cocos2d::Point& touchPos);

    float getCross(const cocos2d::Vec2& v1, const cocos2d::Vec2& v2);
    bool getIntersection(const Line& ray, const Line& segment,
        cocos2d::Point& point, float& distance);

    void drawLight(const cocos2d::Vec2& pos);

    cocos2d::DrawNode* _staticDraw;
    cocos2d::DrawNode* _touchDraw;
    cocos2d::ClippingNode* _clip;

    std::vector<cocos2d::Point> _vertexs;
    std::vector<Line> _segments;
    std::vector<float> _angles;
};

#endif

#include "LightScene.h"

USING_NS_CC;

Scene* LightScene::createScene()
{
    auto scene = Scene::create();
    auto layer = LightScene::create();
    scene->addChild(layer);
    return scene;
}

bool LightScene::init()
{
    if (!Layer::init()) {
        return false;
    }

    // 添加背景圖
    auto visSize = Director::getInstance()->getVisibleSize();
    auto background = Sprite::create("background.png");
    background->setPosition(visSize.width / 2, visSize.height / 2);
    addChild(background, 1);

    _staticDraw = DrawNode::create();
    addChild(_staticDraw, 100);
    _touchDraw = DrawNode::create();
    addChild(_touchDraw, 100);

    _clip = ClippingNode::create();
    _clip->setInverted(false);
    _clip->setAlphaThreshold(255.0f);
    auto foreground = Sprite::create("foreground.png");
    foreground->setPosition(visSize.width / 2, visSize.height / 2);
    _clip->addChild(foreground, 1);
    _clip->setStencil(_touchDraw);
    addChild(_clip, 101);

    initVertexs();
    drawSegments();
    initSingleVertexs();

    // 觸摸監聽
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = [=](Touch* touch, Event* event) {
        drawLight(touch->getLocation());
        return true;
    };
    listener->onTouchMoved = [=](Touch* touch, Event* event) {
        drawLight(touch->getLocation());
    };
    getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    return true;
}

void LightScene::drawLight(const cocos2d::Vec2& pos)
{
    Point tar(0, 0); // 光線的端點
    Point cur(0, 0); // 光線與線段的交點
    float distance = 0; // 光源與交點的距離

    _touchDraw->clear();

    // 計算極角，添加兩個偏移1e-4的極角
    calcAngles(pos);

    // 極角排序
    std::sort(_angles.begin(), _angles.end(), [](float x, float y) {
        return x < y;
    });

    // 找最近的交點
    static std::vector<Point> vertex;
    vertex.clear();
    for (auto angle : _angles) {
        Vec2 dlt(cos(angle), sin(angle));
        float closest = -1;
        for (auto s : _segments) {
            if (getIntersection(Line(pos, pos + dlt), s, cur, distance)) {
                if (closest == -1 || closest > distance) {
                    closest = distance;
                    tar = cur;
                }
            }
        }
        if (closest != -1) {
            vertex.push_back(tar);
        }
    }

    // 畫三角形
    int limit = vertex.size() - 1;
    for (int i = 0; i < limit; i++) {
        _touchDraw->drawTriangle(pos, vertex[i], vertex[i + 1], Color4F::WHITE);
    }
    if (limit > 0) {
        _touchDraw->drawTriangle(pos, vertex[limit], vertex[0], Color4F::WHITE);
    }
}

void LightScene::initVertexs() {
    int crd[] = {
        0, 360, 840, 360,
        840, 360, 840, 0,
        840, 0, 0, 0,
        0, 0, 0, 360,
        100, 210, 120, 310,
        120, 310, 200, 280,
        200, 280, 140, 150,
        140, 150, 100, 210,
        100, 160, 120, 110,
        120, 110, 60, 60,
        60, 60, 100, 160,
        200, 100, 220, 210,
        220, 210, 300, 160,
        300, 160, 350, 40,
        350, 40, 200, 100,
        540, 300, 560, 320,
        560, 320, 570, 290,
        570, 290, 540, 300,
        650, 170, 760, 190,
        760, 190, 740, 90,
        740, 90, 630, 70,
        630, 70, 650, 170,
        600, 265, 780, 310,
        780, 310, 680, 210,
        680, 210, 600, 265
    };
    for (int i = 0; i < 100; i += 2) {
        _vertexs.push_back(Point(crd[i], crd[i + 1]));
    }
}

// 畫線段
void LightScene::drawSegments()
{
    for (int i = 0; i < _vertexs.size(); i += 2) {
        _segments.push_back(Line(_vertexs[i], _vertexs[i + 1]));
        _staticDraw->drawSegment(_vertexs[i], _vertexs[i + 1], 0.5f, Color4F::WHITE);
    }
}

// 找不重復端點
void LightScene::initSingleVertexs()
{
    std::vector<Point> singleVertexs;
    for (int i = 0; i < _vertexs.size(); i++) {
        bool has = false;
        for (int j = 0; j < singleVertexs.size(); j++) {
            if (_vertexs[i] == singleVertexs[j]) {
                has = true;
                break;
            }
        }
        if (!has) {
            singleVertexs.push_back(_vertexs[i]);
        }
    }
    _vertexs.clear();
    for (auto v : singleVertexs) {
        _vertexs.push_back(v);
    }
}

// 計算極角
void LightScene::calcAngles(const Point& touchPos)
{
    _angles.clear();
    const float eps = static_cast<float>(1e-4);
    for (auto p : _vertexs) {
        auto angle = atan2(p.y - touchPos.y, p.x - touchPos.x);
        //_angles.push_back(angle);
        _angles.push_back(angle - eps);
        _angles.push_back(angle + eps);
    }
}

// 向量的叉積
float LightScene::getCross(const Vec2& v1, const Vec2& v2)
{
    return (v1.x * v2.y - v1.y * v2.x);
}

// 射線與線段的交點
bool LightScene::getIntersection(const Line& ray, const Line& segment,
    Point& point, float& distance)
{
    Vec2 v1(ray.p2 - ray.p1);
    Vec2 v2(segment.p2 - segment.p1);
    float cross = getCross(v1, v2);
    if (cross == 0) {
        return false;
    }
    Vec2 u(ray.p1 - segment.p1);
    float t1 = getCross(v2, u) / cross;
    float t2 = getCross(v1, u) / cross;
    if (t1 < 0 || t2 < 0 || t2 > 1) {
        return false;
    }
    point = v1 * t1 + ray.p1;
    distance = t1;
    return true;
}