Difference between revisions of "User:Darkspace65"

From Synfig Studio :: Documentation
Jump to: navigation, search
Line 1: Line 1:
Rewrite preparation for 0.65
+
 
  
 
== Introduction ==
 
== Introduction ==
In this tutorial we are going to draw a shape and subtract another shape from it.
+
In this tutorial we are going to rig an arm with fixed joints using the skeleton layer and three bones. The arm consists of three parts: the upper arm, the lower arm and the hand. (pic. arm01) Each part is grouped in its own layer and the three groups are again grouped in a layer that is called arm (pic. layers01).  
 
+
== Drawing the shapes ==
+
 
+
Click the {{l|Circle Tool}} on the {{l|Toolbox|toolbox}} and draw a circle on the canvas with an outline of 3 pixels. Make sure that the create region layer and the create outline layer in the {{l|Tool Options Panel}} of the {{Literal|Circle tool}}are selected.
+
 
+
Click the {{l|Rectangle Tool}} on the {{l|Toolbox|toolbox}} and draw a rectangle on the canvas with an outline of 3 pixels. Again make sure that the create region layer and the create outline layer in the {{l|Tool Options Panel}} of the {{Literal|Rectangle tool}} are selected.
+
 
+
For the sake of this example name the circle outline layer '''circleOutline''' and the circle region layer '''circle''' in the {{l|Layers Panel}}. Again in the {{l|Layers Panel}} rename the rectangle region layer '''baseShape''' and name the rectangle outline layer '''baseShapeoutline'''. If it is not already the case then select the '''circleOutline''' layer and the '''circle''' layer and move them to the top using the green arrows in the {{l|Layers Panel}}. Select all layers in the {{l|Layers Panel}}, right-click and choose group. Name the group '''baseShape'''.
+
[[File:cutoutshape1.png|center|frame|Layers Panel should look like this]]
+
 
+
== Subtracting the shape ==
+
[[File:cutoutshape2.png|center|frame|Canvas should look like this]]
+
 
+
Click on the circle layer in the {{l|Layers Panel}} or on circle shape in the canvas and select the green handle in the middle of the circle and drag it over the '''baseShape'''. Release the mouse.
+
 
+
[[File:cutoutshape4.png|center|frame|Drag the circle]]
+
 
+
[[File:cutoutshape5.png|center|frame|Canvas should look like this]]
+
 
+
Select the '''circleOutline''' layer in the {{l|Layers Panel}}, go to the {{l|Parameters Panel}} and change the Blend Method of the '''circleOutline''' layer to Onto.
+
Select the circle layer in the {{l|Layers Panel}}, go to the {{l|Parameters Panel}} and change the Blend Method of the circle layer to Alpha Over.
+
 
+
[[File:cutoutshape8.png|center|frame|Outline Width is not the same]]
+
 
+
The circle layer was subtracted from the '''baseShape''' but the outline width of the cut out part varies from the outline width of the '''baseShape'''. To adjust this we have to change the outline width of the '''circleOutline''' layer. Select the '''circleOutline''' layer in the {{l|Layers Panel}}, go to the {{l|Parameters Panel}} and change the Outline Width to 6 pixels.
+
After we adjusted the outline width of the '''circleOutline''' layer the '''circle''' layer was subtracted correctly from the '''baseShape'''.
+
 
+
[[File:cutoutshape11.png|center|frame|Final image]]
+
 
+
== Tip ==
+
If we want to add a '''circle''' to the '''baseShape''' then all we have to do is change the blend method of the '''circleOutline''' layer from Onto to Behind and change the blend method of the circle layer from Alpha Over to Composite.
+
  
[[File:cutoutshape13.png|center|frame|Circle added to the baseShape]]
+
== Prepare the joints ==
 +
Before we start rigging the arm we have to prepare it to make sure that the joints properly rotate. In the picture arm01 we can see that the lower side of the upper arm is straight and does not have an outline, while the upper part of the lower arm has an outline that is curved. The bottom part of the lower arm does not have an outline and is also straight. The joint of the hand is also curved with an outline. To make sure that the joint parts of the arm rotate correctly, we made them with the help of a couple of crosshairs (pic. arm02). In the pictures arm07 and arm08 we can see how the horizontal crosshair line matches the straight line of the bottom of the upper arm and at the same time the outline of the circle of the crosshair matches the top curved outline of the lower arm. The same principle is applied to the hand and the bottom part of the lower arm. The crosshairs also mark the centre of the rotation point that will later be used when placing the bones. Before placing the bones we can align the group transformation widgets (press control and move the left corner vertex of the group transformation widget to move it.) from the lowerArm group and the hand group with the crosshairs of the elbow and the wrist to check the rotation. Don’t forget to bring the arm into its original position by pressing undo.  (Don’t worry if the hand does not rotate with the elbow when you try the elbow joint.)
  
Below we can see an image of a piece of cheese that is almost entirely constructed by subtracting and adding circles to a basic underlining shape.
+
== Adding the bones ==
 +
