Inkscapeでゲーム用キャラクターを描く

最終更新日28 Mar 2017 07:03

inkscape-charactor.png
今回、私の子供が泣いて怖がってたsassyの豚の人形をゲームの敵キャラクター化しようと思います。
子どもに嫌われるんだからきっと敵キャラとしてぴったりだろう

Inkscapeで描く意義

ベクターデータで描いて、アニメーションを容易に実現しようという目論見です。
最終的にはドット絵にする予定ですが、ドット絵でgifアニメみたいに歩いている様子を表現するのに
ベクターデータで作ったパーツを動かして作ろうと思います。

下絵をスケッチする

まず下絵を描きます。なるべく白黒はっきりと
sassypig.png piggreal.jpg

右はモデルとなった豚のぬいぐるみです。
Inkscapeで新しくファイルを作ります。正方形の方が何かと都合がよいでしょう。
テクスチャとして貼る時は正方形だったらエラーになりません。
600x600ピクセルで作ってみます。
Inkscapeのメモリが250,500となってるので500x500ピクセルの方が作りやすかったかも。。
単位はmmとかA4だとかは関係ありません。印刷しないのでピクセルで統一しましょう。
Shift+Ctrl+Dで出てくる「ドキュメントのプロパティ」で
Inkscapeにインポートします。ドラッグ&ドロップでもいいしファイル->インポートでもできます。

ドキュメントの設定をゲーム向けに使いやすく変える

単位をmmからピクセルに

Shift+Ctrl+Dで出てくる「ドキュメントのプロパティ」でDisplay Unitpxに変えます。
ゲームに使うならピクセルが都合がよいでしょう。
Display Unitを変えると、Inkscapeの上と左に出てる定規(ruler)の単位がピクセルに変わります。
拡大縮小のScaleも1に変えましょう。

背景を市松模様にする

Shift+Ctrl+Dで出てくる「ドキュメントのプロパティ」で
Background->Checkerboard backgroundにチェックを入れます☑

下書きをセット

adjust.png Ctrlを押しながら縦横比を維持しながら拡大縮小しましょう
transparent.png 下書きの透明度を下げます。Shift+Ctrl+Fで出てくる「フィル/ストローク」で不透明度を設定できます。下書きを半透明にするのは、下書きを上から重ねた方がわかりやすいからです。
guide.png 上下中央にガイドを登場させました。ガイドは縦線は左端からドラッグ、横線は上端からドラッグしてひっぱります。ガイドの引き方の詳細は[1]のページがわかりやすかったです。どこが真ん中なのかは上のルーラー(定規)を数えてちまちま合わせました。下書きの位置が決まったらロックします。ロックはObjectsから南京錠のようなマークを押すとできます。ロックするとマウスでクリックしても動かないので手が滑っても大丈夫☆彡

描画

パレットの設定

paletteswitch.png デフォルトのパレットの色はビビッドすぎてイマイチなので。画面右下の黒い三角▶を押してパレットをAutoに切り替えます。パレットがAutoだと自分で色を作ってSwatchで追加したら、下のパレットにどんどん追加されていきます。色が一元管理できるし、同じ色を繰り返し使うことができるので便利です。今回のゲームのキャラクターの場合、わかりやすくなるべく少ない色数で作る予定なのでこのAutoでの色管理がぴったりなのでAutoを使うことにします。

胴体を描画

torso.png 新しく描き始めるとどんどん手前に追加されていくので、なるべく奥の方から描いていくことにします。なので胴体を描きます。なるべく楕円や四角形に形が近いものはペンツール(Shift+F6)よりも楕円(F5)や四角形(F4)を利用して描きます。その方が楽に描けます。楕円や四角形で大まかに描いてから後でオブジェクトをパスに変換して形を微調整していきます。左の図早速使った色に名前をつけていきました。下のパレットにピンクと青が反映されています。draw-ellipse.png楕円ツールはShiftを押すと中心から描き始めることができます。何も押さない時は左下から描き始まります
sketchup.png 形がよくわからなくなったのでObjectsダイアログから下書き(sketch)を上に重ねてみました。楕円をパスに変換して。パス->オブジェクトをパスに変換でパスに変換します。そうするとノード一個一個いじることができます。変換直後の段階では4つしかノードがありません。F2tool-node-editor.pngノードツールモードにしてなのでノードを全選択してノードを追加node-add.pngします。するとノードが4個から8個に増えます。ノードを左右対称に2個ずつ選択して矢印キーで位置を調整したり、Ctrl+>Ctrl+<キーで拡大・縮小方向に移動させたりして調節します。描き終えたらロックしておくとよいでしょう。手が滑って移動しちゃった!というミスを防ぐことができます。

