跑酷游戏 开始场景 资源加载 cocos3.8.7

引言

在游戏开发中，资源加载是一个至关重要的环节。一个优秀的加载场景不仅能提升用户体验，还能展示游戏的特色。本文将详细解析一个基于 Cocos Creator 3.8.7 的资源加载场景实现，包括动态配置表加载、资源管理以及自定义进度条的实现。

项目结构概览

包含以下几个核心文件：

1. GameStart.ts - 主场景控制器，负责资源加载逻辑

2. ProgressBar001.ts - 自定义进度条组件，带有点（草）动画效果

3. LoadTable.ts - 配置表加载器

代码详细解析

1. GameStart.ts - 资源加载主控制器

import { _decorator, Component, director, assetManager, ProgressBar, log, SpriteFrame, JsonAsset, ImageAsset } from 'cc'; import { LoadTable } from '../main/scripts/LoadTable'; import { ProgressBar001 } from './ProgressBar001'; const { ccclass, property } = _decorator;

代码解析：

• _decorator：Cocos Creator 的装饰器模块，用于定义组件类和属性

• Component：所有组件的基类

• director：场景管理器，用于切换场景

• assetManager：资源管理器，负责加载各种资源

• ProgressBar：内置进度条组件

• log：日志输出工具

• 各种资源类型：SpriteFrame、JsonAsset、ImageAsset

@ccclass('StartCom') export class StartCom extends Component { @property(ProgressBar001) bar: ProgressBar001 = null; private totalResources = 0; private loadedResources = 0; private loadedPaths: string[] = []; private resourcePaths: string[] = [];

代码解析：

• @ccclass('StartCom')：装饰器，将类声明为 Cocos Creator 组件，组件名为"StartCom"

• @property(ProgressBar001)：编辑器可绑定的属性，类型为自定义的ProgressBar001

• 私有变量用于跟踪加载状态：

  • totalResources：需要加载的总资源数

  • loadedResources：已加载的资源数

  • loadedPaths：成功加载的资源路径数组

  • resourcePaths：需要加载的所有资源路径数组

start() { log('=== 开始加载资源 ==='); this.bar.progress = 0; this.setupProgressBar(); this.testLoadConfigDirectly(); }

代码解析：

• start()：Cocos Creator 生命周期方法，组件首次激活时调用

• 初始化进度条为 0

• 设置进度条参数

• 开始加载配置表

private setupProgressBar() { this.bar.moveLeftToRight = true; this.bar.visibleWidth = 350; log(`进度条设置: 方向=${this.bar.moveLeftToRight ? '左→右' : '右→左'}, 宽度=${this.bar.visibleWidth}`); }

代码解析：

• 配置自定义进度条属性

• moveLeftToRight：控制点的移动方向（从左到右）

• visibleWidth：设置进度条的可见宽度为 350

• 输出调试信息

private testLoadConfigDirectly() { log('直接测试加载配置表...'); assetManager.loadBundle('resources', (err, bundle) => { if (err) { log(` 加载resources失败: ${err.message}`); this.finishLoading(); return; } const configPath = 'config/snail_tvskin'; log(`尝试加载配置表: ${configPath}`); bundle.load(configPath, JsonAsset, (err2, jsonAsset) => { // 配置表加载逻辑 }); }); }

代码解析：

• 直接测试配置表文件是否能正常加载

• assetManager.loadBundle('resources', callback)：加载 resources 资源包

• bundle.load(configPath, JsonAsset, callback)：从资源包中加载 JSON 配置表

• 使用回调函数处理异步加载结果

private loadConfigTables() { log('开始通过LoadTable加载配置表...'); if (!LoadTable) { log(' LoadTable 未定义'); this.finishLoading(); return; } try { LoadTable.init(); log(' LoadTable.init() 调用完成'); setTimeout(() => { this.debugLoadTable(); }, 800); } catch (error) { log(` LoadTable初始化失败: ${error}`); this.finishLoading(); } }

代码解析：

• 通过 LoadTable 类正式加载配置表

• 使用 setTimeout 等待 800ms 确保配置表异步加载完成

• 异常处理确保程序健壮性

private debugLoadTable() { log('=== 调试LoadTable状态 ==='); // 详细检查LoadTable的数据结构 if (LoadTable.tab && LoadTable.tab.TvSkin) { const dataList = LoadTable.tab.TvSkin.getDataList(); if (dataList && Array.isArray(dataList)) { log(` 从getDataList()获取到 ${dataList.length} 个皮肤数据`); dataList.slice(0, 5).forEach((skin: any, index: number) => { log(`皮肤 ${index + 1}: id=${skin.id}, name=${skin.name}, icon=${skin.icon}`); }); } } this.loadResourcesBundle(); }

代码解析：

• 调试函数，验证配置表是否正确加载

• 检查数据格式和内容

• 显示前5条数据作为示例

• 继续加载资源包

private debugLoadTable() { log('=== 调试LoadTable状态 ==='); // 详细检查LoadTable的数据结构 if (LoadTable.tab && LoadTable.tab.TvSkin) { const dataList = LoadTable.tab.TvSkin.getDataList(); if (dataList && Array.isArray(dataList)) { log(` 从getDataList()获取到 ${dataList.length} 个皮肤数据`); dataList.slice(0, 5).forEach((skin: any, index: number) => { log(`皮肤 ${index + 1}: id=${skin.id}, name=${skin.name}, icon=${skin.icon}`); }); } } this.loadResourcesBundle(); }

代码解析：

• 动态构建资源加载列表

• 基础资源 + 配置表中的所有皮肤资源

• 使用 Set 进行去重，避免重复加载

• 输出资源统计信息

private updateProgress() { this.loadedResources++; const progress = this.loadedReso