Hit Stop System
Relevant source files
The following files were used as context for generating this wiki page:The Hit Stop system is a core gameplay feature designed to enhance the feeling of impact during combat. When a character or enemy lands a significant hit, this system momentarily pauses or slows down the game action, often accompanied by visual effects like camera shake and zoom. This creates a satisfying and visceral feedback mechanism for the player.
The system is managed by the HitstopManager class, which orchestrates various effects based on predefined configurations. These configurations, known as presets, are defined in hitStopPresets.js and are directly linked to specific character and enemy skills within characterData.js and enemiesData.js, respectively. This allows for a high degree of control over the feel of different attacks.
Core Architecture
The central component of the system is the HitstopManager class, which is instantiated within a scene and provides methods to trigger and manage hit stop effects.
Sources: src/systems/HitStopManager.js
Class Structure
The HitstopManager class encapsulates all logic for applying and clearing hit stop effects.
This diagram shows the main properties and methods of the HitstopManager class.
Sources: src/systems/HitStopManager.js:4-9, src/systems/HitStopManager.js:15-171
Key Methods
| Method | Description |
|---|---|
trigger(duration, intensity, options) | The primary method to start a hit stop effect. It controls time dilation, camera shake, zoom, and other effects. |
triggerPreset(presetName) | A convenience method to trigger a hit stop using a named configuration from hitStopPresets.js. |
triggerCombo(comboCount) | Triggers a progressively stronger hit stop effect based on the current combo count. |
stop() | Immediately terminates any active hit stop effect and restores normal game speed and camera settings. |
destroy() | Cleans up any active timers and effects, intended to be called when the scene is destroyed. |
Sources: src/systems/HitStopManager.js:15-22, src/systems/HitStopManager.js:132-146, src/systems/HitStopManager.js:149-164, src/systems/HitStopManager.js:169-171
Hit Stop Effects
The HitstopManager can apply a combination of effects to create the desired impact. These are all orchestrated within the trigger method.
Effect Execution Flow
The following diagram illustrates the logic flow when trigger() is called.
This flowchart shows how the trigger method checks for active instances, applies various effects, and schedules the restoration of normal game time.
Sources: src/systems/HitStopManager.js:15-65
Available Effects
| Effect | Implementation Detail | Source |
|---|---|---|
| Time Dilation | Sets this.scene.time.timeScale to the intensity value (0 for full stop, >0 for slow-motion). | src/systems/HitStopManager.js:21 |
| Camera Shake | Calls this.scene.cameras.main.shake() with a duration and calculated intensity. | src/systems/HitStopManager.js:25-28 |
| Zoom Pulse | Tweens the camera zoom level to originalZoom + intensity and back. | src/systems/HitStopManager.js:68-82 |
| Smooth Recovery | Instead of an abrupt stop, it can tween the timeScale back to 1 for a smoother transition. | src/systems/HitStopManager.js:53-65 |
| Screen Flash | Uses this.scene.cameras.main.flash() for a brief color flash. | src/systems/HitStopManager.js:95-102 |
| Directional Shake | Applies a temporary scroll offset to the camera and tweens it back to create a directional jolt. | src/systems/HitStopManager.js:105-129 |
Configuration and Presets
The power and flexibility of the Hit Stop system come from its preset-based configuration, defined in src/config/hitStopPresets.js. This file contains a large object named PRESETS where each key is a preset name and its value is a configuration object.
Sources: src/config/hitStopPresets.js
Preset Structure
Each preset object defines the parameters for the trigger method.
// src/config/hitStopPresets.js:10-17
HEAVY: {
duration: 150,
intensity: 0,
smoothRecover: true,
zoom: true,
zoomIntensity: 0.045,
},
Example Presets
The system includes a wide variety of presets tailored for different combat scenarios.
| Preset Name | Duration (ms) | Intensity | Description |
|---|---|---|---|
LIGHT | 50 | 0.4 | A very brief, subtle slow-motion effect for light hits. |
HEAVY | 150 | 0 | A clear, full stop for heavy attacks. |
CRITICAL | 200 | 0 | A long pause with a slight zoom-out effect for critical hits. |
FIREKNIGHT | 100 | 0.005 | A heavy, impactful hit with a slight zoom-out, designed for the Fireknight character. |
FIREKNIGHT_ULTIMATE | 300 | 0 | A very long, dramatic pause for ultimate skills, with a strong zoom-in. |
BOSS_HEAVY | 200 | 0 | A powerful hit effect for bosses, featuring a zoom-out to emphasize impact area. |
Sources: src/config/hitStopPresets.js:5-17, src/config/hitStopPresets.js:122-128, src/config/hitStopPresets.js:192-199, src/config/hitStopPresets.js:183-190
Integration with Skills
The Hit Stop system is primarily triggered by character and enemy skills. The skill definitions in characterData.js and enemiesData.js include a hitstop property, which specifies the name of the preset to use.
Character and Enemy Skill Integration
When a skill is executed, the corresponding system checks for this hitstop property and invokes the HitstopManager.
Character Skill Example:
The fireknight's basic attack is configured to use the FIREKNIGHT preset.
// src/config/characterData.js:785-787
skills: {
attack: {
// ... other properties
hitstop: 'FIREKNIGHT',
// ...
},
Enemy Skill Example:
The EnemySkillSystem is responsible for triggering hit stop for enemies. During applySkillEffect, it checks the skill's configuration and calls the manager.
// src/entities/enemies/systems/EnemySkillSystem.js:261-263
if (config.hitstop) {
this.hitstopManager.triggerPreset(config.hitstop);
}
This is driven by configurations in enemiesData.js, such as the assassin_boss attack:
// src/config/enemiesData.js:262-263
impactEffect: '',
hitstop: 'BOSS_HEAVY',
targetType: 'single',
Integration Flow
This sequence diagram shows how a skill execution leads to a hit stop effect.
This diagram illustrates that the skill systems read the hitstop key from configuration files and use it to call the appropriate preset in the HitstopManager.
Sources: src/config/characterData.js:787, src/config/enemiesData.js:262, src/entities/enemies/systems/EnemySkillSystem.js:261-263
Conclusion
The Hit Stop System is a well-architected, decoupled feature that significantly contributes to the game's feel. By centralizing the effect logic in HitstopManager and externalizing the configurations into hitStopPresets.js, the system remains easy to manage and extend. Its seamless integration with character and enemy skill definitions allows developers to fine-tune the impact of every attack, creating a more dynamic and satisfying combat experience.