夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

【Clip Studio Paint】虫を描く方法

BeeClusterに登場する虫を描く方法はこんな感じでやってます。
基本的には写真をトレースしています。
絵を描くソフトは、

ペンタブレットを使っています。

最初に、新規キャンパスを作成します。
私はいつも1200x1200ピクセルのサイズにして書き出しの時に実際のサイズを調整しています。
「表示>グリッド」でグリッドを表示すると中心位置やバランスが取りやすいです。
f:id:takujidev:20130524223040j:plain
次に参考にする写真を「ファイル>読み込み>画像」で表示し、中心位置、角度を合わせます。
f:id:takujidev:20130524223457j:plain
画像レイヤーの不透明度スライダーを下げて自分が描く絵が見えやすいようにします。
f:id:takujidev:20130524223634j:plain
新規ベクターレイヤーを作り、ペンで輪郭をなぞって行きます。ベクターレイヤーなので多少ずれても後から直せますので気にせずになぞります。あまりにずれているところはベクター線の修正をします。ガタガタになってしまったところはベクター線単純化を掛けるとすっきりします。
f:id:takujidev:20130524223835j:plain
ラスターレイヤーを作成し、先ほどのベクターレイヤーを参照レイヤーにし、黒で塗りつぶして行きます。塗り残し部分は「塗り残し部分に塗る」ツールで埋めていきます。
f:id:takujidev:20130524224241j:plain
ラスターレイヤーを作成し、模様部分の目の部分を同様に塗りつぶしツールで塗ります。色の違う部分はレイヤーを分けておくと後から色の調整などがやりやすくなります。
f:id:takujidev:20130524224344j:plain
黒で塗ったレイヤーの上にラスターレイヤーを作成し、「下のレイヤーでクリッピング」をONにします。こうすると下のレイヤーからはみ出さずにぬることができます。
写真を参考に、ブラシ濃度を下げた柔らかブラシでハイライト部分を白で描いて行きます。茶色い部分なども適当に書き込みます。トンボは黒いので陰は描き込んでいませんが、描く場合はハイライトとは別のレイヤーを使います。
f:id:takujidev:20130524224805j:plain
目を塗ったレイヤーの上にラスターレイヤーを作成し、ブラシで目のグラデーションを書き込みます。
f:id:takujidev:20130524225112j:plain
ベクターレイヤーを作成し、前羽のフチを描きます。別のベクターレイヤーに前羽の網目部分を描いて行きます。ベクター線の線幅修正機能でフチの部分と網目の部分をそれぞれ「一定の太さにする」機能を使って線幅を細めに整えます。フチより網目の線を若干細めにします。その後レイヤーを統合します。f:id:takujidev:20130524225551j:plain
同様に後羽を描きます。
f:id:takujidev:20130524225635j:plain
とりあえず完成しました。
f:id:takujidev:20130524225740j:plain
羽の2つのレイヤーをレイヤーフォルダーにいれてコピーし、回転、メッシュ変形などを使い、羽ばたいている位置に調整します。
f:id:takujidev:20130524230252j:plain
元の羽のレイヤーフォルダーをさらにもう一個コピーし、逆の方向にはばていている状態を表現します。多少変でもアニメーションさせてしまえばそれなりに見えるので問題ありません。
f:id:takujidev:20130524230254j:plain
用紙レイヤーを見えないようにした状態で、「ファイル>画像を統合して保存>pngで画像ファイルを出力します。このとき適当なサイズに縮小します。羽を羽ばたいた状態になるように表示レイヤーを切り替え、同様に出力します。
f:id:takujidev:20130524230427j:plain
出力時にはdragonfly0.png, dragonfly1.png,dragonfly3.pngのようなファイル名をつけます。dragonfly2.pngはdragonfly0.pngをコピーしてリネームします。
あとは、TexturePackerで他の虫がすでに統合してあるスプライトシートにこれらの4つのファイルをドラッグし、書き出します。
TexturePackerの使い方はこちらをご参照ください。
cocos2dでスプライトのアニメーションをする方法はこちらをご覧ください。