Drawing Utils Extension [2.0]

Drawing Utilities Extension

Welcome to Graphics Central! With the Drawing Utilities Extension, you can draw polygons and stars, wedges and curves, and rotated rectangles, ellipses, and lines. You can also control letter spacing, get the current drawing color, opacity, font and more!

Works on all platforms (Flash, HTML5, Desktop, and Mobile).
Designed to work with Stencyl 3.4+. Some blocks may not work with older versions of Stencyl.

All Features
- draw/fill regular polygons and stars
- draw/fill wedges, chords, and rings
- draw/add arcs to polygons
- draw bezier curves
- draw/fill rotated ellipses, rectangles and lines
- get an x/y value from a rotated line
- draw left/center/right aligned text
- get a current drawing value (e.g., color, stroke thickness, font...)
- choose a color or font
- get/set letter spacing of a font

Download for 3.4+

(How to Install and Update an Extension)
(Legacy downloads: 3.1, 3.2/3.3. Please note that these are no longer being maintained.)
(View on GitHub)
(Sample project by Liberado—try it below!)

If upgrading from the 3.2 version of the extension:
1. Install the extension as usual. Note that it will not overwrite the 3.2 version, resulting in two versions of the extension in your folder.
2. For each game you want to upgrade:
  a. Open the game.
  b. In the Extensions settings, disable the "Drawing Utilities" extension and enable the "Drawing Utilities 3.4+" extension.
  c. Save and close the game. DO NOT open any resources before closing.
  d. Reopen the game. It should now have successfully upgraded.

Angles How-to

Angles are generally defined clockwise from 0-360.
Any of the extension blocks can use any number as the angle. -360 is the same as 0, and 450 is the same as 90.
A 0-degree angle is directly to the right. To draw a polygon facing up, use -90 or 270.

Blocks

Important: All of the blocks that do any drawing are for use in drawing events only. If you try to use them anywhere else, you will get an error.



Draws a regular shape (triangle, square, pentagon...) to the screen.




Draws a regular polygon to the screen.
For sides, any integer more than 2 will work. Non-integer numbers will be floored to an integer.




Draws a star to the screen. The inner and outer radii can be defined in either order.




Draws a rectangle or ellipse, rotated by a certain amount.




Draws a ring to the screen. The order of the radii doesn't matter.




Draws a piece of a ring to the screen.




Draws a wedge (slice of a circle) or a chord (edge section of a circle) to the screen.
The start and end fields are the angles to start and end the wedge/chord at.




Draws an arc to the screen, or adds an arc to the currently drawn polygon. The start and end fields are the same as with the wedge block.




Draws a bezier curve from one point to another, either through the specified midpoint or with the specified control point.




Draws a line with an angle and length, rather than an end point.




This one's a bit tricky to use. It basically calculates the endpoint of a hypothetical line. Here's how to work it:
- Choose whether you want to calculate an x or y coordinate.
- Input the x or y coordinate (depending on what you chose before) from which to start the line calculation.
- After that, specify the angle and length of the line that you want to calculate.
The block will return the x or y of the other end of that line. It's very similar to the previous block, but doesn't draw a line. If you need more info, don't hesitate to ask!




Draws text to the screen. It can be aligned to the left, the center or the right.




Gets one of these drawing values: color, stroke color, stroke thickness, opacity, font, or x/y of pen.


 

Choose a color or a font. Useful for adding them to lists, or setting 'anything' values.




Sets the spacing (extra distance between letters) of the specified font.




Gets the letter spacing of the specified font.
Version History

Code: [Select]

2.0 (03/04/18)
Combined all drawing code into one file, and significantly condense the code (now about the same length that DrawCircles.hx was before)
Bug fix: draw-arc and draw-wedge blocks sometimes draw the wrong portion of the circle if end > 540
Bug fix: rotated ellipse was drawn at twice the proper size (may break existing code that already accounted for this)
Bug fix: draw-text-aligned block didn't take into account letter spacing
Added draw-bezier block

1.3.2 (09/26/15)
Improvements to the code to draw ellipses. Now draws far fewer points on all but the largest of ellipses (e.g. 160x120 ellipse: 360 -> 60, 30x10 ellipse: 360 -> 18)

1.3.1 (09/25/15)
Bug fix: filling a ring only works on Flash

1.3 (07/07/15)
Combined several blocks to take up less room in the palette

1.2.1 (12/15/14)
Bug fix: Point sometimes added at wrong end of an arc

1.2 (12/13/14)
Updated wedge, arc and ring blocks to include non-whole start/end angles.
Added blocks:
 - draw/fill ellipse
 - draw left/center/right aligned text
 - set spacing for a font (3.2+)

1.1 (11/17/14)
Added blocks:
 - draw/fill ring/ring piece
 - add arc to polygon
 - choose a color/font

1.0 - Initial release (09/20/14)
Blocks:
 - draw/fill polygon/star
 - draw/fill wedge/chord/arc
 - draw/fill rotated rectangle/line
 - get x/y endpoint of rotated line
 - current [drawing value]


If you have any questions, problems, or suggestions, feel free to post them!
ETH

The rectangle block fails with "not enough arguments".

DrawRotRect.hx:32: characters 32-79 : Function 'getCoordinate' requires arguments : z, s, a, r

I tested some other blocks that worked fine on both Flash and desktop, although the antialiasing is different on desktop.

Thanks for this; I've just had a quick play and I can see it being very useful.

I've successfully used a few of the blocks, and have even tried changing the angle on-the-fly to rotate the shapes. This looks great with the wedge, as it can be used as, for example, a progress indicator - starting at zero and incrementing to  360 degrees.

The [fill rectangle] block seems to have a problem; if I use it, my whole game goes white (even if I have a coloured background); not enough arguments. [Edit: Rob beat me to it!].

Thanks again.

Thanks, guys, that should be fixed now. I'm glad this will be useful to you!

I've just released an update with several new blocks. You can now draw a ring or a piece of a ring, add an arc to a polygon, and use a color or font anywhere it will be useful. I'm also working on a sample game, which will hopefully be ready soon.

Thanks you for the newly added features.

So this may or may not work with mobile still?

It should work on mobile, just as well as the regular drawing blocks. But I don't have a mobile device, so I cannot test for mobile. Would you be willing to do so and tell me how it works?

But I don't have a mobile device, so I cannot test for mobile. Would you be willing to do so and tell me how it works?

I have tested this sample in a mobile device, and it works:

<a href="http://static.stencyl.com/games/34890-0.swf" target="_blank" class="new_win">http://static.stencyl.com/games/34890-0.swf</a>

Wow, Liberado, that's really cool! Thanks for testing on mobile, I've updated the top post.

LIBERADO, would you be able to attach the project file for your above example? I think it will be a great help for anyone wanting to use this extension.

Thanks,
Innes

LIBERADO, would you be able to attach the project file for your above example? I think it will be a great help for anyone wanting to use this extension.

Ok, here it is:

Thanks.

Thanks for sharing, Liberado! I've added a download link in the main post.

Thanks again for the awesome extension - it's saving me a lot of trouble with my newest app.

Quick question though - is there a reason why the start value 0 or 360 are on the right side of the circle in an arc? I expected to make a 180 degree arc with start = 0 and end = 180 and expect it to start at the top and then go 180 degrees but it starts on the right side. Is there a way to change that?