【玩转cocos2d-x之三十三】游戏嵌入Webview网页

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了【玩转cocos2d-x之三十三】游戏嵌入Webview网页，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

原创作品，转载请标明：http://www.jb51.cc/article/p-ybpkbbax-ep.html


手游《我叫MT》一开始会弹出一个游戏公告，有玩过的肯定都蛮熟悉的，这就是webview，就是一个网页。由于webview和平台相关，这里就介绍下cocos2d-x如何嵌入andorid的webview控件，在cocos2d-x中显示网页。


1.Jni

Jni这里我就不再多说了。可用参考wikipedia，或者微信飞机大战的移植篇。通过Jni，可以实现在cocos2d-x中调用Android的API，当然也可以进行传值。

2.Android使用webview

直接上代码。主要是处理布局和webview使用的问题。这里采用代码布局。以下操作在android的主类（cocos2dxActivity）中处理

2.1.添加成员变量

整个布局的结构是最底层一个FrameLayout，ImageView控件放置在FrameLayout上。然后之上是一个LinearLayout用来放置关闭按钮，LinearLayout往下是Webview控件。

[cpp]@H_301_58@ view plain copy
  1. staticTesttest=null;//Test实例
  2. WebViewm_webView;//WebView控件
  3. ImageViewm_imageView;//ImageView控件
  4. FrameLayoutm_webLayout;//FrameLayout布局
  5. LinearLayoutm_topLayout;//LinearLayout布局
  6. Buttonm_backButton;//关闭按钮

2.2.OnCreate中添加FrameLayout布局

    protectedvoidonCreate(BundlesavedInstanceState){
  1. super.onCreate(savedInstanceState);
  2. test=this;
  4. //初始化一个空布局
  5. m_webLayout=newFrameLayout(this);
  6. FrameLayout.LayoutParamslytp=newFrameLayout.LayoutParams(800,640);
  7. lytp.gravity=Gravity.CENTER;
  8. addContentView(m_webLayout,lytp);
  9. }


2.3.返回实例

    publicstaticTestgetInstance(){
  1. Log.v("TestJacky","getInstance");
  2. returntest;
  3. }

2.4.显示webview

    voidopenWebview(){
  1. "openWebView");
  2. this.runOnUiThread(newRunnable(){//在主线程里添加别的控件
  3. voidrun(){
  4. //初始化webView
  5. m_webView=newWebView(test);
  6. //设置webView能够执行javascript脚本
  7. m_webView.getSettings().setJavaScriptEnabled(true);
  8. //设置可以支持缩放
  9. m_webView.getSettings().setSupportZoom(true);//设置出现缩放工具
  10. m_webView.getSettings().setBuiltInZoomControls(true);
  11. //载入URL
  12. m_webView.loadUrl("http://m.blog.csdn.net/blog/jackyvincefu/");
  13. //使页面获得焦点
  14. m_webView.requestFocus();
  15. //如果页面中链接，如果希望点击链接继续在当前browser中响应
  16. m_webView.setWebViewClient(newWebViewClient(){
  17. publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
  18. if(url.indexOf("tel:")<0){
  19. view.loadUrl(url);
  20. }
  21. returntrue;
  22. });
  24. //背景图
  25. m_imageView=newImageView(test);
  26. m_imageView.setImageResource(R.drawable.bkgnd);
  27. m_imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  28. //初始化线性布局里面加按钮和webView
  29. m_topLayout=newLinearLayout(test);
  30. m_topLayout.setOrientation(LinearLayout.VERTICAL);
  31. //初始化返回按钮
  32. m_backButton=newButton(test);
  33. m_backButton.setBackgroundResource(R.drawable.btn);
  34. LinearLayout.LayoutParamslypt=newLinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
  35. lypt.gravity=Gravity.RIGHT;
  36. m_backButton.setLayoutParams(lypt);
  37. m_backButton.setOnClickListener(newOnClickListener(){
  38. voidonClick(Viewv){
  39. removeWebView();
  40. }
  41. });
  42. //把image加到主布局里
  43. m_webLayout.addView(m_imageView);
  44. //把webView加入到线性布局
  45. m_topLayout.addView(m_backButton);
  46. m_topLayout.addView(m_webView);
  47. //再把线性布局加入到主布局
  48. m_webLayout.addView(m_topLayout);
  49. }

2.5.移除webview

    voidremoveWebView(){
  1. m_webLayout.removeView(m_imageView);
  2. m_imageView.destroyDrawingCache();
  3. m_webLayout.removeView(m_topLayout);
  4. m_topLayout.destroyDrawingCache();
  5. m_topLayout.removeView(m_webView);
  6. m_webView.destroy();
  7. m_topLayout.removeView(m_backButton);
  8. m_backButton.destroyDrawingCache();
  9. }

2.6.重写返回键

    publicbooleanonKeyDown(intkeyCoder,KeyEventevent)
  1. {
  2. //如果网页能回退则后退，如果不能后退移除WebView
  3. if(m_webView.canGoBack()&&keyCoder==KeyEvent.KEYCODE_BACK){
  4. m_webView.goBack();
  5. }else{
  6. false;
  7. }

3.cocos2d-x使用Jni

这里直接使用HelloWorld的示例，修改了close按钮的回调函数。


3.1.jni头文件

    #if(CC_TARGET_PLATFORM==CC_PLATFORM_ANDROID)
  1. #include<jni.h>
  2. #include"platform/android/jni/JniHelper.h"
  3. #endif

3.2.Jni调用打开webview

    voidHelloWorld::menuCloseCallback(CCObject*pSender)
  1. JniMethodInfominfo;
  2. //getStaticMethodInfo，判断Java静态函数是否存在，并且把信息保存到minfo里
  3. //参数1：JniMethodInfo
  4. //参数2：Java类包名+类名
  5. //参数3：Java函数名称
  6. //参数4：函数参数类型和返回值类型
  7. boolisHave=JniHelper::getStaticMethodInfo(minfo,"com/jacky/test/Test","getInstance","()Lcom/jacky/test/Test;");
  8. jobjectjobj;//存对象
  9. if(isHave){
  10. //这里的调用getInstance，返回Test类的对象。
  11. jobj=minfo.env->CallStaticObjectMethod(minfo.classID,minfo.methodID);
  12. isHave=JniHelper::getMethodInfo(minfo,"com/jacky/test/Test","openWebview","()V");
  13. if(isHave){
  14. //调用openWebview,参数1：Test对象参数2：方法ID
  15. minfo.env->CallVoidMethod(jobj,minfo.methodID);
  16. #else
  17. CCDirector::sharedDirector()->end();
  18. #if(CC_TARGET_PLATFORM==CC_PLATFORM_IOS)
  19. exit(0);
  20. #endif
  21. #endif
  22. }


4.效果图

爪机截屏的。






ps：这里没有处理多次打开webview的情况。可以采用Jni方法来通知cocos2d-x，也可以直接在主类中设置一个成员变量标志位，调用openWebview时设置为true，removeWebView时设置为false，在调用openWebview时检测这个标志位来决定是否打开即可。

5.源码下载

包含win32，android代码，拿掉了android交叉编译生成的obj，保留so和apk文件。
下载地址：http://download.csdn.net/detail/jackyvincefu/6770315 原文链接：https://www.f2er.com/cocos2dx/342126.html

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签