坦克大战游戏开发实战(一)-游戏引擎核心设计与实现

前言

游戏引擎是游戏开发的核心基础设施，它负责管理游戏的主循环、帧率控制、状态管理以及各种游戏对象的协调。在HarmonyOS平台上开发游戏，需要充分利用ArkTS语言特性和HarmonyOS的渲染能力。本文将详细讲解如何从零开始设计和实现一个轻量级但功能完整的游戏引擎。

为什么需要自定义游戏引擎？

1. 性能优化：针对HarmonyOS平台特性进行优化
2. 轻量级设计：避免引入大型游戏引擎的复杂性
3. 学习价值：深入理解游戏开发的核心原理
4. 灵活定制：根据项目需求灵活扩展功能

一、游戏引擎架构设计

1.1 核心架构

游戏引擎采用分层架构设计，主要包含以下层次：

┌─────────────────────────────────┐
│         游戏应用层              │
│  (GamePage, GameLogic)          │
├─────────────────────────────────┤
│         引擎核心层              │
│  (GameEngine, GameLoop)         │
├─────────────────────────────────┤
│         基础设施层              │
│  (CollisionUtil, MathUtil)      │
└─────────────────────────────────┘

1.2 游戏状态管理

游戏引擎需要管理多种游戏状态：

状态	说明	特点
READY	准备开始	初始化完成，等待用户开始
PLAYING	游戏进行中	主循环运行，接受用户输入
PAUSED	暂停状态	主循环暂停，保持当前状态
GAMEOVER	游戏结束	显示结果，可重新开始

二、游戏主循环实现

2.1 主循环原理

游戏主循环是游戏引擎的心脏，它按照固定频率不断执行以下步骤：

1. 处理输入：接收用户输入（触摸、按键等）
2. 更新状态：更新游戏对象的位置、状态等
3. 碰撞检测：检测游戏对象之间的碰撞
4. 渲染画面：将游戏对象绘制到画布上

// 伪代码示例
while (gameIsRunning) {
    processInput();      // 处理输入
    update(deltaTime);   // 更新状态
    checkCollisions();   // 碰撞检测
    render();            // 渲染画面
}

2.2 GameEngine核心实现

export class GameEngine {
  private isRunning: boolean = false;
  private lastFrameTime: number = 0;
  private frameInterval: number = 1000 / 60; // 60 FPS
  private animationFrameId: number = -1;
  
  // 游戏对象容器
  private tanks: TankBase[] = [];
  private bullets: Bullet[] = [];
  private map: GameMap | null = null;
  
  /**
   * 启动游戏引擎
   */
  start(): void {
    if (this.isRunning) return;
    
    this.isRunning = true;
    this.lastFrameTime = Date.now();
    this.gameLoop();
  }
  
  /**
   * 游戏主循环
   */
  private gameLoop(): void {
    if (!this.isRunning) return;
    
    const currentTime = Date.now();
    const deltaTime = currentTime - this.lastFrameTime;
    
    // 帧率控制：确保稳定的60FPS
    if (deltaTime >= this.frameInterval) {
      this.lastFrameTime = currentTime - (deltaTime % this.frameInterval);
      
      // 执行游戏逻辑
      this.update(deltaTime);
      this.render();
    }
    
    // 继续下一帧
    this.animationFrameId = requestAnimationFrame(() => this.gameLoop());
  }
}

2.3 帧率控制策略

帧率控制是游戏引擎的关键技术，直接影响游戏的流畅度和性能。

/**
 * 帧率控制器
 */
export class FrameRateController {
  private targetFPS: number = 60;
  private frameInterval: number = 1000 / 60;
  private lastFrameTime: number = 0;
  private frameCount: number = 0;
  private fps: number = 0;
  
  /**
   * 检查是否应该渲染下一帧
   */
  shouldRender(): boolean {
    const currentTime = Date.now();
    const elapsed = currentTime - this.lastFrameTime;
    
    if (elapsed >= this.frameInterval) {
      // 计算实际FPS
      this.frameCount++;
      if (elapsed >= 1000) {
        this.fps = this.frameCount;
        this.frameCount = 0;
        this.lastFrameTime = currentTime;
      }
      return true;
    }
    return false;
  }
}

三、游戏对象管理

3.1 对象池技术

为了提高性能，避免频繁创建和销毁对象，使用对象池技术：

/**
 * 对象池模板
 */
export class ObjectPool<T> {
  private pool: T[] = [];
  private createFn: () => T;
  private resetFn: (obj: T) => void;
  private maxSize: number;
  
  constructor(
    createFn: () => T,
    resetFn: (obj: T) => void,
    maxSize: number = 100
  ) {
    this.createFn = createFn;
    this.resetFn = resetFn;
    this.maxSize = maxSize;
  }
  
