Dragontail

ギャラリー 配布物 そのほか

[新着]

[タグ一覧]

キャンバス真っ白から始めるフリーシェル作成解説

この記事は 伺か・伺的 [第1会場] Advent Calendar 2025 12月15日の記事です。
前日はしもふみさんによる 中国語圏での里々の動作についての記事 でした。
大陸での伺かの様子にも触れられていて興味深かったのではないでしょうか。
それでは伺か的アドベントカレンダー2025、キャンバス真っ白から始めるフリーシェル作成RTAを始めます。

はじめに

12/11 13:30

はい、タイマースタート。
先駆者は探した限りではなぜか見当たらなかったので、新しいキャンバスを作成した段階をタイマースタートとし、narファイルの作成日時をタイマーストップとする。
ぐふふ。今日は休みじゃ。(画像略)

キャンバスを用意しよう!

まずキャンバスサイズを決める。
作りたいシェルの2倍か4倍の大きさでキャンバスを作成する。
今回はdpiは350、横2500px、縦3500pxで決め打ちして作成。
最終的に25%に縮小して、横625px縦875pxの全身立ち絵のシェルにする予定である。

それっぽく立ち絵を描こう!

実を言うと、立ち絵を描くのは簡単ではあるが、「うまく描く」のは難しい。 まず顔を描こうぜ!
うまく描けなくても問題はない。あとでなんとかできるので。
ペンの太さや種類も今はなんでもいい。あとで全部書き直すから。
とりあえず350dpiでの0.4mm(ピクセル単位換算だと5.5pxくらいの太さのペン)でざっくりと顔を描いていく。

理想 現実

SS0001

おしまいだ……
俺はいつだってそうだ……
顔すら満足に描けなくて中学生がテスト裏に描いたラクガキみたいな絵を量産している……
だがまだここからなんとかする余地がある。
とりあえず眼の描き方が好きな人の絵を用意して隣に置く。顔の向きや大きさを大まかに揃えておくとやりやすいかもしれない。
そして片方の眼だけ超絶頑張って描く。

SS0002

多分こんな感じになるはずだ。
片方の眼だけなんかいい感じに描けたなって思えたら次に移る。
次に好きな絵の比率を眼を基準にして計っていく。

SS0003

まあこれは吾輩のデフォルメのたまたま今回の絵だとこうだったという比率なので、全部こうというわけではないけど、少なくとも一つの絵の顔の比率はこうだと記録できた。
その比率を自分のへにょへにょの絵にも適用できるはずだ。

SS0004
そしたら!ある程度!顔のバランスが!崩壊からは遠ざかる!はずだ!!!

顔は目さえいい感じに描けたらそれを基準にしていい感じのバランスで描けるようになる!
そして上手い人はこの手順を踏まなくても繰り返しによって身体で覚えて勝手にいい感じのバランスで描くようになるのだ。
顔さえいい感じに描けたらもう勝ったようなものなので次は全身を描きます。

SS0005

全身入らないわ
縮小します

SS0006

できた!
何ができたというんだえーーっ!?
そうはならんやろ
なっとるやろがい
ここで必要なものがあります。資料です。
好きな絵でも3Dモデルでもなんでもいいから全身立ち絵をキャンパスサイズに合わせて拡大縮小して隣におきます。
今度は頭を基準にして全ての比率を計っていきます。

SS0007

あとはそれに合わせて自分の描いた化け物を拡大縮小して、頭を基準にして比率と各パーツの位置を整えていきます。 一応ここでカンニング用に、7(6.5)頭身、8頭身、5頭身の自分なりにしっくりくるバランスを置いておきます。

SS0008

ただし、枚数描いているうちに好みが変化してバランスは変わっていきます。

SS0008
SS0008

7頭身でも今だったらもう少し胴体長めにしようかなとか、腰と尻を盛ろうかなとか色々変化します。
とりあえず!頭を基準にして人体比率をどんどん計っていってそれを参考にして全身を描こう!

12/13 15:20

ちょっとエルデンリングナイトレインをしていたので時間が飛びました。
そして貰ったお題 ツリ目、流した前髪、そして少々の性癖を追加すると……

SS0009

できた!!!

これの線画を整えたいのは山々であるが、
今の段階で色も見ておきたい。
この段階で光源を決めたりしたいが、ただの立ち絵は光源を厳密に決めてそれで魅せるような絵でもないので固有色だけ置いていく。

SS0010

ヤバい、色のセンスないかも……と最初に置く色は思うと思う。
それでもとりあえず全部色を置くのだ。

SS0011

