0 Favourites

[EFFECT] Ellipse

This forum is currently in read-only mode.
  • This effect draws an ellipse. It uses the sprite's texture and color filter for coloring. If you just need a single color ellipse, just create a 2x2 sprite, either filled with the intended color or filled with white while using the color filter to set the color. You can resize the sprite to any size in the layout (NOT in the picture editor!) without adding to VRAM.

    <img src="http://dl.dropbox.com/u/11182740/pictures/ellipsefx.png" border="0">

    <font size="1">(example image)</font>

    The following parameters are defined:

    1) Outline: Defines the thickness of the outline. 100% means, it uses the complete area.

    2) Smooth Outline: How much of the outline's thickness is used for smoothing. 100% means a mirrored gradient from the center to the inner and outer border of the outline.

    3) Outline Opacity: Controls the transparency. 0% means fully tranparent, 100% means fully opaque.

    The values are all relative, that might be confusing at first. For example, if you have a 128x128 sprite and set Outline to 50%, then half of the area is occupied by the ellipse. At any angle the ellipse is at both sides of the center, so the thickness will be 32px (32px on both sides = 64px, 64px = 50% of 128).

    Likewise, smoothing is calculated. It is a value relative to Outline. So in this example, a value of 25% means 25% of the outline's thickness (which was 32px), or 8px in total. 4px for the outer side smoothing and 4px for the inner side smoothing. In result the ring will be smoothed in from px1-4, full color from px5-28 and smoothed out from px29-32

    Based on the description above, if you want a circle (an ellipse would break it) to always have the same pixel thickness, regardless of the size, you'd calculate the proper value:

    pixel in percent = (1 / totalpixel) * 200 * n

    (sprite is 128x128, outline shall be 1px)

    Outline = (1 / 128) * 200 = 1.5625%

    (sprite is 30x30, outline shall be 5)

    Outline = (1 / 30) * 200 * 5 = 33.333%

    (sprite is 200x200, outline shall be 3px)

    Outline = (1 / 200) * 200 * 3 = 3%

    I didn't implement this, because it only works for squared sprites (because pixels are squared, too). In the last example, we have 3px horizontal/vertical, but if we set the height to 100, we have 3px horizontal and 1.5px vertical.

    Download:ellipse.fx

    EDIT: I've accidentally uploaded an earlier developer version This is now corrected. (April 29, GMT 3:47 pm)

  • very nice tulamide!

    this effect should come in handy for range markers and stuff like that.

    good bye oversized pngs and pixelized canvases ;)

    just tried your example and it works like a charm!

    here's a cap in action

  • Thank you very much. It is not easy nowadays to get commented, so I really appreciate it :)

  • thats right i was looking for... Thanks! will be handy!

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Nice effect, aspecial for selection effects around players or mobs.

    Gonna try to skew it a bit to put it a little into perspective.

    <center>*downloading*</center>

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread sticky
276 261,915
gamecorpstudio's avatar
gamecorpstudio
Unread hot topic
164 38,111
totoe's avatar
totoe
Unread hot topic
0 Favourites
[Effect] mode7
124 45,998
roracle's avatar
roracle