Player Sprites and Assets

Player sprites in Reldens use a single PNG spritesheet containing all animation frames arranged in a grid. This page is an overview of player sprite assets. For complete configuration details (frame dimensions, per-class-path sprites, frame range overrides, animation playback), see the Create a Player Spritesheet guide.

Uploading player assets

The administration panel has no upload field for player sprites: the spritesheets are files of your theme. You copy the file into the theme, publish the theme assets from the Control Panel and link the file to a class path through the class path Key.

  1. Create the spritesheet PNG: 3 columns by 4 rows of frames (one row per direction: down, left, right, up), 52 x 71 pixels per frame by default. Name the file after the class path key, for example sorcerer.png.
  2. Copy the file into the theme/[your-theme]/assets/custom/sprites/ folder of your project.
  3. Log in to the administration panel at /reldens-admin (the path can be changed with the RELDENS_ADMIN_ROUTE_PATH environment variable).
  4. Open Control Panel, choose your theme in Theme Selector and click Copy Assets to Dist in Client Dist Commands. It copies the theme assets folder into dist/assets, where the game client loads the sprites from. From a terminal in the project folder the same command is npx reldens copyAssetsToDist [your-theme].
  5. Open Classes & Levels > Class Paths (/reldens-admin/skills-class-path). A class path uses the sprite whose file name (without .png) is equal to its Key.
  6. To add a new class path for the sprite click Create New (/reldens-admin/skills-class-path/edit), set Key (sorcerer), Label (the name players see), Levels Set ID, check Enabled and click Save.
  7. If the spritesheet uses another frame size or frame order, open Settings > Config (/reldens-admin/config), type players/animations (frames and fallback image) or players/size (frame size) in the search box, click Filter and edit the rows. The Player Animations Configuration page explains every row and how to add frames for a single class path.
  8. Restart the server and reload the game: the config and the class paths are loaded once when the server starts. Players of that class path now use the new sprite; a class path without a matching file uses the fallback image.
Admin Panel - Class Paths list, the Key column is the sprite file name Admin Panel - Create Class Paths form with Key, Label, Levels Set ID and Enabled Admin Panel - Config list filtered by players/animations with the default frames and the fallback image

Configuration reference

Class Paths form

  • Key (required, unique) - class path identifier and sprite file name: the key sorcerer loads sorcerer.png.
  • Label - class path name shown to the players.
  • Levels Set ID (required) - the levels set used by the class path.
  • Enabled - only enabled class paths are loaded by the server.

File Location

Place player spritesheet files inside your theme's assets folder:

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

Default Layout

  • 4 rows x 3 columns = 12 frames, one row per movement direction (down, left, right, up)
  • Default frame size: 52 x 71 pixels (configurable per game)
  • Spritesheet dimensions: frameWidth x 3 columns by frameHeight x 4 rows

Per Class Path

Each class path can use its own spritesheet, named after the class path key:

theme/[your-theme]/assets/custom/sprites/[classPathKey].png

For example, a class path with key mage loads /assets/custom/sprites/mage.png.

Fallback Sprite

The fallback sprite is loaded for any player who does not have a class-path-specific sprite assigned. Configure via Settings > Config path players/animations/fallbackImage (scope client, default player-base.png, a file inside assets/custom/sprites).

Config rows

  • players/size/width and players/size/height (scope client, defaults 52 and 71) - frame size shared by all the player spritesheets.
  • players/animations/defaultFrames/[direction]/start and .../end - frames of each direction for all the class paths.
  • players/animations/[classPathKey]Frames/[direction]/start and .../end (not installed) - frames of a single class path.

Config changes apply after a server restart, the config is loaded once at startup.

Code integration (advanced)

The server sends the enabled class paths to the client with the initial game data. PreloaderHandler.preloadClassPaths() (lib/actions/client/preloader-handler.js) loads one spritesheet per class path from /assets/custom/sprites/[classPathKey].png with the players/size frame size, and PreloaderHandler.createAvatarsAnimations() creates the [classPathKey]_[direction] animations. When a class path file was not loaded the player falls back to the player texture, which ScenePreloader.preloadPlayerDefaultSprite() (lib/game/client/scene-preloader.js) loads from the players/animations/fallbackImage file.

Related Documentation

Go Up