Skill Sprite Entity

Skill Sprite Entity

The skills_skill_animations entity configures visual animations for skills, providing rich visual feedback for skill execution.

Key Properties

  • skill_id: Parent skill reference
  • key: Animation identifier
  • classKey: Custom animation class
  • animationData: JSON animation configuration

Animation Types

Sprite Animation

Frame-based spritesheet animations:

{
  "type": "spriteAnimation",
  "img": "fireball.png",
  "frameWidth": 64,
  "frameHeight": 64,
  "start": 0,
  "end": 7,
  "repeat": -1,
  "rate": 8,
  "destroyTime": 1000
}

Tween Animation

Property interpolation animations:

{
  "type": "tween",
  "properties": {"alpha": 0},
  "duration": 500,
  "ease": "Power2"
}

Particle Effects

Particle emitter configurations:

{
  "type": "particles",
  "texture": "particle.png",
  "count": 50,
  "speed": 100,
  "lifespan": 2000
}

Custom Classes

Client-side animation classes for complex effects:

{
  "type": "custom",
  "classKey": "FireExplosionAnimation",
  "params": {...}
}

Animation Triggers

  • On Cast: Animation plays when skill starts casting
  • On Execute: Animation plays when skill executes
  • On Hit: Animation plays when skill hits target
  • On Miss: Animation plays when skill misses

Animation Configuration

  • duration: Animation length in milliseconds
  • repeat: Repeat count (-1 = infinite)
  • destroyTime: Auto-destroy after time
  • followTarget: Animation follows moving target
  • offset: Position offset from origin

Phaser Integration

Animations use Phaser 3 animation system:

  • Sprite animations via Phaser.Animations
  • Tweens via Phaser.Tweens
  • Particles via Phaser.GameObjects.Particles
  • Custom GameObjects for complex effects

Multiple Animations

Skills can have multiple animations for different phases:

  • Cast Animation: While casting skill
  • Projectile Animation: For physical skills
  • Hit Animation: On target impact
  • Miss Animation: When skill misses

Animation Examples

  • Melee Attack: Sword swing spritesheet
  • Fireball: Projectile with particle trail
  • Heal: Green sparkles tween animation
  • Shield: Rotating barrier sprite
  • Lightning: Custom line effect class

Physics Skills

For Physical Attack and Physical Effect skills:

  • Animation follows projectile trajectory
  • Collision triggers hit animation
  • Custom physics properties (magnitude, dimensions)

Database Relations

  • skills_skill: Parent skill

Implementation

Configure animations in the admin panel under Skills → Animations. Define animation type, assets, and configuration. Test in-game to adjust timing and visual effects.

Package

Animation system integrated with @reldens/skills package and Phaser 3 client rendering.

Go Up