【HarmonyOS 5】Laya游戲如何鴻蒙構建發布詳解

##鴻蒙開發能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 （金融理財#

一、前言

LayaAir引擎是國內最強大的全平臺引擎之一，當年H5小游戲火的時候，騰訊入股了臘鴨。我還在游戲公司的時候，17年曾經開發使用臘鴨的H5小游戲，很懷念當年和臘鴨同事一起解決問題的時光。

從使用TypeScript開發語言，到界面組件封裝，再到全平臺發布，臘鴨走過的路與鴻蒙很相似。很多設計理念也很貼近。作為基礎開源，定制商業化的全平臺引擎，臘鴨在H5引擎市場上的占有率相當高。

Layabox成立于2014年，旗下的開源引擎產品LayaAir發布于2016年，已擁有超百萬的全球開發者，是HTML5與小游戲領域的3D龍頭引擎。

除了H5 3D小游戲，臘鴨也可以通過2D引擎開發H5應用或者H5 2D小游戲。

鴻蒙作為一個嶄新的操作系統，H5小游戲和H5應用的助力可以極大豐富其生態。并且臘鴨的開發和學習入門上手較為簡單，也可以為小游戲和H5開發小伙伴，在鴻蒙市場，帶來廣闊的未來前景。

今天本文主要講解臘鴨的背景，臘鴨開發環境安裝和鴻蒙構建發布。

二、LayaAir環境安裝

官方環境搭建文章，點擊跳轉

LayaAir分為游戲引擎和編碼工具兩個部分。最早當年是自研的IDE一起負責了，后來將編碼環境切換為了VSCode。

所以現在我們的Laya環境首先需要安裝[LayaAirIDE] 和[VSCode] 。

之后因為Laya開發的編程語言是TypeScript，所以需要安裝Node開發環境，并且要install TSC，用于將TS代碼轉化為JS代碼。最后Laya的代碼都是js代碼。

npm install -g typescript

瀏覽器是方便調試，可選擇安裝。若是Window系統，使用自帶的Edge瀏覽也可。或者安裝GoogleChrome

下圖是安裝完LayaAirIDE之后，選擇2D示例項目創建打開后的效果：

**

三、鴻蒙構建發布

點擊文件-構建發布，選擇鴻蒙NEXT，在右側基本無需修改，點擊下方的構建鴻蒙NEXT即可。

渲染模式這里，我考慮到鴻蒙對于web是有單獨的渲染進程，所以沒有選擇OpenGL。選擇的WebGL。

點擊構建發布后，等待進度條完成，時間較長。

進度條完成后，如上圖所示，會出現鴻蒙項目代碼，點擊箭頭位置就可以到源碼項目處。再使用DevEco Studio進行鴻蒙項目自動簽名，運行就可運行Laya小游戲。

上圖就是Laya的2D示例項目在鴻蒙手機中運行效果的靜態截圖。目前自動構建的鴻蒙SDK還是API11，我嘗試動手i修改為API2或者API17，項目均會報錯。還是等待后續官方升級吧。目前看整體效果還是很不錯。

根據構建后的鴻蒙項目，我們通過Index入口文件可以發現，官方和Laya合作，新增了很多配套的自定義Component組件，例如：LayaEditBox，LayaWebview，TextInputDialog。

import laya from 'liblaya.so'
import { ContextType } from '@ohos/libSysCapabilities'
import { TextInputInfo } from '@ohos/libSysCapabilities/src/main/ets/components/EditBox'
import { TextInputDialogEntity } from '@ohos/libSysCapabilities'
import { WebViewInfo } from '@ohos/libSysCapabilities/src/main/ets/components/webview/WebViewMsg'
import { VideoPlayerInfo } from '@ohos/libSysCapabilities/src/main/ets/components/videoplayer/VideoPlayer'
import { WorkerMsgUtils } from '@ohos/libSysCapabilities/src/main/ets/utils/WorkerMsgUtils'
import { WorkerManager } from '../workers/WorkerManager'
import { LayaEditBox } from '../components/LayaEditBox'
import { LayaWebview } from '../components/LayaWebview'
import { LayaVideoPlayer } from '../components/LayaVideoPlayer'
import { TextInputDialog } from '../components/TextInputDialog'
import { GlobalContext, GlobalContextConstants } from "@ohos/libSysCapabilities"
import { NapiHelper } from "@ohos/libSysCapabilities/src/main/ets/napi/NapiHelper"
import { Dialog } from "@ohos/libSysCapabilities"
import deviceInfo from '@ohos.deviceInfo';
import promptAction from '@ohos.promptAction'
import process from '@ohos.process';
import { LayaHttpClient } from '@ohos/libSysCapabilities/src/main/ets/system/network/LayaHttpClient'

const nativePageLifecycle: laya.CPPFunctions = laya.getContext(ContextType.JSPAGE_LIFECYCLE);
NapiHelper.registerUIFunctions();

