トップ > 知っておきたい機能 > グリースペンシルと2Dアニメーション >
アーマチュアによるアニメーション(その2)

  

アニメーションをつける(続き)

前の記事の『アーマチュアによるアニメーション』からの続きです。 この記事では、引き続きキャラクタを描きます。

キャラクタを描く(胴体)

前の記事でクマの頭部が完成しましたので、ここからは胴体(体・腕・足)を描いていきます。 なお、胴体は頭部と同じオブジェクトに描きます。 つまり、頭部に描き足していきます

1. ドローモードに切り替える
1. ドローモードに切り替える

上図のようにドローモードに切り替えます。

では胴体(体・腕・足)を描き足していきますが、まずは体の土台となる三角形を描きます。 ただし、三角形ツールなんてものはありません。 円ツールで三角形を描きます。

  
メッシュのプリミティブ(基本図形)の "Circle" が実は多角形であるように、グリースペンシルの円ツールも実は多角形ツールです(前の記事で説明したように、円ツールで描いた円のストロークは96角形です)。
2. ツールバーの円ツールを選択
2. ツールバーの円ツールを選択

上図のように3D Viewportの左端にあるツールバーから円ツールを選択します。

このまま図形を描くと96角形になってしまいます。 三角形にするには角数を変更する必要があります

3. 3D ViewportのヘッダのSubdivisionsを 1 に変更する
3. 3D ViewportのヘッダのSubdivisionsを 1 に変更する

上図のように3D ViewportのヘッダのSubdivisionsを 1 に変更します。 描かれる図形は、Subdivisions + 2 の角数になります。 よって、Subdivisionsが 94 なら 96角形に、1 なら三角形になります。

  
Subdivisionsには 0 を設定することもできます。 その場合には直線が描かれます。
4. SHIFTキーを押しながらドラッグする
4. SHIFTキーを押しながらドラッグする

上図のように頭部のやや下をSHIFTキーを押しながらドラッグします。 赤色の矢印はドラッグの動きを表しています。

5. 正三角形が描かれる
5. 正三角形が描かれる

上図のように三角形が描かれます。 SHIFTキーを押しながらドラッグしたため正三角形になりました。 では、Enterキーを押して確定しましょう。

6. 回転させて角度を調整する必要がある
6. 回転させて角度を調整する必要がある

上図のように三角形が描かれますが、傾きの調整が必要です。 頂点の1つが真上に向くように回転させましょう

すでに引いたストロークの加工はエディットモードで行います。

7. エディットモードに切り替える
7. エディットモードに切り替える

上図のようにエディットモードに切り替えます。

8. 体のストロークを選択する
8. 体のストロークを選択する

上図のようにストローク選択モードで体のストロークを選択します

では、選択中のストロークを回転させましょう。 30度回転させると頂点の1つが真上に向きます。 キーボードのRを押し、続けて、30 -> Enterキーを入力します。

9. 30度回転させる
9. 30度回転させる

上図のように選択中のストロークが30度回転し、頂点の1つが真上に向きます

さらに位置の調整も必要です。 キーボードのGを押して適切な位置に移動し、マウスの左ボタン(マウスの左ボタン)のクリック(またはEnterキー)で確定しましょう。

10. 体に見える位置に移動する
10. 体に見える位置に移動する

上図のように体に見える位置に移動しましょう。 うん、体っぽくなってきました。


次に、この体のストロークにマテリアルを割り当てます。 現状、黒色のStroke(境界線)のみでFill(内部の塗り)は持っていないので、体には見えません。 前の記事で用意したマテリアル "Skin" を割り当てましょう

11. マテリアルスロットで "Skin" を選択し[Assign]ボタンを押す
11. マテリアルスロットで "Skin" を選択し[Assign]ボタンを押す

上図のようにMaterial Propertiesのマテリアルスロットの一覧から(1)の "Skin" を選択し、一覧の下にある(2)の[Assign]ボタンを押します。

12. マテリアル "Skin" が割り当てられる
12. マテリアル "Skin" が割り当てられる

