Problems with UIScrollView: Green Background and No Clipping

[zachprinz]

I have been trying to use UIScrollView. I’m having a a few problems with it while running the game on iOS.

First, there is a green background on in the back of the ScrollView. Changing the background opacity of both the ScrollView and the inner container does nothing, I’m guessing it’s due to something in the rendering of panel/view.

Second, the ScrollView doesn’t seem to clip anything. If I add a background with setBackgroundImage(“image.png”) the image takes up the entire screen, even after I have set setClippingEnabled(true) or whatever the method is. I’m using MenuItemImages and they freely scroll beyond the limits of the ScrollView.

Here is my code (without any of the things I’ve tried to resolve these problems like setBackgroundColorOpacity or setClippingEnabled(true))

• scrollView = ui::ScrollView::create();
• scrollView->setBackGroundColorType(ui::LAYOUT_COLOR_NONE);
• scrollView->setSize(Size(visibleSize.width * 0.971,visibleSize.height * 0.821));
• scrollView->setPosition(Vec2((visibleSize.width - (visibleSize.width0.971))/2.0,0));
• scrollView->setDirection(ui::SCROLLVIEW_DIR_VERTICAL);
• scrollView->setInertiaScrollEnabled(true);
• scrollView->setInnerContainerSize(Size(visibleSize.width * 0.971,visibleSize.height * 0.821 * 2));
• scrollView->setGlobalZOrder(5);

[toojuice]

I’ve used ScrollView recently and was comparing what I did with your code. I don’t think you need this line:

scrollView->setBackGroundColorType(ui::LAYOUT_COLOR_NONE);

Maybe that’s causing the green background?

[Zaurus]

Bumping this, because I have the same problem as the poster.

The problem arises when setGlobalZOrder is called on the scrollview. To reproduce, take the HelloWorld project and add this in HelloWorld::init():

auto scrollView = ui::ScrollView::create();
    scrollView->setPosition(cocos2d::Point(100.0f, 100.0f));
    scrollView->setContentSize(cocos2d::Size(100.0f, 100.0f));
    scrollView->setGlobalZOrder(10);
    addChild(scrollView);

The scrollview will be green. If you take away the setGlobalZOrder call, the green background disappears. I’ve tested this on Mac and ios simulator.

I haven’t been able to figure out why this happens.

[owen]

Open appActivity.java in your Android application and override the function onCreateView():

public Cocos2dxGLSurfaceView onCreateView() { 
       Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this); 
       glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8); 
        return glSurfaceView; 
   } 

Build & Run, it will work now.

[zachprinz]

This was on iOS. I designed around it, but still would be interested if anyone has any ideas. Seems like I’m not the only one either.

[owen]

Make sure in your AppDelegate.cpp file, you specify the right depthFormat parameter:

CCEAGLView *eaglView = [CCEAGLView viewWithFrame: [window bounds]
                                         pixelFormat: (NSString*)cocos2d::GLViewImpl::_pixelFormat
                                         depthFormat: GL_DEPTH24_STENCIL8_OES
                                  preserveBackbuffer: NO
                                          sharegroup: nil
                                       multiSampling: NO
                                     numberOfSamples: 0 ];

[youinmyeyes]

And in Cocos2dx-win32(Visual Studio 2012 Untimate ) then how to use Scrollview?
I really appreciate if someone can guide me to use it.

[owen]

The built-in test-cpp project is a good starting point, please check it out.

[youinmyeyes]

Thank you. I will try.

[fossugn]

Have the same problem with scroll view of green colour on some Android devices.
I have tried to paste the code from @owen to AppActivity.java and also to Cocos2dxGLSurfaceView class, but build failed both times.
How can I remove this green background colour of ScrollView? Can somebody help me? (cocos2d-x 3.2)

UPDATE:
Solution found. To avoid some androids having green background (which is setting in UILayer class),
we have to add this to scroll view

scrollView->setClippingEnabled(false);

