oops-framework框架 之 创建项目(二)

2023-12-02 11:20
文章标签 项目 创建 框架 framework oops

本文主要是介绍oops-framework框架 之 创建项目(二)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit


构建

本篇博客将使用oops-game-kit 构建一个新的开发项目， 关于 oops-framework 框架的了解，可参考上篇博客：

oops-framework框架 之 初始了解(一)

大概步骤：

  1. 使用Git命令克隆项目:
git clone https://gitee.com/dgflash/oops-game-kit
  1. 项目克隆成功后，进入项目目录: oops-game-kit ，根据平台执行命令：
// window
执行 update-oops-plugin-framework.bat 克隆与更新框架插件
执行 update-oops-plugin-hot-update.bat 克隆与更新热更新插件
执行 update-oops-plugin-excel-to-json.bat 克隆与更新Excel转Json格式插件// Mac 
执行 update-oops-plugin-framework.sh 克隆与更新框架插件
执行 update-oops-plugin-hot-update.sh 克隆与更新热更新插件
执行 update-oops-plugin-excel-to-json.sh 克隆与更新Excel转Json格式插件// 最重要的是update-oops-plugin-framework, 这个是框架的的主体， 以Mac为例：
./update-oops-plugin-framework.sh // 如果命令提示错误，类似如下：
// -bash: ./update-oops-plugin-bundle: No such file or directory
// 可以增加 sudo ，它会提示你输入登录密码
sudo ./update-oops-plugin-framework.sh // 如果使用sudo后，报错：command not found，那就运行如下命令：
chmod u+x update-oops-plugin-framework.sh
sudo ./update-oops-plugin-framework.sh
  1. 打开项目目录： oops-game-kit 下的 project.json，修改 name和 description， 对项目名和描述重新命名， 并注意修改下项目目录文件名
{"_sourceId": "c30b28da-749e-479b-bcb6-cecd8d7be9e3","creator": {"version": "3.8.1"},"dependencies": {"crypto-es": "^1.2.7"},// 项目描述"description": "游戏项目模板",// 项目名"name": "oops-game-kit","uuid": "00d7d957-a3e8-4ad6-80f4-2fcfb235bca4","version": "3.6.3"
}

注： version也可以修改，但建议使用最新

  1. 修改后，打开CocosCreator编译器 导入项目， 如图所示：
    请添加图片描述

  2. 通过项目配置修改屏幕适配率即可。


目录结构

在这里，看下目录结构，以便于对模版进行拓展修改：
请添加图片描述

目录结构跟CocosCreator的目录结构是类似的， 需要注意的是：

  • excel 放置多语言文本配置及其他数值策划表，可以配合excel-to-json插件进行使用， 需要提交
  • extensions 放置的框架插件相关， 需要提交
  • node_modules 放置的NPM第三方库相关，crypto-es 主要应用于本地存储加密，需要提交
  • update-XXX 用于windows或Mac平台更新插件使用

针对于 node_modules NPM第三方库相关，想了解NPM，可参考博客：

注：在CocosCreator项目中，node_modules的是被.gitgnore忽略的

注： NPM相关使用，可参考博客：Mac 安装使用NPM及常用命令


assets目录

使用CocosCreator开发项目，需要将使用的资源放置到 assets 文件夹中，编译器才会在资源管理器显示出来。

该目录下的一般结构是：

  • res 放置静态引用的资源
  • resources 放置动态引用的资源
  • script 放置游戏脚本
  • scene 放置场景的配置文件
  • bundle 放置自定义AB包，可用于分包或者远程下载

oops-gamekit 项目模版与上面是类似的， 但框架拓展了一些东西需要注意：

  1. 游戏启动时加载的必备资源，需要保证资源配置尽量小些，否则黑屏时间过长
  2. 游戏loading页面预加载资源
  3. 可选项多语言包，自定义资源的加载

这些方面需要我们在配置 assets目录资源的时候注意。下面将详细说明下。


注意事项

在说明之前，注意下：resources.config.json 文件， 它是游戏配置文件。

{// 主配置信息：版本号、包名、本地存储加密key和iv、服务器地址、请求超时、帧率等"config": {"version": "1.0.5","package": "com.oops.game","localDataKey": "oops","localDataIv": "framework","httpServer": "http://192.168.0.150/main/","httpTimeout": 10000,"frameRate": 60},// 多语言配置：语言类型、文本和资源路径等"language": {"type": ["zh","en"],"path": {"json": "language/json","texture": "language/texture"}},// 自定义Bundle配置"bundle": {"enable": false,"server": "http://localhost:8083/assets/bundle","name": "bundle","version": ""}
}

