Skip to content
Rengy
Menu

Tutorials · Light and Shadow · Chapter 7

Stained glass

15 minutes Uses: Light

By the end

  • A Sprite light, stained_glass, lighting a 96 by 40 rectangle of the floor through a picture of coloured diamonds
  • Why a coloured light on dark stone needs an Intensity of 3.2
  • What Texture, Size and a Radius of 0 do
On this page

Reference

Light through a picture

Sunlight through stained glass lands on the floor as the glass’s own picture. A Sprite light does that: it lights a rectangle, and the light is shaped and coloured by a picture you give it. The starter holds the picture, stained-glass.png, in its art folder: 32 by 32 pixels of diamonds in four colours.

  1. Select Hall, press + Add node, and choose Light. Rename it stained_glass.
  2. Set its Position to 314 and 296, on the floor under the window.
  3. Set Kind to Sprite. Under the Sprite group, click the Texture slot and choose stained-glass.png, and set Size to 96 and 40.
  4. Set Radius to 0, Intensity to 3.2 and Color to 1, 1, 1, alpha 1.
  5. Press Ctrl+S.

In the Viewport the light’s rectangle has a handle at each corner: drag one to set Size.

The stained glass selected, its Inspector narrowed to its Light: Kind Sprite, Radius 0.00, Intensity 3.2, a white Color, Sort Layer Default 0, Channel 0, and under the Sprite group the Texture stained-glass and Size x 96.0 and y 40.0; the Viewport draws a yellow rectangle on the floor under the window, with the node at its middle and a small square handle on each corner of the rectangle
The Sprite sheet tab showing stained-glass.png, 32 by 32, drawn large: diamonds of yellow, red, blue and green in rows, fading to black round the edge
The picture, opened large in the Sprite sheet tab: diamonds of four colours, fading to black at its edge.
The floor under the window: a small pool of coloured diamonds, red, yellow, green and blue, lies across the floor caps, its edges fading into the stone
The pool, Intensity 3.2 and Size 96 by 40, the values you set.

Texture, Size and Radius

Kind Sprite
Lights a rectangle through a picture: where the picture is bright and coloured, light of that colour gets through, and where it is black, none does.
Texture
The picture. With none, a soft glow fills the rectangle. This one is 32 by 32 pixels and fades to black at its edge, so the light lands as a pool and not as a rug with a hard border.
Size
The rectangle the light covers, in world units, centred on the node. The picture is stretched over it, and the rectangle turns and scales with the node, so a window turned on its side throws a turned pool. 96 by 40 here.
Radius
For a Sprite light, only how far its shadows reach, since the light is the rectangle. At 0 it casts none, and nothing stands in the pool.
Intensity
How bright the light is where the picture is brightest: 3.2 here. 2 to 5 looks right.
The same floor at Intensity 1: the pool is much dimmer, its diamonds dark against the stone and the green and blue hardly there
For comparison, Intensity 1: the colours sink into the stone.
The same floor with the Size doubled to 192 by 80: a much larger pool, each diamond stretched, covering the wall above the floor caps as well as the floor
For comparison, Size 192 by 80: the pattern stretched twice as far.

The stained glass

Every value of the light, to build it again in your own game.

FieldValue
KindSprite
Texturestained-glass.png
Size96, 40
Radius0
Intensity3.2
Color1, 1, 1

Check it works