0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙上搭建Cocos开发环境

OpenHarmony技术社区 来源:OST开源开发者 作者:OST开源开发者 2022-12-26 10:01 次阅读

沉潜学业许久,终于有时间来更新博客了。早在 2021 年 Cocos 游戏引擎已支持导出 HarmonyOS 工程,在 11 月份 Cocos 又继续推出了 OpenHarmony 版本编辑器。

本文基于过去踩过的坑坑洼洼,总结一套 Cocos 游戏开发环境的搭建和一些需要注意的事项。

Cocos-Dashboard下载

Cocos-Dashboard 下载:

https://www.cocos.com/creator-download
8e0f6ef4-8468-11ed-bfe3-dac502259ad0.png

任意点击“从 Dashboard 安装”,下载 Dashboard。

8e2f4670-8468-11ed-bfe3-dac502259ad0.png

下载安装完毕后,注册 Cocos 账号登录即可。

Cocos-Editor 下载

打开 Cocos-Dashboard,选择编辑器->下载编辑器。

8e4d4a1c-8468-11ed-bfe3-dac502259ad0.png

选择下载编辑器 3.6.1 版本即可。

8e5e4c4a-8468-11ed-bfe3-dac502259ad0.png

这里建议点击设置,将默认下载路径放置 C 盘以外。

8e77f1b8-8468-11ed-bfe3-dac502259ad0.png

正常的 3.X 版本能够导出 Web,Windows,AndroidHarmonyOS,快游戏等多平台,但是目前导出 OpenHarmony 工程需要下载特定编辑器。下载资源在文末。

下载好后解压至 Cocos-editor 目录下:

8e925a76-8468-11ed-bfe3-dac502259ad0.png

命名为 3.6.1-oh,该版本是基于 3.6.1 版本编辑器的,要与原来的 3.6.1 编辑器进行区分,也只有该版本才能导出 OpenHarmony 工程。

进入到刚刚解压好的编辑器文件夹内,双击 Cocoscreator.exe。

8eb52eca-8468-11ed-bfe3-dac502259ad0.png

点击打卡 Dashboard,此时成功添加 oh 版本的编辑器。

8ecf0d90-8468-11ed-bfe3-dac502259ad0.png

8ee787b2-8468-11ed-bfe3-dac502259ad0.png

导出HarmonyOS 工程

①新建 Cocos 工程

安装 JAVA API5:

8f06179a-8468-11ed-bfe3-dac502259ad0.png

Cocos 导出的是基于 Java 的 HarmonyOS 工程,后续我们可通过反射来实现 Cocos 引擎调用鸿蒙分布式能力。

新建 Cocos-3D 工程:打开 Dashboard,选择项目->Empty 3D,并自定义工程名称,点击创建。

8f29c334-8468-11ed-bfe3-dac502259ad0.png

新建场景 scene:点击层级管理器区域,按下 ctrl+S。

8f5347fe-8468-11ed-bfe3-dac502259ad0.png

点击保存即可:

8f83aa02-8468-11ed-bfe3-dac502259ad0.png

创建空节点 root:

8fa27e82-8468-11ed-bfe3-dac502259ad0.png

创建资源文件夹:在资源管理器的 assets 文件夹下,创建 model 文件夹。

8fb05b4c-8468-11ed-bfe3-dac502259ad0.png

下载文末附件的 model.zip,并且解压,全选文件,拖入到刚刚创建的 model 文件夹中。

8fbfa070-8468-11ed-bfe3-dac502259ad0.png

8fe708e0-8468-11ed-bfe3-dac502259ad0.png

将模型拖入到 root 节点,点击 file.fbx 文件拖入到 root 中,root 节点下新增 file 节点。

8ff9c228-8468-11ed-bfe3-dac502259ad0.png 双击 file 节点,可在场景编辑器中查看。

900530fe-8468-11ed-bfe3-dac502259ad0.png

