devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用23种设计模式打造一个cocos creator的游戏框架----(四)装饰器模式_cocos creator框架结构

作者：知新_RL | 2024-02-27 11:18:31

赞

踩

cocos creator框架结构

1、模式标准

模式名称：装饰器模式

模式分类：结构型

模式意图：动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式比生成子类更为灵活。

结构图：

适用于：

  1. 当需要给一个对象在运行时添加更多的责任时。
  2. 当需要通过组合和封装来添加功能，而不是通过继承来添加功能时。

主要成员

  1. 抽象组件（Component）：这是一个接口，定义了一个对象可以接受额外责任的方式。它是所有对象（主对象以及装饰器对象）共享的接口。

  2. 具体组件（Concrete Component）：这是抽象组件的具体实现。它定义了一个具体的对象，可以给这个对象添加一些职责。

  3. 抽象装饰类（Decorator）：这是所有装饰器类的基类，它定义了一个与抽象组件接口一致的接口，这样它就可以装饰所有的具体组件。抽象装饰类通常有一个成员变量，用来保存一个抽象组件的引用。

  4. 具体装饰类（Concrete Decorator）：具体装饰类是抽象装饰类的子类，它定义了具体的装饰效果。每个具体装饰类都增加了一些新的行为或状态。具体装饰类可以通过调用抽象组件的方法，并添加新的行为或状态，来扩展抽象组件的功能。

2、分析与设计

在开发web应用时，用惯了mvc，但开发游戏时，才发现mvc不够用了。web开发，只要处理完用户的当前请求，就完事了。但游戏开发不同，游戏里是一个迷你世界，和我们现实有很多相似之处。现实世界里面有各种各样的系统，每个生物都借助外部系统或内部系统进行着各项活动。前辈们把它们抽象成 ecs(  entity实体  component组件 system系统 )，这的确大大简化了游戏开发。比如：给玩家添加一个登录组件，玩家就有了登录功能，登录完成后，卸载组件释放资源。给玩家添加一个遥感组件，玩家就有了操控摇杆的功能，游戏结束时移除摇杆组件等等。

回到我们的设计模式，ecs算装饰器模式吗？看适用性上是非常相似的

看看GPT是如何回答的

实体组件系统（Entity-Component-System，ECS）模式和装饰器模式在某些方面有一些相似之处，尤其是在它们都允许在运行时动态添加和删除对象的行为方面。然而，它们的核心目标和实现方式是不同的，所以它们并不完全相同。

ECS模式是一种常用于游戏开发的架构模式，它的核心思想是通过组合而非继承来实现对象的行为。在ECS模式中，实体（Entity）是一个标识符，组件（Component）包含数据，系统（System）则包含行为。实体通过添加或删除组件来改变其行为，而系统则负责处理具有特定组件的实体。这种模式的主要优点在于它的灵活性和可扩展性，因为你可以通过简单地添加或删除组件来改变实体的行为。

装饰器模式的目标是允许我们在运行时向对象添加新的行为，而不改变其类的定义。它通过将对象封装在装饰器对象中来实现这一点，装饰器对象实现了与原对象相同的接口，并在调用原对象的方法之前或之后添加新的行为。

所以，尽管ECS模式和装饰器模式都允许动态改变对象的行为，但它们的实现方式和目标是不同的。在ECS模式中，实体没有固定的行为，而是由其组件和系统决定的。而在装饰器模式中，对象的基本行为是由其类定义的，装饰器只是添加或修改这些行为。此外，ECS模式中的实体并不需要实现与其组件一致的接口，这是它与装饰器模式的另一个主要区别。

从GPT的分析中已经给出了，ecs模式是给一个实体（标识符）添加和删除组件来改变其行为。装饰器模式，对象本身是一个类，且有其基本的行为，装饰器只是在其基础上拓展功能。

细心点的人可能早已发现装饰器模式在cocos creator中其实已有通过的node,component为其实现了，需要什么功能挂载一个组件，这不就是装饰器吗？接下来就修改一下我们的意图。

意图：动态地给一个对象（cc.node）添加一些额外的职责(功能component)。相关的功能也可以随着需求的变化而从对象（cc.node）中删除。

