Following a Spline

From Synfig Studio :: Documentation
Jump to: navigation, search
m (Rephrase order of instruction sentence to match actual steps)
(20 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 
<!-- Page info -->
 
<!-- Page info -->
{{Title|Движение вдоль кривой BLine}}
+
{{Title|Following a Spline}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials Advanced}}
 
{{Category|Tutorials Advanced}}
 +
{{NewTerminology}}
 
<!-- Page info end -->
 
<!-- Page info end -->
 +
:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]].  It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''.  There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
 +
== Introduction ==
  
== Введение ==
+
This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.
  
Если вы используете версию 0.61.08 или ниже, то используйте {{l|Following a BLine (the old way)|старую версию}} этой статьи, эта статья актуальна для версии 0.61.09 и старше.
+
== Summary ==
  
Эта статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления следования.
+
We're going to:
  
== Содержание ==
+
* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
Нам предстоит:
+
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve
  
* {{l|Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}
+
== Tutorial ==
* {{l|Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней
+
  
=== Создаём новый файл ===
+
The tutorial is intended to provide a demonstration on how to use this feature.
  
Файл > New
 
  
=== Создаём слои ===
+
=== Create the Animation ===
  
Выберите инструмент "Кривые"
+
* Create a new animation by selecting from the menu {{c|File|New}}.
[[File:Bline_tool.png]]
+
  
поставьте флажок только напротив параметра "Создать кривую контура"
 
  
нарисуйте кривую вдоль которой будет двигаться наша стрелка
+
=== Create the Layers ===
  
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента
+
First step, let's draw the Spline:
  
теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента
+
# Select the {{l|Spline Tool}} from the Toolbox: [[File:Spline-tool-0.63.06.png|frame|none]]
 +
# In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.
 +
# Draw a Spline that you want the arrow to move along.
 +
# Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.
  
still in the bline tool, enable Fill and Outline checkboxes in tool options
 
[[File:Tool_Options.png]]
 
  
нарисуйте стрелку или что то подобное, указывающую на право
+
Second step, let's draw the arrow:
  
переключитесь на инструмент трансформации.
+
# Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types: [[File:Spline-Tool-Options_0.63.06.png|frame|none]]
 +
# Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
 +
# Switch to the {{l|Transform Tool}} and select the Outline, press {{Shortcut|Ctrl}}{{Shortcut|A}} to select all its {{l|Handle|handles}} except the green position handle.
 +
# Drag the handles so that the arrow is centered around the green position handle.
 +
# Add a {{l|Rotate Layer}} above the Outline and Region Layers.
 +
# {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
 +
## an Outline Layer
 +
## a Group Layer containing the arrow and the Rotate Layer
  
select the outline, hit control-a to select all its ducks except the green position duck
 
 
drag the ducks so that the arrow is centred around the green position duck
 
 
add a rotate layer above the outline and region
 
 
encapsulate the rotate, outline, and region layers
 
 
so now you've got 2 top-level layers: a curved path, and an encapsulation containing an arrow and a rotate layer
 
  
 
=== Make the Arrow Move and Rotate ===
 
=== Make the Arrow Move and Rotate ===
  
select the encapsulation layer by clicking it in the Layers panel
+
# Select the Group Layer by selecting it in the {{l|Layers Panel}}.
 +
# Then:
 +
## select its green origin position {{l|Handle|handle}} by clicking on it in the Canvas window
 +
## while holding {{Shortcut|Ctrl}} select the Rotate Layer in the Layers Panel
 +
## while holding {{Shortcut|Ctrl}} select its blue rotation handle in the Canvas window
 +
#: At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
 +
# Now, while holding {{Shortcut|Ctrl}} select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
 +
# Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
 +
# From the context menu that pops up, select {{Literal|Link to Spline}}: [[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]
 +
#: The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
 +
# Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
 +
#: We can now animate the arrow.
 +
# Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the Canvas window:
 +
## at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
 +
## at time '''5s''', drag the same position handle to the other end of the Spline
 +
# Try {{c|File|Preview|}} to watch the animation.
  
select its green position duck by clicking on it in the canvas window
 
  
additionally select the Rotate layer by holding Control and clicking it in the Layers panel
+
== Results ==
  
additionally select the blue "rotation amount" duck by holding Control and clicking on it in the canvas window
+
This is the animation I ended up with:
 +
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]
  
so now we should have 2 layers selected, and one duck from each of those 2 layers selected
+
Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}
  
now additionally select the curved bline layer (it should be the last layer in the Layer panel's list) by holding Control and clicking on it
 
  
right-click on the dotted line that indicates the position of the curved bline - not on any duck, but on the dotted link between ducks
+
== Controlling the linear velocity ==
  
from the context menu that pops up, select "Link to BLine"
+
By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.
[[File:Link_to_Bline.png]]
+
  
the encapsulated arrow should move so that its green position duck is on the bline, and it should rotate so that the arrow points along the bline at that point
+
If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.
  
select just the encapsulation layer, and drag its green duck around.  you'll see that the duck is constrained now to lie on the bline, and that dragging it also affects the rotation of the arrow as expected
+
You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.
  
we can now animate the arrow.  turn on "animate edit mode" by clicking the icon in the bottom right of the canvas window.
+
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].
 
+
at time 0f, drag the encapsulation layer's green position duck to one end of the bline
+
 
+
at time 5s, drag the same position duck to the other end of the bline
+
 
+
Try File > Preview or View > Play to watch the animation.
+
 
+
== Results ==
+
 
+
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}
+
 