如果此时发现渲染的模型太小,点击窗口,让场景管理器获得聚焦,按住鼠标右键,控制 WASD 方向键进行漫游,找到模型所在位置,调整位置,让模型处在视图中间。

点击 Main Camera:可见此时摄像机视角不是我们所想要的正面视角。

9022a490-8468-11ed-bfe3-dac502259ad0.png

点击 Main Camera,确保其为选中状态,同时按下 ctrl+shift+F,摄像头将自动调制成预览器视角。

9044b9fe-8468-11ed-bfe3-dac502259ad0.png

可见当前摄像机视角画面偏暗。

点击 Main light:确保其为选中状态,同时按下 ctrl+shift+F,光源将会自动照在当前视角。

905b4994-8468-11ed-bfe3-dac502259ad0.png

②进行网页预览

可在本地回环网址 127.0.0.1 进行预览:

9072a21a-8468-11ed-bfe3-dac502259ad0.png

908b0f80-8468-11ed-bfe3-dac502259ad0.png

③编写 TypeScript 脚本,让 model 转动起来

首先按下 ctrl+S 保存一下当前进度。

新建 script 文件夹:新建 TypeScript 脚本文件,右键文件夹->创建->脚本->New Component,命名为 main。

90a1cfa4-8468-11ed-bfe3-dac502259ad0.png

90c94bd8-8468-11ed-bfe3-dac502259ad0.png

设置默认脚本编辑器:编辑器左上角 Cocos Creator->偏好设置->外部程序->默认脚本编辑器。

跟踪到常用的代码 IDE.exe 文件即可,我这里用的是 IDEA。

90d3584e-8468-11ed-bfe3-dac502259ad0.png

90e9b0e4-8468-11ed-bfe3-dac502259ad0.png

编写业务逻辑:双击 main.ts 文件。

90fbe2be-8468-11ed-bfe3-dac502259ad0.png

main.ts 编写代码如下:

import{_decorator,Component,Node,Vec3}from'cc';
const{ccclass,property}=_decorator;

@ccclass('main')
exportclassmainextendsComponent{
start(){

}

update(deltaTime:number){
this.node.setRotationFromEuler(newVec3(this.node.eulerAngles.x,this.node.eulerAngles.y+1,this.node.eulerAngles.z))
}
}
回到 Cocos 编辑器中,点击 root 根节点下的 file 节点,将 main.ts 脚本拖入到属性检查器中。

913c9a16-8468-11ed-bfe3-dac502259ad0.png

模拟器预览:可见此时模型以及转动起来。

915f7b08-8468-11ed-bfe3-dac502259ad0.png

④导出 HarmonyOS 工程

配置 HarmonyOS-SDK:点击左上角 Cocos Creator->偏好设置->外部程序。

设置 HarmonyOS-SDK 和 NDK,HarmonyOS-SDK 位置可在 Devecho 的 tools 栏下的 SDKManager 中查看。

如果 native-SDK 中存在多个版本,需要具体到某个具体版本文件夹中,这里建议使用 JAVA-API5 以上的版本。

9177ea8a-8468-11ed-bfe3-dac502259ad0.png

而 SDK 一栏只需要具体到根目录即可。

918c4a16-8468-11ed-bfe3-dac502259ad0.png

项目构建:点击项目->构建发布。

91b1775a-8468-11ed-bfe3-dac502259ad0.png

按照如下方式填写:

91c7ae80-8468-11ed-bfe3-dac502259ad0.png

91e2dc14-8468-11ed-bfe3-dac502259ad0.png

资源服务地址随意填写网址即可,点击构建,构建完毕后,点击文件夹按钮。

91f89aae-8468-11ed-bfe3-dac502259ad0.png

进入到如图路径,点击文件夹根目录->进入 native 目录。

920597f4-8468-11ed-bfe3-dac502259ad0.png

9213e93a-8468-11ed-bfe3-dac502259ad0.png