まあこんなもんか
マジでなんも考えずに固有色なんてとりあえずの適当でいいと思っている。
強いて説明を試みれば

  • 彩度の差で黄色が極端にアクセントになるように
  • 面積比、黒とグレーが大面積で黄色は要所のみに
  • 黄色をアクセントとして入れるために肌をいつもよりピンク寄りに

本来ならばここからさらに光源を練って絵として面白くするのだけど、今回は立ち絵なのでパス
ただしバニースーツを映えさせるためにハイライトとして水色から紫色を入れるつもりではあるが黄色よりは目立たないようにする。
あとはおいおい決めるのだけど、影に灰色を使わないという手癖を今回も採用するつもりでいる。
あと絵にアクセントをつける方法は4つくらいあって

  • 彩度を高める
  • 明度の差を作る
  • 密度(描き込みや線の量)
  • 色相の数・ズレ

の4つの内、2つくらい見せたい部分にチョイスすればいい感じになる経験則がある。
自分は高彩度と色相のズレの二軸をとりあえず擦りがちであるかな。
逆に明度の差はあまり好まないし、描き込みは単純に描き込みで魅せられるほどの画力を持っていないのでな。

12/14 15:00

瓦礫の王強すぎる……まぐれ以外で倒せたことない……
ナイトレインを少々挟んで線画が完成した。

SS0012

眼鼻口などのみ別レイヤになっている。
今回は細い線は0.2mmの筆圧と不透明度アンチエイリアス諸々を切ったペン先が四角のペンを使っている。輪郭のみ0.4mmである。
ちゃんと時間をかけて描くなら筆圧とか入り抜きとかと格闘するが、今回はそこまで求めていない。理論上は絵チャでも再現可能である。
別に正直ペンがどうこうというのはわりとどうでもよくて、しっかり顔や身体のバランスが取れているか、姿勢が不自然だったりしないか、そもそも魅力的な顔の向きや姿勢をチョイスできているか?の方がはるかに重要。
上手い人は何のペンを使っても上手い。

山羊バニーのトー・ヤマナカさん

できた!

12/14 20:30 立ち絵完成

ついでに表情差分も10個くらい描いた!
ここで別ファイルとして25%に縮小します。
(2500px * 3500pxを625px * 875pxにした)
体感として25%の縮小は比較的綺麗であることが多いです。ここで大きさをちょうどよくするために16.7%に縮小するとかしようとすると綺麗に縮小できなくてボヤボヤだったりガビガビになります。
つまりここで欲しい大きさの2倍、4倍、8倍…に最初に作るキャンバスサイズを設定しておく必要があったんですね。(2敗)

それぞれの差分バージョンの立ち絵を
surface0.png
surface0001.png
surface0002.png

surface0009.png
surface0100.png
surface0101.png

と透過pngで出力していきます。
ただしsurface10(surface0010なども含む)は慣例として相方の子の番号として予約されているので使いません。
ただしsurface10.png自体は必要なので完全に透明なpngを用意します。
今回はsurface0010~0099を相方用に開けておくことにしました。
出力やレイヤ整理にはクリスタのEXであればレイヤーカンプ機能が便利ですが今回は割愛します。

SS0014

こんな感じ!

ここから先のことは
https://earlduant.github.io/ukagaka-shell-description/surfaces.html
このページにまとまっているのですが、もっと実例を交えながらの解説を以下に続けます。
そして簡易的な自分なりの理解による項目の説明をしたりしますが、全く正しくない可能性が高いので、正確に理解しようとするなら自分で
https://ssp.shillest.net/ukadoc/manual/descript_shell.html
の各々の項目を熟読してください。

descript.txt

次にdescripts.txtを作ります。
最低限だけ書きました。

charset,UTF-8
type,shell

craftman,Shimofumi
craftmanw,しもふみ
craftmanurl,https://ukadon.shillest.net/@Shimofumi


id,goatBunnyTouYamanaka
name,山羊バニーのトー・ヤマナカさん


seriko.use_self_alpha,1

charset,UTF-8説明が難しいのでおまじないと思ってくれ。
type,shell おまじない
craftman,半角英数字であなたのペンネーム
craftmanw,日本語であなたのペンネーム
craftmanurl,あなたの連絡先、SNSアカウントとか。
id,半角英数字でシェルのid。なんでもいいけど他の作品と被ってはダメ
name,シェルの名前、日本語でも英数字でもどちらでも可。
透過png使うならseriko.use_self_alpha,1は必須(半透明を使えるようになるので)

install.txt

次にinstall.txtを作ります。

Charset,UTF-8
type,shell
name,山羊バニーのトー・ヤマナカさん
directory,TaoHongjing

