Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a 'Shape' class to the 'display' package #239

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added a 'Shape' class to the 'display' package #239

wants to merge 3 commits into from

Conversation

GameOverture
Copy link

Added a Shape display class that is assembled by adding various primitives together and can be transformed like any Sprite object. Currently it only supports line segments (with rounded caps), but can be easily enhanced to do other shapes like rectangles and circles.

The pull request includes a new file "Shape.hx" that resides in the 'display' package, and some modifications to the three 'Graphics' renderers (canvas, webGL, stage3D). Canvas implementation was straight forward. As for the other two, I've ensured to stay consistent with the current underlying architecture of drawing with quads, and the lines/caps are essentially just a series of fancy fillRect's that share the same vertex buffer attributes and shader.

(I've closed my last pull request #235 due to the sloppy form of not using branches, this should be easier to look at and discuss if interested)

Added a Shape display class that is assembled by adding various primitives together and can be transformed like any Sprite object. Currently it only supports line segments (with rounded caps), but can be easily enhanced to do other shapes like rectangles and circles.
@volkipp
Copy link
Contributor

volkipp commented Mar 17, 2014

This looks awesome! Do you think there's a chance to add fill to this class too? Any kind of drawing api would really help us out here.

@GameOverture
Copy link
Author

I do want to add to this, and can probably whip up a quick rectangle or circle fill. If you're hoping for a line strip fill kinda like how Adobe Illustrator handles the pen tool, that would require some research on my end as I'm not sure how to triangulate polygonal shapes.

I'm not sure of the direction Flambe wants to go with its drawing API. I just threw this together because I really needed line drawing with rounded caps, and hoped others could benefit as well. You can basically make filled circles now by using a line segment with zero length and rounded caps like:
var testShape = new Shape();
testShape.addLineSegmentF(0.0, 0.0, 0.0, 0.0, 20.0, true); // circle at [0,0] with 20 diameter

I'm not sure if people would consider that "hacky" though.

@markknol
Copy link
Contributor

@OvertureGames Very cool project, how far is this already? Beside addLineSegmentF with all those parameters, I would prefer to see such functions, to have understandable api.

function lineStyle(?thickness : Float, ?color : Int, ?alpha : Float) : Void
function fillStyle(?color : Int, ?alpha : Float) : Void
function moveTo(x : Float, y : Float) : Void
function lineTo(x : Float, y : Float) : Void
function curveTo(anchorX : Float, anchorY : Float, x : Float, y : Float) : Void
function drawCircle(x : Float, y : Float, radius : Float) : Void
function drawEllipse(x : Float, y : Float, width: Float, height: Float, ?rotation: Float) : Void
function drawRect(x : Float, y : Float, width : Float, height : Float) : Void
function clear() : Void

@GameOverture
Copy link
Author

@markknol I like your functions better and it conforms to most already existing drawing API's. I'll see about replacing the existing functions with the ones you listed there. Maybe I'll find some time to do so over this weekend.

@anissen
Copy link
Contributor

anissen commented Apr 10, 2014

Really cool! I would love to see this merged into master 👍

@aduros
Copy link
Owner

aduros commented Apr 12, 2014

👍 for implementing this "natively" by adding new Graphics methods. Rendering circles by drawing lots of thick lines seems like the wrong approach.

I think the very first step here should be implementing something like Graphics.drawTriangles(vertices :Array<Float>, indices :Array<Float>) across all 3 renderers. Then from there, we can add things like drawCircle, which will use the vector renderer in HTML5 canvas, and implemented using drawTriangles in WebGL/Stage3D. Once that's done, we can create a ShapeSprite that exposes a nice API for procedurally building vector graphics.

@anissen
Copy link
Contributor

anissen commented Apr 13, 2014

@aduros I think the drawCircle simply draws the outline of the circle but I agree that unified rendering functions across all renderers is the way to go.

@volkipp
Copy link
Contributor

volkipp commented Jun 17, 2014

Would there be any downside to using this pull request until we have Graphics.drawTriangles implemented? I could really use this on a project coming up.

@quinnhoener
Copy link

I agree with @volkipp, is there any harm in allowing this starter version to be released and modify it over time?

@markknol
Copy link
Contributor

markknol commented Oct 7, 2014

What is the state of this pull request?

@GameOverture
Copy link
Author

Unfortunately I don't think I will find time in the near future to further contribute to this pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants