/ 鸿蒙

#鸿蒙 在鸿蒙设备上开发Unity游戏的方法

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

《用DevEco 2.2远程真机调试+Cocos Creator 3.2开发一个鸿蒙游戏》
https://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

实际效果:
run-unity-game-on-harmony-device-by-webview-01

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

1. 创建鸿蒙全屏工程

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

run-unity-game-on-harmony-device-by-webview-02

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是竖屏,根据需要或者直接都替换掉。

run-unity-game-on-harmony-device-by-webview-03

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);
    }

run-unity-game-on-harmony-device-by-webview-04

并在onStart方法中调用。

run-unity-game-on-harmony-device-by-webview-05

3. 隐藏标题栏

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

下图中,展示了我的博客

https://xmanyou.com/

可以看到,标题栏还在。

run-unity-game-on-harmony-device-by-webview-06

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

run-unity-game-on-harmony-device-by-webview-07

两个步骤:

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,这次标题栏就隐藏了。

run-unity-game-on-harmony-device-by-webview-08

4. 设置Webview加载Unity Webgl游戏

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

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

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

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

run-unity-game-on-harmony-device-by-webview-09

完成~

run-unity-game-on-harmony-device-by-webview-10

如何加载本地资源?

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

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

特别鸣谢

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

run-unity-game-on-harmony-device-by-webview-11