できた!
name,はdescript.txtのnameと同じものを
directory,はそのシェルをインストールした時に作成されるフォルダの名前になります。
今回は分かりにくいけど隠し要素として、このキャラクターの自分なりの元ネタの人の名前、陶 弘景をそれとなく示すためにこれにしています。

surfaces.txtとさわり判定用画像の用意

まずさわり判定用の画像を新しく作る。
surface0000.pngとかを新しくクリスタなどで開き、新しいレイヤにアンチエイリアスを切った二値のペンで色を置いていく。 既存の同様の手法を取っている当たり判定用の画像からスポイトで色を拾うのが楽で正確かもしれない。

SS0015

こんなかんじに。
透明部分にはみ出ても大丈夫。

SS0015

最終的にこんな感じにatarihantei.pngとでも名前をつけて保存する。
次にsurfaces.txtを作る。

charset,UTF-8

descript
{
version,1
}


surface0
{

}

ここまで作る。
次に

surface0
{

}

内に当たり判定を記述していく。
先ほど作ったatarihantei.pngの色、RGBを

surface0
{
collisionex0,Head,region,atarihantei.png,255,0,0
}

という風に書いていく。
簡易的に説明すると
collisionex0(画像を用意するタイプの当たり判定設定の仕方をするよというおまじない①),
Head(当たり判定の名前を半角英数字で),
region(指定した画像ファイルの指定色の領域を当たり判定として扱うよというおまじない②),
atarihantei.png(用意した当たり判定用の画像のファイル名),
255(RGBのR),0(RGBのG),0(RGBのB) 書き進めると

surface0
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

}

こうなる。 これは今回はsurface0.pngに対応させた。 さらにかっこよく見せるために説明しない記述を加えて(これはバルーン位置の設定だ)surface0の部分が完成される。

surface0
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

これをコピーしてsurface0001、surface0002と作っていく。

そして末尾に

surface10
{

}

を警告除けのおまじないとしてつけておきます。

…… ………… できた!


charset,UTF-8

descript
{
version,1
}

sakura.cursor
{
mouseup0,Bust2,system:hand
mousedown0,Bust2,system:grip

mouseup1,Bust3,system:hand
mousedown1,Bust3,system:grip
}

surface0
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0001
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0002
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0003
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0004
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0005
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0006
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0007
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}


surface0008
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}


surface0009
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface0100
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}


surface0101
{
collisionex0,Head,region,atarihantei.png,255,0,0
collisionex1,Ear,region,atarihantei.png,255,255,0
collisionex2,Bust,region,atarihantei.png,0,0,255
collisionex3,Bust2,region,atarihantei.png,128,0,0
collisionex4,Phone,region,atarihantei.png,0,255,0
collisionex5,Horns,region,atarihantei.png,0,255,255
collisionex6,Hand,region,atarihantei.png,255,0,255
collisionex7,Face,region,atarihantei.png,0,0,64
collisionex8,CoatEye,region,atarihantei.png,0,0,128
collisionex9,Neck,region,atarihantei.png,192,0,0

sakura.balloon.offsetx,180
sakura.balloon.offsety,140
}

surface10
{

}

Readme.txtを作ろう

適当でいいんだよ

できた!!!!

あとはこのフォルダを起動中のゴーストにドラッグアンドドロップしてnar作成して

動作確認をしたら

完成!!!!

12/15 23:45 タイマーストップ

これから個人サイトの記事を書きます……
エルデンリングナイトレインをやってなければ日付変わる前に更新できてたな……
どうして締切ギリギリになってもゲームをしていたのですか?

CLIP ファイル (作業工程全部入り、タイムラプス入り)

PSD ファイル (不要なレイヤを若干整理)
フリーシェル「山羊バニーのトー・ヤマナカさん」

雑談

まず頭身とか絵の説明を分かりやすくするためにバニーにしたけど、なんか手癖でロングコートもつけてしまったからいつもの絵っぽくなった
弊世界観だとバニーとかスク水とか着てるのは全員神農氏の関係者になる(なんで神農氏がセーラースク水着てゲロ吐きながら人生無限残機制を謳歌しているのだ?)ので、誰がいいかな~と選んだ。
キャラデザ的には前髪の流しは山羊のヒゲ、後髪の跳ねたやつは山羊のしっぽ
あとは手癖で適当に
直前まで常世リブラと戦ってたから雰囲気ベース寄ったかもしれない

Make Your Choice ⚖

  • 背の高いスレンダードラゴンガールお姉さんが欲しい
  • へーちゃんの胸を盛りたい
  • 画力に優れた身体になりたい
  • 取引はしない