3、开始打造

  1. export namespace CCObject {
  2.         export enum Flags {
  3.             ....
  4.         }
  5.         export let __props__: string[];
  6.         export let __values__: string[];
  7. }
  1.  export class Node extends CCObject implements ISchedulable, CustomSerializable {
  2.  
  3.     addComponent<T extends Component>(classConstructor: __private._types_globals__Constructor<T>): T;
  4.  
  5.  }
  1. export class Component extends CCObject {
  2.         node: Node;
  3.  
  4.          addComponent<T extends Component>(classConstructor: __private._types_globals__Constructor<T>): T | null;
  5.  
  6.         
  7. }

4、开始使用 

用过cocos creator ，相信大家都应该很熟悉cocos的组件使用了

这里举几个和设计模式结构图类似的例子

  1. this.node.getComponent(Label).string = '123'
  2. this.node.getChildByName('progress').getComponent(ProgressBar).progress = 456
  3. this.getComponent(UnitItem).addComponent(Label).string = '789'

5、其他-打造ECS

因为是游戏框架且打算使用ecs模式，就在装饰器模式的下面贴出一个简易的ecs（虽然ecs和装饰器模式不完全相同，只是相似）

在ECS模式中，实体（Entity）是一个标识符，组件（Component）包含数据，系统（System）则包含行为。

从概念上实体只是一个标识符没有具体的行为，实体通过添加或删除组件来改变其行为，而系统则负责处理具有特定组件的实体。

  1. import { Comp } from "./Comp";
  2.  
  3. export class Entity {
  4.     private static _entities: Map<number, Entity> = new Map();
  5.     private static nextEntityId = 0;
  6.     // 添加一个公共的 getter 方法来获取 entities
  7.     static get entities(): Map<number, Entity> {
  8.         return this._entities;
  9.     }
  10.     static createEntity(): Entity {
  11.         const entity = new Entity();
  12.         this.entities.set(entity.id, entity);
  13.         return entity;
  14.     }
  15.  
  16.     static removeEntity(entity: Entity): void {
  17.         for (let component of entity.components.values()) {
  18.             Comp.removeComp(component)
  19.         }
  20.         this.entities.delete(entity.id);
  21.     }
  22.  
  23.     static getEntity(entityId: number): Entity | undefined {
  24.         return this.entities.get(entityId);
  25.     }
  26.  
  27.     static generateEntityId(): number {
  28.         return this.nextEntityId++;
  29.     }
  30.  
  31.     /** 单实体上挂载的组件 */
  32.     public components: Map<new () => any, Comp> = new Map();
  33.     /** 实体id */
  34.     public readonly id: number;
  35.  
  36.     constructor() {
  37.         this.id = Entity.generateEntityId();
  38.         this.components = new Map();
  39.     }
  40.  
  41.     /** 单实体上挂载组件 */
  42.     attachComponent<T extends Comp>(componentClass: new () => T): T {
  43.         const hascomponent = this.components.get(componentClass) as T;
  44.         if (hascomponent) {
  45.             console.error('已存在组件,不会触发挂载事件')
  46.             return hascomponent;
  47.         } else {
  48.             const component = Comp.createComp(componentClass, this);
  49.             this.components.set(componentClass, component);
  50.             // console.log('实体挂载了组件', this.components, this)
  51.             return component;
  52.         }
  53.     }
  54.  
  55.     /** 单实体上卸载组件 */
  56.     detachComponent<T extends Comp>(componentClass: new () => T): void {
  57.         const component = this.components.get(componentClass);
  58.         if (component) {
  59.             this.components.delete(componentClass);
  60.             Comp.removeComp(component)
  61.             // console.log('实体卸载了组件', this.components, this)
  62.         }
  63.     }
  64.  
  65.     getComponent<T extends Comp>(componentClass: new () => T): T | undefined {
  66.         return this.components.get(componentClass) as T;
  67.     }
  68.  
  69. }

  1. import { Entity } from "./Entity";
  2.  
  3. /**
  4.  * 组件
  5.  */
  6. export abstract class Comp {
  7.     /**
  8.      * 组件池
  9.      */
  10.     private static compsPool: Map<new () => any, Comp[]> = new Map();
  11.     /**
  12.      * 创建组件
  13.      * @param compClass 
  14.      * @returns 
  15.      */
  16.     public static createComp<T extends Comp>(compClass: new () => T, entity: Entity): T {
  17.         // 获取对应组件类的池子
  18.         let pool = this.compsPool.get(compClass);
  19.         // 如果池子不存在，为组件类创建一个新的空池子
  20.         if (!pool) {
  21.             pool = [];
  22.             this.compsPool.set(compClass, pool);
  23.         }
  24.         // 如果池子中有实例，则取出并返回；否则创建一个新实例并返回
  25.         let comp = pool.length > 0 ? pool.pop() as T : new compClass();
  26.         comp.entity = entity
  27.         setTimeout(() => {
  28.             comp.onAttach(entity); // 延迟0,防止属性数据未初始化赋值就已经执行挂载
  29.         }, 0)
  30.         return comp
  31.     }
  32.     static removeComp(comp: Comp) {
  33.         comp.onDetach(comp.entity);
  34.         comp.entity = null
  35.         comp.reset();
  36.         // 获取组件实例的构造函数
  37.         const compClass = comp.constructor as new () => Comp;
  38.         // 从组件池中找到对应的构造函数对应的池子
  39.         const pool = this.compsPool.get(compClass);
  40.         // 如果池子存在，将组件实例放回池子中
  41.         if (pool) {
  42.             pool.push(comp);
  43.         } else {
  44.             // 如果池子不存在，创建一个新的池子并将组件实例放入
  45.             this.compsPool.set(compClass, [comp]);
  46.         }
  47.     }
  48.     /**
  49.      * 单体组件的实体
  50.      */
  51.     public entity: Entity | null = null;
  52.     /** 
  53.      * 组件挂载并初始化后的回调
  54.      */
  55.     abstract callback: Function;
  56.     /** 监听挂载到实体 */
  57.     abstract onAttach(entity: Entity): void
  58.     /** 监听从实体卸载 */
  59.     abstract onDetach(entity: Entity): void
  60.     /** 重置 */
  61.     abstract reset(): void
  62. }
  1.  
  2. export abstract class System {
  3.     update?(dt: number);
  4.     // 为了简化系统，系统内方法都是静态方法,直接调用
  5. }

