Skill Sprites and Animations

Skills in Reldens display visual feedback through one or more animations configured per skill. This guide explains the supported animation types, how to configure the animationData JSON, and how to place the sprite files.

Uploading skill assets

The administration panel has no upload field for skill sprites: the spritesheets are files of your theme. You copy the files into the theme, publish the theme assets from the Control Panel and then add one animation row per skill phase.

Create one PNG spritesheet per animation phase (cast, bullet, hit). The file name is the img value of the animation plus .png, for example fireball_cast.png. A directional animation needs one file per direction: fireball_bullet_left.png and fireball_bullet_right.png.
Copy the files into the theme/[your-theme]/assets/custom/actions/sprites/ folder of your project (skills do not use the custom/sprites folder of the players and objects).
Log in to the administration panel at /reldens-admin.
Open Control Panel, choose your theme in Theme Selector and click Copy Assets to Dist in Client Dist Commands, so the files are copied into dist/assets. From a terminal the same command is npx reldens copyAssetsToDist [your-theme].
Open Skills > Animations (/reldens-admin/skills-skill-animations) and click Create New (/reldens-admin/skills-skill-animations/edit).
Select the Skill ID, type the Key of the phase (cast, bullet or hit), leave ClassKey empty and fill AnimationData, for example {"enabled":true,"type":"spritesheet","img":"fireball_cast","frameWidth":64,"frameHeight":70,"start":0,"end":3,"repeat":-1,"destroyTime":2000,"depthByPlayer":"above"}. Click Save.
Repeat for the other phases of the skill, then restart the server and reload the game: the skills animations are added to the client configuration when the server starts.

Admin Panel - Create Animations form with Skill ID, Key, ClassKey and AnimationData

The Skills Importer creates the same animation rows for many skills at once.

Configuration reference

File Location

Place skill sprite files inside your theme's assets folder:

theme/[your-theme]/assets/custom/actions/sprites/

PNG format is required: the client appends .png to the img value.

Animations form

Skill ID (required) - the skill that plays the animation.
Key (required, unique per skill) - the phase; the client registers the animation as [skillKey]_[key]:
- cast - played on the skill owner while casting; without it the default_cast animation is used.
- bullet - the projectile of physical_attack and physical_effect skills, it travels from the owner to the target; without it default_bullet is used.
- hit - played on the target when the skill hits; without it default_hit is used.
ClassKey - optional, leave it empty for spritesheet animations (see Code integration).
AnimationData (required) - JSON animation configuration, see the options below.

AnimationData options

enabled - must be true, disabled animations are skipped.
type - spritesheet, the only built-in type.
img - file name without extension inside assets/custom/actions/sprites.
frameWidth, frameHeight - frame size in pixels.
start, end - first and last frame.
frameRate - frames per second; or duration in milliseconds instead.
repeat - number of loops (-1 for infinite, 0 for play once).
hide - hide the sprite when the animation completes (default true).
dir - 0 (default) one file; 2 loads [img]_up.png and [img]_down.png; 3 loads [img]_left.png and [img]_right.png; 1 loads the four directions.
destroyTime - milliseconds after which the cast sprite is removed.
depthByPlayer - above draws the animation over the player, otherwise it is drawn below.

Examples

Cast animation of a fireball skill (Key cast, file fireball_cast.png):

{
  "enabled": true,
  "type": "spritesheet",
  "img": "fireball_cast",
  "frameWidth": 64,
  "frameHeight": 70,
  "start": 0,
  "end": 3,
  "repeat": -1,
  "destroyTime": 2000,
  "depthByPlayer": "above"
}

Projectile with left and right images (Key bullet, files fireball_bullet_left.png and fireball_bullet_right.png):

{
  "enabled": true,
  "type": "spritesheet",
  "img": "fireball_bullet",
  "frameWidth": 64,
  "frameHeight": 64,
  "start": 0,
  "end": 3,
  "repeat": -1,
  "frameRate": 1,
  "dir": 3
}

Hit animation of a heal skill (Key hit, file heal_hit.png):

{
  "enabled": true,
  "type": "spritesheet",
  "img": "heal_hit",
  "frameWidth": 64,
  "frameHeight": 70,
  "start": 0,
  "end": 4,
  "repeat": 0,
  "depthByPlayer": "above"
}

Multiple Animations Per Skill

A skill can have one animation row per phase: a cast animation on the owner, a bullet animation for physical skills and a hit animation on the target. Each row has its own Key and AnimationData, so every phase can use its own image or a different frame range of the same image.

Default Animations

The fallback animations default_atk, default_bullet, default_cast, default_death and default_hit are config rows (scope client, paths skills/animations/default_*, type json) editable in Settings > Config; default_cast is installed disabled. Config changes apply after a server restart.

Physical Skill Animations

For physical_attack and physical_effect skill types the server shoots a physical bullet from the skill owner towards the target. The client shows the [skillKey]_bullet animation on that body and plays the hit animation on collision; with dir set, the image of the direction of the shot is used.

Code integration (advanced)

DataLoader.appendSkillsAnimations() (lib/actions/server/data-loader.js) loads the skills_skill_animations rows into config.client.skills.animations keyed as [skillKey]_[key], with the classKey value as class; a blockMovement value in the skill customData is copied into the animation data.
PreloaderHandler (lib/actions/client/preloader-handler.js) preloads the enabled spritesheet animations from assets/custom/actions/sprites/ and creates them; when the animation entry has a classKey object with prepareAnimation() or createAnimation() methods, those are called too, which is the hook for custom animation classes added by your own client plugin.
ReceiverWrapper (lib/actions/client/receiver-wrapper.js) plays the [skillKey]_cast animation before the cast and the [skillKey]_hit animation on the target, and the objects client plugin (lib/objects/client/plugin.js) draws the [skillKey]_bullet sprites.