Transparent glView IOS

Cocos Creator
1

I want to add a webview at the same level as glView Cocos and make glView Cocos transparent.
ver cc2.4.15
Can someone who knows about this help me?

2

@Tom_k help me?

3

This is a native platform integration​ task for Cocos Creator 2.4.15. Below is the correct approach​ for both Android​ and iOS.

:white_check_mark: Core Concept

In Cocos Creator 2.4.x:

  • The GLView​ is a native view​ (GLSurfaceView/ EAGLView)

  • A WebView​ is another native view

  • To overlay them correctly, you must manipulate native view hierarchies, not Canvas nodes

:mobile_phone: Android Implementation

:one: Make GLView Transparent

Edit AppActivity.java:

public class AppActivity extends Cocos2dxActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Make GLView transparent
        mGLSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 16, 0);
        mGLSurfaceView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
        mGLSurfaceView.setZOrderOnTop(false);
        mGLSurfaceView.setBackgroundColor(Color.TRANSPARENT);
    }
}

:two: Add WebView at Same Level

public void addWebView() {
    runOnUiThread(() -> {
        FrameLayout root = findViewById(android.R.id.content);

        WebView webView = new WebView(this);
        webView.setBackgroundColor(Color.WHITE);
        webView.loadUrl("https://example.com");

        FrameLayout.LayoutParams params =
            new FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT
            );

        // Add BELOW GLView (so GLView stays on top)
        root.addView(webView, 0, params);
    });
}

:pushpin: Important:

Add WebView below​ GLView so transparent areas show content.

:three: Call from JS

if (cc.sys.os === cc.sys.OS_ANDROID) {
    jsb.reflection.callStaticMethod(
        "org/cocos2dx/javascript/AppActivity",
        "addWebView",
        "()V"
    );
}

:red_apple: iOS Implementation

:one: Make GLView Transparent

Edit AppController.mm:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    CCEAGLView *eaglView = (CCEAGLView *)self.window.rootViewController.view;
    eaglView.opaque = NO;
    eaglView.backgroundColor = [UIColor clearColor];
    return YES;
}

:two: Add WebView

void addWebView() {
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    UIViewController *vc = window.rootViewController;

    WKWebView *webView = [[WKWebView alloc] initWithFrame:vc.view.bounds];
    [webView loadRequest:[NSURLRequest requestWithURL:
        [NSURL URLWithString:@"https://example.com"]]];

    // Insert BELOW GLView
    [vc.view insertSubview:webView atIndex:0];
}

:three: Call from JS

if (cc.sys.os === cc.sys.OS_IOS) {
    jsb.reflection.callStaticMethod(
        "AppController",
        "addWebView"
    );
}

:warning: Critical Notes

Issue Solution
Touch blocked Disable WebView interaction when needed
Performance Avoid full-screen WebView + GL rendering
Android Z-order Use setZOrderOnTop(false)
iOS transparency Must set opaque = NO
WebView lifecycle Remove WebView manually on scene change

:white_check_mark: Recommended Architecture

Root View
 ├── WebView (index 0)
 └── GLView (index 1, transparent)
4

Yes, I’m using this method on iOS but it’s not working, but it works on Android.

5

Can you run it on iOS?