进入到 engine 目录,ohos 即为 HarmonyOS 工程。

9225119c-8468-11ed-bfe3-dac502259ad0.png

92359922-8468-11ed-bfe3-dac502259ad0.png

编译 HarmonyOS 工程:用 DevEcho 打开项目根目录 /native/engine/ohos 文件。

924b03f2-8468-11ed-bfe3-dac502259ad0.png

用数据线连接 HarmonyOS 设备(手机,平板,智慧屏),进行自动签名。

自动签名方式不在赘述,打开 ohos 项目级 build.gradle 文件。其中 debug 签名为刚刚的自动签名,而 release 签名是 cocos 导出工程自带的手动签名文件,现已失效,我们需要将 debug 的签名内容替换掉 release 中的内容。

我们需要对 2 个项目级别的 build.gradle 进行签名替换。

92629d14-8468-11ed-bfe3-dac502259ad0.png

替换 ohos/build.gradle:

927ff12a-8468-11ed-bfe3-dac502259ad0.png

替换 ohos/entry/build.gradle:

929d8294-8468-11ed-bfe3-dac502259ad0.png

编译工程,安装进入 HarmonyOS 设备。

92b9ceae-8468-11ed-bfe3-dac502259ad0.png

运行工程:

92c9ad4c-8468-11ed-bfe3-dac502259ad0.gif

导出OpenHarmony 工程

准备:OpenHarmony 开发板(九联 tiger,Dayu200),烧录 3.2 beta2 版本系统(可由每日构建下载 9 月之后的版本)。3.2.5.5 版本 native 和 ETS(API)目前仅支持该版本,SDK 见阅读原文。

添加 3.2.5.5 版本 SDK/NDK:考虑到目前新版已经来到 3.2.7.x,目前导出 OpenHarmony-Cocos 工程需要 3.2.5.5 版本,因此我们需要手动添加 SDK 和 NDK。

解压 ets-windows-3.2.5.6-beta2 压缩包:

931af3b4-8468-11ed-bfe3-dac502259ad0.png

解压 3.2.5.5-ETS 文件:解压到 OpenHarmonySDK-ETS 路径下,并把文件夹名字从 ets 改到 3.2.5.5。

93397c58-8468-11ed-bfe3-dac502259ad0.png

93576696-8468-11ed-bfe3-dac502259ad0.png

如果 ETS-SDK 文件夹中存在 3.2.7.x 版本,则需要将该文件改名,添加几个字符后缀,这样 IDE 就会检测不到该版本的 SDK,就只会使用 3.2.5.5 的版本。(IDE 默认使用最高版本,所以需要把高于 3.2.5.5 的文件都改名)

进入到 3.2.5.5 文件夹,修改配置文件,修改 oh-uni-package.json,防止更新。

{
"apiVersion":"9",
"displayName":"Ets",
"meta":{
"metaVersion":"3.0.0"
},
"path":"ets",
"releaseType":"Beta2",
"version":"3.2.5.5"
}
需要注意,进入 IDE 的时候会提示 SDK 可升级,千万不要进行升级!

解压 native-windows-3.2.5.6-beta2 文件:

93721b12-8468-11ed-bfe3-dac502259ad0.png 将压缩包里的 native 文件夹,解压到 OpenHarmony-SDK 路径下的 native 文件夹中,同样把该文件夹名改为 3.2.5.5(原为 native)

93917976-8468-11ed-bfe3-dac502259ad0.png

93aeb4dc-8468-11ed-bfe3-dac502259ad0.png

同理,如果此时存在更高版本的 native 文件夹,也需要添加后缀让 IDE 识别不到更高的版本。

配置 OpenHarmonySDK/NDK:点击 CocosCreator->偏好设置->外部程序,追踪到 OpenHarmonySDK 根目录即可。

93bd8250-8468-11ed-bfe3-dac502259ad0.png

构建 OpenHarmony 工程:我们沿用第三节创建的 Cocos 工程,不过这里我们使用 3.6.1-oh 版本编辑器进行打开,在第一节中我们已经安装了该编辑器,并命名为 3.6.1-oh。

93d4b2e0-8468-11ed-bfe3-dac502259ad0.png

由于这里使用九联 tiger 版演示,其自带的屏幕分辨率为 800x400,我们需要重新设置分辨率。

点击项目->项目设置,设置宽高。这里根据实际分辨率进行设置即可。

93e1bcd8-8468-11ed-bfe3-dac502259ad0.png

构建工程:点击项目->构建发布->新建构建项目,勾选导出 OpenHarmony 工程,勾选调试模式。

93ee5a6a-8468-11ed-bfe3-dac502259ad0.png

93ee5a6a-8468-11ed-bfe3-dac502259ad0.png

点击构建:同理,点击 OpenHarmony 栏下的文件夹。

94199a72-8468-11ed-bfe3-dac502259ad0.png

项目根目录 /native/engine/openHarmony 文件夹,即为导出的 OpenHarmony 工程。

编译 OpenHarmony 工程:同理,用 DevEcho 打开 OpenHarmony 工程,工程结构如下。

9434803a-8468-11ed-bfe3-dac502259ad0.png

自动签名即可,连接开发板,编译运行程序即可:

94447b7a-8468-11ed-bfe3-dac502259ad0.gif

注意事项

OpenHarmony/HarmonyOS 的 SDK 路径,可在 tools-sdk manager 中查看。

94a7fa9c-8468-11ed-bfe3-dac502259ad0.png

94c3afd0-8468-11ed-bfe3-dac502259ad0.png

HarmonyOS 工程导出:

需要在 Cocos 偏好设置->外部程序中配置对应的 SDK 和 NDK 路径,导出的工程默认使用 JAVA-API5

自动签名时需要确保 ohos 下的 build.gradle 文件和 entry 目录下 build.gradle 文件的 debug 签名和 release 签名一致,均为自动化签名的信息(其自带的签名文件不可用)

OpenHarmony 工程导出:

目前只能使用 3.2.5.5-ETS 和 NATIVE 版本和 3.6.1-oh 版本编辑器,下载资源均在“阅读原文”。

构建发布时,记得勾选调试模式。

结语

在 HarmonyOS 侧,Cocos 引擎提供了 3D 场景绘制功能,目前已实现 Cocos 侧反射调用 HarmonyOS 分布式能力,可以做出非常有有意思的东西。

另外 OpenHarmony 侧还需等待 Cocos 侧进一步适配,同时开发板自身的渲染计算能力也是硬条件。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发环境
    +关注

    关注

    1

    文章

    206

    浏览量

    16489
  • 编辑器
    +关注

    关注

    1

    文章

    793

    浏览量

    30674
  • Cocos
    +关注

    关注

    0

    文章

    7

    浏览量

    2564
  • 鸿蒙
    +关注

    关注

    55

    文章

    2123

    浏览量

    42274
  • OpenHarmony
    +关注

    关注

    24

    文章

    3480

    浏览量

    15426

