ai.cocos
基于 Cocos Creator 打包文件开发的无 IDE 开发框架。无需 Cocos Creator 编辑器,纯代码开发项目。支持 Linux / Windows / macOS 等任何支持 Node.js 的环境进行开发和部署。
技术栈
| 层级 | 技术 |
|---|---|
| 引擎 | Cocos Creator(仅需导出的 web-mobile.zip) |
| 扩展库 | Ai.Cocos(IDE 级 UI 元素、控件、场景管理) |
| 语言 | TypeScript |
| 构建 | Vite 7 |
| 进程管理 | PM2 |
代码地址:https://cnb.cool/debugmap/cocos/ai.cocos
可以直接在 cnb上 fork 这个项目到自己的空间下
然后 用云原生开发 选择 webide/webagent 就可以直接用ai开发了
有免费token(AI Credits)配额
webide下使用codebuddy
快速开始
# 安装依赖
npm install
# 启动项目
npm start
# start指令 启动的进程说明
# cocos 进程 是web-mobile进程
# game 进程 负责将本框架代码嵌入 cocos进程(以ideaapp.ts作为入口,打包成静态文件放置到OUTPUT_PATH/web-mobile/目录下,cocos进程检测代码变更)
环境变量 (.env)
IDE_BASE_PATH=./web-mobile.zip # Cocos Creator 导出的 zip 包
OUTPUT_PATH=./build # 构建输出目录
项目结构
ai.cocos/
├── src/
│ ├── ideapp.ts # 应用入口(场景路由注册)
│ ├── cc/ # Cocos Creator 引擎桥接层
│ ├── ide/ # IDE 框架层
│ │ ├── element/ # IdeUIEle / IdeEle 是 cc.Node的工具类,封装了各种Component的工具方法
│ │ ├── scene/ # IdeBlankScene 基础场景
│ │ ├── widget/ # IdeWidget / IdeContainerWidget 封装了Widget组件实现
│ │ └── util/ # 工具函数 Res 封装 resource资源加载实现
│ └── demo/ # AI 开发的 Demo 示例
│ ├── scene/ # Demo 场景(每个场景 = 一个页面)
│ └── component/ # Demo 业务组件(按场景分目录)
├── doc/
│ └── demo/ # Demo 场景截图
├── package.json
├── vite.config.cocos.js # Vite 构建配置(解压 zip + 注入代码)
├── vite.config.game.js # ideapp.ts 构建配置
├── web-mobile.zip # 使用cocoscreator 3.8.8 导出的 web-mobile.zip 包(也可以自行使用cocos3.x版本导出)
└── .env # 环境变量
DEMO 场景列表
都是用ai开发,简单几句话生成的 所以都比较简陋(丑)
主页
场景选择卡片网格入口
VSCode
仿 VS Code 编辑器界面
微信
仿微信聊天列表界面
Windows
仿 Windows 11 桌面 + 资源管理器
macOS
仿 macOS 桌面 + Finder
俄罗斯方块
经典俄罗斯方块(3关)
三消
宝石三消游戏(3关)
迷宫
魔塔风格迷宫探险(3关)
生存
肉鸽割草生存游戏(2关)
软件和游戏 生成使用提示词
请安完整流程 执行需求
为展示 ai.cocos 项目能力,我想在 /src/demo 下创建几个仿写界面场景
我的需求是 给我创建 如下这几个场景 vscode界面,微信界面,windows桌面,mac桌面
帮我在demo下新开发四个游戏场景,并实现完整可玩的玩法,建议每个游戏场景有1~3个关卡
四个游戏场景 分别时 俄罗斯方块,三消游戏,诡异迷宫(类魔塔),肉鸽割草(吸血鬼幸存者)
架构说明
框架层级
应用层 (scene/ + component/)
↓ 使用
AnyIDE 框架层 (ide/)
↓ 桥接
Cocos Creator 引擎 (cc/)
-
场景 (Scene): 继承
IdeBlankScene,一个场景 = 一个页面 -
组件 (Widget): 继承
IdeWidget或IdeContainerWidget,构成场景内容 -
元素 (Element):
IdeUIEle提供链式 API 构建 UI(addSprite/addLabel/setSize/setPosition/setWidget 等) -
util/: 提供了一系列工具函数,用于简化开发流程
NPM 脚本
| 命令 | 说明 |
|---|---|
npm run cocos_dev |
开发模式(Vite dev server) |
npm run cocos_build |
构建生产版本 |
npm run game_dev |
游戏模式开发 |
npm run game_build |
游戏模式构建 |
npm run start |
PM2 启动生产进程 等于 npm run game_dev + npm run game_build
|
环境要求
- Node.js >= 20.9.0
- Cocos Creator(导出 web-mobile.zip)








