【HarmonyOS 5】Laya游戲如何鴻蒙構(gòu)建發(fā)布詳解

##鴻蒙開(kāi)發(fā)能力 ##HarmonyOS SDK應(yīng)用服務(wù)##鴻蒙金融類應(yīng)用 （金融理財(cái)#

一、前言

LayaAir引擎是國(guó)內(nèi)最強(qiáng)大的全平臺(tái)引擎之一，當(dāng)年H5小游戲火的時(shí)候，騰訊入股了臘鴨。我還在游戲公司的時(shí)候，17年曾經(jīng)開(kāi)發(fā)使用臘鴨的H5小游戲，很懷念當(dāng)年和臘鴨同事一起解決問(wèn)題的時(shí)光。

從使用TypeScript開(kāi)發(fā)語(yǔ)言，到界面組件封裝，再到全平臺(tái)發(fā)布，臘鴨走過(guò)的路與鴻蒙很相似。很多設(shè)計(jì)理念也很貼近。作為基礎(chǔ)開(kāi)源，定制商業(yè)化的全平臺(tái)引擎，臘鴨在H5引擎市場(chǎng)上的占有率相當(dāng)高。

Layabox成立于2014年，旗下的開(kāi)源引擎產(chǎn)品LayaAir發(fā)布于2016年，已擁有超百萬(wàn)的全球開(kāi)發(fā)者，是HTML5與小游戲領(lǐng)域的3D龍頭引擎。

除了H5 3D小游戲，臘鴨也可以通過(guò)2D引擎開(kāi)發(fā)H5應(yīng)用或者H5 2D小游戲。

鴻蒙作為一個(gè)嶄新的操作系統(tǒng)，H5小游戲和H5應(yīng)用的助力可以極大豐富其生態(tài)。并且臘鴨的開(kāi)發(fā)和學(xué)習(xí)入門上手較為簡(jiǎn)單，也可以為小游戲和H5開(kāi)發(fā)小伙伴，在鴻蒙市場(chǎng)，帶來(lái)廣闊的未來(lái)前景。

今天本文主要講解臘鴨的背景，臘鴨開(kāi)發(fā)環(huán)境安裝和鴻蒙構(gòu)建發(fā)布。

二、LayaAir環(huán)境安裝

官方環(huán)境搭建文章，點(diǎn)擊跳轉(zhuǎn)

LayaAir分為游戲引擎和編碼工具兩個(gè)部分。最早當(dāng)年是自研的IDE一起負(fù)責(zé)了，后來(lái)將編碼環(huán)境切換為了VSCode。

所以現(xiàn)在我們的Laya環(huán)境首先需要安裝[LayaAirIDE] 和[VSCode] 。

之后因?yàn)長(zhǎng)aya開(kāi)發(fā)的編程語(yǔ)言是TypeScript，所以需要安裝Node開(kāi)發(fā)環(huán)境，并且要install TSC，用于將TS代碼轉(zhuǎn)化為JS代碼。最后Laya的代碼都是js代碼。

npm install -g typescript

瀏覽器是方便調(diào)試，可選擇安裝。若是Window系統(tǒng)，使用自帶的Edge瀏覽也可?；蛘甙惭bGoogleChrome

下圖是安裝完LayaAirIDE之后，選擇2D示例項(xiàng)目創(chuàng)建打開(kāi)后的效果：

**

三、鴻蒙構(gòu)建發(fā)布

點(diǎn)擊文件-構(gòu)建發(fā)布，選擇鴻蒙NEXT，在右側(cè)基本無(wú)需修改，點(diǎn)擊下方的構(gòu)建鴻蒙NEXT即可。

渲染模式這里，我考慮到鴻蒙對(duì)于web是有單獨(dú)的渲染進(jìn)程，所以沒(méi)有選擇OpenGL。選擇的WebGL。

點(diǎn)擊構(gòu)建發(fā)布后，等待進(jìn)度條完成，時(shí)間較長(zhǎng)。

進(jìn)度條完成后，如上圖所示，會(huì)出現(xiàn)鴻蒙項(xiàng)目代碼，點(diǎn)擊箭頭位置就可以到源碼項(xiàng)目處。再使用DevEco Studio進(jìn)行鴻蒙項(xiàng)目自動(dòng)簽名，運(yùn)行就可運(yùn)行Laya小游戲。

上圖就是Laya的2D示例項(xiàng)目在鴻蒙手機(jī)中運(yùn)行效果的靜態(tài)截圖。目前自動(dòng)構(gòu)建的鴻蒙SDK還是API11，我嘗試動(dòng)手i修改為API2或者API17，項(xiàng)目均會(huì)報(bào)錯(cuò)。還是等待后續(xù)官方升級(jí)吧。目前看整體效果還是很不錯(cuò)。

根據(jù)構(gòu)建后的鴻蒙項(xiàng)目，我們通過(guò)Index入口文件可以發(fā)現(xiàn)，官方和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%')
  }
}

審核編輯 黃宇