Topwo博客-cocos2dx 屏幕适配采用ShowAll策略导致黑边的解决方案

您现在的位置是：Topwo博客>>Cocos文章

cocos2dx 屏幕适配采用ShowAll策略导致黑边的解决方案

发布时间：2021-09-27作者：Topwo来源：原创点击：335

游戏在屏幕适配中采用ShowAll策略在不同分辨率下保持设计画面比例，固定了设计分辨率大小，使得设计和制作不再考虑适配问题。
在制作上可以使用具体的数值摆放精灵位置，不会因为实际屏幕大小宽高比而使内部元素相对位置关系出现混乱。
但是采用showall必然会导致四周出现黑边的情况，下面使用图片填充黑边，解决这个问题。
```cpp
#include "EdgeMaskLayer.h"
USING_NS_CC;

EdgeMaskLayer * EdgeMaskLayer::create()
{
    EdgeMaskLayer *ret = new (std::nothrow) EdgeMaskLayer();
    if (ret && ret->init()) 
    {
        ret->autorelease();
        return ret;
    }
    else
    {
        CC_SAFE_DELETE(ret);
        return nullptr;
    }
}

void EdgeMaskLayer::onBeginDraw()
{
    GLView* openGLView = this->_director->getOpenGLView();
    Size frameSize = openGLView->getFrameSize();
    glViewport(0, 0, (GLsizei)(frameSize.width), (GLsizei)(frameSize.height));
}

void EdgeMaskLayer::onEndDraw()
{
    const auto& vp = Camera::getDefaultViewport();
    glViewport(vp._left, vp._bottom, vp._width, vp._height);
}

void EdgeMaskLayer::visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags)
{
    if(!_visible)
    {
        return;
    }

_beginCommand.init(_globalZOrder);
    _beginCommand.func = CC_CALLBACK_0(EdgeMaskLayer::onBeginDraw, this);
    renderer->addCommand(&_beginCommand);

Node::visit(renderer, parentTransform, parentFlags);

_endCommand.init(_globalZOrder);
    _endCommand.func = CC_CALLBACK_0(EdgeMaskLayer::onEndDraw, this);
    renderer->addCommand(&_endCommand);
}
```
```cpp
#ifndef __EDGEMASKLAYER_H__
#define __EDGEMASKLAYER_H__

#include "cocos2d.h"
NS_CC_BEGIN

class EdgeMaskLayer : public Layer
{
public:
        static EdgeMaskLayer* create();
        virtual void visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags) override;

EdgeMaskLayer(void) {};
        virtual ~EdgeMaskLayer(void) {};
protected:
        void onBeginDraw();
        void onEndDraw();

private:
        CustomCommand _beginCommand;
        CustomCommand _endCommand;
};

NS_CC_END
#endif
```
将EdgeMaskLayer添加到luabinding后，在场景加载UI界面前添加填充图片即可。
```lua
local MainScene = class("MainScene", function()
        return display.newScene("MainScene")
end)

function MainScene:ctor(params)
end

function MainScene:onEnter()
        local root = display.newNode():addTo(self)
        root:pos(display.cx, display.cy)

local mlayer = cc.EdgeMaskLayer:create()
        mlayer:addTo(root)

local glView = cc.Director:getInstance():getOpenGLView()
        local framesize = glView:getFrameSize()
        local rect = glView:getViewPortRect()

local scaleX = framesize.width / display.width
        local scaleY = framesize.height / display.height

if scaleX / scaleY <= 1 then
                display.newSprite("background/mask_top.jpg")
                        :pos(0, rect.height / 2 / scaleY )
                        :anch(0.5, 0):addTo(mlayer)
                display.newSprite("background/mask_top.jpg")
                        :pos(0, -rect.height / 2 / scaleY)
                        :anch(0.5, 1):flipY(true):addTo(mlayer)
        else
                display.newSprite("background/mask_left.jpg")
                        :pos(-rect.width / 2 / scaleX, 0)
                        :anch(1, 0.5):addTo(mlayer)
                display.newSprite("background/mask_left.jpg")
                        :pos(rect.width / 2 / scaleX,  0)
                        :anch(0, 0.5):flipX(true):addTo(mlayer)
        end

-- todo:添加UI
end

return MainScene
```

上一篇：iOS应用内支付（IAP）详解

下一篇：getCacheDir、getFilesDir、getExternalFilesDir、getExternalCacheDir的作用