--- doc_id: "DOC-ARCH-003" title: "Kiến Trúc Vòng Lặp Game Engine 30Hz Server-Client" category: "architecture" diataxis_type: "explanation" status: "canonical" version: "2026.1" owner_role: "server_systems_architect" last_updated: "2026-09-29" tags: ["game-engine", "tick-30hz", "server-authoritative", "spatial-grid"] related_code: - "server/engine/game_loop.py" - "server/world/movement_authority.py" related_docs: - "docs/architecture/ISOMETRIC_COLLISION_BOUNDARIES_AND_PROP_SYSTEM.md" summary: "Vòng lặp máy chủ 30Hz đơn phương xác thực, cơ chế reconciliation phía client và khử trôi tọa độ." --- # KIẾN TRÚC HỆ THỐNG GAME ENGINE 2.5D ĐỒNG BỘ SERVER - CLIENT (FREEEXILE ENGINE CORE) > **Dự án**: `FreeExile` — Dark Martial Astral ARPG (Cổ Võ Hắc Ám) > **Phiên bản kiến trúc**: v2.0-Authoritative > **Mục tiêu**: Vận hành thế giới mở 1.000.000+ CCU, Server-Authoritative 100%, khử giật 120 FPS ProMotion trên iOS, tải trọng bộ nhớ siêu nhẹ (< 1GB VRAM/RAM). --- ## 1. TỔNG QUAN KIẾN TRÚC HYBRID CO-SIMULATION Hệ thống Game Engine của `FreeExile` áp dụng mô hình **Hybrid Co-Simulation (Mô phỏng phối hợp phân cấp)**: - **Server**: Đóng vai trò là **Thẩm Quyền Thế Giới Tuyệt Đối (World Simulation Authority)**. Mọi quyết định về tọa độ, va chạm, tầm nhìn (Line of Sight), sát thương, hủy chiêu và phần thưởng rơi đồ đều do Server tính toán độc lập ở tần số **30 Ticks/giây (33.33ms/tick)**. - **Client**: Đóng vai trò là **Bộ Máy Dự Đoán & Tái Hiện Trực Quan (Prediction & Presentation Engine)**. Chạy vòng lặp render động từ **30 FPS đến 120 FPS (Apple ProMotion)**, thực hiện Client-side Prediction cho nhân vật chính và Hermite Spline Snapshot Interpolation cho toàn bộ entities xung quanh, loại bỏ hoàn toàn cảm giác giật lag dưới độ trễ mạng biến thiên. ```mermaid flowchart TD subgraph ClientEngine["Client Game Engine (iOS Metal / TypeScript)"] TouchInput["Smart Touch Input (Joystick & Arc)"] --> InputBuffer["Input Ring Buffer"] InputBuffer --> LocalPredict["Client Movement & Combat Prediction"] LocalPredict --> LocalState["Local Predicted State"] LocalState --> RenderAccum["Time Accumulator & Dual-Loop"] RenderAccum --> HermiteInterp["Snapshot Interpolator (Remote Entities)"] HermiteInterp --> MetalPipeline["Apple Metal 2.5D PBR & Compute VFX (120Hz)"] InputBuffer -.->|"Send UDP/QUIC (Input Vector + Seq)"| NetUplink["Network Egress"] end subgraph NetworkMesh["Mạng Giao Thức (Geo-Distributed QUIC/UDP Gateway)"] NetUplink <==>|"Biometrics + Packet Cipher"| Gateway["QUIC Gateway (ChaCha20-Poly1305)"] end subgraph ServerEngine["Server Game Engine (Authoritative Headless Engine)"] Gateway --> IngestQueue["Packet Ingest & Decompress Queue"] IngestQueue --> TickLoop["Fixed Tick Loop (30Hz / 33.33ms)"] subgraph TickPipeline["7-Phase Authoritative Tick Pipeline"] P1["1. Input Verification & Anti-Speedhack"] P2["2. Spatial Hash Grid & AOI Relocation"] P3["3. Capsule 2.5D Collision & Raycast LoS"] P4["4. Combat State Machine & Animation Cancel"] P5["5. Five Elements Matrix & i-Frame Evade"] P6["6. State Mutation & Delta Compression"] P7["7. Egress Broadcast (AOI Neighborhood)"] P1 --> P2 --> P3 --> P4 --> P5 --> P6 --> P7 end TickLoop --> TickPipeline P6 -.->|"Kafka Event Stream"| Ledger["Immutable Ledger (CockroachDB)"] P7 -.->|"Delta Snapshot (30Hz/10Hz Tiered)"| Gateway end Gateway -.->|"Authoritative Snapshots & Corrections"| ClientReconcile["Client Reconcile & Smooth Rubberband"] ClientReconcile --> LocalState ``` --- ## 2. HỆ TỌA ĐỘ VÀ TOÁN HỌC 2.5D ISOMETRIC CHUNG (SHARED SIMULATION MATH) Nhằm đảm bảo tính nhất quán toán học tuyệt đối giữa Server (Python/Rust) và Client (TypeScript/Metal), hệ thống chuẩn hóa: ### 2.1. Phép Chiếu Isometric 2:1 Chuẩn Mực Trong không gian 2.5D, tỷ lệ trục Isometric chuẩn quốc tế là $2:1$ (tương đương góc nghiêng camera $\approx 26.565^\circ$, xoay góc $45^\circ$): $$\begin{cases} X_{screen} = (X_{world} - Y_{world}) \times \frac{TileWidth}{2} \\ Y_{screen} = (X_{world} + Y_{world}) \times \frac{TileHeight}{2} - (Z_{world} \times HeightScale) \end{cases}$$ - **Phép chiếu ngược (Screen To World / Raycasting Touch)**: $$\begin{cases} X_{world} = \frac{X_{screen}}{TileWidth} + \frac{Y_{screen} + (Z_{world} \times HeightScale)}{TileHeight} \\ Y_{world} = \frac{Y_{screen} + (Z_{world} \times HeightScale)}{TileHeight} - \frac{X_{screen}}{TileWidth} \end{cases}$$ ### 2.2. Phân Tầng Cao Độ (Height Layering & Bridge Clipping) - Mỗi Entity lưu trữ bộ 3 tọa độ: $(X, Y, Z)$. - Mặt phẳng di chuyển chính nằm ở $Z = 0$. - Các cây cầu cổ, vách đá, tháp canh được phân theo các tầng $Z \in [0, 1, 2]$. - **Nguyên tắc va chạm**: Hai thực thể chỉ xảy ra va chạm hình học khi $|Z_A - Z_B| < CapsuleHeight$. --- ## 3. KIẾN TRÚC CHI TIẾT SERVER GAME ENGINE ### 3.1. Vòng Lặp Tick rate Cố Định (Fixed 30Hz Authoritative Loop) Server vận hành chu kỳ tick chuẩn **$33.33ms$**. Nếu một tick kéo dài hơn thời gian cho phép (Overrun budget), hệ thống kích hoạt cơ chế bỏ khung hình phụ (Drop non-critical broadcasts) để duy trì nhịp tim mô phỏng: | Phase | Thời Lượng Tối Đa | Trách Nhiệm Trọng Tâm | | :--- | :--- | :--- | | **Phase 1: Ingest & Sanitize** | $2.5ms$ | Giải nén gói tin binary, giải mã ChaCha20, kiểm tra timestamp, lọc trùng lặp sequence. | | **Phase 2: Movement Authority** | $4.0ms$ | Kiểm tra vận tốc tối đa: $Dist \le (Speed_{base} \times \Delta t) \times 1.15$. Phạt điểm nghi vấn nếu vượt ngưỡng; tự động giật lùi (rubberband) nếu vi phạm. | | **Phase 3: Spatial AOI Hash** | $3.5ms$ | Cập nhật vị trí trên lưới $64m \times 64m$. Phân bổ entity vào các ô lưới (Cell Grid), tái tính toán danh sách quan sát 9 ô (AOI 3x3). | | **Phase 4: Collision & LoS** | $5.0ms$ | Kiểm tra va chạm Capsule 2.5D giữa Player - Monster - Static Obstacles. Raycast kiểm tra vật chắn tầm nhìn để chống hack map/wall-hack. | | **Phase 5: Combat & Skills** | $8.0ms$ | Xử lý Animation Frame State Machine (Startup $\rightarrow$ Active $\rightarrow$ Recovery). Kiểm tra i-frame Huyễn Ảnh Bộ (250ms bất tử). Tính toán tương khắc Ngũ Hành. | | **Phase 6: Delta Snapshot** | $6.0ms$ | Trích xuất trạng thái thay đổi (Dirty Flags). Lượng tử hóa tọa độ (Quantization 16-bit). Phân loại tầm xa (Tier 1: 30Hz, Tier 2: 10Hz). | | **Phase 7: Egress Flush** | $4.33ms$ | Gửi dữ liệu ra mạng qua Gateway socket không chặn (Non-blocking async I/O). | ### 3.2. Không Gian AOI Phân Cấp (Hierarchical Spatial Hash Grid) Thay vì thuật toán so sánh $O(N^2)$, bản đồ được băm thành bảng băm không gian: - Kích thước mỗi ô: $64m \times 64m$ (vừa vặn với 1.5 lần tầm nhìn màn hình iPhone 16 Pro Max). - Entity quan sát lân cận: $3 \times 3 = 9$ ô liền kề. - **Dynamic Sharding**: Khi số lượng Actor trong 1 cell vượt quá 120, cell tự động chuyển sang chế độ nén snapshot (cắt giảm các hiệu ứng phụ không cần thiết, ưu tiên gửi HP, vị trí, chiêu thức). ### 3.3. Cỗ Máy Trạng Thái Đòn Đánh & Hủy Chiêu (Animation Cancel & i-Frame) Khác với game nhập vai truyền thống vốn khóa cứng nhân vật khi xuất chiêu (Lock animation), `FreeExile` hỗ trợ hủy chiêu mượt mà tương tự Action Game: ```mermaid stateDiagram-v2 [*] --> Idle Idle --> Moving: Move Vector != 0 Moving --> Idle: Move Vector == 0 Idle --> Skill_Startup: Kích hoạt Chiêu Thức Moving --> Skill_Startup: Kích hoạt Chiêu Thức state Skill_Startup { [*] --> WindupFrames WindupFrames --> ActiveFrames: Hết thời gian tụ lực WindupFrames --> Phantom_Evasion: Bấm Né (Cancel Ngay Lập Tức) } state ActiveFrames { [*] --> HitboxCalculation HitboxCalculation --> ApplyDamageAndVFX ApplyDamageAndVFX --> RecoveryFrames ApplyDamageAndVFX --> Phantom_Evasion: Bấm Né (Cancel Ngay Lập Tức) } state RecoveryFrames { [*] --> Winddown Winddown --> Idle Winddown --> Skill_Startup: Combo Chiêu Kế Tiếp Winddown --> Phantom_Evasion: Bấm Né (Cancel Ngay Lập Tức) } state Phantom_Evasion { [*] --> iFrameActive: Bật Bất Tử 250ms iFrameActive --> DashDisplacement: Lướt Thân Pháp 4.5m DashDisplacement --> Idle: Kết thúc Lướt } ``` --- ## 4. KIẾN TRÚC CHI TIẾT CLIENT GAME ENGINE ### 4.1. Cơ Chế Dual-Loop & Bộ Tích Lũy Thời Gian (Time Accumulator) Để hiển thị 120 FPS mượt mà trên màn hình iPhone ProMotion trong khi Server chỉ gửi snapshot ở 30Hz, Client sử dụng kiến trúc **Tách Rời Hoàn Toàn Vòng Lặp Render và Mô Phỏng (Decoupled Dual-Loop)**: ```typescript // Pseudocode Client Engine Core Loop let accumulator = 0.0; const FIXED_TICK_DT = 1.0 / 30.0; // 33.33ms fixed tick function onRenderFrame(currentTime: number, deltaTime: number) { // 1. Thu thập input cảm ứng từ Virtual Joystick inputSystem.pollInputs(); // 2. Tích lũy thời gian thực accumulator += Math.min(deltaTime, 0.1); // Clamp chống hiện tượng spiral of death // 3. Chạy các bước mô phỏng cố định (Fixed Simulation Steps) while (accumulator >= FIXED_TICK_DT) { physicsAndPrediction.step(FIXED_TICK_DT); combatController.step(FIXED_TICK_DT); accumulator -= FIXED_TICK_DT; } // 4. Hệ số nội suy giữa 2 trạng thái mô phỏng (Alpha Interpolation Factor) const alpha = accumulator / FIXED_TICK_DT; // 5. Nội suy vị trí tất cả Entity để đưa vào Pipeline Đồ Họa 120Hz renderScene.interpolate(alpha); // 6. Gửi lệnh vẽ sang Metal Render Pass metalPipelineManager.renderFrame(); } ``` ### 4.2. Pipeline Đồ Họa 2.5D Apple Metal Chuyên Sâu Client `FreeExile` kết hợp mỹ thuật 2D thanh thoát với công nghệ đổ bóng 3D PBR tiên tiến: 1. **Sprite PBR with Normal Maps & Roughness**: - Mỗi Sprite (nhân vật, quái vật, chướng ngại) đi kèm 2 texture: Diffuse RGBA và Normal Map RGBA (chứa pháp tuyến bề mặt). - Metal Fragment Shader thực hiện tính toán ánh sáng Lambertian Diffuse + Blinn-Phong Specular theo nguồn sáng thực tế: $$I_{frag} = Diffuse \times (Ambient + \max(0, \vec{N} \cdot \vec{L}) \times LightColor) + Specular$$ 2. **Sắp Xếp Chiều Sâu Bằng Z-Buffer Phần Cứng (Hardware Depth Buffer Y-Sorting)**: - Thay vì chạy thuật toán CPU Sort $O(N \log N)$ mỗi frame (gây nóng máy và hao pin), engine gán giá trị độ sâu phần cứng: $$Depth_{vertex} = \frac{Y_{world} \times K_{scale} + Layer_{offset}}{FarPlane}$$ - GPU Metal tự động loại bỏ điểm ảnh khuất bằng Depth Test (`MTLCompareFunctionLessEqual`), đạt tốc độ sắp xếp triệu sprite trong $0.1ms$. 3. **GPU Compute Particle VFX (Metal Compute Shader)**: - Hàng vạn tia kiếm khí, hàn băng, liệt hỏa chạy trực tiếp trên luồng Compute Shader (`FiveElementsCompute.metal`), không tiêu tốn chu kỳ CPU nào. ### 4.3. Client-side Prediction & Khử Giật (Reconciliation) - **Local Player**: Phản hồi tức thì với thao tác vuốt joystick mà không cần đợi gói tin vòng về từ server (Round-Trip Time). - **Snapshot Reconciliation**: Khi nhận gói tin sửa đổi từ Server: - Nếu khoảng cách chênh lệch $Err < 0.05m$: Giữ nguyên, coi như độ lệch vi mô. - Nếu $0.05m \le Err \le 1.5m$: Dùng hàm nội suy lũy thừa giảm dần (Exponential Damping) kéo dần về vị trí server trong 4-6 frames, mắt người không nhận biết được sự điều chỉnh. - Nếu $Err > 1.5m$: Server đã cưỡng chế chặn tường/va chạm, thực hiện trượt dọc theo biên vật cản (Wall Sliding Reconcile). --- ## 5. THIẾT KẾ ĐIỀU KHIỂN CÔNG THÁI HỌC & TRẢI NGHIỆM CẢM ỨNG IPHONE ```mermaid flowchart TD subgraph TouchInputLayer["Tầng Điều Khiển Cảm Ứng Thông Minh (Ergonomic Touch)"] TouchLeft["Nửa Trái: Floating Dynamic Joystick"] TouchRight["Nửa Phải: Ergonomic Arc Skill Cluster"] TouchLeft -->|"Định vị tâm chạm động"| JoyVector["Vector Hướng (Angle, Magnitude)"] TouchLeft -->|"Nhấp đúp hoặc vuốt nhanh"| QuickDash["Huyễn Ảnh Bộ (Phantom Evasion)"] TouchRight --> TouchButtonA["Nút Đánh Thường (Smart Auto-Aim)"] TouchRight --> TouchButtonS1["Kỹ Năng 1 (Cung/Đao Auto-Swap)"] TouchRight --> TouchButtonS2["Kỹ Năng 2 (Kỳ Kinh Tuyệt Kỹ)"] TouchRight --> TouchButtonS3["Kỹ Năng 3 (Phù Chú Trận Pháp)"] TouchRight --> TouchButtonS4["Kỹ Năng 4 (Thần Biến Tối Thượng)"] end subgraph AppleEcosystemBridge["Tích Hợp Sâu Hệ Sinh Thái Apple (iOS Flagship)"] TapticEngine["Apple Taptic Engine API"] ProMotionSync["ProMotion CADisplayLink (30Hz - 120Hz)"] SafeAreaManager["Safe Area Auto-Padding (Dynamic Island & Notch)"] end JoyVector -->|"Di chuyển tức thì"| LocalState QuickDash -->|"Rung nhẹ (UIImpactFeedbackLight)"| TapticEngine TouchButtonS1 -->|"Rung đanh (UIImpactFeedbackHeavy khi Crit)"| TapticEngine ``` --- ## 6. GIAO THỨC TRUYỀN THÔNG & NÉN DỮ LIỆU DELTA (NETWORK LAYER) ### 6.1. Cấu Trúc Gói Tin Binary Siêu Nhẹ (FlatBuffers / Protobuf) Dữ liệu trạng thái thế giới được lượng tử hóa để tiết kiệm băng thông di động 4G/5G: - Tọa độ $X, Y$: Đóng gói thành `int16` (nhân với hệ số $100$, độ chính xác $0.01m$, dải bao phủ $\pm 327.67m$ quanh người chơi). - Góc quay (Heading Angle): Đóng gói thành `uint8` (chia 256 nấc góc, độ phân giải $\approx 1.4^\circ$). - Tốc độ di chuyển: Đóng gói thành `uint8` (bước nhảy $0.1m/s$). ### 6.2. Bitmask Dirty Flags Chỉ những trường có sự thay đổi mới được đóng gói vào payload: ``` [Header: 1 Byte] [DirtyMask: 2 Bytes] [Optional Fields Theo Mask...] - Bit 0: Tọa độ X, Y thay đổi - Bit 1: Máu/Chân khí thay đổi - Bit 2: Bắt đầu xuất chiêu - Bit 3: Bật trạng thái Huyễn Ảnh Bộ i-frame - Bit 4: Nhận hiệu ứng Buff/Debuff ``` Nhờ cơ chế này, băng thông trung bình mỗi người chơi chỉ tiêu thụ **$8 - 15 KB/s$**, cực kỳ mượt mà kể cả khi sóng 4G chỉ có 1-2 vạch. --- ## 7. BẢNG ĐỐI SOÁT CHỨC NĂNG SERVER vs. CLIENT ENGINE | Phân Hệ Động Cơ | Trách Nhiệm Phía Server (World Authority) | Trách Nhiệm Phía Client (Visual & Presentation) | | :--- | :--- | :--- | | **Vòng Lặp (Main Loop)** | Fixed 30Hz Heartbeat, xử lý song song theo Worker Zone Actors. | Biến thiên 30-120Hz ProMotion, tách biệt fixed prediction step và render frame. | | **Hệ Tọa Độ 2.5D** | Tọa độ chuẩn $(X, Y, Z)$, tính toán phân vùng lưới Cell Hash $64m$. | Tọa độ chuẩn $(X, Y, Z) \rightarrow$ Phép chiếu Isometric $2:1$ sang tọa độ màn hình. | | **Va Chạm & Vật Lý** | Xác thực va chạm Capsule 2.5D, Raycasting tầm nhìn chống hack xuyên tường. | Dự đoán va chạm trượt tường (Wall slide prediction), mượt hóa chuyển động. | | **Cơ Chế Võ Học** | Kiểm tra mana, cooldown, thời gian i-frame, tính toán sát thương Ngũ Hành. | Chạy animation nhân vật, kích hoạt âm thanh, spawn hạt GPU Metal Compute. | | **Đổi Vũ Khí (Song Binh)** | Xác thực loại vũ khí và trang bị có hợp lệ cho chiêu thức hay không. | Tự động hoán đổi hình ảnh vũ khí trong tay và animation bộ pháp tức thì. | | **Khử Giật (Reconciliation)**| Phát hiện gian lận tốc độ, phát tín hiệu cưỡng chế vị trí chuẩn. | Exponential Damping Reconcile không giật hình, giữ chuyển động êm ái. | | **Bộ Nhớ & Tài Nguyên** | Zero-allocation loop, Object Pooling cho Actors & Projectiles. | Texture Atlas batching, quản lý VRAM dưới 1GB, chống rò rỉ bộ nhớ. | --- ## 8. KẾT LUẬN & ĐỊNH HƯỚNG TRIỂN KHAI Kiến trúc Game Engine này mang lại 3 ưu thế vượt trội: 1. **Tuyệt đối an toàn trước Hack/Bot**: Server kiểm soát $100\%$ không gian và thời gian của mọi thực thể. 2. **Trải nghiệm thao tác đỉnh cao**: Tận dụng tối đa phần cứng cao cấp của iPhone (Metal, 120Hz, Taptic), giải quyết trọn vẹn điểm yếu điều khiển cảm ứng của dòng game ARPG. 3. **Tiết kiệm tài nguyên máy chủ**: Hệ thống AOI 9 ô kết hợp Bitmask Dirty Flags cho phép mở rộng không gian phục vụ hơn 1.000.000 người chơi đồng thời mà không bị bùng nổ cấp số nhân băng thông.