上図のように選択中のストロークにマテリアル "Skin" が割り当てられます。 体っぽくなってきました。 が、まだ問題があります


何が問題なのかは、表示倍率を上げるとわかりやすいです。 表示モードを『ローカルビュー』に切り替えましょう。 キーボードのテンキーの/(スラッシュ)を押します。

13. 表示モードがローカルビューに切り替わる
13. 表示モードがローカルビューに切り替わる

上図のように表示モードがローカルビューに切り替わります。 何が問題なのかじっくりと見てみましょう。

そうです。 体のストロークが、頭部よりも手前に位置しているのです。 初期設定のままグリースペンシルで図形を描くと、最前面に描かれてしまうためです

  
3D Viewportのヘッダの "Draw Strokes on Back" をオンすることで、既存のストロークの背面に描き足されるようになります。 ただし、今回はその方法は使いません。

今回は、選択中の体のストロークを頭部よりも背面に移動します。 つまり、すでに引かれたストロークの重なりの順序を入れ替える、ということです。

14. Stroke -> Arrange -> Send to Backを実行
14. Stroke -> Arrange -> Send to Backを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Arrange" -> "Send to Back"を実行します。

15. 重なりの順序が入れ替わる
15. 重なりの順序が入れ替わる

上図のように重なりの順序が入れ替わります。 ただし、まだ頭部の後ろには移動していません。 口のストロークよりは後ろにありますが、それ以外のストロークよりは、まだ手前にあります

なぜでしょうか。 理由は、体のストロークはレイヤ "Strokes" に配置されているからです。 前の記事でカーブツールで口を描く時に、レイヤを "Strokes" に切り替えました。 以降、レイヤは切り替えていません。 よって、体のストロークはレイヤ "Strokes" に配置されたのです。

  
ストロークの重なりの順序が、レイヤの重なりの順序を越えることはありません。

というわけですので、レイヤ "Fills" への移動が必要です。 体のストロークをレイヤ "Fills" に移動させましょうキーボードのMを押します

16. 一覧から "Fills" を選択する
16. 一覧から "Fills" を選択する

上図のように"Change Active Layer"というタイトルのメニューが表示されますので、一覧から "Fills" を選択します。

17. レイヤを移動しただけでは変化はない
17. レイヤを移動しただけでは変化はない

上図のようにレイヤを移動しただけでは変化はありません。 再度、重なりの順序を最背面にする必要があります。

18. Stroke -> Arrange -> Send to Backを実行
18. Stroke -> Arrange -> Send to Backを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Arrange" -> "Send to Back"を実行します。

19. 体のストロークが頭部よりも背後に移動する
19. 体のストロークが頭部よりも背後に移動する

上図のように体のストロークが頭部よりも背後に移動します。


続いて、体のストロークを加工して腕を形作ります。 現状、三角形で3つの点しかありませんが、点を増やして腕にします。

では、表示モードをグローバルビューに戻しましょう。 キーボードのテンキーの/(スラッシュ)を押します。

20. 表示モードがグローバルビューに戻る
20. 表示モードがグローバルビューに戻る

上図のように表示モードがグローバルビューに戻ります。

では、体のストロークの点を増やしましょう。 点の単位で加工しますので、点選択モードに切り替えます。

21. 点選択モードに切り替える
21. 点選択モードに切り替える

上図のように点選択モードに切り替えます。

  
キーボードの 1 を押すことでも点選択モードに切り替えることができます。

では、点を増やします。 前の記事でも利用した細分化の機能を使いましょう

22. 3点とも選択されていることを確認する
22. 3点とも選択されていることを確認する

上図のように体のストロークが3点とも選択されていることを確認します。 選択されていなければ選択してください

23. Stroke -> Subdivideを実行
23. Stroke -> Subdivideを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Subdivide"を実行します。

24. 新たな点が増える
24. 新たな点が増える

上図のように選択中の点と点の間に新たな点が増えています。 計6つの点となりました

ではここで、右半分(画面向かって)を削除します。 左半分(画面向かって)で腕を作り、それを複製 + 反転して両腕とするためです。

