kunpocc框架

开源项目 #Cocos Creator #TypeScript #游戏框架 #开源 #FairyGUI
kunpocc是基于Cocos Creator的游戏开发框架，提供UI管理、平台适配、计时器等常用功能模块。

kunpocc：我的Cocos Creator游戏开发框架

项目简介

kunpocc（简称kunpocc）是我开发的一个基于Cocos Creator的游戏开发框架。在用Cocos Creator做游戏项目时，经常会遇到一些重复性的开发工作，比如UI窗口管理、资源加载、平台API差异处理等。为了提高开发效率，我把这些常用功能封装成了一个框架。

这个框架已经在几个商业项目中使用。

技术栈

  • TypeScript: 完全使用TypeScript编写，提供完整的类型定义
  • Cocos Creator: 支持3.7+版本
  • FairyGUI: UI编辑器，提供强大的UI制作能力
  • NPM: 已发布到npm，方便安装使用

主要功能模块

1. UI管理系统

这是框架的核心功能，基于FairyGUI构建，提供完整的窗口管理功能：

主要特性：

  • 装饰器语法简化UI开发
  • 自动资源加载和释放
  • 窗口层级管理
  • 多窗口组管理
  • 顶部资源栏（Header）复用

使用示例：

import { Window, _uidecorator } from 'kunpocc';
const { uiclass, uiprop, uiclick } = _uidecorator;

@uiclass("Window", "Home", "MainWindow")
export class MainWindow extends Window {
    @uiprop private btnStart: GButton;
    @uiprop private txtTitle: GTextField;

    @uiclick
    private onBtnStart(): void {
        console.log('开始游戏');
    }
}

2. 平台工具

提供平台检测和小游戏API封装，支持：

  • 微信小游戏
  • 抖音小游戏
  • 支付宝小游戏

平台检测示例：

import { Platform } from 'kunpocc';

if (Platform.isWX) {
    console.log('当前是微信小游戏');
} else if (Platform.isAndroid) {
    console.log('当前是Android平台');
}

小游戏API使用：

import { MiniHelper } from 'kunpocc';

// 获取小游戏基础信息
const common = MiniHelper.common();

// 播放广告
const ad = MiniHelper.ad();

// 支付功能
const pay = MiniHelper.pay();

3. 全局计时器

提供统一的计时器管理功能：

import { GlobalTimer } from 'kunpocc';

// 启动定时器 (回调函数, 时间间隔秒, 重复次数: 0=执行一次, -1=无限重复)
const timerId = GlobalTimer.startTimer(() => {
    console.log('定时器执行');
}, 1, -1); // 每秒执行一次，无限重复

// 停止定时器
GlobalTimer.stopTimer(timerId);

// 暂停和恢复
GlobalTimer.pauseTimer(timerId);
GlobalTimer.resumeTimer(timerId);

4. 屏幕适配工具

提供屏幕尺寸相关的静态属性：

import { Screen } from 'kunpocc';

// 获取屏幕信息
console.log('屏幕宽度:', Screen.ScreenWidth);
console.log('屏幕高度:', Screen.ScreenHeight);
console.log('设计分辨率:', Screen.DesignWidth, Screen.DesignHeight);
console.log('安全区域:', Screen.SafeWidth, Screen.SafeHeight);

5. 热更新功能

提供热更新的基础功能：

import { HotUpdateManager } from 'kunpocc';

// 需要先获取实例并初始化
const hotUpdate = HotUpdateManager.getInstance();

// 检查更新
hotUpdate.checkUpdate().then(result => {
    if (result.code === HotUpdateCode.CHECK_FOUND_UPDATE) {
        console.log('发现新版本');
        // 可以开始更新流程
    }
});

6. 条件显示节点

用于UI红点等条件显示功能，需要配合装饰器使用：

import { _conditionDecorator, ConditionManager } from 'kunpocc';

// 条件系统需要先初始化
ConditionManager.initCondition();

// 条件系统主要通过装饰器和条件类来管理UI节点的显示状态
// 具体使用方式需要定义条件类并配合UI节点

项目结构

src/
├── cocos/          # Cocos Creator适配层
├── condition/      # 条件显示模块
├── fgui/          # FairyGUI相关
├── global/        # 全局工具
├── hotupdate/     # 热更新
├── minigame/      # 小游戏平台
├── tool/          # 工具函数
└── ui/            # UI管理核心

安装使用

npm install kunpocc

详细的使用文档和示例代码可以在项目的docs目录中找到。

配套工具

框架还提供了一些配套的开发工具：

kunpo-fgui插件: Cocos Creator插件，可以一键导出FairyGUI界面配置，减少手写代码量。

独立模块：

开源信息

项目特点

这个框架的设计原则是实用性优先。每个功能都是在实际项目中遇到问题后，总结出来的解决方案。代码结构清晰，文档相对完整，适合中小型游戏项目使用。

框架还在持续优化中，会根据实际使用中遇到的问题不断改进。如果你也在使用Cocos Creator开发游戏，欢迎试试这个框架，也欢迎提出改进建议。

这个项目主要是为了解决我在游戏开发中遇到的实际问题。如果对其他Cocos Creator开发者也有帮助，那就更好了。