Cocos2dx下使用Android和ios原生UI
引擎版本为3.12
Android
1.在libcocos2dx项目的org.cocos2dx.lib项目中的Cocos2dxActivity.java文件中，修改init()方法。
增加代码如下：
this.mGLSurfaceView.setZOrderOnTop(true); //设置mGLSurfaceView在最上层
this.mGLSurfaceView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
this.mGLSurfaceView.setEGLConfigChooser(8,8,8,8,16,8);
2.修改**/frameworks/cocos2d-x/cocos/renderer/FrameBuffer.cpp文件中的FrameBuffer()方法中的_clearColor(Color4F(0, 0, 0, 1))。
修改代码如下：
FrameBuffer::FrameBuffer()
//: _clearColor(Color4F(0, 0, 0, 0))
: _clearColor(Color4F(0, 0, 0, 0)) //把透明度由1改为0
完成上面两步，此时游戏的scene背景已经透明，就可以在mFrameLayout布局上添加原生的Android的控件，并且可以在游戏中看到。
下面是Cocos2dxActivity.java文件中init()的完整代码：
public void init() {
// FrameLayout
ViewGroup.LayoutParams framelayout_params =
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
mFrameLayout = new ResizeLayout(this);
mFrameLayout.setLayoutParams(framelayout_params);
// Cocos2dxEditText layout
ViewGroup.LayoutParams edittext_layout_params =
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
Cocos2dxEditBox edittext = new Cocos2dxEditBox(this);
edittext.setLayoutParams(edittext_layout_params);
mFrameLayout.addView(edittext);
// Cocos2dxGLSurfaceView
this.mGLSurfaceView = this.onCreateView();
/*****video view*****/
videoView = new VideoView(this);
//设置视频源播放res/raw中的文件,文件名小写字母,格式: 3gp,mp4等,flv的不一定支持;
Uri rawUri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.test);
videoView.setVideoURI(rawUri);
videoView.start();
videoView.requestFocus();
videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
mp.start();
mp.setLooping(true);
}
});
videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mp) {
videoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.test));
videoView.start();
}
});
mFrameLayout.addView(videoView);
/*****video view*****/
/****test*****/
this.mGLSurfaceView.setZOrderOnTop(true);
this.mGLSurfaceView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
this.mGLSurfaceView.setEGLConfigChooser(8,8,8,8,16,8);
/****test*****/
// ...add to FrameLayout
mFrameLayout.addView(this.mGLSurfaceView);
// Switch to supported OpenGL (ARGB888) mode on emulator
if (isAndroidEmulator())
{
this.mGLSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 16, 0);
}
this.mGLSurfaceView.setCocos2dxRenderer(new Cocos2dxRenderer());
this.mGLSurfaceView.setCocos2dxEditText(edittext);
// Set framelayout as the content view
setContentView(mFrameLayout);
}
IOS
这里跟Android做法一样，也是把游戏的渲染层设置成透明的。先添加原生控件，在添加渲染层。不过这里我做的时候先创建了一个UIView，然后把ios原生控件和CCEAGLView分别添加到UIView上面。然后把UIView传给viewController.view。
1.在AppController.mm文件下的didFinishLaunchingWithOptions方法中做如下修改。
代码如下：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
// Add the view controller's view to the window and display.
window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
CCEAGLView *eaglView = [CCEAGLView viewWithFrame: [window bounds]
pixelFormat: kEAGLColorFormatRGBA8
depthFormat: GL_DEPTH24_STENCIL8_OES
preserveBackbuffer: NO
sharegroup: nil
multiSampling: NO
numberOfSamples: 0 ];
[eaglView setMultipleTouchEnabled:YES];
//初始化一个层，用来放UIKit和EAGLView
UIView *overView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
/*******MPMoviePlayerController********/
NSString *file = [[NSBundle mainBundle] pathForResource:@"video" ofType:@"mp4"];
NSURL *movieURL = [NSURL fileURLWithPath:file];
_player =[[MPMoviePlayerController alloc] initWithContentURL:movieURL];
[_player prepareToPlay];
_player.shouldAutoplay=YES;
[_player setControlStyle:MPMovieControlStyleNone];
[_player setFullscreen:YES];
_player.repeatMode =MPMovieRepeatModeOne; //循环播放
[_player play];
/*******MPMoviePlayerController********/
viewController.view = overView;
eaglView.opaque = NO;
glClearColor(0, 0, 0, 0);
glClear(GL_COLOR_BUFFER_BIT);
[_player.view setFrame:overView.bounds];
[overView addSubview:_player.view];//设置写在添加之后
[overView addSubview:eaglView];
// Use RootViewController manage CCEAGLView
viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];
viewController.wantsFullScreenLayout = YES;
viewController.view = overView;
// Set RootViewController to window
if ( [[UIDevice currentDevice].systemVersion floatValue] < 6.0)
{
// warning: addSubView doesn't work on iOS6
[window addSubview: viewController.view];
}
else
{
// use this method on ios6
[window setRootViewController:viewController];
}
[window makeKeyAndVisible];
[[UIApplication sharedApplication] setStatusBarHidden: YES];
// IMPORTANT: Setting the GLView should be done after creating the RootViewController
cocos2d::GLView *glview = cocos2d::GLViewImpl::createWithEAGLView(eaglView);
cocos2d::Director::getInstance()->setOpenGLView(glview);
cocos2d::Application::getInstance()->run();
return YES;
}
2.修改**/frameworks/cocos2d-x/cocos/renderer/FrameBuffer.cpp文件中的FrameBuffer()方法中的_clearColor(Color4F(0, 0, 0, 0))。
h5页面
这个平台下没有搞清楚怎么回事。目前是在project.json文件中对renderMode进行了设置。由原来的0改为1（0为默认，1为canvas，2为webgl）。改为画布渲染以后，背景就变成透明了，并没有对画布的透明度做操作。
index.html文件的修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos2d-html5 Hello World test</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="viewport" content="initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<script type="text/javascript" src="src/jquery-1.7.1.min.js"></script>
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.hidden{display: none}
</style>
</head>
<body>
<div style="position: relative;" text-align: center;>
<div style="position: absolute;" text-align: center;>
<video controls="controls" autoplay="autoplay" loop="loop" id="video">
<source src="/res/video.mp4" type="video/mp4" />
</video>
</div>
<div style="position: absolute;" text-align: center;>
<canvas id="gameCanvas" width="600" height="400" ></canvas>
</div>
<img id="test" src="res/test.png" alt="The Tulip" />
</div>
<script src="res/loading.js"></script>
<!-- <canvas id="gameCanvas" width="600" height="400" ></canvas> -->
<script>
(function () {
var nav = window.navigator;
var ua = nav.userAgent.toLowerCase();
var uaResult = /android (\d+(?:\.\d+)+)/i.exec(ua) || /android (\d+(?:\.\d+)+)/i.exec(nav.platform);
if (uaResult) {
var osVersion = parseInt(uaResult[1]) || 0;
var browserCheck = ua.match(/(qzone|micromessenger|qqbrowser)/i);
if (browserCheck) {
var gameCanvas = document.getElementById("gameCanvas");
var ctx = gameCanvas.getContext('2d');
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, 1, 1);
}
}
})();
</script>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>
//需要用到div标签。最外层的style设置为 style="position: relative;",然后里层的div的style设置为 style="position: absolute;"。这样就可以实现叠加效果。
QQ20161109-0.png