25. 右下の頂点と右辺の中間の点を選択する
25. 右下の頂点と右辺の中間の点を選択する

上図のように右下の頂点と右辺の中間の点を選択します。 では、これらの点を削除しましょう。 キーボードのXを押します

26. Pointsを実行
26. Pointsを実行

上図のようにDeleteメニューが表示されますので、"Points"を実行します

27. 右半分(画面向かって)が削除される
27. 右半分(画面向かって)が削除される

上図のように画面向かって右半分が削除されます。

では、残された左半分に点を増やし、それを腕として伸ばしましょう。

28. 左下の頂点と左辺の中間の点を選択する
28. 左下の頂点と左辺の中間の点を選択する

上図のように左下の頂点と左辺の中間の点を選択します。 では、選択中の2点の間に点を増やしましょう

29. Stroke -> Subdivideを実行
29. Stroke -> Subdivideを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Subdivide"を実行します。

30. 新たな点が増える
30. 新たな点が増える

上図のように新たな点が増えます。

腕を形作るにはまだ点が足りません。 さらに増やしましょう。

31. 左辺の中心寄りの2点を選択する
31. 左辺の中心寄りの2点を選択する

上図のように左辺の中心寄りの2点を選択します。

32. Stroke -> Subdivideを実行
32. Stroke -> Subdivideを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Subdivide"を実行します。

33. 新たな点がさらに増える
33. 新たな点がさらに増える

上図のようにさらに点が増えました。 あと、もう1つだけ点を増やしましょう

34. 左辺の中間の点とその上の点を選択する
34. 左辺の中間の点とその上の点を選択する

上図のように左辺の中間の点とその上の点を選択します。

35. Stroke -> Subdivideを実行
35. Stroke -> Subdivideを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Subdivide"を実行します。

36. さらに新たな点が増える
36. さらに新たな点が増える

上図のようにさらに新たな点が増えます。 これで、腕を形作るのに必要な点が揃いました

37. 左辺の中心寄りの2点を選択する
37. 左辺の中心寄りの2点を選択する

上図のように左辺の中心寄りの2点を選択します。 では、この2つの点を10時の方向へ移動しましょう。 キーボードのGで移動を開始し、マウスの左ボタン(マウスの左ボタン)のクリック(またはEnterキー)で確定します。

38. 腕となる位置へ移動する
38. 腕となる位置へ移動する

上図のように腕の先端となる位置へ移動します。 ただし、形が不格好です。 腕の先端・腕の付け根の計4つの点をそれぞれ移動し、腕の形に近づけましょう。

39. 腕を形作る
39. 腕を形作る

上図のように腕を形作ります。 体の左半分はこれで完成とします。 後は、これを複製して反転すれば右半分も揃います。

40. ストローク選択モードに切り替える
40. ストローク選択モードに切り替える

上図のようにストローク選択モードに切り替えます。

  
キーボードの 2 を押すことでもストローク選択モードに切り替えることができます。

では、体のストロークを選択しましょう。

41. 体のストロークを選択する
41. 体のストロークを選択する

上図のように体のストロークを選択します。 ただし、まだ複製も反転も実施しません。 その前にやるべきことがあります。

体のストロークを、反転の中心よりも左へ移動させることです。 複製して反転した際に、複製元と複製先が重ならないようにするためです

今回の反転では、中心は "Active Element" ではなく "3D Cursor" にします。 よって、3Dカーソルよりも左へ位置するように移動しなくてはなりません。 まずは、3Dカーソルを表示しましょう。

42. Viewport Overlaysの3D Cursorをオンにする
42. Viewport Overlaysの3D Cursorをオンにする

上図のようにViewport Overlaysの3D Cursorをオンにします

43. 3Dカーソルが表示される
43. 3Dカーソルが表示される

上図のように3Dカーソルが表示されます。 では、体のストロークが3D体のストロークよりも左へ位置するように移動させてください。

44. 体のストロークを3Dカーソルよりも左へ移動する
44. 体のストロークを3Dカーソルよりも左へ移動する

