Inkscapeで作った絵をドット絵にする

最終更新日12 Mar 2017 13:32

Inkscapeでゲーム用キャラクターを描くのページで、下の絵のキモイ豚を作りました。
inkscape-charactor.png
次はこれを利用してゲームに利用するドット絵を作成しようと思います。
サイズは48x48にします。Unityのチュートリアルで出てきたドット絵のサイズが48x48だったからです。まず、作りながら様子を見るにはInkscapeのアイコンプレビューダイアログがお手軽です。
icon_preview.png
ベクターデータで良いかんじに作ったつもりの絵でも単純に縮小しただけではぼんやりしたドット絵になってしまいます。
なので、ベクターデータで作って目標サイズである48x48ピクセルに縮小したラスター画像を下絵として、
仕上げをGIMPなどの画像編集ソフトでやろうと思います。

歩いてる感を出したい

とりあえず、、、尻尾を左右に振らせてみたいと思います。
尻尾の部分をまずCtrl+Dで重複作成します。
1コマ前の絵を比較してどんな風に動かしたらよいか調整するためです。
そしてコピーしたやつを水平反転して、位置を調整します。
inverted.png
基本的に全部オブジェクトは残しておいて、pngにエクスポートするときには要らないやつを非表示にするのがよさそうです。

GIMPでアニメーションプレビュー

GIMPでレイヤー=1コマとして重ねると、gifアニメが作れます。
Inkscapeでポージングしたキャラを48x48pxの画像に出力しては
GIMPの

ファイル->レイヤーとして開く

でインポートして重ねていきます。
アニメの様子を確認するには

フィルター->アニメーション->再生

です。下の絵はGIMPを使って出力した48x48ピクセルサイズのgifアニメファイルです。
sassypig_anim.gif
。。。キモイですね。すみません
背景透過だと前のコマがそのまま残像みたいに残って変なかんじがしますが、
実際にゲームにする時はそうならないので、あくまでアニメーションの様子を見て、再調整するためのツールとして使います。

gif


files

サポートサイト Wikidot.com gif