在cocos2dx中，横版游戏关于相机移动的方式整理

在做横版游戏的时候，不可避免的要使用到相机移动，并且一般在2D横版游戏中为了能够模拟一些3D的效果，会使用分层移动的方式（即每一层的移动速度有一定的区别，以模拟3D中的物体越远移动越缓慢的效果。

在cocos2d中，提供了parallaxNode来实现不同层次有不同的移动速度的功能。这个node通过对加入的物体设置一个移动的scale来控制其移动速度，其实现原理是当对parallaxNode设置位置的时候，parallaxNode会根据其子节点的移动速度比例，重新设置其子节点为位置，已达到不同节点有不同速度的功能。比如parallaxNode有两个子节点，移动速度比例分别为1和0.5，其初始位置都为0，那么当我们将prallaxNode移动-1000个像素，那么移动速度比例为1的child将不会进行位置修正，而移动速度为0.5的物体将重新更新位置为500，这样在视觉上就是1层次的物体移动了1000，而0.5层次的物体则移动了500.

在实现相机移动的时候，我们有两种选择，一种就是移动parallaxNode，而相机不动，这种方式我们会频繁的更新parallaxNode的位置，导致物体的矩阵更新。如果这个时候我们绑定了物理系统，因为物体的世界坐标的更新，还必须对物理body进行位置更新，从而导致物理body无法进行sleep。因此，在有物理系统的时候，通过移动parallaxNode的方式来模拟相机移动就会导致系统性能下降。

为了解决上面的问题，我们必须使用真正的相机移动，即移动摄像机位置（修改opengl的MVP中的V矩阵）。在cocos2dx对相机抽象成了camera，因此我们只需要将移动paranllax改为移动摄像机，就可以实现这个功能。

但是这样修改之后我遇到两个问题：

1、如果我移动camera，parallaxNode并没有进行层次化移动。

2、当camera移动的时候，sprite的裁剪将会出问题，本来应该显示在摄像机中的物体被裁剪掉了。

3、UI因为camera移动，看不见了。

因此需要对cocos和程序进行如下修改：

1、修改parallaxNode，让其可以根据相对摄像机的位置而不是世界坐标系的位置进行层次移动。

Vec2 ParallaxNode::absolutePosition()
{
    Vec2 ret = _position;
    Node *cn = this;	//Modify By Funship
    while (cn->getParent() != nullptr)
    {
        cn = cn->getParent();
        ret = ret + cn->getPosition();
    }
    return ret;
}

以上的代码得到的parallaxNode相对世界坐标系的坐标（前提是parallaxNode以及其parent没有进行旋转、缩放的情况下正确），要将其修改为得到相对camera的坐标。

首先将parallaxNode的位置转换到世界坐标系，用parallaxNode的paraent的convertWorldSpace函数，然后将改坐标转换到camera node的坐标系。代码我就不上了。

2、修改裁剪

在sprite的draw函数中，有一段

_insideBounds = (flags & FLAGS_TRANSFORM_DIRTY) ? renderer->checkVisibility(transform,_contentSize) : _insideBounds;

其中checkVisibility就是进行裁剪的代码了，首先这行代码需要进行修改。

这里只有当其transform dirty的时候重新进行裁剪运算，但是，因为现在我们移动的camera，而model的transform不会发生改变，所以我们需要在camera增加一个变量用来表示camera进行了移动，然后在这里增加对camera矩阵改变的判断，如果camera移动了，也需要进行裁剪运算，其次就是checkvisibility函数，这个函数是根据世界坐标系进行裁剪的，需要修改成根据camera坐标系进行裁剪。

// helpers
bool Renderer::checkVisibility(const Mat4 &transform,const Size &size)
{
    auto scene = Director::getInstance()->getRunningScene();
    // only cull the default camera. The culling algorithm is valid for default camera.
    if (scene && scene->_defaultCamera != Camera::getVisitingCamera())
        return true;
    
    // half size of the screen
    Size screen_half = Director::getInstance()->getWinSize();
    screen_half.width /= 2;
    screen_half.height /= 2;

    float hSizeX = size.width/2;
    float hSizeY = size.height/2;

    Vec4 v4world,v4local;
    v4local.set(hSizeX,hSizeY,1);
    transform.transformVector(v4local,&v4world);

    // center of screen is (0,0)
    v4world.x -= screen_half.width;
    v4world.y -= screen_half.height;

    // convert content size to world coordinates
    float wshw = std::max(fabsf(hSizeX * transform.m[0] + hSizeY * transform.m[4]),fabsf(hSizeX * transform.m[0] - hSizeY * transform.m[4]));
    float wshh = std::max(fabsf(hSizeX * transform.m[1] + hSizeY * transform.m[5]),fabsf(hSizeX * transform.m[1] - hSizeY * transform.m[5]));

    // compare if it in the positive quadrant of the screen
    float tmpx = (fabsf(v4world.x)-wshw);
    float tmpy = (fabsf(v4world.y)-wshh);
    bool ret = (tmpx < screen_half.width && tmpy < screen_half.height);

    return ret;
}

这里只需要传入当前的camera，将camer的可视矩形框转换到世界坐标系（即把camera的左下、右上两个顶点转换到世界坐标系）得到矩形A，然后用得到的心得矩形来和物体的可视矩形进行相交判断即可。

可以将上面代码中的screen_half.width，screen_half.height修改为A的宽高的一半，同时增加一个vec2 center = A的center。然后修改

    // center of screen is (0,0)
    v4world.x -= screen_half.width;
    v4world.y -= screen_half.height;

为v4world.x -= center.x,v4world.y -= center.y即可。

3、关于UI，因为我们移动了camera，所以UI肯定会被裁减掉，因为我们需要为UI单独设置一个camera，这样就可以解决UI的裁剪问题，另外一个方法就是根据camera的位置来更新UI的位置。我更推荐使用前一种方法，但是修改的代码量因为我还没有进行这一步，所以还没有体会。

原文链接：https://www.f2er.com/cocos2dx/341934.html

在cocos2dx中，横版游戏关于相机移动的方式整理

猜你在找的Cocos2d-x相关文章