上図のように体のストロークを3Dカーソルよりも左へ移動します。

これで複製の準備ができました。 キーボードのSHIFT + D -> Enterを押してください

45. 体のストロークが複製される
45. 体のストロークが複製される

上図のように体のストロークが複製されます(見た目ではわかりません)。

次に、反転に備えて加工の中心が3Dカーソルの位置となるように設定します

46. 中心位置選択リストを "3D Cursor" に変更する
46. 中心位置選択リストを "3D Cursor" に変更する

上図のように中心位置選択リストを "3D Cursor" に変更します。 これで、拡大縮小の中心が3Dカーソルの位置になりました

では、反転させます。 キーボードのCTRL + Mを押し、続けて、X -> Enterキーを入力します。

47. 左右が揃う
47. 左右が揃う

上図のように左半分が反転して右半分となります。 これで体のストロークが左右とも揃いました

では、中心位置選択リストを "Median Point" に戻しておきましょう。

48. 中心位置選択リストを "Median Point" に戻す
48. 中心位置選択リストを "Median Point" に戻す

上図のように中心位置選択リストを "Median Point" に戻します。

複製された右半分はレイヤ "Fills" の最前面にあります。 最背面へ移動させましょう。

49. Stroke -> Arrange -> Send to Backを実行
49. Stroke -> Arrange -> Send to Backを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Arrange" -> "Send to Back"を実行します。

50. 体のストロークの右半分が最背面へ移動する
50. 体のストロークの右半分が最背面へ移動する

上図のように体のストロークの右半分が最背面へ移動します。

次に、体のストロークの左右を結合します。

51. 体のストロークの左半分と右半分を選択する
51. 体のストロークの左半分と右半分を選択する

上図のように体のストロークの左半分と右半分を選択します。 では、選択した2つのストロークを結合して1つのストロークにしましょう

52. Stroke -> Join -> Joinを実行
52. Stroke -> Join -> Joinを実行

上図のように3D Viewportのプルダウンメニューの"Stroke" -> "Join" -> "Join"を実行します(またはキーボードのCTRL + Jを押します)。

53. 1つのストロークになる
53. 1つのストロークになる

上図のように体のストロークが1つに結合されます。 ただし、上部に穴が空いており閉じたストロークにはなっていません

このままでも制作する2Dアニメーションには問題ありませんが、一応閉じておきましょう。 メッシュの穴埋めと同じくキーボードのFで穴埋めすることができます。 キーボードのFを押してください

54. 上部が閉じられる
54. 上部が閉じられる

上図のように体のストロークの上部が閉じられます。 これで胴体を構成する体・腕・足のうち、体と腕が完成しました。 残すは足だけとなりました

ではここで、3Dカーソルを非表示に戻しておきます。

55. Viewport Overlaysの3D Cursorをオフにする
55. Viewport Overlaysの3D Cursorをオフにする

上図のようにViewport Overlaysの3D Cursorをオフにします

56. 3Dカーソルが非表示になる
56. 3Dカーソルが非表示になる

上図のように3Dカーソルが非表示になります。


最後に足を描き足します。 耳と同じく、濃い茶色の円の中に淡い肌色の円を描きます。 なお、円は真円ではなく楕円とし、まだ外側に少し傾けます

57. ドローモードに切り替える
57. ドローモードに切り替える

上図のようにドローモードに切り替えます。

では、楕円で足を描きましょう。 円ツールに切り替えます。

58. ツールバーの円ツールを選択
58. ツールバーの円ツールを選択

上図のように3D Viewportの左端にあるツールバーから円ツールを選択します。

では、右足から描きます。 体のストロークの(画面向かって)左下の頂点に重なるように楕円を描きます。

59. 体のストロークの左下の頂点をドラッグする
59. 体のストロークの左下の頂点をドラッグする

上図のように体のストロークの左下の頂点に重なるようにマウスの左ボタン(マウスの左ボタン)でドラッグします。 赤色の矢印はドラッグの動きを表しています。

60. 三角形で描かれる
60. 三角形で描かれる

