読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

2Dキャラクタを描く! その1:Inkscape

 こちらの記事で描いたキャラクタの下絵を元にInkscapeで描きます。
mmorley.hatenablog.com
 最終的には、体をパーツごとに分けて、Cocos Creaorでアニメーションにしたいと考えています。

使用環境

 私が使用している環境です。

作業の流れ

 まず下絵をトレースします。

ノード(点)を置く

 いきなり曲線で描かずに、まずはノード(点)を置いていきます。
 ノードは、角になる所には必ず置きます。
 それから曲線部分は、山の一番高い部分や、曲がり具合が変化する部分に置きます。
 あとから調整するので、だいたいです。
 ペンツールf:id:mmorley:20160510114330p:plainで、外周をポチポチとクリックします。
 こんな感じです。
f:id:mmorley:20160510114621p:plain:w250

ノードを調整してストローク(線)を下絵に沿わせる

 ノードは、下記のボタンで調整します。

f:id:mmorley:20160512105534p:plainシャープ1回押すとハンドルを左右別々に動かす
2回押すとハンドルを削除
f:id:mmorley:20160512105851p:plainスムーズハンドルを左右1直線にする
長さは左右別々
f:id:mmorley:20160512105903p:plain左右対称ハンドルを左右1直線にする
長さは左右同じ
f:id:mmorley:20160512105914p:plain自動スムーズハンドルを左右1直線にする
長さは自動調整
 ノードの追加と削除は下記のボタンで行います。
f:id:mmorley:20160513003004p:plainノードを追加ストローク(線)を選択してストローク上に追加
または2つのノードを選択してノード間に追加
f:id:mmorley:20160513003014p:plainノードを削除選択したノードを削除

ノードの調整の例

 『ノードツールf:id:mmorley:20160510114807p:plain』でノードを選択して
f:id:mmorley:20160513001119p:plain:w150
 『左右対称f:id:mmorley:20160512105903p:plain』で曲線にして
f:id:mmorley:20160513001356p:plain:w150
 『シャープf:id:mmorley:20160512105534p:plain』を1回押してハンドルが左右別々に動くようにして
f:id:mmorley:20160513001631p:plain:w150
 折れた部分に沿わせます。
 
 上記の様な調整をしながら作業を進めていきます。
f:id:mmorley:20160512111627p:plain:w250
 下絵の線の外側をトレースしています。
f:id:mmorley:20160512111904p:plain:w120
 今度は顔の部分をトレースします。
f:id:mmorley:20160512131403p:plain:w250
 試しに塗りつぶてみるとこうなります。
f:id:mmorley:20160512131753p:plain:w250
 線画の部分に線の強弱が出来ています。
 
 同様に、全ての線の内と外をトレースしました。
 頭です。
f:id:mmorley:20160513104758p:plain:w300
 体です。
f:id:mmorley:20160513104810p:plain:w450
 パーツの回転を考えて、隠れるところも丸く書いています。
 
 やっとこさここまで出来ました。
 ささっと出来るようになりたいです。
 
 今回はここまでです。

あとがき

 下絵の線を全部ストロークで描いて『ストロークをパスに変換』で線画を描く方法も考えましたが、
 ノードがやたら多く生成されたり場合があるのと、
 線の太さの強弱を付ける場合を考えて今回の方法を取りました。

広告を非表示にする