Cocos 逻辑与显示分离架构

这种架构模式通常被称为 "逻辑节点-显示节点分离" 或 "实体-表现分离" 模式，是游戏开发中的经典设计模式。

🏗️ 基本结构

父节点（逻辑节点）GameObject
├── 逻辑组件 ScriptComponent（控制业务逻辑）
├── 子节点 DisplayNode（显示节点）
│   ├── 精灵组件 SpriteComponent（显示图像）
│   ├── 动画组件 AnimationComponent（播放动画）
│   └── 其他显示相关组件
└── 其他逻辑相关节点（碰撞体、触发器等）

🎯 主要目的

1. 职责分离

父节点（逻辑层）：处理业务逻辑、数据管理、状态机、游戏规则
子节点（表现层）：负责视觉表现、动画播放、特效显示

2. 关注点分离

逻辑不关心具体如何渲染
表现不关心游戏规则

🔧 实现方式

典型应用场景

// 1. 角色实体
PlayerEntity (父节点 - 逻辑)
├── PlayerLogic.ts (处理移动、攻击、生命值等逻辑)
├── Collider (碰撞体，跟随逻辑移动)
└── PlayerView (子节点 - 显示)
    ├── Sprite (角色贴图)
    ├── Animation (角色动画)
    └── ParticleSystem (角色特效)

// 2. UI控件
UIControl (父节点 - 逻辑)
├── ButtonLogic.ts (处理点击、状态管理)
└── ButtonView (子节点 - 显示)
    ├── Background (背景图片)
    ├── Label (文字)
    └── Icon (图标)

💡 核心优势

1. 灵活性高

// 可动态切换显示资源而不影响逻辑
playerEntity.getComponent(PlayerLogic).changeView('warriorView');
// 只需更换子节点，逻辑代码不变

2. 易于扩展

// 添加新的显示效果不影响逻辑
playerView.addComponent(ShadowEffect); // 添加阴影效果
playerView.addComponent(GlowEffect);   // 添加发光效果

3. 复用性强

// 同一个逻辑可以搭配不同的显示
const enemyLogic = new EnemyLogic();
enemyLogic.attachView(smallEnemyView);   // 小型敌人显示
enemyLogic.attachView(bossEnemyView);    // BOSS敌人显示

4. 调试方便

可单独隐藏/显示表现层
逻辑层可独立测试
表现层可单独预览

🛠️ 实际应用示例

场景1：角色移动

// 父节点逻辑
class CharacterLogic extends Component {
    private _view: Node; // 显示节点
    
    moveTo(position: Vec3) {
        // 1. 逻辑计算
        this.position = this.calculatePath(position);
        // 2. 更新碰撞体位置
        this.collider.position = this.position;
        // 3. 通知显示层
        this._view.position = this.position;
        // 4. 触发显示效果
        this._view.getComponent(Animation).play('walk');
    }
}

场景2：状态切换

// 父节点状态管理
class PlayerStateMachine extends Component {
    private _viewNode: Node;
    
    changeState(state: PlayerState) {
        // 更新逻辑状态
        this.currentState = state;
        
        // 通知显示层更新
        switch(state) {
            case PlayerState.IDLE:
                this._viewNode.getComponent(Animation).play('idle');
                break;
            case PlayerState.ATTACK:
                this._viewNode.getComponent(Animation).play('attack');
                this._viewNode.getComponent(ParticleSystem).play();
                break;
        }
    }
}

🎮 在游戏中的具体应用

1. 敌人系统

Enemy (逻辑节点)
├── EnemyAI.ts (AI逻辑)
├── EnemyStats.ts (属性管理)
├── HealthSystem.ts (生命系统)
├── Collider (逻辑碰撞体)
└── EnemyView (显示节点)
    ├── SpriteRenderer (敌人图像)
    ├── EnemyAnimator (动画控制器)
    ├── DamageEffect (受伤特效)
    └── HealthBar (血条UI)

2. 技能系统

Skill (逻辑节点)
├── SkillLogic.ts (技能逻辑)
├── HitDetector.ts (命中检测)
└── SkillEffect (显示节点)
    ├── ParticleSystem (粒子特效)
    ├── TrailRenderer (拖尾效果)
    └── LightEffect (光照效果)

🔄 通信机制

1. 事件驱动（推荐）

// 逻辑层触发事件
this.node.emit('onDamage', { damage: 100 });

// 表现层监听事件
viewNode.on('onDamage', (data) => {
    this.playHitEffect(data.damage);
    this.updateHealthBar();
});

2. 直接引用

// 逻辑层持有显示层引用
class PlayerLogic extends Component {
    @property(Node)
    viewNode: Node = null!;
    
    attack() {
        // 控制显示
        this.viewNode.getComponent(Animation).play('attack');
    }
}

📊 性能优化考虑

1. 动态加载显示资源

// 根据需要加载不同的显示资源
loadViewResource(viewType: string) {
    resources.load(`views/${viewType}`, (err, prefab) => {
        // 实例化显示节点
        const viewNode = instantiate(prefab);
        // 挂载到逻辑节点下
        this.node.addChild(viewNode);
    });
}