DiegoM's Forum Posts

    Cubic Bezier Curves

    As of the latest release, r144, it is possible to edit the path of an instance as it is animated using cubic bezier curves. This is not activated by default though. In order to use this feature you will need to set the new Path Mode property of the timeline. Currently there are two setting for it, Line and Cubic Bezier.

    Once the mode is activated a few extra UI elements will appear in the Layout to allow you to edit the path of an instance as a curve. Remember that the new controls will only show up as long as Editing Mode is turned on.

    It is also possible to see in the Timeline Bar which path mode is being used in between each pair of keyframes, and change the value if you like. This is similar to how you can change the ease function that is used in between each pair of keyframes.

    Keep in mind that this feature is only used for X and Y properties of an instance, so other property tracks will not show a path mode.

    luckyrawatlucky

    That is a feature I am planning on adding, at some point in the future. The idea is that somehow, possibly through an event action you should be able to change the instance or instances that a timeline is affecting, that way it would be possible to re-use the same animation for multiple instances. Not too sure when will I get around to doing that though.

    Mobile Devices

    I forgot to mention this in previous posts. At the moment the Timeline Bar is not enabled in mobile because I just haven't figured out a good way to make the feature useful in small screens. It needs considerably more space than other bars to be of any use.

    There is also the fact that the Timeline Bar is a control that is naturally more suited for a horizontal layout, so that was another reason to disable it in mobile for the time being.

    This is not permanent though, eventually it should be enabled in mobile.

    mekonbekon

    When I first implemented the feature, there was no need to press ctrl to scrub. Right before making it public though, I was doing a little example animation, and I was constantly following what at the time was the wrong flow to create keyframes, which was:

    1. making changes in the layout or properties bar
    2. moving the time marker to a new position
    3. setting keyframes in the new position

    This meant that any changes I made in order to later create keyframes out of them, were lost because the program would preview the animation from the current time as soon as I moved the time marker to the position I wanted.

    As the developer this was just a mild annoyance because I knew exactly what was going on. So I continued working taking into account that the correct workflow was:

    1. moving the time marker to a new position
    2. making changes in the layout or properties bar
    3. setting keyframes in the new position

    I thought that for anyone else this small gotcha would be confusing/annoying, so I decided that the default behaviour when moving the time marker shouldn't change instances values in any way.

    Having to consciously press a key in order to preview makes it almost impossible to do it on accident, so the mild confusion of loosing changes because of an incorrect scrub becomes almost impossible.

    When implementing these I thought about my previous experiences with other software like, 3d Studio Max or even Unity, where you have to juggle a bunch of keyboard shortcuts along with the mouse, just to be able to do something. I like every other person got used to that very quickly, so I thought it would be the same here.

    dop2000

    Somewhere in my TODO list there is the item "Further Event Sheet Integration", particularly the possibility to set a keyframe that would trigger an action on the related instance, an "Action Keyframe" if you will. But I have no timeframe as to when I would start working on that.

    As for C3 crashing, I must have introduced that bug recently because I am pretty sure that should work, I will get around to fixing that for the next beta release.

    justifun

    Is it theoretically possible for a plug-in developer to write something that could convert motion data from a Json or xml sheet into the timeline format so that construct could play it back? Would it be hard for timeline to have a load Json function?

    I suppose it would be technically possible. I haven't tried this myself so I'm sure there are lots of caveats, but a plugin should be able to create a timeline programmatically at runtime, this is pretty much what the Tween Behavior does under the hood.

    But I suppose that you are thinking of importing data from other animations tools so C3 can just play it back. At the moment this would be very difficult because the feature is just not mature enough, so it just doesn't understand a lot of features present in other animation software.

    rodimus111

    Did you think about doing it with BEZIER CURVES?

    I realize that is a very popular request, so at some point I should be working on adding the functionality to use a bezier curve to edit the path an instance takes as it animates. I can't give any estimates as to when that work will start though, but it definitely is in the plans.

    Keyboard Shortcuts

    Recently a bunch of basic keyboard shortcuts where added to the Timeline Bar.

    S

    This is the same as the Set keyframes option that can be found in the layout context menu or the timeline bar context menu. It will set keyframes at the current position in the timeline, with values according to the current state of the instances in the layout. If there already are keyframes at the current time in the timeline, they will be updated.

    Delete

    Deletes the current selection, be it of keyframes or tracks.

    D

    Disable the current selection, be it of keyframes or tracks.

    Disabled keyframes are not are not taken into account when animating. Disabling a master keyframe will disable all corresponding property keyframes. Disabling a track will disable all of it's keyframes.

    E

    Enable the current selection, be it of keyframes or tracks.

    M

    Add missing property keyframes of all the selected master keyframes. The new property keyframes are given the current instance value. If a master keyframe is not missing any property keyframes, nothing will happen.

    M + Ctrl/Cmd

    Add the the missing property keyframes of all the selected master keyframes. The new property keyframes are given a value that fits into the timeline with out causing any changes.

    SPACE

    Preview the timeline

    LEFT ARROW + Ctrl/Cmd

    Move the current time marker to the next master keyframe

    RIGHT ARROW + Ctrl/Cmd

    Move the current time marker to the next master keyframe

    Delenne

    One more question: will users have access to properties of plugins? For example, will it be possible to control Spriter object parameters with the timeline? Or will it be limited to the standard Construct objects?

    In order to be able to animate C3's built-in plugin properties I had to do a little bit of work, because there was no way to update the values asides from event actions. The way it works is that each plugin needs to define which of it's properties are animatable and then implement the appropriate logic to react to changes at runtime. By default a plugin property is not animatable.

    All of that means that each plugin creator needs to update their plugin if they want to support animation of properties through a timeline.

    The details on how exactly to update a plugin will be released later, when the whole feature is more stable.

    So to answer the question, at the moment only the built in plugins support timelines. In the future it will be possible to modify existing plugins to do so aswell.

    Delenne

    Are nested timelines possible?

    At the moment this is not possible, I was thinking about it just yesterday though. But I don't think I will be able to start working on it any time soon.

    The animation interpolation control is quite rudimentary. Are you planning to add a graph editor of sorts?

    I am planning to add the option to create custom ease functions. These feature would come with a special editor to build your custom easing curve. You should then be able to assign that custom curve in the same way you assign the built in ones. Is that what you mean?

    Will bones/segmented characters be implemented? The competition allows for these, and it opens up many possibilities. Construct still relies on Spriter, which is less than ideal.

    At the moment there are no plans to support bone structures. That is a completely different feature which just happens to work very well with the concept of a timeline, so they are often assumed to go hand in hand.

    Will motion paths be integrated with the timeline?

    I Have thought about this too, but I am not too sure when I will be able to start work on this.

    Which parts of Construct's functionality can be keyframed/used in a timeline exactly? Everything, including event sheets and functions, and parameters for any object that is inserted in the layout? How far does the integration go?

    At the moment you can create keyframes for almost all properties that can belong to an instance. This includes the common properties, instance variables, behavior properties, effect parameters, and plugin properties.

    Some properties don't make sense to be interpolated, so those are not available. Ej. Sprite's Initial Frame can not be interpolated.

    There are some properties which are missing, because they are not part of Construct at all. For instance at the moment it is no possible to set the current frame of an animation from a timeline. That is a missing feature I would like to add.

    I have though about the possibility to interpolate Layout and Layer properties, Event Sheet global variables and the ability to trigger an event sheet action from a timeline, but those things are just in my TODO list. There is no estimated time of even when will I start with any of that.

    justifun

    I get very confused what i'm doing with the whole edit mode on/off, remember / forget stuff.

    My mind makes me think that any changes i make while edit mode is on, should be setting keyframes etc, but it only sometimes does? then i try and scrub my animation and it starts off at a different location to where I thought i set the keyframe? It feels very inconsistent.

    I have found a couple of cases in which only a master keyframe (black dot) is created, with no related property keyframes (blue squares). This can be confusing, because the master keyframes by themselves don't have any information to do an animation.

    And i can't set keyframes at frame 0 for some reason.

    Every track in a timeline needs the first keyframe, you can't remove it, and you can't change it's time. The only way to change them is to update their values.

    Enabling "edit mode" makes me think i should be able to edit the objects, but according to your description, turning it off afterwards reverts any changes you did. I don't follow.

    I was wondering if the explanation was good, I guess it wasn't, I'll try again :P

    "Edit Mode" allows you to make changes to the instances in the Layout without loosing their original state before entering "Edit Mode".

    This way you can preview the animation and mess with positions, sizes and other properties while you are creating your keyframes for the animation, without worrying about loosing the initial state, which you might want to keep. Ej. You want all the instances in a specific place at the start of the layout, but you also want to move them around while you are creating the animation. "Edit Mode" solves this problem.

    When you are done, turning "Edit Mode" off will revert all the changes as far as the layout is concerned, so you can continue working with the rest of the features of Construct normally.

    The changes you made to the timeline you where working on will not be reverted though, all the keyframes remain there with their respective values.

    I hope that makes more sense.

    Also when you goto a keyframe that already exists, we are forced to use the "update keyframe" button instead of the "add keyframe" button, which its odd that its two different buttons, "set keyframe" on a keyframe that's already there should just update the keys.

    This is a fair point. Under the hood these two are very different features, so it was natural to separate them. This is why we need user feedback, to notice this kind of things. I'll remember this one. I don't think is a deal breaker though.

    IJCT

    scrubbing preview should be a button on the interface, like "enable scrubbing preview" while dragging the timeline, its not obvious that we need to press CTRL (cmd)

    This, along with other keyboard shortcuts will be outlined in the manual, when it is written. I think that once you know about it, it's pretty easy to use.

    also please add dark theme for the timeline.

    This should come in time, otherwise it looks pretty ugly in any theme other than the default one. While we don't have this the whole feature will remain behind the experimental flag.

    onion skinning its a needed feature for this.

    What exactly are you thinking about? I picture a few different things.

    1) A translucent preview of how an instance looks in each keyframe. So you can more or less tell how the animation will take place.

    2) Several translucent previews of how the instance looks as it is animated. Something like this maybe?

    I have the feeling you are thinking of the second option. While I think it would look nice, I don't think it is absolutely crucial to creating an animation. The scrubbing preview already serves the purpose of giving you a feel of how the animation is turning out.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

    Editing Mode

    In the first post I mentioned Editing Mode briefly as part of the basic workflow to create an animation. I will go over it again in a little bit more detail this time, because there are a few things about it that are not immediately obvious.

    Just showing the old gif again in case somebody missed it. That is the button you press in order to turn Editing Mode on.

    Features

    Virtual Changes

    When Editing Mode is turned on, changes that you make to instances are not real changes, by this I mean that they are changes that will not be exported to the runtime when you preview your project for instance. These virtual changes allow you to move your instances around and make different kinds of adjustments while your are building your animation, without worrying about the initial settings for a given instance getting lost.

    Once you are done editing a timeline, toggle Editing Mode off, and all changes will be reverted back to the state they were before.

    Scrubbing Preview

    While in Editing Mode you can scrub the current time marker to preview the animation. To do this you will need to keep the Ctrl (Cmd in OSX) key down while scrubbing the current timer handle.

    Adding Keyframes

    The different options to add keyframes will only become available while in Editing Mode.

    The Layout context menu option. This option will add keyframes to all the properties of the selected instances.

    The Timeline Bar context menu option. This option will add keyframes to all selected tracks and their children. This option allows you to be more specific about the properties you wish to add keyframes for.

    New keyframes are always added at the position of the current time marker.

    Visibility Toggle

    The checkbox will toggle the visibility of the associated instance, but this will only work in Editing Mode. When the mode is turned off the instance will revert to the visibility state it had before.

    justifun

    Awesome start, very excited for these features

    Glad you are liking it :)

    1) It would be awesome if while dragging the red time line you could see the animations move forwards/backwards as you scrub it, instead of having to hit play. (also being able to drag the red line while the cursor is in the frame number area above the tracks

    You can do this, it is not immediately obvious how to do it though. First you need to have Editing Mode turned on and you also need to be pressing Ctrl while scrubbing. Dragging after clicking on the time ruler will be available on the next release.

    2) an "auto key" button, that would set keyframes while enabled on any property that changed in the layout/property bar

    While there is not a button in the Timeline Bar to do this, it can be done. Again you need to make sure that Editing Mode is turned on. Then move the red line to where you want the keyframes to be added, after that make changes to an instance either from the layout or from the properties bar, right click on the instances that you want to add keyframes to and in the context menu select Timeline -> Add keyframes. This will create keyframes for all the properties that have changed.

    3) Right clicking a keyframe and choosing disable causes an "oops something went wrong" construct crash

    Will look into this, it looks like an easy fix, but please file a bug report in our bug tracker.

    Edit: Looked into it and it doesn't seem to be obvious what is going on, please file a bug report with reproduction steps.

    4) Right clicking an ease curve in "eases view" causes an "oops something went wrong" construct crash

    Will look into this too. Again, please file a bug report for this kind of issues.

    Edit: Looked into it and it doesn't seem to be obvious what is going on, please file a bug report with reproduction steps.

    5) it would be nice to be able to make duplicate tracks of the same object, but with different keyframes / offsets for the second instanced object

    I have thought if this myself while I was working on the example animation I posted before. Some sort of system to copy and paste the entire content of a track would be very useful.

    6) when you first turn on edit mode, the track still remains red and you can't right click to add keyframes unless you click somewhere off the red line (but once you've set one, right clicking on the red line works to add keyframes

    Don't know what's going on in here, but it looks like an easy bug fix.

    7) perhaps an "add keyframe" button on the upper UI of the timeline bar or the ability to hotkey that, less clicks overall

    There are still no keyboard shortcuts because I wasn't sure which ones where going to be the really important ones. But by now it is pretty clear that if there has to be one short cut, it's one to create a keyframe :)

    8) Changing the "total time" property for the timeline doesnt update the range of the timeline where you can set keys (it says at 24s no matter what for me.)

    Not sure I understand this, for me it seems to be working fine by either changing the total time from the Properties Bar or by dragging the green line in the Timeline Bar. File a bug report for this one, and make sure to write down the reproduction steps.

    9) highlighting a master key and pressing ctrl to multi select but needing to hold ctrl while dragging them is just different from how most other animation softwares do it. usually once they are selected you dont need to continue to hold ctrl

    This will be fixed.

    10) the right click "view" menu is a tad confusing, that if you want to get back to the normal view you have to unselect the current view. perhaps adding a "default" option in there might be less confusing.

    Makes sense, will do something about this to make it more clear.

    11) a little animated gif of the types of eases as you pick from the list would be nice

    I don't think I will be doing this. it looks like there are a lot of eases to choose from, but they really aren't that many, you can memorize them very quickly and then the name is enough to know what they do.

    Plus, at some point I need to add the option to make your own custom eases, so you will be able to see the curve while you are editing it.

    12) Right click "help" takes you to a 404 page

    Will remove the option until we have official documentation. This is the kind of thing that you can report in the bug tracker.

    13) it would be awesome if the "properties" that could be adjusted on the timeline included bahavior actions etc. right now it seems like it can only animate a few basic parameters of the object.

    This is already implemented, to a certain degree.

    Properties that can be animated include, the common instance properties, instance variables, behavior properties, effect parameters and plugin properties. There are some properties that don't make sense in the context of a timeline animation, so those can not be animated. The dialog to add properties will only show properties which are already part of the instance though. So you need to add the things you want to animate before hand.

    All the properties that can be animated should be highlighted in yellow in the Properties Bar, when Editing Mode is turned on.

    Thanks for the feedback, it is very useful.

    elliot Yes, the elastic function will go past the original positions.

    In Elastic will go below 0% for a little bit at the start

    Out Elastic will go over 100% for a little bit at the end

    In Out Elastic will go below 0% at the start and then over 100% at the end