let layaWorker = WorkerManager.getInstance().getWorker();
@Entry
@Component
struct Index {
  xcomponentController: XComponentController = new XComponentController();
  // EditBox
  @State editBoxArray: TextInputInfo[] = [];
  private editBoxIndexMap: Map< number, TextInputInfo > = new Map;
  // WebView
  @State webViewArray: WebViewInfo[] = [];
  private webViewIndexMap: Map< number, number > = new Map;
  // videoPlayer
  @State videoPlayerInfoArray: VideoPlayerInfo[] = [];
  private videoPlayerIndexMap: Map< number, VideoPlayerInfo > = new Map;

  // videoPlayer
  @State layaHttpClientArray: LayaHttpClient[] = [];
  private layaHttpClientIndexMap: Map< number, LayaHttpClient > = new Map;

  private pro = new process.ProcessManager();
  private m_nBackPressTime = 0;
  // textInputDialog
  showMessage: TextInputDialogEntity = new TextInputDialogEntity('');
  dialogController: CustomDialogController = new CustomDialogController({
    builder: TextInputDialog({
      showMessage: this.showMessage
    }),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    customStyle: true,
  })
  // PanGesture
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down });

  onPageShow() {
    console.log('[LIFECYCLE-Page] onPageShow');
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_EDIT_BOX_ARRAY, this.editBoxArray);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_EDIT_BOX_INDEX_MAP, this.editBoxIndexMap);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_WORKER, layaWorker);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_WEB_VIEW_ARRAY, this.webViewArray);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_WEB_VIEW_INDEX_MAP, this.webViewIndexMap);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_VIDEO_PLAYER_ARRAY, this.videoPlayerInfoArray);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_VIDEO_PLAYER_INDEX_MAP, this.videoPlayerIndexMap);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_DIALOG_CONTROLLER, this.dialogController);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_SHOW_MESSAGE, this.showMessage);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_HTTP_CLIENT_ARRAY, this.layaHttpClientArray);
    GlobalContext.storeGlobalThis(GlobalContextConstants.LAYA_HTTP_CLIENT_INDEX_MAP, this.layaHttpClientIndexMap);
    nativePageLifecycle.onPageShow();
    Dialog.setTitle(getContext(this).resourceManager.getStringSync($r('app.string.Dialog_Title').id));
  }

  onPageHide() {
    console.log('[LIFECYCLE-Page] onPageHide');
    nativePageLifecycle.onPageHide();
  }

  onBackPress() {
    console.log('[LIFECYCLE-Page] onBackPress');
    layaWorker.postMessage({ type: "exit" });
    let curtm = Date.now();
    let MaxDelay = 3500;
    if (this.m_nBackPressTime == 0 || (this.m_nBackPressTime > 0 && curtm - this.m_nBackPressTime > MaxDelay)) {
      this.m_nBackPressTime = Date.now();
      promptAction.showToast({
        message: $r('app.string.text_backpress_toast'),
        duration: 1000
      });
    } else {
      this.pro.exit(0);
    }
    return true;
  }

  onMouseWheel(eventType: string, scrollY: number) {
    // layaWorker.postMessage({ type: "onMouseWheel", eventType: eventType, scrollY: scrollY });
  }

  build() {
    // Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Stack() {
      XComponent({
        id: 'xcomponentId',
        type: 'surface',
        libraryname: 'laya',
        controller: this.xcomponentController
      })
        .focusable(true)
        .gesture(
          PanGesture(this.panOption)
            .onActionStart(() = > {
              this.onMouseWheel("actionStart", 0);
            })
            .onActionUpdate((event: GestureEvent) = > {
              if (deviceInfo.deviceType === '2in1') {
                this.onMouseWheel("actionUpdate", event.offsetY);
              }
            })
            .onActionEnd(() = > {
              this.onMouseWheel("actionEnd", 0);
            })
        )
        .onLoad((context) = > {
          console.log('[laya] XComponent.onLoad Callback');
          layaWorker.postMessage({
            type: "abilityContextInit",
            context: GlobalContext.loadGlobalThis(GlobalContextConstants.LAYA_ABILITY_CONTEXT)
          });
          layaWorker.postMessage({ type: "onXCLoad", data: "XComponent" });
          layaWorker.onmessage = WorkerMsgUtils.recvWorkerThreadMessage;
        })
        .onDestroy(() = > {
        })
      ForEach(this.editBoxArray, (item: TextInputInfo) = > {
        LayaEditBox({ textInputInfo: item });
      }, (item: TextInputInfo) = > item.viewTag.toString())

      ForEach(this.webViewArray, (item: WebViewInfo) = > {
        LayaWebview({ viewInfo: item })
      }, (item: WebViewInfo) = > item.uniqueId.toString())

      ForEach(this.videoPlayerInfoArray, (item: VideoPlayerInfo) = > {
        LayaVideoPlayer({ videoPlayerInfo: item })
      }, (item: VideoPlayerInfo) = > item.viewTag.toString())

    }
    .width('100%')
    .height('100%')
  }
}

審核編輯 黃宇