无Ide,cocoscreator ai开发方案

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): 继承 IdeWidgetIdeContainerWidget,构成场景内容

  • 元素 (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)