上図のように三角形で描かれます。 理由は、3D ViewportのヘッダのSubdivisionsが 1 になっているからです。

このままEnterキーで確定し、CTRL + Zで取り消しましょう。 取り消したら3D ViewportのヘッダのSubdivisionsの値を変更します

61. 3D ViewportのヘッダのSubdivisionsを 20 に変更する
61. 3D ViewportのヘッダのSubdivisionsを 20 に変更する

上図のように3D ViewportのヘッダのSubdivisionsを 20 に変更します。 これにより、円ツールでは22角形が描かれるようになります

では、先ほどと同じ要領で右足を描いてください。

62. 右足が描かれる
62. 右足が描かれる

上図のように右足が描かれます。 この部分は右足の外側を表現します。

次に、この上に肌色の少し小さな円を重ねます。 ただし、マテリアルを "Light Skin" に切り替えて描くことはしません

マテリアル "Skin" で楕円を描き、その後にマテリアル "Light Skin" で塗りつぶします。 塗りつぶしツールを説明しておきたいので、そのような手順にしました。

では、マテリアル "Skin" のままで少し小さな楕円を描きます。 ただし、描く場所は本来の描画位置ではなく、やや離れた位置に描きます。 説明の都合上、その方がいいので。

63. やや離れた位置に少し小さな楕円を描く
63. やや離れた位置に少し小さな楕円を描く

上図のようにやや離れた位置に少し小さな楕円を描きます。 マテリアル "Skin" で描きましたので濃い茶色で描かれています

では、この楕円をマテリアル "Light Skin" で塗りつぶしましょう。

64. ツールバーの塗りつぶしツールを選択
64. ツールバーの塗りつぶしツールを選択

上図のように3D Viewportの左端にあるツールバーから塗りつぶしツールを選択します(またはキーボードのSHIFT + スペースキー -> 1を押します)。

次に、マテリアルを切り替えます。 3D Viewportのヘッダから切り替えましょう。

65. マテリアルの "Light Skin" に切り替える
65. マテリアルの "Light Skin" に切り替える

上図のように3D Viewportのヘッダのマテリアルの一覧から "Light Skin" を選択します。

では、塗りつぶしましょう。 塗りつぶしたい場所をマウスの左ボタン(マウスの左ボタン)でクリックします。

66. 右足の内側の楕円をクリックする
66. 右足の内側の楕円をクリックする

上図のように右足の内側の楕円をマウスの左ボタン(マウスの左ボタン)でクリックします。

67. 右足の内側の楕円が塗られたように見える
67. 右足の内側の楕円が塗られたように見える

上図のように右足の内側の楕円が、選択していたマテリアル "Light Skin" で塗られます。 ただし、実は塗りつぶされたのではなく、新たな楕円のストロークが追加されています

エディットモードに切り替えるとわかりやすいです。

68. エディットモードに切り替える
68. エディットモードに切り替える

上図のようにエディットモードに切り替えます。 では、右足の内側の楕円を本来の位置まで移動してみましょう。

69. 右足の内側の楕円を選択する
69. 右足の内側の楕円を選択する

上図のように右足の内側の楕円を選択します。 では、キーボードのGを押して、右足の外側の楕円の上に重ねましょう

70. 右足の内側の楕円を外側の楕円の上に重ねる
70. 右足の内側の楕円を外側の楕円の上に重ねる

上図のように右足の内側の楕円を外側の楕円の上に重ねます。

71. 塗りつぶし前の楕円が残っている
71. 塗りつぶし前の楕円が残っている

上図のように塗りつぶし前の楕円が残っていることがわかります。 このように塗りつぶしツールで塗りつぶすと、塗りつぶされるべき領域の形状で新たなストロークが作成されます。 既存のストロークのマテリアルの割り当てが変更されるわけではありません。

では、この不要な元の楕円を削除しましょう。

72. 不要な楕円を選択する
72. 不要な楕円を選択する

上図のように不要な楕円を選択します。 選択したらキーボードのXを押します。