该配置文件对应的的脚本是：…/oops-plugin-framework/assets/module/config/GameConfig.ts

export class GameConfig {/** 客户端版本号配置 */get version(): string { return this._data["config"]["version"]; }/** 包名 */get package(): string { return this._data["config"]["package"]; }/** 游戏每秒传输帧数 */get frameRate(): number { return this._data.config.frameRate; }/** 本地存储内容加密 key */get localDataKey(): string { return this._data.config.localDataKey; }/** 本地存储内容加密 iv */get localDataIv(): string { return this._data.config.localDataIv; }/** Http 服务器地址 */get httpServer(): string { return this._data.config.httpServer; }/** Http 请求超时时间 */get httpTimeout(): number { return this._data.config.httpTimeout; }// ...constructor(config: any) {let data = config.json;this._data = Object.freeze(data);oops.log.logConfig(this._data, "游戏配置");}
}

可根据需要自行去获取。


游戏启动加载资源

游戏启动时加载的必备资源，主要有：

  • 远程资源， 主要针对的是 resources/config.json 中将Bundle配置资源
  • 自定义资源， 主要针对的是多语言的字体文件
  • 多语言包，主要针对的是多语言特定类型下的文本和纹理配置
  • 公共资源，必备

主要在 initialize/bll/InitRes.ts中进行。主要代码：

entityEnter(e: Initialize): void {var queue: AsyncQueue = new AsyncQueue();// 加载远程资源配置//this.loadBundle(queue);// 加载自定义资源//this.loadCustom(queue);// 加载多语言包//this.loadLanguage(queue);// 加载公共资源this.loadCommon(queue);// 加载游戏内容加载进度提示界面this.onComplete(queue, e);queue.play();
}

注意：

  • 如果没有远程资源配置，可将 resources/config.json 中的Bundle配置去掉，并且该接口注释掉
  • 自定义资源为可选配置，如果不需要，可以注释掉
  • 多语言包为可选配置，如果不需要，可以注释掉

公共资源是必备的，看下代码相关：

// 加载公共资源的路径是在resources/common中
private loadCommon(queue: AsyncQueue) {queue.push((next: NextFunction, params: any, args: any) => {oops.res.loadDir("common", next);});
}

注： 在resources目录下一定要存在common文件夹，放置必备资源

游戏必备资源加载完成后，会调用onComplete 用于显示Loading页面

private onComplete(queue: AsyncQueue, e: Initialize) {queue.complete = async () => {// 通过UIID,异步打开Loading页面var node = await oops.gui.openAsync(UIID.Loading);if (node) e.add(node.getComponent(LoadingViewComp) as ecs.Comp);e.remove(InitResComp);};
}

游戏Loading页面

在我们首次运行项目的时候，因为资源较少，或者是放错了资源路径，可能会出现的问题：

  • Loading页面一闪而过，似乎游戏卡顿了下
  • 页面显示出现黑屏卡顿

该页面主要用于加载较大的内容资源，主要实现文件是：

  • loading.prefab 预制体页面文件

  • LoadingViewComp.ts 脚本文件

脚本的主要加载逻辑：

private loadGameRes() {// 多语言提示文本this.data.prompt = oops.language.getLangByID("loading_load_game");// 加载目录oops.res.loadDir("game", // 加载进度回调this.onProgressCallback.bind(this), // 加载完成回调this.onCompleteCallback.bind(this));
}

注： 在resources目录下一定要存在game文件夹，用于放置动态引用的非必备资源


其他

关于多语言或Bundle相关，在后面的文章中会逐渐的说明。

最后，将个人项目整理以后的资源目录分享给大家：
请添加图片描述

再次感谢作者dgflash的分享，oops-framework框架QQ群： 628575875。

最后，祝大家学习生活愉快！

这篇关于oops-framework框架 之 创建项目(二)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/445135。

相关文章

这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
顺序表之创建，判满，插入，输出

顺序表之创建，判满，插入，输出

文章目录 🍊自我介绍🍊创建一个空的顺序表，为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了，满了返回值1，否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以：点赞+关注+评论+收藏（一键四连）哦~ 🍊自我介绍   Hello,大家好，我是小珑也要变强（也是小珑），我是易编程·终身成长社群的一名“创始团队·嘉宾”
阅读更多...
SpringBoot项目是如何启动

SpringBoot项目是如何启动

启动步骤 概念 运行main方法，初始化SpringApplication 从spring.factories读取listener ApplicationContentInitializer运行run方法读取环境变量，配置信息创建SpringApplication上下文预初始化上下文，将启动类作为配置类进行读取调用 refresh 加载 IOC容器，加载所有的自动配置类，创建容器在这个过程
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2