Now it’s time to add a skeleton layer that will provide the bones we need to rig the arm. Right click on the {{l|Layers Panel}} and choose new layer/other/skeleton. A new skeleton layer will appear in the {{l|Layers Panel}} alongside with a small bone in the canvas. (pic. Arm04 and layers03) Put the skeleton layer above the '''arm''' group. To know more about the skeleton layer and bones click here. The green vertex above the blue vertex of the bone is used to move the bone in place and is also its centre of rotation. The blue vertex is used to rotate the bone. The green vertex under the blue one is used to stretch the bone. The first bone is the parent bone and should be moved toward the shoulder and stretched so that it almost reaches the outlines of the first crosshair of the elbow. Right click on any of the vertices of the parent bone and select create child bone. Move the rotation point of the child bone so that it matches the crosshair of the elbow and stretch it until it almost reaches the crosshair of the wrist. Right click on any of the vertices of the child bone and create another child bone. Move the centre of the second child bone so that it matches the crosshair of the wrist. Stretch the bone until it reaches the end of the fingers.  
  
[[File:cutoutshape14.png|center|frame|All holes in the cheese image are subtracted circles]]
+
== Attaching the bones ==
 +
Now that the skeleton is in place we have to attach the bones to the parts of the arm. In the layers panel click on the upper arm group, right click and select all the children. Then press ctrl-a in the canvas window. With everything in the upper arm group highlighted,  ctrl click on the parent bone in the canvas window and right click on any of the vertices of the parent bone and click link to bone. The upper arm group is now linked to the parent bone. Go the layers panel again and select the lower arm group. Right click and select all the children. Press ctrl-A in the canvas window and ctrl-click on one of the bones. Then right click on any of the vertices of the first child bone and select link to bone. The lower arm group is now linked to the second child bone. In the layers panel  select all the children of the hand layer and press ctrl-a in the canvas window. Ctrl click on any bone and then right click on any of the vertices of the second child bone and select link to bone. The hand is now linked to the second child bone and the entire skeleton is now linked to the arm.

Revision as of 19:10, 16 April 2015


Introduction

In this tutorial we are going to rig an arm with fixed joints using the skeleton layer and three bones. The arm consists of three parts: the upper arm, the lower arm and the hand. (pic. arm01) Each part is grouped in its own layer and the three groups are again grouped in a layer that is called arm (pic. layers01).

Prepare the joints

Before we start rigging the arm we have to prepare it to make sure that the joints properly rotate. In the picture arm01 we can see that the lower side of the upper arm is straight and does not have an outline, while the upper part of the lower arm has an outline that is curved. The bottom part of the lower arm does not have an outline and is also straight. The joint of the hand is also curved with an outline. To make sure that the joint parts of the arm rotate correctly, we made them with the help of a couple of crosshairs (pic. arm02). In the pictures arm07 and arm08 we can see how the horizontal crosshair line matches the straight line of the bottom of the upper arm and at the same time the outline of the circle of the crosshair matches the top curved outline of the lower arm. The same principle is applied to the hand and the bottom part of the lower arm. The crosshairs also mark the centre of the rotation point that will later be used when placing the bones. Before placing the bones we can align the group transformation widgets (press control and move the left corner vertex of the group transformation widget to move it.) from the lowerArm group and the hand group with the crosshairs of the elbow and the wrist to check the rotation. Don’t forget to bring the arm into its original position by pressing undo. (Don’t worry if the hand does not rotate with the elbow when you try the elbow joint.)

Adding the bones

Now it’s time to add a skeleton layer that will provide the bones we need to rig the arm. Right click on the Layers Panel and choose new layer/other/skeleton. A new skeleton layer will appear in the Layers Panel alongside with a small bone in the canvas. (pic. Arm04 and layers03) Put the skeleton layer above the arm group. To know more about the skeleton layer and bones click here. The green vertex above the blue vertex of the bone is used to move the bone in place and is also its centre of rotation. The blue vertex is used to rotate the bone. The green vertex under the blue one is used to stretch the bone. The first bone is the parent bone and should be moved toward the shoulder and stretched so that it almost reaches the outlines of the first crosshair of the elbow. Right click on any of the vertices of the parent bone and select create child bone. Move the rotation point of the child bone so that it matches the crosshair of the elbow and stretch it until it almost reaches the crosshair of the wrist. Right click on any of the vertices of the child bone and create another child bone. Move the centre of the second child bone so that it matches the crosshair of the wrist. Stretch the bone until it reaches the end of the fingers.

Attaching the bones

Now that the skeleton is in place we have to attach the bones to the parts of the arm. In the layers panel click on the upper arm group, right click and select all the children. Then press ctrl-a in the canvas window. With everything in the upper arm group highlighted, ctrl click on the parent bone in the canvas window and right click on any of the vertices of the parent bone and click link to bone. The upper arm group is now linked to the parent bone. Go the layers panel again and select the lower arm group. Right click and select all the children. Press ctrl-A in the canvas window and ctrl-click on one of the bones. Then right click on any of the vertices of the first child bone and select link to bone. The lower arm group is now linked to the second child bone. In the layers panel select all the children of the hand layer and press ctrl-a in the canvas window. Ctrl click on any bone and then right click on any of the vertices of the second child bone and select link to bone. The hand is now linked to the second child bone and the entire skeleton is now linked to the arm.