73. Strokesを実行
73. Strokesを実行

上図のようにDeleteメニューが表示されますので、"Strokes"を実行します

74. 選択していたストロークが削除される
74. 選択していたストロークが削除される

上図のように選択していたストロークが削除されます。

では、右足の仕上げとして少し外側に傾けます。 右足の外側と内側の楕円を2つとも選択します。

75. 右足の外側と内側の楕円を2つとも選択する
75. 右足の外側と内側の楕円を2つとも選択する

上図のように右足の外側と内側の楕円を2つとも選択します。

では、選択中の楕円を傾けます。 キーボードのRを押して少し外側に回転させ、マウスの左ボタン(マウスの左ボタン)のクリック(またはEnterキー)で確定します。

76. 右足を外側に傾ける
76. 右足を外側に傾ける

上図のように右足を外側に傾けます。 これで右足は完成としましょう。

では、完成した右足を複製して反転し、左足にします。 キーボードのSHIFT + D -> Enterを押して複製します

77. 右足が複製される
77. 右足が複製される

上図のように見た目にはわかりませんが右足が複製されます。

では、複製されたストロークを反転して左足にします。 ただし、反転する前に中心位置選択リストを "Active Element" に変更しておきます

78. 中心位置選択リストを "Active Element" に変更する
78. 中心位置選択リストを "Active Element" に変更する

上図のように中心位置選択リストを "Active Element" に変更します。 これで、拡大縮小の中心がオブジェクト中心(オブジェクト中心)になります。

では、反転させます。 キーボードのCTRL + Mを押し、続けて、X -> Enterキーを入力しましょう。

79. 左足の位置へ移動する
79. 左足の位置へ移動する

上図のように左足の位置まで移動します。 これで左足も完成です。 両足とも揃いました

では、中心位置選択リストは "Median Point" に戻しておきましょう。

80. 中心位置選択リストを "Median Point" に戻す
80. 中心位置選択リストを "Median Point" に戻す

上図のように中心位置選択リストを "Median Point" に戻しましょう。

次の記事へ

長くなりましたので、ここで一区切りします。 続きは次の記事を参照ください

  
  

まとめ

ドローモードの円ツールは、実は多角形ツールです。 3D ViewportのヘッダのSubdivisionsで設定した値 + 2の角数の多角形が作成されます。 初期値の 94 であれば 96角形が、1 であれば三角形が、0 にすると直線が描かれます。

新たにストロークを描画すると、既存のストロークよりも前面に配置されます。 背面に配置したければ、3D Viewportのヘッダの "Draw Strokes on Back" をオンして描画する必要があります。

すでに描かれてしまったストロークの重なりの順序を入れ替えることもできます。 なお、重なりの順序がレイヤの上下関係を越えることはありません。

操作/コマンド 説明
(3D Viewportのプルダウンメニュー)
"Stroke"
-> "Arrange"
-> "Bring to Front"
選択中のストロークを最前面へ移動する
(3D Viewportのプルダウンメニュー)
"Stroke"
-> "Arrange"
-> "Bring Forward"
選択中のストロークを前面へ移動する
(3D Viewportのプルダウンメニュー)
"Stroke"
-> "Arrange"
-> "Send Backward"
選択中のストロークを背面へ移動する
(3D Viewportのプルダウンメニュー)
"Stroke"
-> "Arrange"
-> "Send to Back"
選択中のストロークを最背面へ移動する

ストロークは結合することができます。 結合で隙間ができてしまった場合は穴埋めすることもできます。

操作/コマンド 説明
(3D Viewportのプルダウンメニュー)
"Stroke"
-> "Join"
-> "Join"
選択中の複数のストロークを結合する
F 閉じていないストロークを閉じる

塗りつぶしツールでは、ストロークを塗りつぶすことができます。 ただし、クリックしたオブジェクトのマテリアルの割り当てが変更されるわけではなく、新たなストロークが作成されます。

ツール 機能
塗りつぶしツール マウスの左ボタン(マウスの左ボタン)でクリックした領域を塗りつぶす
 
メニュー