シェルを描く
表情変化のみ、アニメ無しの簡単なシェル。
画力上達法とかCGを綺麗に描く方法とかはよくわからないので検索して他のサイトを調べてみてください。
用意するもの
・SAI体験版、GIMP、ピクトベア、Pixia等のレイヤー機能がついてるフルカラーお絵描きソフト（ここではSAIで説明）
・IrfanView日本語版
・EDGE等の256色エディタ
・Padie
・テキストエディタ（なんでも）
手順
下絵を描きます。何で描いても良いです。紙に描く場合スキャナでパソコンに取りこみます。
雑でいいのでどんな線がひいてあってどんな形をしてるのかわかるように。空白は少し余裕を持たせます。
この絵は後で縮小予定なので実際のシェルより大きく描いてます（この場合線も太めに描く。細かい部分は省略する）。この方法だと線の荒が目立ちにくくなります。
たまに左右反転上下反転すると絵の歪みがわかるかもしれません。
描いたらBMPで保存します。
下絵BMPをSAI等のお絵描きソフトで開き、レイヤー不透明度を5%ぐらいにします。
そして新規レイヤーを下絵の上の位置に作りそこに顔の中身（眉と目と口）以外の線を黒の鉛筆ツール等で描いていきます。(線の色は後から変更できるのでまずは黒で)
水彩タッチの絵はペンの濃度を薄くして重ねるように、アニメ塗りの絵は100%濃度の鉛筆ツールではっきりと描くと良いと思います。
下絵をなぞるんじゃなくて下絵は参考程度にして新しい絵を描くような心持ちがいいかも。
（後で縮小予定の絵はたまに縮小表示して絵が潰れないか確認）
ここで注意するのは白色のペンを消しゴム代わりに使わないこと。
（もしつかってしまったら一旦BMPに保存→SAIで開く→レイヤーメニュー内の「線画をレイヤー化」で線画レイヤーを作る。下絵の線をそのまま使う場合もこの方法で）
眉と目と口の線は新しいレイヤーを線画レイヤーの上に作ってそこに描きます。
線の色を変えたかったら線画レイヤー選択→「透明部分保護」にチェック→好きな色で「レイヤーを塗りつぶす」
レイヤーに名前は付けても付けなくても。どれがどれだかわかりにくかったら付けます。
下絵レイヤーの隣の目の形をしたアイコンをクリックし下絵レイヤーを非表示にし、
新しいレイヤーを線画の下に作って目や口以外の色を塗ります。
塗りレイヤーはここでは肌と服の模様と他の部分で分けてますが一つのレイヤーで塗ってもいいです。
ちなみにこの例では服の模様レイヤーは「乗算」に設定しています（セロファンを重ねたような感じになる）
メインとなる線画レイヤーの上、顔の中身の線画レイヤーの下に
新しいレイヤーを作ってそこで顔の中身の色を塗ります。
塗ったら「下のレイヤーと結合」で顔の中身の線と塗りを合成しちゃってもいいです。
絵を描くのを途中でやめたかったらpsd等のレイヤー情報が保存されるファイル形式で保存すると後で前と同じ状態から作業できます。
同じような感覚で必要な顔の表情差分を描いてきます。
表情によっては他の表情のレイヤーを「レイヤーを複製」でコピーし、それを改変して描くと楽。
全部描いたら表情ごとにBMPで一枚絵として保存します。
IrfanViewで好きなサイズに一括縮小します。そのままのサイズでシェルにするなら何もしなくていいです。
IrfanViewメニュー→ファイル→一括変換 を選択し
左の枠に縮小する画像をドロップ。
「このフォルダに保存する」ボタンを押し「ファイル形式の一括変換後にファイル名〜」にチェックを入れて変換するとやりやすいです。
名前の形式設定は「$N」の部分に元のファイル名が入ります。
そして「詳細設定を使用」にチェックし、「詳細設定」ボタンを押し設定ウィンドウを出します。
「リサイズ」にチェックを入れ縮小設定。ここでは50%にしてみました。「リサンプル処理を行う」にもチェックを入れた方が良いです。
設定が終わったら「OK」を押し前の画面に戻り「実行」
できた絵。
縮小できたら縮小前のBMPは捨ててOK。
次は土台になる絵（surface0000.png）以外は再びIrfanViewの一括加工で表情差分を切り取ります。これは容量削減のためです。
まずIrfanViewで表情部分(変化する部分)をドラッグし、四角で囲みます。
この時タイトルバーに出る「Selection: *, *; * x *」の「*」部分にある4つの数値をメモしておきます。ここでは「54, 52, 50, 48」です
後は一括変換設定で切り抜きにチェックを入れメモしておいた「54, 52, 50, 48」の数値をこんな風に入力し、土台となる絵以外をBMPで一括変換。（一括変換のやり方は上記参照）
ちゃんと切り取れたのを確認したらこれも加工前の絵は捨ててOK。
一番左：土台となる絵 他：表情差分
シェルに使うのはこの4枚です。
これらをPadieで255色PNGにします。
（IrfanViewでも減色できますが、あまり綺麗にできないのでお勧めしません）
「減色設定＞メイン」で「任意の数」にチェックを入れ「255」を入力します。
（一枚づつでも減色できますが「減色設定＞パッチ」で出力したいフォルダを設定しpngにチェックを入れ、複数ドラッグしてドロップしまとめて減色すると楽です）
減色後の絵が気に入らなかったら減色設定を変えてやり直します。
アニメ塗りならモード（なし）がおすすめ。
今回の例では全てモード（なし）で減色してみました。
土台となる絵をEDGEで開きます。
カラーパレットの一番右下のタイルをクリックし、下のバーを動かし絵に使ってない色(ここでは0,255,0にしてみました)に変えシェルになった時透過される部分をぬりつぶします。
広い部分は大きなペンか塗りつぶし、細かい部分は1pxのペンで。
左：輪郭線の周りに更に白い縁取り 右：元々ある輪郭線のみ
どちらにするかは好みで。右のようにする場合元絵の輪郭線を太め・濃い目にして描くと良いです（どんなに太くしても後で好きなだけ削れるので）
背景にどんな色が入っても違和感がないようにたまに背景の色を変更しながら削っていきます。
表情差分は左上1pxと透過部分を上と同じ手順で使ってない色で塗ります。
これは元絵に重ねて使うので元絵から変化する部分だけ残っていればいいです。
これは基本サーフェスとなるので「surface0000.png」というファイル名にします。
これらはsurface数字.pngというファイル名にします。
数字は8000以下ぐらい、0000や0010以外、更に他のと被らなければ何でもいいです。
ここでは左からsurface0101.png、surface0102.png、surface0103.pngにしてみました。
画像素材が完成したら次はsurfaces.txtで土台の絵と表情差分を組み合わせる設定を書きます。
ここではsurface1をsurface0000.pngとsurface0101.pngを組み合わせた笑顔サーフィスとして設定してみます。
//笑顔サーフィス
surface1
{
//土台となる絵
element0,overlay,surface0000.png,0,0
//表情差分
element1,overlay,surface0101.png,*,*
}
「*,*」は画像を重ね合わせる位置です。さっきメモしておいた数値の一つ目と二つ目を入れます。
この例では「54, 52, 50, 48」の「54」と「52」です。
//笑顔サーフィス
surface1
{
//土台となる絵
element0,overlay,surface0000.png,0,0
//表情差分
element1,overlay,surface0101.png,54,52
}
こんな感じで他の表情も設定していきます。
（//で始まる行は注釈なので削ってOK）
surface0は何も設定しないとsurface0000.pngがそのまま表示されるので何も書かなくていいです。
続いてsurfaces.txtに当たり判定の設定を書きます。これは当たり判定のついてないゴーストにはいりません。
ここでは顔（Face）と本（Book）に当たり判定を入れてみます。
surface0
{
//顔の当たり判定
collision0,*, *, * *,Face
//本の当たり判定
collision1,*, *, * *,Book
}
この*, *, * *の部分に当たり判定座標を入れます。
土台絵のsurface0000.pngをEDGEで開きます。
領域を四角で選択するツール（点線の四角のアイコン）で当たり判定を入れたい部分を囲みます。
どうしても選択範囲がはみ出したりしてしまいますがあまり気にしなくて大丈夫です。
その後メニューから「選択範囲＞選択範囲をテキスト情報としてコピー＞x1,y1,x2,y2」を選択。
これをこのまま
「collision0,*, *, * *,Face」の「*, *, * *」部分にペーストします。
Bookも同じ方法で。
surface0
{
//顔の当たり判定
collision0,56, 58, 101, 99,Face
//本の当たり判定
collision1,83, 108, 125, 157,Book
}
今回のシェルはどのサーフェスでもポーズが同じなのでこのcollision0〜とcollision1〜は他のサーフィスプレスにコピーして入れます。
注意すること
・surface0000.pngとsurface0010.pngは必ず入れます。使ってなくても入れます。
・surface0000.pngとsurface0010.pngはそのままゴーストプレビューで使われたりするので単独で見た時不自然にならないように描いた方が無難。
・surface.txtは
surface0
{
}
のように空のサーフィスプレスを書かない方がいいです。エラーが出る事があるそうです。
・ベースウェアからシェルを縮小・拡大した時に透過部分の色がちょっと混じってしまうので気になる人は透過色を輪郭線に近い色にするといいかもしれません。
・
surface0,surface1,surface2
{
}
のような複数サーフィスまとめた指定法は避けた方が良いです。ベースウェアによっては対応してません。