6、其他-使用ECS

main.ts 挂载在root下面

  1.     
  2.  
  3.     onLoad() {
  4.         window['xhgame'] = xhgame // 方便console中查看全局
  5.         const gameDesign = new GameDesign();
  6.         switch (this.gameCode) {
  7.             case 'demo': // demo
  8.                 gameDesign.setGameBuilder(new DemoGameBuilder(this));
  9.                 gameInstance.game = gameDesign.buildGame<DemoGame>()
  10.                 break;
  11.         }
  12.         gameInstance.game.start()
  13.         // 添加有update的系统（临时放置）
  14.         xhgame.game.updateSystems.push(GameMoveSystem)
  15.  
  16.     }
  17.  
  18.  
  19.     protected update(dt: number): void {
  20.         if (xhgame.game && xhgame.game.updateSystems.length > 0) {
  21.             for (const system of xhgame.game.updateSystems) {
  22.                 const _system = system as System
  23.                 _system.update && _system.update(dt);
  24.             }
  25.         }
  26.     }
  1.         // 创建一个player实体
  2.         const player_entity = Entity.createEntity();
  3.         ooxh.game.playerEntity = player_entity
  4.         player_entity.attachComponent(PlayerStateComp) // 状态组件
  5.         player_entity.attachComponent(PlayerLoginComp) // 登录组件
  6.         player_entity.attachComponent(PlayerTouchMoveComp) // 触控组件
  1. export class BattleInitSystem extends System {
  2.  
  3.     // 开始初始化战役
  4.     static startInit(comp: BattleInitComp, callback: Function) {
  5.         this.showUnit() // 单位
  6.         callback && callback()
  7.     }
  8.  
  9.     // 显示各种单位
  10.     static showUnit() {
  11.         ...
  12.     }
  13. }
  14.  
  15. export class BattleInitComp extends Comp {
  16.  
  17.     callback: Function = null
  18.  
  19.     reset() {
  20.         this.callback = null
  21.     }
  22.  
  23.     onAttach(entity: Entity) {
  24.         BattleInitSystem.startInit(this, () => {
  25.             this.callback && this.callback()
  26.         })
  27.     }
  28.  
  29.     onDetach(entity: Entity) {
  30.  
  31.     }
  32. }

  1. ooxh.game.battleEntity.attachComponent(BattleInitComp).callback = () => {
  2.     ooxh.game.battleEntity.detachComponent(BattleInitComp)
  3. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/152462
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号