  /**
   * 获取对象
   */
  acquire(): T {
    if (this.pool.length > 0) {
      return this.pool.pop()!;
    }
    return this.createFn();
  }
  
  /**
   * 释放对象
   */
  release(obj: T): void {
    if (this.pool.length < this.maxSize) {
      this.resetFn(obj);
      this.pool.push(obj);
    }
  }
}

3.2 游戏对象生命周期管理

游戏对象的生命周期包括：创建、激活、更新、停用、销毁五个阶段。

export class GameObjectManager {
  private objects: Map<string, GameObject> = new Map();
  private updateQueue: GameObject[] = [];
  private renderQueue: GameObject[] = [];
  
  /**
   * 添加游戏对象
   */
  addObject(id: string, obj: GameObject): void {
    this.objects.set(id, obj);
    
    // 根据对象类型添加到相应队列
    if (obj.needUpdate) {
      this.updateQueue.push(obj);
    }
    if (obj.needRender) {
      this.renderQueue.push(obj);
    }
  }
  
  /**
   * 批量更新
   */
  updateAll(deltaTime: number): void {
    this.updateQueue.forEach(obj => {
      if (obj.isActive) {
        obj.update(deltaTime);
      }
    });
  }
}

四、事件系统设计

4.1 事件驱动架构

游戏引擎需要处理各种事件：用户输入、碰撞事件、游戏事件等。

/**
 * 事件类型定义
 */
export enum GameEventType {
  TANK_MOVE = 'tank_move',
  TANK_SHOOT = 'tank_shoot',
  BULLET_HIT = 'bullet_hit',
  TANK_DESTROY = 'tank_destroy',
  GAME_OVER = 'game_over',
  SCORE_UPDATE = 'score_update'
}

/**
 * 事件管理器
 */
export class EventManager {
  private listeners: Map<GameEventType, EventListener[]> = new Map();
  
  /**
   * 注册事件监听器
   */
  on(eventType: GameEventType, listener: EventListener): void {
    if (!this.listeners.has(eventType)) {
      this.listeners.set(eventType, []);
    }
    this.listeners.get(eventType)!.push(listener);
  }
  
  /**
   * 触发事件
   */
  emit(eventType: GameEventType, data?: any): void {
    const listeners = this.listeners.get(eventType);
    if (!listeners) return;
    
    const event: GameEvent = {
      type: eventType,
      data,
      timestamp: Date.now()
    };
    
    listeners.forEach(listener => listener(event));
  }
}

五、暂停与恢复机制

5.1 游戏状态保存

export class GameStateManager {
  private savedState: GameSnapshot | null = null;
  
  /**
   * 保存游戏状态
   */
  saveSnapshot(engine: GameEngine): GameSnapshot {
    return {
      timestamp: Date.now(),
      tanks: engine.getAllTanks().map(tank => tank.serialize()),
      bullets: engine.getAllBullets().map(bullet => bullet.serialize()),
      score: engine.getScore(),
      level: engine.getLevel()
    };
  }
  
  /**
   * 恢复游戏状态
   */
  restoreSnapshot(snapshot: GameSnapshot, engine: GameEngine): void {
    // 恢复坦克
    snapshot.tanks.forEach(data => {
      const tank = TankBase.deserialize(data);
      engine.addTank(tank);
    });
    
    // 恢复分数和关卡
    engine.setScore(snapshot.score);
    engine.setLevel(snapshot.level);
  }
}

5.2 暂停恢复实现

export class GameEngine {
  private stateManager: GameStateManager;
  private gameState: GameState = GameState.READY;
  
  /**
   * 暂停游戏
   */
  pause(): void {
    if (this.gameState !== GameState.PLAYING) return;
    
    // 停止主循环
    this.isRunning = false;
    if (this.animationFrameId !== -1) {
      cancelAnimationFrame(this.animationFrameId);
      this.animationFrameId = -1;
    }
    
    // 保存当前状态
    this.stateManager.saveSnapshot(this);
    
    // 更新游戏状态
    this.gameState = GameState.PAUSED;
  }
  
  /**
   * 恢复游戏
   */
  resume(): void {
    if (this.gameState !== GameState.PAUSED) return;
    
    // 恢复游戏状态
    this.gameState = GameState.PLAYING;
    
    // 重新启动主循环
    this.start();
  }
}

六、性能监控与调试

6.1 性能统计

export class PerformanceMonitor {
  private frameTimes: number[] = [];
  private maxSamples: number = 60;
  
  /**
   * 记录帧时间
   */
  recordFrame(frameTime: number): void {
    this.frameTimes.push(frameTime);
    if (this.frameTimes.length > this.maxSamples) {
      this.frameTimes.shift();
    }
  }
  
  /**
   * 获取平均FPS
   */
  getAverageFPS(): number {
    if (this.frameTimes.length === 0) return 0;
    
    const avgFrameTime = this.frameTimes.reduce((a, b) => a + b, 0) 
                         / this.frameTimes.length;
    return 1000 / avgFrameTime;
  }
}

