HarmonyOS鸿蒙NEXT中CocosCreator无缝实战开发小游戏《推理拼图》

HarmonyOS鸿蒙NEXT中CocosCreator无缝实战开发小游戏《推理拼图》

概述

游戏简介

《推理拼图》是一款益智类解密拼图的小游戏，玩家通过简单的思维推理拼凑出完整的拼图，进而解开拼图的名字，是一款既能从中获得乐趣又能锻炼推理思维的休闲游戏。

主要玩法

游戏中的拼图被系统智能地拆分成横、竖两个维度，玩家通过尝试点击两个维度给出的两排按钮去填充中间缺失的拼图色块，当玩家把中间的拼图刚好填充拼接完成时解锁成功。游戏提供了多种难度、丰富的关卡、多样的挑战模式给玩家体验。

项目背景

本游戏的所有内容（策划、程序客户端、程序服务器端、UI界面）都由本人一人独立完成，游戏玩法原创，是一款完整的游戏。

开发技术

本游戏客户端表层逻辑了使用CocosCreator2.4.15进行开发(开发语言为Javascript)，底层逻辑使用了端云一体化技术(云函数、预加载)进行开发(开发语言为ArkTS)，对战服务器端使用了Colyseus对战框架进行开发(开发语言为Typescript)。

游戏界面

进入主页

新的拼图

闯关模式

每日挑战

对战模式

技术难点

CocosCreator导出HarmonyOS Next工程后一键自动化转换为最终可直接编译打包的端云一体化工程

第1步

在CocosCreator工程根目录下新建一个文件夹，如native_modify，在里面放置导出默认HarmonyOS Next工程后需要覆盖修改的文件，目录结构类似如下：

第2步

CocosCreator选择：项目-构建发布，配置好“游戏名称”、“发布平台”(选择HarmonyOS Next)、“应用ID名称”，“js引擎”(选择V8)等参数后，开始构建HarmonyOS Next工程。

第3步

在CocosCreator根目录下创建空白端云一体化工程，如：MyApplication。创建完端云一体化工程MyApplication后，其项目路径下有Application文件夹和CloudProgram文件夹，Application文件夹是常规工程的内容，CloudProgram文件夹是端侧端云一体(如云函数等)的内容，可以先在此时开发调试需要的端云一体化内容(如云函数等)，之后只保留CloudProgram文件夹，然后把Application文件夹下的所以内容删除（注意不要删除Application文件夹）

第4步

在CocosCreator项目根目录下创建以下BatchCopy_CloudProj.bat批处理并执行，实现一键把CocoscCreator构建的默认HarmonyOS NEXT工程转换为最终可编译打包的端云一体化工程：

//把当前路径下native_modify文件夹下的所有内容复制替换到当前路径下build\jsb-default\frameworks\runtime-src\proj.harmonyos-next文件夹下
xcopy native_modify\* build\jsb-default\frameworks\runtime-src\proj.harmonyos-next\ /E /Y

//把build\jsb-default\frameworks\runtime-src\proj.harmonyos-next文件夹下的所有内容复制替换到MyApplication\Application文件夹下
xcopy build\jsb-default\frameworks\runtime-src\proj.harmonyos-next\* MyApplication\Application\ /E /Y

//把build\jsb-default\frameworks\cocos2d-x文件夹复制MyApplication目录下
xcopy build\jsb-default\frameworks\cocos2d-x MyApplication\cocos2d-x\ /E /Y

echo copy success!

pause

CocosCreator逻辑使用Javascript开发，底层HarmonyOS Next工程使用ArkTS开发，需要解决这两层之间的交互通信难题

1. CocosCreator层调用底层ArkTS

在ArkTS层创建需要调用的函数：entry/src/main/ets/pages/index.ets文件中，找到aboutToAppear函数，在里面的_messageHandle消息处理函数里增加想要的消息处理case，如“callFunctionA”。

2. 底层ArkTS回调通知CocosCreator层

在CocosCreator层绑定消息回调函数，如：

window.onFunctionA_Cb = (result) => {
  console.log(result);
  //得到消息参数后，处理对应逻辑
}

在ArkTS层推送消息到CocosCreator层：

import cocos from 'libcocos.so';

let result: string = "abc"
cocos.evalString("onFunctionA_Cb('" + result + "')");

使用端云一体化的云函数和预加载

1. 云函数

云函数1：loadrecentchallengeinfolist-puzzle，获取最近30天每日挑战的拼图简要信息列表。

云函数2：getchallengetata-puzzle，获取指定挑战的拼图详细数据。

2. 预加载

本项目接入了安装预加载，先在开发者联盟后台配置使用的预加载云函数（loadrecentchallengeinfolist-puzzle）。

然后在应用启动完毕时调用预加载：

import { cloudResPrefetch } from '@kit.CloudFoundationKit';

cloudResPrefetch.getPrefetchResult(cloudResPrefetch.PrefetchMode.INSTALL_PREFETCH)
  .then((data: cloudResPrefetch.PrefetchResult) => {
    hilog.info(0x0000, 'testTag', `Succeeded in getting install prefetch data, result: ${JSON.stringify(data.result)}`);
    //获取成功后先缓存起来
    AppStorage.setOrCreate("challengeData", JSON.stringify(data.result));
  }).catch((err: BusinessError) => {
  hilog.error(0x0000, 'testTag', `Failed to get install prefetch data, code: ${err.code}, message: ${err.message}`);
})

对战模式使用了Colyseus实时对战框架

服务器端使用Typescript开发，CocosCreator层接入Colyseus的JS接口对接。

具体可参考Colyseus官网：https://colyseus.io/

拼图的设计使用了可视化编辑，制作了专门的拼图编辑器来增删改查所有的拼图，方便随时查看、随时修改

编辑器支持指定拼图宽度、拼图高度、拼图名称、拼图倒计时、拼图无法填充区（图中白色交叉区域）、拼图图案颜色，同一份拼图图案支持生成不同难度的关卡。