This fixes such a strange behaviour on Android.

[owen]

If you disable clipping, the behavior of scrollview is incorrect.

i think you should only copy my code to appActivity.java if you use cocos2d-x v3.2 and before.

After v3.3 rc, there is no need to set these args any more, we have a uniform way to set these settings in AppDelegate. It is working on both iOS and Android.

void AppDelegate::initGLContextAttrs()
{
    GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};

    GLView::setGLContextAttrs(glContextAttrs);
}

[yagoub]

@owen, I have V3.3 rc , and i have the same problem when i run TransitionPageTurn on a scene that contains scrollView .( This problem not exist if i desable clipping, but the behavior of scrollview is incorrect.), please help me.

[owen]

@yagoub

How can I reproduce your problem?

Could you give me some sample code snippets?

[yagoub]

i have created a layerColor, then i added it to the Mainlayer, after i have created a scrollView which is child of layerColor, i have many scenes with the same structure(because i’m working on an interactive book)

bool MainLyer::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
  

   
    _layerColor =  LayerColor::create(Color4B(100, 100, 100,0));
    
    _layerColor->setAnchorPoint(Vec2::ZERO);
    _layerColor->setContentSize(Size(visibleSize.width,175));
    _layerColor->setTag(1);
    _layerColor->setPosition(Vec2::ZERO);
    
    this->addChild(_layerColor,LAYER_ZORDER);
    
      //======================== scroll view ================================
    
    _scrollView = cocos2d::ui::ScrollView::create();
    _scrollView->setTouchEnabled(true);
    _scrollView->setContentSize(Size(840,140));
    _scrollView->setPosition(110, 10);
    _scrollView->setBounceEnabled(true);
    _scrollView->setDirection(cocos2d::ui::ScrollView::Direction::VERTICAL);
    
    _layerColor->addChild(_scrollView);
 return true;
}

it worked very good(there’s no green background)
and when i run this:

  Director::getInstance()->replaceScene(PageTransitionForward::create(TURN_PGAE_TIME, _nextScene));

i will have 2 problems:
1- background of the _scrollView is green,
2- the MainLayer is white

[owen]

@yagoub
Thanks, have you try the latest code on Github? Does the issue still exists?

I will try to test your code with the latest code.

[yagoub]

thanks @owen, I’m using cocos2d-x 3.3rc0

[owen]

Director::getInstance()->replaceScene(PageTransitionForward::create(TURN_PGAE_TIME, _nextScene));

I found that you have defined a new class named PageTransitionFoward.

Could you paste your code here?

I know the issue was related to the stencil buffer of the RenderTexture class.

I you don’t want to paste your code here, you could take a look at this PR:

https://github.com/cocos2d/cocos2d-x/pull/7927/files

[yagoub]

This issue on the github, it’s already fixed in my cocosd-x

 class PageTransitionForward : public TransitionPageTurn
    {
    public:
        static TransitionScene* create(float t, Scene* s)
        {
            return TransitionPageTurn::create(t, s, false);
        }
    };

[owen]

This issue on the github, it’s already fixed in my cocosd-x

Does it mean this issue was solved?

or even apply the patch, the problem still exists?

[yagoub]

i mean when i looked to my cocos2d-x version , i found it like

cocos/2d/CCTransition.cpp

 RenderTexture* inTexture = RenderTexture::create((int)size.width, (int)size.height,Texture2D::PixelFormat::RGBA8888,GL_DEPTH24_STENCIL8);



RenderTexture* outTexture = RenderTexture::create((int)size.width, (int)size.height,Texture2D::PixelFormat::RGBA8888,GL_DEPTH24_STENCIL8);

cocos/2d/CCTransitionProgress.cpp

RenderTexture *texture = RenderTexture::create((int)size.width, (int)size.height,Texture2D::PixelFormat::RGBA8888,GL_DEPTH24_STENCIL8);

i’m always having this result: