DiegoM's Forum Posts

    Here is a little example I did while developing the feature. This is not super complex, but has a little bit more meat to it than the example of the Quick Start guide above.

    https://www.dropbox.com/s/n3a1hlky38e0rxe/Timeline%20Example.c3p?dl=0

    This example, asides from doing a little bit more in the way of adding keyframes and interpolating the value of different properties, it makes use of the different easing functions you can use in between Property keyframes.

    Types of keyframes

    The image above is from the example, you can check it out yourself later. There you can see the two different types of keyframes that timelines use. The Master Keyframes (black dots) and the Property Keyframes (blue squares)

    Master Keyframes

    These are shown only on the main track associated with an instance and they are more than anything a convenient way to make changes to all the corresponding Property keyframes. For instance, deleting, disabling, changing the time or the ease function of a Master keyframe will apply that change to all the corresponding Property keyframes. A Property keyframe corresponds to a Master keyframe when they have the same time, that is the only condition.

    Property Keyframes

    These are shown on every timeline track which is associated with a specific property of an instance. Unlike the Master keyframes, these have the values that are used by the timeline to change an instance as time goes by. If you end up wanting to fine-tune an animation, you will probably end up editing the value of a Property keyframe directly by means of the Properties Bar.

    Both types of keyframes will show their properties in the Properties Bar when clicked on and have a variety of options when right clicked on, I'll leave that for later though.

    Change the easing function in between keyframes

    By default all keyframes are created and set to use a Linear ease, and while it works, we can do a little bit better than that.

    You can change the ease function of a Property keyframe by either using the Properties Bar or by turning on the View that will show all the easing functions used in between all the keyframes. You can do that by bringing up the context menu anywhere in the Timeline Bar and going View -> Eases

    Once the view is activated you will be able to see all the eases used in between the keyframes, at a glance. I wanted to highlight a section in the screen shot, because at the moment it is a problem that when there is not enough space in between keyframes, the name of the ease in use is not shown, and that can be a little bit confusing.

    In this mode you can click in the line between any two keyframes to select a different easing function from a drop down.

    That ended up being quite a long winded explanation, phew!

    The Timeline documentation is now in the official manual. Go there for the latest information - this is now out of date

    Start with the Timeline Bar manual page to get started.

    Introduction

    Hello all, as you may have learned by now, Construct 3 now supports timeline animations. It took a while but we finally have something that can be shown, there is still a long way to go though. There will be the obvious bug fixing, but most importantly we are expecting your feature requests. It is a vast subject, and I would like to concentrate on what our users want.

    Since this is a rather large and complex feature it is still locked behind the "Enable experimental features" flag that can be found in the Settings dialog. Expect to see it in that state for a while, until we can iron out the most obvious problems.

    There is still no official manual entry, because we want to be sure it is in a more stable state before committing to write documentation that might change in the near future. So in the mean time, the following quick start guide will be all the documentation available, hopefully enough to get you started.

    Quick Start Guide

    Enabling the Timeline feature

    Go into Menu -> Settings -> Advanced and toggle the "Enable experimental features" flag.

    NOTE: Make sure your project is using the C3 Runtime, timelines won't work in the C2 Runtime.

    Show the Timeline Bar

    Go into Menu -> View -> Bars -> Timeline Bar

    At this point you will be seeing the floating pane and if you haven't noticed there should be a new folder in the Project Bar called "Timelines". All the timelines in your project will be listed there.

    At this point I recommend docking the Timeline Bar either in the bottom or the top, that way you will have the most amount of horizontal space, which I find works better for this control.

    Adding a Timeline to the project

    The empty Timeline Bar will have some short information on how to add a new Timeline to the project. Follow any of those methods and you should be able to complete this step.

    Adding an instance to the Timeline

    Once you have an empty Timeline, the Timeline Bar will again show some short information about how to add an instance to it. Any of the methods will require an existing instance in the active layout, so if there isn't any yet, go ahead and add one. A Sprite instance will do just fine.

    Take note of some important parts

    A) The pencil icon will allow you to switch into Editing Mode, which will make a few changes to the Layout and Properties Bar

    B) This is the first Master Keyframe of the animation, not so useful, but I though I'd point it out.

    C) The current time marker is the red line. This one is important, because it is the main method to choose where you want to add more keyframes. It also allows you to preview the animation while Editing Mode is turned on. More on that later.

    D) The total time marker is the green line. This one indicates the total amount of time the timeline will take to complete. You can drag it to change it, just like the current time marker.

    Also notice the red shade of the track that was added, this means that at the moment it isn't affecting any properties of the instance, we will get to that in the next step.

    Adding keyframes

    There are a few ways to add keyframes, but I will be going over what I think is the fastest one to get something going.

    Click the Editing Mode button in the Timeline Bar, you will notice a few changes in the Layout and Properties Bar. First the overlay color of a selected instance will turn from the familiar blue shade, to a yellow shade. Secondly, all properties in an instance that can be animated with a timeline, will also change to the same shade of yellow in the Properties Bar.

    Once Editing Mode is on, drag the current time marker (red line), to the position in the timeline where you want to add keyframes.

    At this point if you drag the instance to a different place in the layout and then right-click on top of it to bring up the context menu and go Timeline -> Add keyframes, the keyframes to perform that position change will be added.

    By now you will see your keyframes added in the Timelines Bar. You will see a new Master Keyframe with two Property Keyframes corresponding to the properties that changed, from the original position, in this case X and Y.

    You can preview the animation by scrubbing the current time marker while pressing CTRL.

    Event Sheet Integration

    First make sure the Timeline Plugin has been added to your project.

    After you do that, a bunch of Expressions, Actions and Conditions will become available to be used in an Event Sheet. One of which is the Play action, which you can use to play a Timeline.

    That is of course, the most basic example. It's only purpose is to demonstrate the basic workflow. I will be following up this post with some more content.

    Tagged:

  • It depends on what you are working on, if the project is small, a single event sheet will probably do it just fine.

    For medium to large size projects having multiple event sheets to separate unique tasks is likely the better approach. It makes it easier to find what you are looking for once the event count starts to rise.

  • You can post any feature suggestions in here https://construct3.ideas.aha.io/

  • We have one here at Scirra HQ! :)

    Unfortunately we can't get the bloody thing to work! :(

    Connecting it to a monitor doesn't seem to do anything... so because we have other things to do, it ended up in a cabinet collecting dust.

    But this thread has made me want to try and getting it working.

  • The Object Bar did not make the cut from C2 to C3 :(

    Since you can view the same information in the Project Bar anyway, we skipped it to avoid having redundant controls.

  • C3 doesn't know that the image for the two object types is the same. So it makes space for the image of each one when it's building sprite sheets.

    Why were you doing that? Just messing around? Or are you doing something that depends on it?

    If you just want to have many Tilemaps with the same image, I think it would be better to create many instances of the same object type, instead of creating many object types.

  • Those are valid points.

    I have another issue to work with relating to the mobile UI of the image editor, so I will implement something that addresses those problems while I am at it

  • It should show up if you swipe in from the left of the screen.

  • You can scroll with the middle mouse button. Just keep it pressed and scroll around the image.

    But now that I really think about it, adding SPACE + Mouse to scroll should take me a grand total of about 15 mins

    That doesn't sound too terrible.

  • I need to check if C2 works that way.

    If it does, I will probably try to add it in the coming days. Having parity with C2 features is one of our main goals at this stage.

    If C2 doesn't do it, then it means it's a new minor feature, so I would probably let it slide a bit into the future.

  • Because it is not implemented.

  • Oh cool, yeah I forgot to mention that.

    If you want us to look into something it is better to file a bug. It is more difficult to keep track of messages in the forum.

  • Just tried it out in our Mac Book Pro, and it definitely doesn't work.

    I'll have to fix this one. Hopefully it won't be too much of a hassle.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • The smooth toggle is working as intended, but the difference can only be noticed if you are zoomed in really close to the image. When the toggle is off, you draw only with whole numbers as coordinates, when it is on, floating point numbers are used as the drawing coordinates. Again, this difference can only be seen when you are zoomed in, something like >500%. Unless you have better eye sight than me, then you might notice it earlier

    I should do something about the hardness 100% and anti aliased pixels thought, that is definitely not working like C2.