6.2 调试工具

export class DebugOverlay {
  private enabled: boolean = false;
  private monitor: PerformanceMonitor;
  
  /**
   * 渲染调试信息
   */
  render(context: CanvasRenderingContext2D): void {
    if (!this.enabled) return;
    
    const report = this.monitor.getReport();
    
    context.fillStyle = 'rgba(0, 0, 0, 0.7)';
    context.fillRect(10, 10, 200, 100);
    
    context.fillStyle = '#FFFFFF';
    context.font = '12px monospace';
    context.fillText(`FPS: ${report.avgFPS.toFixed(1)}`, 20, 30);
  }
}

七、引擎扩展机制

7.1 插件系统

/**
 * 引擎插件接口
 */
export interface EnginePlugin {
  name: string;
  init(engine: GameEngine): void;
  update(deltaTime: number): void;
  render(context: CanvasRenderingContext2D): void;
  destroy(): void;
}

/**
 * 插件管理器
 */
export class PluginManager {
  private plugins: Map<string, EnginePlugin> = new Map();
  private engine: GameEngine;
  
  /**
   * 注册插件
   */
  register(plugin: EnginePlugin): void {
    if (this.plugins.has(plugin.name)) {
      console.warn(`Plugin ${plugin.name} already registered`);
      return;
    }
    
    this.plugins.set(plugin.name, plugin);
    plugin.init(this.engine);
  }
  
  /**
   * 卸载插件
   */
  unregister(name: string): void {
    const plugin = this.plugins.get(name);
    if (plugin) {
      plugin.destroy();
      this.plugins.delete(name);
    }
  }
}

八、实际应用案例

8.1 坦克大战游戏引擎初始化

// 在GamePage中初始化引擎
aboutToAppear(): void {
  // 创建游戏引擎
  this.engine = new GameEngine();
  
  // 初始化游戏对象
  this.initGame();
  
  // 注册事件监听
  this.engine.on(GameEventType.GAME_OVER, () => {
    this.gameState = 'gameover';
  });
}

/**
 * 初始化游戏
 */
private initGame(): void {
  // 创建玩家坦克
  this.playerTank = new PlayerTank(
    this.canvasWidth / 2 - 20,
    this.canvasHeight - 60,
    TankDirection.UP
  );
  
  // 添加到引擎
  this.engine.addTank(this.playerTank);
  
  // 创建地图
  this.gameMap = new GameMap(13, 13, 40);
  this.gameMap.generateLevel1();
  this.engine.setMap(this.gameMap);
}

8.2 游戏主循环集成

/**
 * 渲染游戏画面
 */
private render(): void {
  // 清空画布
  this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  
  // 绘制地图
  if (this.gameMap) {
    this.gameMap.render(this.context);
  }
  
  // 绘制玩家坦克
  if (this.playerTank && this.playerTank.isAlive) {
    this.playerTank.render(this.context);
  }
  
  // 绘制子弹
  this.bullets.forEach(bullet => {
    if (bullet.isActive) {
      bullet.render(this.context);
    }
  });
  
  // 绘制UI
  this.renderUI();
}

图 1 游戏主界面展示

九、性能优化建议

9.1 渲染优化

1. 减少绘制调用：合并相同属性的绘制操作
2. 使用离屏Canvas：预渲染静态元素
3. 视口裁剪：只渲染可见区域的对象

9.2 内存优化

1. 对象池复用：避免频繁创建销毁对象
2. 及时清理：移除无效的游戏对象
3. 资源管理：合理加载和释放游戏资源

9.3 计算优化

1. 碰撞检测优化：使用空间分割减少检测次数
2. 缓存计算结果：避免重复计算
3. 增量更新：只更新发生变化的对象

十、总结

本文详细讲解了HarmonyOS平台上游戏引擎的核心设计与实现，包括：

1. 游戏主循环：实现了稳定的60FPS帧率控制
2. 状态管理：支持游戏暂停、恢复、结束等状态切换
3. 对象管理：使用对象池技术提高性能
4. 事件系统：实现了松耦合的事件驱动架构
5. 扩展机制：通过插件系统支持功能扩展

通过这些核心组件的实现，我们为坦克大战游戏打下了坚实的基础。在后续的文章中，我们将继续讲解坦克实体系统、碰撞检测、地图系统等模块的实现。

技术要点回顾

• ✅ 游戏主循环使用requestAnimationFrame实现流畅渲染
• ✅ 帧率控制确保稳定的60FPS性能
• ✅ 对象池技术减少内存分配和垃圾回收
• ✅ 事件系统实现模块间的松耦合
• ✅ 插件机制提供良好的扩展性

系列文章导航：

下期预告： HarmonyOS坦克大战游戏开发实战(二)-坦克实体系统架构设计

---