[Feature Request] Bezier Curves Window and Variable

Discussion and feedback on Construct 2

Post » Wed Jun 11, 2014 10:57 pm

@Ashley
Bezier Curve Object
Bezier Curve window

Ok. As part of my job I work with Unity. I wasn't into curves before. But after doing some unique animation, movement and all sorts of stuff. I found that bezier curves are magical, amazing and by far one of the most amazing tools to have in game development. I could manually write a bezier curve plugin and evaluator. However what I can't create is the window to create curves. That's an element of the IDE level we don't have.

What would be fantastic would be a variable like instance based that stores as a Bezier Curve. That way the curve could be added to Objects, be a global variable or a group variable. So it would sit similar to Number,String

Some of the stuff I have done with bezier curves.
*Custom sized banners that animate the size to the speed for nice bounce effects.
*Easily controlled "jump" effect objects(for not platforming game. just feed back for something simple)
*Animate 30+ objects with different animations with a single set of frames with 1 animation.

Let's start with Spriter a tool we have access to.
http://www.youtube.com/watch?v=vEGIox_dZug
These are just some of the simpler stuff that can be done. However it shows that as a curve is evaluated position, scale, alpha can all be set based on a time. With curves having controllable tangents allows these evaluated to visual numbers can have some excellent effects.

Here is an examples of both curves and algorithm
http://www.motionscript.com/articles/bo ... shoot.html


At work for my part of a project as a sample. The lead designer requested a procedural generated bush animation that could mimic different states of wind blowing.
no wind, light win, medium winds, heavy, rapid. When looking at the art there were 40 sets of animated objects to work with. Most of the bushes, grass in various colour tones. The idea of making 40x5 animations was kinda daunting. Since this was procedural I took advantage of curves.

I had 1 master curve that would represent the scenes wind strength at a long given period of time. The sample used 15 seconds. With the last 5 just representing calm to test out no wind.

There were 6 curves timed at 0.5 to 1 second a piece. These child curves represented a percentage based animation frame. So 0 was 0 frame, 0.5 was middle frame, and 1 was last frame. So no matter how many frames there were there was a translation 0 to 1 as a percentage to match up the with the animation frames.

A child curve then represented a cosine wave usually about 2-6 times over 1 second with all of them at varrying heights in the curve. Usually apx 20-30% difference.

When a child had no animation(first and finished) it would evaluate the current time of the master curve and get the wind strength. Then it would get a random value from current-1 to current +1 out of the child range.

In the end this produced a very nice wind like effect that conveyed the feeling of the wind at the time.

Of course this could be just randomized and use more code like methods. however using curves made doing all of this a breeze. It was very enjoyable that just changing a curve would change the results.

So it would be fantastic if you could please implement a curve window into C2 IDE. Spriter is awesome, but at times could be considered overkill.

Please, please add bezier curves to the IDE. It would raise C2 productivity many fold on the visual side.
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,013

Post » Wed Jun 11, 2014 11:11 pm

Would you rather a visual editor, or some defined expressions like:
http://gizma.com/easing/

BTW I think you could also get away with qarp, and cubic.
Image ImageImage
B
168
S
50
G
163
Posts: 8,224
Reputation: 105,067

Post » Wed Jun 11, 2014 11:19 pm

Oh assuredly one can use pure mathematical curves logorithms. In fact i use Lunaray, lerp and cubic here and there. However having actually used a full on bezier curve editor allowed for a lot more fine precision modifications easily.

Spriters curve editor is more appropriate as an example to be user friendly. I've done the code wise and it works fine. But the editor style is just more of a pleasure to use. :)

The alternative is to find a curve editor and create an evaluator plugin. Then use some copy paste the curve into string. It would be just more pleasant to use an in editor window to do so :)
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,013

Post » Wed Jun 11, 2014 11:26 pm

I should addendum. That the curve editor in question would be able to support more than one curve. The curve should have key's and tangets to support multiple curves. I'm not requesting a single curve based on an algorithm, but more complicated curve patterns.

So to be a little more clear. I'm looking for this.
http://math.hws.edu/eck/cs424/notes2013 ... ezier.html

and not this
http://cubic-bezier.com/#.68,-0.65,.5,1.85
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,013

Post » Thu Jun 12, 2014 12:27 am

Yep, it would be cool to have, but can it be added?
Does the editor support drawing curves in child windows even?
If not, an external editor would be fairly easy to make, especially since Rojo's Canvas plug supports paths, and you could use ajax to import the control points to use with cubic.
Chaining multiple paths... not so much.
Image ImageImage
B
168
S
50
G
163
Posts: 8,224
Reputation: 105,067

Post » Thu Jun 12, 2014 12:37 am

That's one path I was thinking of using. There are some good plugins already. There is just no cohesive whole in the IDE. I'm sure Ashley could add a curve window if he felt the feature was worth it. Personally I think it is, especially after having use it so extensively. But I honestly didn't think they were that big a deal until I did.
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,013

Post » Thu Jun 12, 2014 12:52 am

newt wrote:Chaining multiple paths... not so much.

Why not? I was able to do it in CC with the canvas that didn't have all the comfort features of ROJOs plug
Image
B
24
S
8
G
10
Posts: 1,821
Reputation: 8,279

Post » Thu Jun 12, 2014 3:43 am

It depends on what you want to do. If you need more than 4 control points from cubic, then obviously it would get a little complicated, at least timing wise for the novice user.
On the other hand lerp, qarp, and cubic should work super easy for effects such as ease in.
Image ImageImage
B
168
S
50
G
163
Posts: 8,224
Reputation: 105,067

Post » Thu Jun 12, 2014 3:57 am

Might be that it gets complicated. But I didn't have that feeling when creating it. The spline is a (bit more but basically) sum of n cubics. But I agree that for simpler tasks, such as ease in/ease out one cubic would do its job very well.

Also I'd not be concerned about cpu load. As my example shows, and also Spriter, the calculations are fast enough to do them realtime without adding much.

But extending the editor with curve editing would be the optimum.
Image
B
24
S
8
G
10
Posts: 1,821
Reputation: 8,279

Post » Thu Jun 12, 2014 3:13 pm

Well I can't speak for java script on mobile devices that are accelerated or not. But I know in Unity a curve evaluation is pretty cheap. Also if it's really a problem just clock evaluate call on an every 0.033 tick. That will lighten the load if raw js is being a problem.

On PC's performance isn't a problem.
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,013

Next

Return to Construct 2 General

Who is online

Users browsing this forum: R0J0hound and 11 guests