原文标题:鸿蒙上搭建Cocos开发环境

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙开发南向环境搭建教学

    南向开发环境搭建教学,更多鸿蒙开发资料可以前往高清完整版 《鸿蒙
    发表于 01-05 16:38

    【HarmonyOS】鸿蒙系统介绍 和 编译环境搭建

    /oem_sourcecode_guide-0000001050769927 官方技术社区:https://harmonyos.51cto.com/ 第2章 开发环境搭建关于开发
    发表于 10-20 11:19

    鸿蒙设备学习菜鸟指南》之 【五、搭建开发环境

    ` 本帖最后由 HonestQiao 于 2020-10-30 14:00 编辑 《鸿蒙设备学习菜鸟指南》之 【五、搭建开发环境】[目录索引]五、
    发表于 10-30 13:59

    鸿蒙系统开发环境搭建(总有一种方式适合你~~)

    连老师文:目前鸿蒙系统的环境开发搭建比较复杂,本文在这里做个总结。完整的开发环境包括:Linux
    发表于 11-04 14:29

    鸿蒙硬件HI3861开发环境搭建 精选资料分享

    鸿蒙HI3861开发环境搭建1.板子在哪里买https://item.taobao.com/item.htm?spm=a1z09.2.0.0.6b0a2e8d93tcAY&id
    发表于 07-22 06:42

    怎样去搭建一种基于ArchLinux的鸿蒙开发环境

    怎样去搭建一种基于ArchLinux的鸿蒙开发环境呢?如何对基于ArchLinux的鸿蒙开发
    发表于 12-28 06:27

    HI3861 鸿蒙开发环境怎么搭建

    Hi3861的鸿蒙开发环境怎么搭建,有没详细说明交叉编译工具包在哪下载鸿蒙设备开发网上没搜索到新
    发表于 05-08 20:25

    全新适配鸿蒙生态,Cocos引擎助力3D应用开发

    一、适配HarmonyOS背景HarmonyOS 3.1版本自发布以来,备受广大开发者的好评,同时也吸引了鸿蒙生态众多伙伴的青睐。鸿蒙生态所强调的智慧全场景、多端联动与跨设备流转等能力,与Co
    发表于 04-14 09:25

    全新适配鸿蒙生态,Cocos引擎助力3D应用开发

    ,与Cocos所具有的跨平台、低功耗、高性能三大核心特点不谋而合。Cocos作为内容开发工具,将在鸿蒙生态中焕发出强劲的生命力。 Cocos
    发表于 04-14 11:37

    如何搭建鸿蒙开发环境

    开发某一个平台的程序,那么首先要搭建出本地开发环境,那么如何搭建鸿蒙
    的头像 发表于 02-24 11:25 3381次阅读
    如何<b class='flag-5'>搭建</b><b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>环境</b>

    Cocos引擎远程真机设备来开发鸿蒙游戏教程

    开发者,突发奇想,能否双剑合璧,用远程真机设备来开发鸿蒙游戏呢? 总个过程比预想的顺畅多了,没有遇到太多坑,推荐游戏开发者去体验一下鸿蒙
    的头像 发表于 06-30 08:56 1795次阅读
    用<b class='flag-5'>Cocos</b>引擎远程真机设备来<b class='flag-5'>开发</b><b class='flag-5'>鸿蒙</b>游戏教程

    鸿蒙上使用Python进行物联网编程

    炫耀!然而,这却是非常重要的一步:在鸿蒙上用使用 Python 进行物联网编程是可行的!!! 既然可行,加上 Python 语言天生的优势(易于掌握,开发效率高),那么真的值得持续打造,将鸿蒙上的 Python 进行到底。 所以
    的头像 发表于 09-28 09:55 3928次阅读
    在<b class='flag-5'>鸿蒙上</b>使用Python进行物联网编程

    Digispark开发环境搭建

    Digispark开发环境搭建
    发表于 11-15 20:51 16次下载
    Digispark<b class='flag-5'>开发</b><b class='flag-5'>环境</b><b class='flag-5'>搭建</b>

    鸿蒙上开发“小蜜蜂”游戏

    小时候我们有个熟悉的游戏叫小蜜蜂。本文教大家在鸿蒙上学做这个小蜜蜂游戏。
    的头像 发表于 04-03 11:27 1362次阅读

    全新适配鸿蒙生态,Cocos引擎助力3D应用开发

    作者:张小明,Cocos引擎架构师 一 适配HarmonyOS背景 HarmonyOS 3.1版本自发布以来,备受广大开发者的好评,同时也吸引了鸿蒙生态众多伙伴的青睐。 鸿蒙生态所强调
    的头像 发表于 04-14 15:10 466次阅读