+
== Controlling the linear velocity ==
+
  
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.
 
  
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].
+
== See also ==
 +
* Link to Spline command: {{l|Command:Link_to_Spline}}
 +
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Revision as of 14:05, 30 March 2020

Languages Language: 

English • čeština • Deutsch • español • français • русский


Note: There is also a slightly out-of-date tutorial on this topic at Tracking Curves. It contains some info, particularly about link/export, which hasn't yet been added to this new tutorial. There is also another very out-of-date tutorial for synfig 0.61.08.

Introduction

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

Summary

We're going to:

Tutorial

The tutorial is intended to provide a demonstration on how to use this feature.


Create the Animation

  • Create a new animation by selecting from the menu "File → New".


Create the Layers

First step, let's draw the Spline:

  1. Select the Spline Tool from the Toolbox:
    Spline-tool-0.63.06.png
  2. In the Tool Options Panel, enable only the Outline Layer type.
  3. Draw a Spline that you want the arrow to move along.
  4. Click the "Make Spline" icon in the bottom left of the Tool Options Panel to create the Spline.


Second step, let's draw the arrow:

  1. Select the Spline Tool, this time enabling "Create Outline" and "Create Region" Layer types:
    Spline-Tool-Options 0.63.06.png
  2. Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
  3. Switch to the Transform Tool and select the Outline, press CtrlA to select all its handles except the green position handle.
  4. Drag the handles so that the arrow is centered around the green position handle.
  5. Add a Rotate Layer above the Outline and Region Layers.
  6. Group the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
    1. an Outline Layer
    2. a Group Layer containing the arrow and the Rotate Layer


Make the Arrow Move and Rotate

  1. Select the Group Layer by selecting it in the Layers Panel.
  2. Then:
    1. select its green origin position handle by clicking on it in the Canvas window
    2. while holding Ctrl select the Rotate Layer in the Layers Panel
    3. while holding Ctrl select its blue rotation handle in the Canvas window
    At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
  3. Now, while holding Ctrl select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
  4. Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
  5. From the context menu that pops up, select "Link to Spline":
    The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
  6. Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
    We can now animate the arrow.
  7. Turn on Animate Editing Mode by clicking the icon in the bottom right of the Canvas window:
    1. at time 0f, drag the Group Layer's green position handle to one end of the Spline
    2. at time 5s, drag the same position handle to the other end of the Spline
  8. Try "File → Preview" to watch the animation.


Results

This is the animation I ended up with:

alt Following a Spline example

Synfig project: Arrow-follows-bline.sifz‎


Controlling the linear velocity

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is converted to "Spline Vertex" type. This is done automatically when "Link to Spline" is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see this demo.


See also


Languages Language: 

English • čeština • Deutsch • español • français • русский