Trouble with placing UI Element in upper lefthand of screen

cocos2d-x C++
#1

I have a landscape scene where I need to position a UIWebView in the upper lefthand corner and then have it take up the full size of the scene/device.

When I do so with the code below, it appears to be off to the lefthand side more than at 0,0.

Size visibleSize = Director::getInstance()->getVisibleSize();
auto menuWebView = cocos2d::experimental::ui::WebView::create();
menuWebView->loadURL("https://www.google.com");
menuWebView->setAnchorPoint(Point(0,0));
menuWebView->setPosition(Point(0,0));
menuWebView->setContentSize(visibleSize);
this->addChild(menuWebView);

Here is what it looks like on an iPad (notice the black bar to the right on the screen)

image

And this is on an iPhone8 Plus (notice the black bar on the top of the screen)

image

So, then I adjusted it to menuWebView->setPosition(Point(27,0)) and it looked good on an iPad, but this is what it looks like on an iPhone (black bar on top and left)

image

Is there a way to ensure, regardless of device/target OS, that a UI element can take up the full screen properly? I must be doing something incorrectly?

#2

What is your parent node like? What is it’s class, position, etc?

Do you know the difference between setPosition() and setAnchorPoint()?

I’ll try your code too, just to see how it works for me.

#3

My node structure is:

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

Then the code regarding setPosition and setAnchorPoint is in the scene’s init() method.

I thought I understood the difference between setPosition and setAnchorPoint. My understanding was by using setAnchorPoint(Point(0,0)), then the WebView would be positioned by using it’s lower left corner as the “basis” (wording from the online programmer’s guide) for setPosition. Is this correct? It doesn’t seem to work out as I expected.

#4

Yup, perfect, but, when you add any node to a parent, it uses that nodes as its starting point. So maybe you don’t want it at (0.0). Let me try this later today and see what happens for me.

What is your design resolution set at?
Are you using a scale factor of any kind to multiple out for screens that are larger than your design resolution?

#5

For these questions, forgive me, but I don’t know the answers and I haven’t done anything (that I know of) that would modify the default project settings. Having said that, I expect I will need to at some point as I will need to support as many devices as possible, I just don’t know much about it yet.

#6

I always declare these 3 variables to my base Layers:

winSize = Director::getInstance()->getWinSize();
visibleSize = Director::getInstance()->getVisibleSize();
visibleOrigin = Director::getInstance()->getVisibleOrigin();

It seems you have the visible size, but not the visible origin.
I would make contentSize = visibleSize like you have, and then position needs to = visibleOrigin.

Hope that helps.

Vec2(0,0) can be off screen based on your design resolution, openGL surface, etc. So the screen might start ahead of the openGL reference frame.

Size visibleSize = Director::getInstance()->getVisibleSize();
Vec2 visibleOrigin = Director::getInstance()->getVisibleOrigin();
auto menuWebView = cocos2d::experimental::ui::WebView::create();
menuWebView->loadURL("https://www.google.com");
menuWebView->setAnchorPoint(Point(0,0));
menuWebView->setPosition(visibleOrigin);
menuWebView->setContentSize(visibleSize);
this->addChild(menuWebView);
1 Like