cocos2d 嵌入网页_在 cocos2d-x 中嵌入浏览器
在 cocos2d-x 中嵌入浏览器
次阅读
Embeds a browser in cocos2d-x
在游戏中嵌入网页是很常见的需求,cocos2d-x 引擎官方并没有提供这个功能。
我在网上转了一圈,把找到的资料做了一些修改,将其集成到我们使用的 quick-cocos2d-x 引擎中。
主要代码来自:CCXWebview,这里 还有一篇专门讲解Android嵌入浏览器的文章,可以参考。
集成的类叫做 CCWebView,位于 extensions 之中。
本文基于 cocos2d-x 2.x,下面的 Android 平台部分介绍了一些 cocos2d-x 3.x的相关信息。
效果如下:
显示本博客
在浏览器中输入
做什么?
在游戏中,我们需要显示系统公告,或者制作一些需要复杂图文混排的界面,这些东西如果用 cocos2d-x 来做,未免太过麻烦。嵌入一个网页就简单的多。
现在的修改能满足这样一些简单的使用:
显示一个指定地址的网页,设定网页的大小和位置;
更新一个已经显示的网页的内容;
关闭已经显示的网页。
然后,就没有了。因为目前的项目不需要和浏览器交互,所以希望用 CCWebView 来实现一个商城的话可能会比较难办,要做一些扩展。
在 Android 中,浏览器与 Game 并不在一个线程,因此也没有提供把让cocos2d-x 来控制增加浏览器的关闭按钮之类的功能。如果要实现这些,最好的方法是浏览器不做全屏,然后用cocos2d-x实现一些按钮放在浏览器之上,点击按钮调用 CCWebView 的关闭函数。
怎么做?
这里只放出lua代码,C++请脑补。
创建内嵌浏览器并显示一个网站:
1-- 创建一个CCWebView,同时设置ActivityName为主Activity的包(后面会详述)
2self._webview = CCWebView:create("us/t1201/testplayer/Testplayer")
3self._webview:retain()
4-- 显示一个网页,坐标20,20(左上角为0,0),宽度1000, 高度500
5self._webview:showWebView("http://zengrong.net", 20, 20, 1000, 500)
6-- 显示包名
7print("getActivityName:", self._webview:getActivityName())
更新已有浏览器中显示的网址,移除并销毁浏览器:
1self._webview:updateURL("https://blog.zengrong.net/post/2112.html")
2self._webview:removeWebView();
3self._webview:release()
4self._webview = nil
封装
为了方便使用,我封装了一个 webview.lua 放在 framework 里面,这样只需要记住 show 和 remove 方法就好了。
由于C++中没有处理CCWebView可能重复的情况,我把 webview 做成单例的,保证任何时候都只有一个 CCWebView 在工作。
使用这个封装,我写了一个完整的测试项目,看这里:
1local WebViewTest = class("WebViewTest", function()
2return display.newNode()
3end)
4
5function WebViewTest:ctor()
6self:_showUI()
7self:_test()
8end
9
10function WebViewTest:_test()
11webview.setActivityName("us/t1201/testplayer/Testplayer")
12print("getActivityName:", webview.getActivityName())
13end
14
15function WebViewTest:_showUI()
16local __menu = ui.newMenu({
17ui.newTTFLabelMenuItem(
18{
19text="show(http://zengrong.net, 20,20,1000,500)",
20listener = function()
21webview.show("http://zengrong.net", 20,20, 1000, 500)
22end
23}),
24ui.newTTFLabelMenuItem(
25{
26text="show(http://zhihu.com, 0,0,500,300)",
27listener = function()
28webview.show("http://zhihu.com", 0,0, 500, 300)
29end
30}),
31ui.newTTFLabelMenuItem(
32{
33text="show(http://github.com)",
34listener = function()
35webview.show("http://github.com")
36end
37}),
38ui.newTTFLabelMenuItem(
39{
40text="remove()",
41listener = function()
42webview.remove()
43end
44}),
45})
46:addTo(self)
47:pos(display.cx,display.bottom+100)
48__menu:alignItemsVertically()
49end
50
51return WebViewTest
需要注意的是,在上面的例子中,如果希望改变已有的内嵌浏览器的大小,必须先remove才可以生效。
跨平台
目前内嵌浏览器仅支持 iOS 和Android 平台。以下是一些需要注意的地方(非常重要!):
Android 平台
在创建CCWebView的时候必须提供你的项目的主Activity的包路径和类名。CCWebView 需要结合主Activity中提供的一些方法才能工作。这些方法我已经添加到 项目模板 中。
如果是老项目,请比较 项目模版 和自己的主Activity的区别,加入缺少的方法(相信我,这很简单)。
如果是新项目,请使用项目创建程序 create_project 来创建。它会使用模版来自动加入这些方法。
注意写包路径和类名的格式与JAVA的习惯不同,需要把点 . 替换成斜线 / 。
使用 getActivityName() 方法可以返回传入的包名。
对于 cocos2d-x 3.x,由于Activity继承自NativeActivity,因此需要使用 getWindowManager().addView() 来加入Android控件。详见:Cocos2d-x 3.0beta成功添加Android的webview 。
iOS 平台
iOS不需要提供包名,因此可以直接使用不带参数的 create() 方法来创建 CCWebView 。但为了避免判断平台使用不同的创建方法,也可以直接传入 Android 中需要的包名。iOS平台下的代码不会记录和处理这个值。
使用 getActivityName() 方法将总是返回空字符串。
在iOS平台上,浏览器的分辨率设定是个问题。对于高清设备,你传递的值其实是真实值的一半。例如在iPhone5上调用这句:
1showWebView("http://zengrong.net", 20, 20, 1000, 500)
那么最终显示的效果是浏览器宽度超出屏幕。因为这里的宽度1000其实等于2000。
而在标清设备上(例如iPad2),传递的宽度就是真实的宽度。
Mac OS X 平台
在 quick-x-player Mac 版本中,调用 CCWebView 的方法将不会有任何作用,也不会报错,这是正常的。
Windows 平台
在 quick-x-player Windows 版本中,调用 CCWebView 的方法将不会有任何作用,也不会报错,这是正常的。
cocos2d 嵌入网页_在 cocos2d-x 中嵌入浏览器相关推荐
- html中看到php代码_如何在HTML中嵌入PHP代码
如何在HTML中嵌入PHP代码 对于一个有经验的 PHP Web 开发者,在HTML中嵌入PHP代码是一件非常容易的事情.但是对于刚开始接触 PHP 编程语言的新手这就是一个问题.下面是小编为大家带来 ...
- wordpress地图_如何在WordPress中嵌入必应地图
wordpress地图 Do you want to embed Bing Maps on your WordPress website? If you are looking for a Googl ...
- php 嵌入手机百度地图,C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点:WebBr ...
- java applet 嵌入网页_在网页中插入Java Applet
Java Applet 是一种允许开发并可以嵌入Web页面的编程语言.Java Applet 小程序是在Java 的基础上演变而成的应用程序,可以嵌入到网页中用来执行一定的任务. 语法: 举例: 插入 ...
- react中嵌入网页_在网站中添加 React
根据需要选择性地使用 React. React 从一开始就被设计为逐步采用,并且你可以根据需要选择性地使用 React.可能你只想在现有页面中"局部地添加交互性".使用 React ...
- dw怎么在框架中加入网页_如何在Dreamweaver中创建框架结构? dw设置框架结构的教程...
Dreamweaver不仅可以制作静态网页,还可以制作动态网页. 在网页制作中,通常存在相同类型的网页,并且表格通常用于布局. 但是有时有些表格布局不能满足网页的需求. 当同一页面上有多个子页面时,您 ...
- python在电脑上的图标_在python scrip中嵌入图标
实际上,函数iconbitmap只能接收作为参数的文件名,因此需要有一个文件.您可以在链接之后生成图标的Base64版本(字符串版本),上载文件并将结果作为变量字符串复制到源文件中.将其提取到临时文件 ...
- vscode 运行html服务器运行_如何在vscode中调用浏览器运行html?
展开全部 打开vscode编辑器,点击编辑器主界面左上侧第五个小图标--e69da5e6ba903231313335323631343130323136353331333365633864'扩展'按钮 ...
- html页面嵌入markdown,html – 在R markdown中嵌入图形输出
我们第一次发布RPub时遇到了同样的问题. Here是已发布的RPub中的代码. 一旦它在RPubs.com上发布而不是在预览中,图表就会显示出来.您可以使用RPub中的"在浏览器中打开&q ...
最新文章
- mongodb检查点_mongodb 监控命令mongostat
- 在CGD中快速实现多线程的并发控制
- linux的python2.7的paramiko_Python使用paramiko操作linux的方法讲解
- AC日记——双栈排序 洛谷 P1155
- Alpha冲刺Day5
- vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
- 用.NET模拟天体运动
- javascript OOP(下)(九)
- 30 行 Javascript 代码搞定智能家居系统
- Android 支持主线 Linux 内核指日可待?
- 极客大学架构师训练营 框架开发 第三次作业
- 一层交换 二层交换 三层交换 四层交换 七层交换 OSI参考模型
- iOS 蓝牙开发中数据收发的坑
- matlab 正交park变换 功率守恒,第二章功率变换.ppt
- 高职医学计算机考试科目一模拟试题,医学影像技术考试题库
- unity 简易的小地图导航
- 2022年卫浴行业报告:套系化+智能化拓宽边际,箭牌家居内资领航
- gateway oauth2 对称加密_深入理解Spring Cloud Security OAuth2及JWT
- Java负整数的左移、右移、无符号右移
- 何一娜:诺基亚软件开发工程师典型的一天