You've already forked Pandona-Engine
169 lines
6.4 KiB
Markdown
169 lines
6.4 KiB
Markdown
# Pandona Engine (PE) - IFLOW 上下文
|
||
|
||
## 项目概述
|
||
Pandona Engine (PE) 是一个功能完整的 JavaScript 2D 游戏引擎，基于 DOM 实现，用于创建各种类型的 2D 游戏和动画。现在支持现代编译时架构，使用 Vite 作为构建工具。
|
||
|
||
## 核心特性
|
||
1. **完整的游戏开发功能**：支持创建各种类型的2D游戏
|
||
2. **模块化架构**：核心功能拆分为独立模块，易于扩展和维护
|
||
3. **插件系统**：支持自定义插件扩展引擎功能
|
||
4. **多种元素类型**：支持精灵、容器、文本、HTML 和 SVG 元素
|
||
5. **高级动画系统**：内置补间动画、帧动画、动画序列和时间轴
|
||
6. **音频管理**：支持音效和背景音乐播放
|
||
7. **场景管理**：支持多场景切换和过渡效果
|
||
8. **事件系统**：增强的事件总线，支持全局和局部事件
|
||
9. **内存管理**：完善的资源清理机制
|
||
10. **碰撞检测**：矩形碰撞检测系统
|
||
11. **输入处理**：键盘和鼠标输入处理
|
||
12. **UI系统**：按钮、标签、图像、滑块等UI组件
|
||
13. **摄像机系统**：支持跟随、缩放、旋转和震动效果
|
||
14. **粒子系统**：创建各种视觉效果
|
||
15. **组件系统**：基于组件的游戏对象系统
|
||
16. **游戏循环**：固定时间步长的游戏循环
|
||
17. **编译时架构**：使用 Vite 构建工具，支持热重载和代码优化
|
||
|
||
## 项目结构
|
||
```
|
||
cssEngine/
|
||
├── index.html # 主页面
|
||
├── main.js # 应用入口文件
|
||
├── vite.config.js # Vite配置文件
|
||
├── package.json # 项目配置
|
||
├── README.md # 项目说明文档
|
||
├── IFLOW.md # IFLOW上下文文件
|
||
├── public/ # 静态资源
|
||
│ └── sprite.css # 精灵样式文件
|
||
├── style/ # 全局样式
|
||
│ └── base.less # 基础样式
|
||
├── examples/ # 示例项目
|
||
│ ├── spaceShooter.js # 太空射击游戏示例
|
||
│ └── spaceShooter.html # 示例游戏HTML文件
|
||
├── src/
|
||
│ ├── core/ # 核心模块
|
||
│ │ └── Engine.js # 引擎主类
|
||
│ ├── elements/ # 元素类
|
||
│ │ ├── BaseElement.js
|
||
│ │ ├── Sprite.js
|
||
│ │ ├── Box.js
|
||
│ │ ├── TextElement.js
|
||
│ │ ├── HtmlElement.js
|
||
│ │ ├── SvgElement.js
|
||
│ │ ├── GameObject.js
|
||
│ │ └── Component.js
|
||
│ ├── managers/ # 管理器
|
||
│ │ ├── ResourceManager.js
|
||
│ │ ├── SceneManager.js
|
||
│ │ ├── AudioManager.js
|
||
│ │ ├── TransitionManager.js
|
||
│ │ └── Camera.js
|
||
│ ├── animation/ # 动画系统
|
||
│ │ ├── Tween.js
|
||
│ │ ├── AnimationSystem.js
|
||
│ │ └── AnimationController.js
|
||
│ ├── effects/ # 特效系统
|
||
│ │ └── ParticleSystem.js
|
||
│ ├── ui/ # UI系统
|
||
│ │ └── UI.js
|
||
│ ├── utils/ # 工具类
|
||
│ │ └── EventBus.js # 事件总线
|
||
│ └── scenes/ # 场景目录
|
||
│ └── index/ # 主场景
|
||
│ ├── index.js # 场景结构和逻辑
|
||
│ └── index.less # 场景样式
|
||
└── test/ # 测试文件
|
||
└── ... # 各模块测试
|
||
```
|
||
|
||
## 核心类和API
|
||
|
||
### Engine 引擎主类
|
||
- `constructor(element, options)` - 创建引擎实例
|
||
- `use(plugin, options)` - 安装插件
|
||
- `load(src)` - 加载资源
|
||
- `loadSound(name, src, options)` - 加载音效
|
||
- `loadMusic(name, src, options)` - 加载音乐
|
||
- `playSound(name, options)` - 播放音效
|
||
- `playMusic(name, options)` - 播放音乐
|
||
- `createScene(name)` - 创建场景
|
||
- `switchScene(name)` - 切换场景
|
||
- `tween(target, duration, easing)` - 创建补间动画
|
||
- `createFrameAnimation(name, frames, frameRate)` - 创建帧动画
|
||
- `playFrameAnimation(sprite, animationName, loop)` - 播放帧动画
|
||
- `addGameObject(obj)` - 添加游戏对象
|
||
- `removeGameObject(obj)` - 移除游戏对象
|
||
- `checkCollision(obj1, obj2)` - 碰撞检测
|
||
- `setCameraPosition(x, y)` - 设置摄像机位置
|
||
- `follow(target, offset)` - 跟随目标
|
||
- `setCameraZoom(zoom)` - 设置摄像机缩放
|
||
- `shakeCamera(intensity, duration)` - 屏幕震动
|
||
- `addUIElement(element)` - 添加UI元素
|
||
- `removeUIElement(element)` - 移除UI元素
|
||
|
||
### GameObject 游戏对象基类
|
||
- `setPosition(x, y)` - 设置位置
|
||
- `setSize(width, height)` - 设置尺寸
|
||
- `setRotation(rotation)` - 设置旋转角度
|
||
- `setScale(scaleX, scaleY)` - 设置缩放
|
||
- `setVisible(visible)` - 显示/隐藏
|
||
- `addChild(child)` - 添加子对象
|
||
- `removeChild(child)` - 移除子对象
|
||
- `addComponent(name, component)` - 添加组件
|
||
- `getComponent(name)` - 获取组件
|
||
- `removeComponent(name)` - 移除组件
|
||
|
||
### Component 组件基类
|
||
- `onAdd(gameObject)` - 当组件被添加到游戏对象时调用
|
||
- `onRemove(gameObject)` - 当组件从游戏对象中移除时调用
|
||
- `update(deltaTime)` - 更新方法
|
||
- `onDestroy(gameObject)` - 销毁方法
|
||
|
||
### 预定义组件
|
||
- `PhysicsComponent` - 物理组件
|
||
- `ColliderComponent` - 碰撞组件
|
||
- `AnimationComponent` - 动画组件
|
||
- `InputComponent` - 输入组件
|
||
- `LifecycleComponent` - 生命周期组件
|
||
|
||
### UI组件
|
||
- `UIButton` - 按钮
|
||
- `UILabel` - 标签
|
||
- `UIImage` - 图像
|
||
- `UISlider` - 滑块
|
||
|
||
## 编译时架构
|
||
|
||
### 构建工具
|
||
- 使用 Vite 作为构建工具
|
||
- 支持 ES6 模块系统
|
||
- 支持 Less CSS 预处理器
|
||
- 支持代码压缩和优化
|
||
- 支持开发服务器热重载
|
||
|
||
### 开发命令
|
||
```bash
|
||
# 启动开发服务器（热重载）
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览构建结果
|
||
npm run preview
|
||
```
|
||
|
||
### 场景化开发
|
||
- 使用 `src/scenes/` 目录组织不同场景
|
||
- 每个场景包含 `index.js`（场景逻辑）和 `index.less`（场景样式）
|
||
- 支持类似HTML的标签语法定义场景结构
|
||
|
||
## 开发约定
|
||
1. 使用ES6模块系统
|
||
2. 遵循面向对象编程原则
|
||
3. 使用JSDoc注释重要函数和类
|
||
4. 保持代码简洁和可读性
|
||
5. 遵循现有的代码风格和命名约定
|
||
6. 使用 Less 作为 CSS 预处理器
|
||
7. 遵循场景化组织结构
|
||
|
||
## 示例项目
|
||
项目包含一个完整的太空射击游戏示例，展示了引擎的各种功能，位于 `examples/spaceShooter.js` 和 `examples/spaceShooter.html`。 |