在游戏中嵌入网页是很常见的需求,Cocos2d-x 引擎官方并没有提供这个功能。
我在网上转了一圈,把找到的资料做了一些修改,将其集成到我们使用的 Quick-Cocos2d-x 引擎中。
主要代码来自: CCXWebview
集成的类叫做 CCWebView,位于 extensions 之中。
做什么?
在游戏中,我们需要显示系统公告,或者制作一些需要复杂图文混排的界面,这些东西如果用 cocos2d-x 来做,未免太过麻烦。嵌入一个网页就简单的多。
在 Android 中,浏览器与 Game 并不在一个线程,因此也没有提供把让cocos2d-x 来控制增加浏览器的关闭按钮之类的功能。如果要实现这些,最好的方法是浏览器不做全屏,然后用cocos2d-x实现一些按钮放在浏览器之上,点击按钮调用 CCWebView 的关闭函数。
怎么做?
这里只放出lua代码,C++请脑补。
创建内嵌浏览器并显示一个网站:
Android 平台
在创建CCWebView的时候必须提供你的项目的主Activity的包路径和类名。CCWebView 需要结合主Activity中提供的一些方法才能工作。这些方法我已经添加到项目模板中。
注意写包路径和类名的格式与JAVA的习惯不同,需要把点 . 替换成斜线 / 。
使用 getActivityName() 方法可以返回传入的包名。
iOS 平台
iOS不需要提供包名,因此可以直接使用不带参数的 create() 方法来创建 CCWebView 。但为了避免判断平台使用不同的创建方法,也可以直接传入 Android 中需要的包名。iOS平台下的代码不会记录和处理这个值。
使用 getActivityName() 方法将总是返回空字符串。
Mac OS X 平台
在 quick-x 的 Mac 模拟器中,调用 CCWebView 的方法将不会有任何作用。
Windows 平台
原文链接:https://www.f2er.com/cocos2dx/344818.html我在网上转了一圈,把找到的资料做了一些修改,将其集成到我们使用的 Quick-Cocos2d-x 引擎中。
主要代码来自: CCXWebview
集成的类叫做 CCWebView,位于 extensions 之中。
效果如下:
在浏览器中输入
做什么?
在游戏中,我们需要显示系统公告,或者制作一些需要复杂图文混排的界面,这些东西如果用 cocos2d-x 来做,未免太过麻烦。嵌入一个网页就简单的多。
现在的修改能满足这样一些简单的使用:
1. 显示一个指定地址的网页,设定网页的大小和位置;
2. 更新一个已经显示的网页的内容;
3. 关闭已经显示的网页。
然后,就没有了。因为目前的项目不需要和浏览器交互,所以希望用 CCWebView 来实现一个商城的话可能会比较难办,要做一些扩展。
在 Android 中,浏览器与 Game 并不在一个线程,因此也没有提供把让cocos2d-x 来控制增加浏览器的关闭按钮之类的功能。如果要实现这些,最好的方法是浏览器不做全屏,然后用cocos2d-x实现一些按钮放在浏览器之上,点击按钮调用 CCWebView 的关闭函数。
怎么做?
这里只放出lua代码,C++请脑补。
创建内嵌浏览器并显示一个网站:
更新已有浏览器中显示的网址,移除并销毁浏览器:
1
2
3
4
|
self._webview:removeWebView();
self._webview:release()
self._webview = nil
|
封装
为了方便使用,我封装了一个 webview.lua 放在 framework 里面,这样只需要记住 show 和 remove 方法就好了。
由于C++中没有处理重复的CCWebView的情况,我把 webview 做成单例的,保证任何时候都只有一个 CCWebView 在工作。
使用这个封装,我写了一个完整的测试项目,看这里:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@H_301_294@
21
22
23
24
25
26
27
@H_301_308@
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
local WebViewTest =
class
(
"WebViewTest"
,function()
return
display.newNode()
end)
function WebViewTest:ctor()
self:_showUI()
self:_test()
end
function WebViewTest:_test()
webview.setActivityName(
"us/t1201/testplayer/Testplayer"
)
print(
"getActivityName:"
,webview.getActivityName())
end
function WebViewTest:_showUI()
local __menu = ui.newMenu({
ui.newTTFLabelMenuItem(
{
listener = function()
end
}),
ui.newTTFLabelMenuItem(
{
listener = function()
end
}),
ui.newTTFLabelMenuItem(
{
listener = function()
end
}),
ui.newTTFLabelMenuItem(
{
text=
"remove()"
,
listener = function()
webview.
remove
()
end
}),
})
:addTo(self)
:pos(display.cx,display.bottom+100)
__menu:alignItemsVertically()
end
return
WebViewTest
|
需要注意的是,在上面的例子中,如果希望改变已有的内嵌浏览器的大小,必须先remove才可以生效。
跨平台
目前内嵌浏览器仅支持 iOS 和Android 平台。以下是一些需要注意的地方:Android 平台
在创建CCWebView的时候必须提供你的项目的主Activity的包路径和类名。CCWebView 需要结合主Activity中提供的一些方法才能工作。这些方法我已经添加到项目模板中。
注意写包路径和类名的格式与JAVA的习惯不同,需要把点 . 替换成斜线 / 。
使用 getActivityName() 方法可以返回传入的包名。
iOS 平台
iOS不需要提供包名,因此可以直接使用不带参数的 create() 方法来创建 CCWebView 。但为了避免判断平台使用不同的创建方法,也可以直接传入 Android 中需要的包名。iOS平台下的代码不会记录和处理这个值。
使用 getActivityName() 方法将总是返回空字符串。
Mac OS X 平台
在 quick-x 的 Mac 模拟器中,调用 CCWebView 的方法将不会有任何作用。
Windows 平台
目前可能无法编译 quick-x Windows 模拟器,我正在安装 Virtual Box 来解决这个问题。
本文已经在CocoaChina论坛Quick-Cocos2d-x讨论区中发布,欢迎大家来参与讨论!