Weather Effects - Clouds and Rain

How to show drifting clouds and rain in a room, configured per room in the admin panel.

How it works in the game

The weather effects are drawn over the room map when a player enters it:

  • Clouds - semi-transparent clouds drift across the map and wrap around its borders.
  • Rain - drops fall over the camera view with a wind angle, always covering the visible screen.

Both effects are hidden from the minimap. In the sample data every room of the town and the forests has clouds (more and darker in the deeper forests) and the rooms reldens-forest-level-3 and reldens-forest-level-4 also have rain.

Reldens - Clouds drifting over Forest Level 3 Reldens - Rain falling in Forest Level 3

Setting up the weather in the admin panel

  1. Open Rooms > Rooms in the admin panel and edit the room.
  2. Add a weather property to the CustomData JSON, with a clouds and / or a rain entry. Use true for the default values or an object to change them.
  3. Click Save and restart the server (the rooms data is loaded when the server starts).
Admin Panel - Room CustomData with clouds and rain

The sample reldens-forest-level-3 room uses:

{"enabled":true,"allowGuest":true,"weather":{"clouds":{"alpha":0.37,"quantity":9},"rain":true}}

Configuration reference

Clouds options (defaults in parentheses):

  • quantity (8) - amount of clouds on the map.
  • alpha (0.2) - clouds opacity.
  • speed (40) - drift speed in pixels per second, and speedVariation (0.3) - random speed difference between clouds.
  • direction (1) - 1 drifts to the right, -1 to the left.
  • scaleMin (1.5) and scaleMax (3.5) - random cloud size range.
  • depth (100000) - render depth, above the map and the players.

Rain options:

  • dropWidth (2), dropHeight (14) and dropColor (0xaecbeb) - drop size and color.
  • quantity (4) and frequency (30) - drops emitted every frequency milliseconds.
  • speedMin (550) and speedMax (750) - falling speed range in pixels per second.
  • wind (-60) - horizontal speed, the drops are rotated to match it.
  • alpha (0.45) and fadeAlpha (0.15) - opacity at the start and at the end of each drop.
  • depth (110000) - render depth, above the clouds.

The cloud image is assets/custom/effects/weather-cloud.png in the theme; replace it to change the clouds look. The rain drops are generated, no image is needed.

Code integration (advanced)

The weather is implemented in the theme client plugin, so it can be changed or removed per game without touching Reldens:

  • theme/plugins/client-plugin.js creates a SceneWeatherEffectsCreator, preloads the cloud texture on reldens.beforePreload, creates the effects on reldens.afterSceneDynamicCreate from the room customData.weather and hides them from the minimap on reldens.createdMinimap.
  • CloudsEffect (theme/plugins/effects/client/clouds-effect.js) adds the cloud images and moves them on the scene update event.
  • RainEffect (theme/plugins/effects/client/rain-effect.js) generates the drop texture once per size and color and uses a Phaser particles emitter fixed to the camera.

See Rooms Entity for the other room fields.

Go Up