クローンを使って車輪をラクに作成

wheel-make.png まず車輪を一個作ります。胴体の時と同じように楕円からパスに変換して調整して作りました。そして車輪を選択した状態でAlt+Dでクローンを作成します。コピペではなくクローンで作る理由は、クローン元のオブジェクトを変形したら他の子オブジェクトも同じように変形が適用されて便利だからです。クローンを作成したら元いたオブジェクトと全く同じ場所に上に重ねて出てきます。マウスで動かすと斜めにずれてしまって厄介なので矢印キーで所望の位置にクローン作製した車輪を移動させて設置します
cloned.png クローンで車輪を作ったところです。3個目以降の車輪をクローン作成するときも、最初に選択した左上の車輪からクローンしておきましょう。矢印キーで大体の車輪の位置を合わせました。ここでちょっとぐらいずれてしまっていても大丈夫。dialog-align-and-distribute.png整理と配置ダイアログで上下左右揃えることができます。終わったら車輪はCtrl+Gでグループ化してロックしておきましょう

ear.png 次に耳を作ります。トレースするのは左右どちらか一方でok.あとでクローンします。右耳のスケッチの方が気に入ったので右耳をトレースします。複雑な形状なのでペンツールdraw-path.pngでトレースします。ペンツールではドラッグするとハンドルつきのノードができ、クリックするとハンドルなしのカクカクな線になるノードができます。なので尖らせたいところはクリックで、曲線にしたいところはドラッグして描きます。なるべくノードの数が少なくなるようにトレースするのがコツです。ノードの数が少ない方が管理がしやすいからです。ノードの数は少なく、なるべくハンドルで頑張って曲線に沿わせましょう。
mirror-ear.png 耳を描き、色をピンクにセットしたらAlt+Dでクローンします。左右逆にしたいのでHを押してオブジェクトを水平方向に反転します。
face.png 楕円とクローンを駆使して顔の大部分を描いたところです
mouse.png 口のところは楕円を描いて下半分の形を合わせてから白くて丸いハンドルを動かして半円にして作ります
mouse-end.png 口の半円のフィルをなくしてストロークだけにしました。
tail.png ペンツールで尻尾を描きました。たまに下書きを非表示にして出来栄えを確認します。

エンベロープ変形で模様を作る

ここで模様を作るのはあたらしいInkscapeファイルだとやりやすいでしょう。全選択がきくから。
dots.png まず模様の元となる水玉を楕円で描きます。模様はモデルとなったぬいぐるみを横から見て描きました。水玉はグループ化しておきます。
clip.png 切り抜く予定の領域を矩形で作ります
fill.png 切り抜く矩形を手前にして白のフィルで塗りつぶしておきます
clipped.png オブジェクト->マスク->設定でくりぬきます。後でパスエフェクトを有効にするために楕円はパスに変換Shift+Ctrl+Cしておきましょう。
pasted.png 貼り付けた状態です。90度回転してます。貼り付けた後、パスエフェクト(Shift+Ctrl+7)の「Perspective/Envelope」を追加します。
enveloped.png エンベロープ変形を施した状態です。はみ出しめに作ってます。はみ出した部分は後でくりぬきます
pig.png 水玉はクローン&水平反転してもう片方に貼り付けました。胴体部分をCtrl+D複製し、水玉よりも手前に置きます。コピー後の胴体は白いフィルにします。そしてオブジェクト->マスクを適用します。
inkscape-charactor.png 最後に実物のぬいぐるみを見ながら、顔などを微調整しました。

続きは->Inkscapeで作った絵をドット絵にする

Bibliography
2. 絵を描く仕事を始めたい! Illustratorキャラクター制作の教科書…イラレの本ですがとっても参考になりました。このページに書いてあるテクニックはほとんどこの本から学びました。

game-asset inkscape inkscape-mirror

サポートサイト Wikidot.com game-assetinkscapeinkscape-mirror