Player Animations Configuration
Player sprite animations and size are configured via the config table (database-driven), there is no dedicated entity for animations and all values are stored as config rows.
See also Create a Player Spritesheet for the step by step spritesheet creation guide.
Player animation settings
The frames used for each walking direction, the sprite size and the animation behavior are config rows edited from the administration panel. The class paths decide which sprite every player uses.
- Log in to the administration panel at /reldens-admin (the path can be changed with the RELDENS_ADMIN_ROUTE_PATH environment variable).
- Open Settings > Config (/reldens-admin/config), type players/animations in the search box and click Filter. The list shows the default frames of each direction (players/animations/defaultFrames/down/start to players/animations/defaultFrames/up/end) and the animation options.
- Click the edit icon of a row, change the Value and click Save.
- Open Classes & Levels > Class Paths (/reldens-admin/skills-class-path). The Key column is the name of the sprite of each class path: a player of the class path sorcerer uses the sorcerer.png spritesheet when it exists in the theme assets/custom/sprites folder, otherwise the fallback image.
- When a class path sprite uses other frames, go back to Config, click Create New and add one row per value with Scope client, Path players/animations/sorcererFrames/down/start (and the same for end and the left, right and up directions), the frame number as Value and Type float.
- To change the frame size search players/size and edit the width and height rows.
- Restart the server and reload the game: the config is loaded when the server starts.
Configuration reference
All the rows use the scope client:
- players/size/width and players/size/height (float, 52 and 71) - frame size of every player spritesheet.
- players/animations/defaultFrames/[direction]/start and .../end (float) - first and last frame of each direction for all the class paths: down 0 to 2, left 3 to 5, right 6 to 8, up 9 to 11.
- players/animations/[classPathKey]Frames/[direction]/start and .../end (float, not installed) - frames of one class path, the four directions are required.
- players/animations/fallbackImage (string, player-base.png) - sprite used when a class path has no spritesheet.
- players/animations/basedOnPress (boolean, 1) - play the animation while a direction key is pressed instead of on the position change.
- players/animations/diagonalHorizontal (boolean, 1) - play the left or right animation on diagonal movement.
- players/animations/collideWorldBounds (boolean, 1) - the player body collides with the world bounds.
- players/animations/fadeDuration (float, 1000) - camera fade in milliseconds when the player scene starts.
Code integration (advanced)
Player Size
Controls the spritesheet frame dimensions used when loading the player sprite. Scope: client.
- client/players/size/width - frame width in pixels (default: 52).
- client/players/size/height - frame height in pixels (default: 71).
These are read in:
- The ScenePreloader constructor (lib/game/client/scene-preloader.js), which only builds the spritesheet frame size used by Phaser load.spritesheet() (the fallback player sprite and the class paths sprites loaded through uiScene.playerSpriteSize).
- UsersPlugin.showAvatarContainer() (lib/users/client/plugin.js), which reads client/players/size/width and client/players/size/height to size the character selection avatar preview.
The ScenePreloader frame size:
this.playerSpriteSize = {
frameWidth: this.gameManager.config.get('client/players/size/width', 52),
frameHeight: this.gameManager.config.get('client/players/size/height', 71)
};
Note: size is global only. Per-class-path size is not implemented yet.
Animation Frames
Frame ranges define which spritesheet frames correspond to each movement direction.
Default frames (fallback for all class paths)
- Config key: client/players/animations/defaultFrames
- Type: stored as one number row (type 2) per leaf, e.g. client/players/animations/defaultFrames/left/start. The ConfigManager rebuilds them into the nested object below.
{
"left": { "start": 3, "end": 5 },
"right": { "start": 6, "end": 8 },
"up": { "start": 9, "end": 11 },
"down": { "start": 0, "end": 2 }
}
Per-class-path frame overrides
- Config key: client/players/animations/{avatarKey}Frames
- Type: same shape as defaultFrames, one number row per leaf.
Where avatarKey is the key field of the skills_class_path record for that class path.
Example for a class path with key = "mage", config path client/players/animations/mageFrames:
{
"left": { "start": 9, "end": 11 },
"right": { "start": 3, "end": 5 },
"up": { "start": 6, "end": 8 },
"down": { "start": 0, "end": 2 }
}
If no per-class-path config row exists, the defaultFrames value is used as fallback.
Resolution logic (ScenePreloader.createPlayerAnimations() in lib/game/client/scene-preloader.js):
let avatarFrames = this.gameManager.config.getWithoutLogs(
'client/players/animations/'+avatarKey+'Frames',
this.gameManager.config.get('client/players/animations/defaultFrames')
);
How avatarKey is assigned
The avatarKey is set server-side from skills_class_path.key in lib/actions/server/player-enricher.js (PlayerEnricher.withClassPath() for the players list and PlayerEnricher.withSkillsServerAndClassPath() for the current player) and sent to the client as part of the player state data:
player.currentClassPathKey = player.avatarKey = classPath.related_skills_class_path.key;
Other Animation Config Keys
- client/players/animations/fallbackImage - sprite filename to use when no class-path sprite is found (default: GameConst.IMAGE_PLAYER_BASE).
- client/players/animations/basedOnPress - if true, the animation plays on key press; if false, it plays based on the position delta.
- client/players/animations/collideWorldBounds - whether the player physics body collides with the world bounds.
- client/players/animations/fadeDuration - duration in ms of the camera fadeFrom() played when the player scene is created (default: 1000).
- client/players/animations/diagonalHorizontal - if true, the horizontal animation plays during diagonal movement.
Sprite Loading Flow
- The server sends the class path data (including the key) to the client with the initial game data.
- PreloaderHandler.preloadClassPaths() (lib/actions/client/preloader-handler.js) iterates all the class paths and calls uiScene.load.spritesheet(avatarKey, '/assets/custom/sprites/'+avatarKey+GameConst.FILES.EXTENSIONS.PNG, uiScene.playerSpriteSize).
- After load, PreloaderHandler.createAvatarsAnimations() calls createPlayerAnimations(avatarKey), which reads the per-class-path or default frame config and registers the Phaser animations keyed as {avatarKey}_{direction} (e.g. mage_left, mage_right, mage_up, mage_down).
- If the sprite file is not found in the loaded assets, it falls back to GameConst.IMAGE_PLAYER.
Related Documentation
- Create a Player Spritesheet - Step by step spritesheet creation and configuration guide.
- Player Sprites and Assets - Player asset overview.
- Class Path Entity - The key field on class paths.
- Object Animations Engine - How the room objects (NPCs, enemies, doors) are animated.
- Client Camera Follow System - Related client-side configuration, including the fade duration.
reldens