做yield网站多少钱搜索引擎竞价推广的优势
ECS概念
ECS是一种软件架构模式，常见于游戏业务场景，其主要对象分类为
• Entity 实体,ECS架构中所有的业务对象都必须拥有一个唯一的Entity实体
• Component 组件,存储着数据结构,对应着某一种业务属性,一个Entity上可以动态挂载多个Component
• System 系统,负责主要的逻辑处理,每个System负责处理特定的Component的逻辑
快速对比下OOP
| ECS | OOP |
|---|---|
| 数据和逻辑分离 | 数据和逻辑耦合 |
| Entity 可动态挂载多个Component | Object Instance 一般是固定的某个Class的示例 |
| Entity 做唯一性区分 | 通过指针/引用/id/uuid 做唯一区分 |
| 函数通过Entity是否挂载指定的Component 做非法检验 | 编译阶段的静态类型校验通过instanceof 或 type/sort 相关字段区分 |
| World 存储所有的Entity, 并提供 Entity/Component 检索的方法 | 未做明确要求，由开发者根据业务特性自行设计管理存储Object Instatnce的结构。理论上也可以仿照World的概念设计 |
| System 不建议直接相互调用,通过修改/添加/删除Entity的Component,或者利用单例组件,来延迟处理 | 未做明确要求,业务逻辑可能会相互调用,或者通过事件等机制触发 |
一个ECS架构实现的粒子碰撞动画
下图是一个基于ECS风格的项目demo效果,在一个画布中存在若干个运动的方块,这些方块会在触碰到墙块以及相互碰撞的时候,改变运动方向,不停循环
这个demo的ECS框架图如下
从0实现demo
ECS 是一种通过将数据和逻辑分离,以达到提高代码复用性的设计方法。其设计理念中存在3个主要的概念
• entity,唯一性标识
• component, 某种结构的纯数据
• system, 处理挂载了指定种类的 component 的 entity
这里我们利用一个ECS框架快速实现demo,主要用到下面几个API
type EntityId = number;
interface World {// 创建 Entity createEntity():EntityId;// 给某个 Entity 动态挂载ComponentaddEntityComponents(entity: EntityId, ...components: Component[]): World;// 添加某个SystemaddSystem(system: System): void;// 查询指定Component 的 所有Entityview<CC extends ComponentConstructor[]>(...componentCtors: CC): Array<[EntityId, Map<ComponentConstructor, Component>]>;
}下面我们一步步实现demo
绘制静止方块
首先我们定义3个组件和1个系统
• Position 位置组件
• Rect 方块大小组件
• Color 颜色组件
• RenderSystem 绘制系统
export class Position extends Component {constructor(public x = 0, public y = 0) {super();}
}export class Rectangle extends Component {constructor(public readonly width: number, public readonly height: number) {super();}
}export class Color extends Component {constructor(public color: string) {super();}
}export class RenderingSystem extends System {constructor(private readonly context: CanvasRenderingContext2D) {super();}public update(world: World, _dt: number): void {this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);for (const [entity, componentMap] of world.view(Position, Color, Rectangle)) {const { color } = componentMap.get(Color);const { width, height } = componentMap.get(Rectangle);const { x, y } = componentMap.get(Position);this.context.fillStyle = color;this.context.fillRect(x, y, width, height);}}
}再执行主逻辑,创建若干Entity,并挂载Component
const world = new World();
world.addSystem(new RenderingSystem(canvas.getContext('2d')));
// 添加若干方块
for (let i = 0; i < 100; ++i) {world.addEntityComponents(world.createEntity(),new Position(getRandom(canvas.width - padding * 2, padding * 2),getRandom(canvas.height - padding * 2, padding * 2),),new Color(`rgba(${getRandom(255, 0)}, ${getRandom(255, 0)}, ${getRandom(255,0,)}, 1)`,),new Rectangle(getRandom(20, 10), getRandom(20, 10)),);
}给方块增加速度
让方块动起来，这里我们新增1个组件和1个系统
• Velocity 速度组件
• PhysicsSystem 位置更新系统
export class Velocity extends Component {constructor(public x = 0, public y = 0) {super();}
}export class PhysicsSystem extends System {constructor() {super();}update(world: World, dt: number) {for (const [entity, componentMap] of world.view(Position, Velocity, Rectangle)) {// Move the position by some velocityconst position = componentMap.get(Position);const velocity = componentMap.get(Velocity);position.x += velocity.x * dt;position.y += velocity.y * dt;}}
}增加碰撞包围盒
为了不让方块跑出画布,我们新增如下组件和系统
• Collision 碰撞组件
• CollisionSystem 碰撞系统
export class CollisionSystem extends System {update(world: World): void {for (const [entity1, components1] of world.view(Position,Velocity,Rectangle,)) {for (const [entity2, components2] of world.view(Collision,Rectangle,Position,)) {// 1. 检测每个方块与碰撞方块是否碰撞// 2. 判断碰撞方向// 3. 根据碰撞方向修改方块速度}}}}
在主逻辑中,我们增加4个方块围着画布,并给予红色,形成一个包围盒
const padding = 10;
// left
world.addEntityComponents(world.createEntity(),new Position(0, 0),new Velocity(0, 0),new Color(`rgba(${255}, ${0}, ${0}, 1)`),new Rectangle(padding, canvas.height),new Collision(),
);
// top xx
// right xx
// bottom xx增加更多的碰撞
在之前的代码基础我们再略微修改,就可实现最终效果
1. 增加若干碰撞方块
2. 再给每个运动方块也增加碰撞属性,相互碰撞
当前目前这里碰撞系统代码比较简陋,后续还有利用四叉树提高碰撞效率,根据方块大小考虑动量守恒等等改进
以一个简单例子对比OOP和ECS
解题思路千千万,这里仅仅是做简单的演示，表达一下感觉，不必过分纠结
题目
假设现在要做一个动物竞技会的游戏,开发要求是有形形色色种类的动物,和形形色色的竞技项目，要求每种动物都要去参加它能参加的竞技项目并得到成绩
以OOP的类和继承的思路,ECS组件的思路对比下架构设计
OOP 两种思路
如图所示，常规的思路是定义好动物和项目的基类及其子类，在子类中描述了动物拥有的能力和项目要求的能力，那么下一步就是处理业务的主逻辑,这里展示两个常规思路
运动员注册制
创建一个动物的时候,将其适合的运动注册一个运动员身份，并保存运动员索引列表，比赛的时候根据运动员索引表将对应项目的运动员索引出来
// 创建随机的动物
function createAnimals(): Animal[] {// xxxx
}
class CompetionList {
// 某个动物注册运动员身份registerSporter(animal: Animal) {}
// 注册运动项目registerCompetion(competion: Competion){}// 获取所有竞技的成绩run(){this.competions.forEach(competion=>{const scores = competion.sporters.map(xxx);})}
}const competionList = new CompetionList();
// 注册竞技项目
competionList.registerCompetion(xxx)
// 注册运动员
const animals = createAnimals();
animals.forEach((a) => {competionList.registerSporter(a);
});
// 比赛结果
competionList.run()现场报名制
将所有的动物混编,举行项目比赛的时候,按照要求实时查询，而这一思路便和ECS比较像
function createAnimals(): Animal[] {//xxx;}function canItRun() {}function canItSwim() {}function canItClimb() {}class AnimalsList {find(canItXX:(animal:Animal)=>boolean):Animal[]{}}class CompetionList {// 动物报名registerAnimal(animal: Animal) {}// 注册运动项目registerCompetion(competion: Competion){}// 获取所有竞技的成绩run(animals: AnimalsList){this.competions.forEach(competion=>{animals.find(competion.canItXX).map(xxx)})}}这里对比下两者的优劣势
| 运动员注册 | 现场报名 | |
|---|---|---|
| 选手固定时 | 1. 存在缓存,运动员不发生改变的情况下不会产生新的运算 | 1. 运动员不改变时，也需要每次查询消耗性能 |
| 选手变化时 | 1. 运动员/项目发生任何变化的时候,都需要更新运动员注册表 | 1. 不影响主逻辑2. 用运行时的一些性能损耗，提高主逻辑的兼容性，减少后续的开发成本 |
ECS
相关示例代码（以某个ECS框架为例）
import {System,World,Component,ComponentConstructor,
} from '@jakeklassen/ecs';// 设计组件
class Animal extends Component {}
class RunAbility extends Component {constructor(public speed: number) {super();}
}
class SwimAbility extends Component {constructor(public speed: number) {super();}
}class CompetionComponent extends Component {constructor(public name: string,public canItXX: ComponentConstructor[],public getScoreFunc: any,public scoreMap: Map<number, number>,) {super();}
}
// 设计比赛的系统
class CompetionSystem extends System {update(world: World) {for (const [entityCompetion, componentsCompetion] of world.view(CompetionComponent,)) {const competion = componentsCompetion.get(CompetionComponent);for (const [entityAnimal, componentsAnimal] of world.view(...competion.canItXX,Animal,)) {// 计算分数const score = competion.getScoreFunc(componentsAnimal);competion.scoreMap.set(entityAnimal, score);}}}
}// 创建world
const world = new World();
// 添加比赛系统
world.addSystem(new CompetionSystem());
// 添加项目组件
world.addEntityComponents(world.createEntity(),new CompetionComponent('百米跑',[RunAbility],(animalComponents: any) => {return 100 / animalComponents.get(RunAbility).speed;},new Map<number, number>(),),
);
world.addEntityComponents(world.createEntity(),new CompetionComponent('百米游泳',[SwimAbility],(animalComponents: any) => {return 100 / animalComponents.get(SwimAbility).speed;},new Map<number, number>(),),
);
// 随机添加动物组件
for (let i = 0, len = 15; i < len; i++) {const entity = world.createEntity();if (Math.random() >= 0.5) {world.addEntityComponents(entity,new Animal(),new RunAbility(Math.random() * 10),);}if (Math.random() >= 0.5) {world.addEntityComponents(entity,new Animal(),new SwimAbility(Math.random() * 10),);}
}// 运行跑分
world.update();
for (const [entityCompetion, componentsCompetion] of world.view(CompetionComponent,
)) {const component = componentsCompetion.get(CompetionComponent);console.log('%s 比赛分数如下', component.name);console.group();for (const [id, score] of component.scoreMap.entries()) {console.log('动物id:%d 分数:%d', id, score);}console.groupEnd();
}实际运行Demo结果
总结
• ECS 追求数据和逻辑的分离可以降低代码间的耦合,并且因为较为严格的 Entity/Component/System设计,有利于原生端优化性能和实现多线程的特性
• 其缺点是有时显得不那么灵活，System间禁止相互调用,有些OOP容易实现代码思路,在ECS下要进行更多的代码设计
• 没有OOP灵活,灵活的OOP也可以实现得相似ECS
参考资料
Unity ECS 文档: https://docs.unity3d.com/Packages/com.unity.entities@0.1/manual/index.html
发布于 2022-10-24 12:32