Stencyl 3.4.0 is now out. Get it now!

Drawing Utils Extension [1.3.2]

ETHproductions

  • *
  • Posts: 415
Drawing Utilities Extension

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

Works on all platforms (Flash, Desktop, and Mobile).
Designed to work with Stencyl v3.1+. Do not use in Stencyl v2.2 or below!

All Features
- draw/fill regular polygons and stars
- draw/fill wedges, chords, and rings
- draw/add arcs to polygons
- 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
- set spacing for a font (3.2+)

- Download (3.1)
- Download for 3.2+
- Sample project by Liberado (try it below!)

(How to Install and Update an Extension)


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 these blocks (except the endpoint calculator, font spacing and color/font blocks) are for use only in drawing events. 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 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.




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

Version History
Code: [Select]
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

« Last Edit: September 28, 2017, 10:13:01 am by ETHproductions »
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

rob1221

  • *
  • Posts: 9054
The rectangle block fails with "not enough arguments".

Quote
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.

Innes

  • *
  • Posts: 1963
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.

Visit www.TheStencylBook.com - the only published book for learning Stencyl.

ETHproductions

  • *
  • Posts: 415
Thanks, guys, that should be fixed now. I'm glad this will be useful to you! :)
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

ETHproductions

  • *
  • Posts: 415
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.
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

LIBERADO

  • *
  • Posts: 2488
Thanks you for the newly added features.

« Last Edit: December 14, 2014, 11:24:00 pm by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

Stevetheipad

  • Posts: 1304
So this may or may not work with mobile still?

ETHproductions

  • *
  • Posts: 415
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?
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

LIBERADO

  • *
  • Posts: 2488
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>

« Last Edit: August 01, 2016, 02:26:23 pm by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

ETHproductions

  • *
  • Posts: 415
Wow, Liberado, that's really cool! Thanks for testing on mobile, I've updated the top post. :)
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

Innes

  • *
  • Posts: 1963
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
Visit www.TheStencylBook.com - the only published book for learning Stencyl.

LIBERADO

  • *
  • Posts: 2488

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:

« Last Edit: December 25, 2014, 04:29:28 am by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

Innes

  • *
  • Posts: 1963
Visit www.TheStencylBook.com - the only published book for learning Stencyl.

ETHproductions

  • *
  • Posts: 415
Thanks for sharing, Liberado! I've added a download link in the main post.
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

Stevetheipad

  • Posts: 1304
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?