非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法 原创 精华

IT男阿斌
发布于 2021-7-5 23:50
浏览
6收藏

@toc

上一次测试了Cocos直接打包鸿蒙应用,体验极度舒适。

《用DevEco 2.2远程真机调试+Cocos Creator 3.2开发一个鸿蒙游戏》
xmanyou.com/build-a-harmony-game-with-cocos-creator-and-run-on-remote-device

但是,对于Cocos之外的其他游戏引擎使用者,例如Laya,例如Egret,特别是Unity,有什么办法可以在鸿蒙上开发游戏呢?

由于这些引擎的底层与Cocos不同,不能直接用Cocos的代码,所以在这些引擎为鸿蒙提供原生支持之前,我们需要一个曲线救国的方法。

于是乎,我想到了:Webview。

官方文档
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158

实际效果:
非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

使用Webview在鸿蒙设备上运行Unity游戏需要几个步骤?

1. 创建鸿蒙全屏工程

在DevEco中创建一个新工程,模板选择Full Screen Ability。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

2. 添加Webview

这个工程的布局很简单,就是一个全屏的image组件,把image组件替换成webview即可。

2.1. 将模板layout中的image组件替换成webview

    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:webview"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ohos.agp.components.webengine.WebView>

注意
该模板提供了2个layout,land_main是横屏,port_main是竖屏,根据需要或者直接都替换掉。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

2.2. 初始化webview,并加载url

在MainAbilitySlice中,添加方法initWebview

    // 初始化webview,并加载url
    private void initWebview(){
        WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
        webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript,增加此行;如何使用JavaScript下文有详细介绍
        final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
        webView.load(url);
    }

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

并在onStart方法中调用。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

3. 隐藏标题栏

添加完Webview组件,就可以用它来查看网页了。

下图中,展示了我的博客

xmanyou.com/

可以看到,标题栏还在。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

为了提供更好的体验,我们想办法把它隐藏。
以下方法来自钟发发老师。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

两个步骤:

3.1. 在config.json中设置NoTitleBar

    "abilities": [
      {
...
        "metaData":{
          "customizeData":[
            {
              "name": "hwc-theme",
              "value": "androidhwext:style/Theme.Emui.NoTitleBar",
              "extra":""
            }
          ]
        }
...
    }

3.2. 在onStart中设置MARK_TRANSLUCENT_STATUS

注意,以下代码需要在setUIContent之前调用。

        // 沉浸式显示(by 钟发发老师)
        this.getWindow().addFlags(WindowManager.LayoutConfig.MARK_TRANSLUCENT_STATUS);
      // setUIContent 之前

再次测试Webview,这次标题栏就隐藏了。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

4. 设置Webview加载Unity Webgl游戏

首先,用Unity打包Webgl游戏,并上传到服务器上。
然后,用Webview加载Unity游戏的链接。

5. 打开远程真机,进行调试

与cocos项目一样,模拟器无法正常演示游戏,需要使用远程真机来调试。
参考上一篇:

《用DevEco 2.2远程真机调试+Cocos Creator 3.2开发一个鸿蒙游戏》
xmanyou.com/build-a-harmony-game-with-cocos-creator-and-run-on-remote-device/

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

完成~

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

如何加载本地资源?

你可能已经注意到了,本文介绍的方法,游戏代码是放在服务器上的,如果你没有服务器,或者想把资源放在游戏包中,可以参考官方WebView文档,里边有详细介绍如何加载本地资源。
如果有空尝试的话,我会再出一篇相关文章。

《WebView》
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158

特别鸣谢钟发发老师

非常感谢钟发发老师在我遇到困难时,第一时间伸出援手,非常感谢,比心。

非Cocos程序员别眼红了,教你在鸿蒙上开发Unity游戏的方法-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
WebviewDemo-Unity.zip 3.21M 69次下载
已于2021-7-6 10:38:20修改
10
收藏 6
回复
举报
3条回复
按时间正序
/
按时间倒序
Anzia
Anzia

我也看了老师的课程才知道隐藏标题的方法hhh

回复
2021-7-6 00:08:43
Wxueyan
Wxueyan

赞,已收藏。

回复
2021-7-6 07:50:08
老船夫
老船夫

隐藏标题栏的方法,学到了。

回复
2021-7-7 09:14:06
回复
    相关推荐