Creates a new distance field style.
@param softness adds a soft transition between the inside and the outside. This should typically be 1.0 divided by the spread (in points) used when creating the distance field texture. @param threshold the value separating the inside from the outside of the shape. Range: 0 - 1.
The alpha value with which the inner area (what's rendered in 'basic' mode) is drawn. @default 1.0
Changes the color of all vertices to the same value. The getter simply returns the color of the first vertex.
Returns a reference to the index data of the assigned target (or null
if there is no target). Beware: the style itself does not own any indices;
it is limited to manipulating those of the target mesh.
The current render mode. It's recommended to use one of the 'setup...'-methods to change the mode, as those provide useful standard settings, as well. @default basic
Indicates if the distance field texture utilizes multiple channels. This improves render quality, but requires specially created DF textures. @default false
The alpha value on the outer side of the outer area's gradient. Used for outline, glow, and drop shadow modes.
The alpha value on the inner side of the outer area's gradient. Used for outline, glow, and drop shadow modes.
The color with which the outer area (outline, glow, or drop shadow) will be filled. Ignored in 'basic' mode.
The threshold that determines where the outer area (outline, glow, or drop shadow) ends. Ignored in 'basic' mode.
The x-offset of the shadow in points. Note that certain combinations of offset and blur value can lead the shadow to be cut off at the edges. Reduce blur or offset to counteract.
The y-offset of the shadow in points. Note that certain combinations of offset and blur value can lead the shadow to be cut off at the edges. Reduce blur or offset to counteract.
Indicates how soft the transition between inside and outside should be rendered.
A value of '0' will lead to a hard, jagged edge; '1' will be just as blurry as the
actual distance field texture. The recommend value should be 1.0 / spread
(you determine the spread when creating the distance field texture). @default 0.125
The target the style is currently assigned to.
The texture that is mapped to the mesh (or null
, if there is none).
Indicates if pixels at the edges will be repeated or clamped. Only works for power-of-two textures. @default false
The smoothing filter that is used for the texture. @default bilinear
The threshold that will separate the inside from the outside of the shape. On the distance field texture, '0' means completely outside, '1' completely inside; the actual edge runs along '0.5'. @default 0.5
The actual class of this style.
Returns a reference to the vertex data of the assigned target (or null
if there is no target). Beware: the style itself does not own any vertices;
it is limited to manipulating those of the target mesh.
The format used to store the vertices.
Basic distance field rendering, without additional effects.
Adds a smooth glow effect around the shape.
Adds an outline around the edge of the shape.
Adds a drop shadow behind the shape.
The vertex format expected by this style.
Copies the index data of the style's current target to the target of another style. The given offset value will be added to all indices during the process.
This method is used when batching meshes together for rendering. The parameter
targetStyle
will point to the style of a MeshBatch
(a
subclass of Mesh
). Subclasses may override this method if they need
to modify the index data in that process.
Creates a clone of this instance. The method will work for subclasses automatically, no need to override it.
Dispatches an event to all objects that have registered listeners for its type. If an event with enabled 'bubble' property is dispatched to a display object, it will travel up along the line of parents, until it either hits the root object or someone stops its propagation manually.
Dispatches an event with the given parameters to all objects that have registered listeners for the given type. The method uses an internal pool of event objects to avoid allocations.
Returns the texture coordinates of the vertex at the specified index.
Returns the alpha value of the vertex at the specified index.
Returns the RGB color of the vertex at the specified index.
The position of the vertex at the specified index, in the mesh's local coordinate system.
Only modify the position of a vertex if you know exactly what you're doing, as
some classes might not work correctly when their vertices are moved. E.g. the
Quad
class expects its vertices to spawn up a perfectly rectangular
area; some of its optimized methods won't work correctly if that premise is no longer
fulfilled or the original bounds change.
If called with one argument, figures out if there are any listeners registered for the given event type. If called with two arguments, also determines if a specific listener is registered.
Removes all event listeners with a certain type, or all of them if type is null. Be careful when removing all event listeners: you never know who else was listening.
Sets the texture coordinates of the vertex at the specified index to the given values.
Sets the alpha value of the vertex at the specified index to a certain value.
Sets the RGB color of the vertex at the specified index to a certain value.
Restores basic render mode, i.e. smooth rendering of the shape.
Sets up shadow rendering mode. The 'blur' determines the threshold where the drop shadow ends; 'offsetX' and 'offsetY' are expected in points.
Beware that the style can only act within the limits of the mesh's vertices. This means that not all combinations of blur and offset are possible; too high values will cause the shadow to be cut off on the sides. Reduce either blur or offset to compensate.
Sets up glow rendering mode. The 'blur' determines the threshold where the blur ends; 'blur + threshold' must not exceed '1.0'.
Sets up outline rendering mode. The 'width' determines the threshold where the outline ends; 'width + threshold' must not exceed '1.0'.
Generated using TypeDoc
Provides support for signed distance fields to Starling meshes.
Signed distance field rendering allows bitmap fonts and other single colored shapes to be drawn without jagged edges, even at high magnifications. The technique was introduced in the SIGGRAPH paper Improved Alpha-Tested Magnification for Vector Textures and Special Effects by Valve Software.
While bitmap fonts are a great solution to render text in a GPU-friendly way, they don't scale well. For best results, one has to embed the font in all the sizes used within the app. The distance field style solves this issue: instead of providing a standard black and white image of the font, it uses a signed distance field texture as its input (a texture that encodes, for each pixel, the distance to the closest edge of a vector shape). With this data, the shape can be rendered smoothly at almost any scale.
Here are some tools that support creation of such distance field textures:
The former tools convert arbitrary SVG or PNG images to distance field textures. To create distance field fonts, have a look at the following alternatives:
Single-Channel vs. Multi-Channel
The original approach for distance field textures uses just a single channel (encoding the distance of each pixel to the shape that's being represented). By utilizing all three color channels, however, the results can be greatly enhanced - a technique developed by Viktor Chlumský.
Starling supports such multi-channel DF textures, as well. When using an appropriate texture, don't forget to enable the style's
multiChannel
property.Special effects
Another advantage of this rendering technique: it supports very efficient rendering of some popular filter effects, in just one pass, directly on the GPU. You can add an outline around the shape, let it glow in an arbitrary color, or add a drop shadow.
The type of effect currently used is called the 'mode'. Meshes with the same mode will be batched together on rendering.