Share article

Help spread this knowledge! 💙

Stretch Element Set and Light Spots
Sam
2 min read

Stretch Element Set and Light Spots

The new product version introduces Stretch Element Set: resize-ready elements with drawing rules, hitbox and light spot setup, and direct placement in the map editor.

#rpgjs #map-editor #tileset #element-set #lighting #level-design

Stretch Element Set and Light Spots

In the new product version, we introduce Stretch Element Set: a major workflow improvement that lets you resize elements with smart rules, while also configuring hitboxes and light spots directly from the editor.

Open the Element Set Editor

To start editing a tileset as an element set:

  1. Open Media Library
  2. Go to Tilesets
  3. Click Open With Element Set Editor

Inside this editor, you can now manage:

  • Hitboxes for collisions
  • Light spots for dynamic lighting behavior

Drawing Rules: Repeat Axis, Edge Repeat, and 9-Slice

Go to Drawing Rules in the Element Set Editor. You will find:

  • Repeat Axis
  • Edge Repeat
  • Frame 9-slice

These rules let you define how an element behaves when resized in the map editor.

Practical example

A few concrete examples from production maps:

  • Repeat Axis: perfect for a wall, where the pattern repeats cleanly along one direction.
  • Edge Repeat: useful for a guard tower, where borders and structure stay consistent while extending height/width.
  • 9-slice: ideal for a signboard or a carpet/rug, where corners must stay intact and the center can stretch.

Once the rules are set, go back to the map editor, place the element, and simply resize it. The drawing behavior is automatically applied based on your rules.

Place and Resize in the Map Editor

After configuring drawing rules:

  1. Open the map editor
  2. Place your element on the map
  3. Resize it directly on the canvas

The element will adapt to the size using your Element Set drawing configuration.

Add Light Spots

You can also define light emission points per element.

  1. In Element Set Editor, open Light Spot
  2. Enable light rendering
  3. Place the yellow circle where the light source should be
  4. Set the radius
  5. Set the intensity (%)

This makes it easy to create torches, lamps, glowing crystals, or any decorative element that emits light, without custom scripting.

More Articles

Discover more insights and tutorials about RPG development with RPGJS