簡単なシェルの揚げ方

ゴーストの当たり判定については触った事があると思う。
従来はsurfaces.txtに書き込む情報なのだが、座標の数字を一つ一つ入力しなければならなかったため、これがまた非常に手間がかかるものだった。
しかし、現在ではこれを画像で代用できるようになり、絵を描けるならこの手間を省略できるようになった。
具体的には、2値ペンなどを使い、こういうものを作る。

画像形式はPNG。特に気にせずPNG32でよい。
ただし、塗った色情報(RGB)はきちんとメモに控えておくこと！
この画像の例では

	R	G	B
頭(Head)が赤	255	0	0
顔(Face)が緑	0	255	0
胸(Bust)が紫	255	0	255

という色の情報をメモしておこう。

作るときは下図のようなイメージで。
使っているお絵描きツールで上から新規レイヤーで塗っていくとやりやすい。

↑

descript.txtを作る†

ここからはテキスト編集作業。
メモ帳でもいいけど、なんかよさげなテキストエディタを選ぶと捗るはず。
descript.txtはゴーストの辞書本体側(ghost)にも同じ名前のファイルがあるので、混同しないように気を付けて！
こっちはシェル側のdescript.txt。

charset,UTF-8

craftmanw,作者名
type,shell
name,シェルの名前

seriko.use_self_alpha,1

どれも重要だが、「seriko.use_self_alpha,1」に注目。
これを書いておかないと用意したPNGの透明度が適用されない。
また、下のsurfaces.txtに共通して、「charset」はShift_JISかUTF-8の文字コードを指定しよう。
（今のwindowsで新規作成→テキストドキュメントで作った場合、文字コードはUTF-8になっているはず）
これが違うと全角文字が化けるので、逆に化けていたなら文字コードが間違っているとも言える。

↑

surfaces.txtを作る†

これさえ終わればシェルの最低限の体裁は整う。頑張って。

charset,UTF-8

descript
{
	version,1
}

surface0
{
	element0,base,ベース画像.png,0,0
	collisionex0,Head,region,当たり判定画像.png,255,0,0
	collisionex1,Face,region,当たり判定画像.png,0,255,0
	collisionex2,Bust,region,当たり判定画像.png,255,0,255
}

surface1
{
	element0,base,ベース画像.png,0,0
	element1,overlayfast,差分画像その1.png,0,0
	collisionex0,Head,region,当たり判定画像.png,255,0,0
	collisionex1,Face,region,当たり判定画像.png,0,255,0
	collisionex2,Bust,region,当たり判定画像.png,255,0,255
}

surface2
{
	element0,base,ベース画像.png,0,0
	element1,overlayfast,差分画像その2.png,0,0
	collisionex0,Head,region,当たり判定画像.png,255,0,0
	collisionex1,Face,region,当たり判定画像.png,0,255,0
	collisionex2,Bust,region,当たり判定画像.png,255,0,255
}

こんな感じで書いていけばサーフェス番号（０）と（１）と（２）が完成！

ざっくりな解説

descriptブレス
ここでversion,1を指定しておかないと、以下でふんだんに使っている新仕様が機能しない。必須。
surface*ブレス
これの*で指定した数字が、サーフェス番号に対応する。0番のサーフェスにはsurface0{}という風に。
element*,描画メソッド,ファイル名,X,Y
画像ファイルの指定。まんまお絵描きアプリの「レイヤー」。*の数字が大きい方が上のレイヤーになる。
描画メソッドはレイヤーの合成方法。baseはまるごと、overlayfastは透明部分以外を重ねるみたいな。
要するに一番下のレイヤーはbaseで、上に重ねるレイヤーをoverlayfastにすればいい。
XYは重ねる座標をpx単位でいじれる。ベースと差分画像の大きさが一緒なら0,0でいいから楽！
collisionex*,当たり判定名,region,ファイル名,R,G,B
画像のどの色を当たり判定にするかの指定。
さっきメモした色情報を正確に書いていこう。

なお、このままシェルにぶちこんだ場合、SSPに「Surface10が存在しないよ！」とエラーを言われるが、これは伺かが伝統的に0番と10番を最初のデフォルト立ち絵として呼び出すため（メインが0、相方が10）なので、10番を定義すれば解消するし、surface10.pngという名前の画像ファイルを用意する事でも解決する。
surface10.pngを用意する場合は1ドットの画像にしておくとよい。強制的に透明になる。

いずれにせよ致命的なエラーではないので安心しよう。

↑

もっと記述量を減らしたい！†

いちいちcollisionexの行をコピペしまくるのが面倒！
って感じたなら上の例は下のように書き換えられる。
これで記述する手間をかなり省けるはず。

charset,UTF-8

descript
{
	version,1
}

surface0-2
{
	element0,base,ベース画像.png,0,0
	collisionex0,Head,region,当たり判定画像.png,255,0,0
	collisionex1,Face,region,当たり判定画像.png,0,255,0
	collisionex2,Bust,region,当たり判定画像.png,255,0,255
}

surface.append1
{
	element1,overlayfast,差分画像その1.png,0,0
}

surface.append2
{
	element1,overlayfast,差分画像その2.png,0,0
}

surface*
ここでのsurfaceブレスの*は「0-2」と書いてある。
これは0番1番2番を意味しており、この全てにベース画像と当たり判定を設定するという意味になる。
指定方法には「0-99」や「0,2,4」といったやり方もあり、「0-9,20-29」といった組み合わせも可能。
surface.append*
これは*で指定したサーフェス番号に追記する時に使う。こちらも*に「0-2」とか「0,2,4」といった指定可。
今回の例では同じベースや当たり判定はsurfaceブレスで一括で指定しておいて、
surface.appendブレスで1番と2番のelement1に差分画像を設定するやり方。

なお、一つのサーフェス番号に対してsurfaceブレスは一度しか使えず、surface.appendブレスは何度でも使える仕様。
アニメーションの定義の時も省力化に活用できるので覚えておくと便利。

↑

シェル制作TIPS†

↑

差分の組み合わせは何を選べばいい？という話†

シェルの差分の組み合わせの方法は、大きく分類すると2パターンある。
ここでは上とは別のAI氏に描いてもらった絵を加工したものを例に解説。

↑

パーツ分割タイプ†

こちらはベースをのっぺらぼうにしておいて、上に目・口といった差分パーツを組み合わせる方法。

利点
パーツ毎に分かれているため後から画像の修正が楽。
surfaces.txtによって多彩な組み合わせができ、色々な表情を作れる。
難点
surfaces.txtのテキスト作業量が多い。
組み合わせが多彩という事は、多彩なパターンを用意する分だけ作業量も膨大になるということ。

↑

まるごとタイプ†

こちらは差分画像をパーツ周辺で切り取る、もしくはサーフェス毎にまるごと一枚絵にする方法。

利点
パーツ分割タイプと比べてsurfaces.txtのテキスト作業量が極めて少ない。
レイヤーで調整しながら視覚的にサーフェスを作れる。
難点
表情の数だけ画像を出力する必要がある。つまりサーフェス数が増えるほど作業量が膨大になる。
線画のフチ・はみ出ている部分など、後で絵の修正を行おうとすると関連サーフェスが全て出力し直しになる。

↑

アニメーション†

シェル（とSERIKOの仕様）ではそれぞれ独立した瞬き・口パクなどのアニメーションを行える。
これも詳細はUKADOCを参照、ここではさわりだけ解説。

以下の定義はサーフェス0番に瞬きを追加する例。

surface.append0
{
	animation0.interval,sometimes
	animation0.pattern0,overlayfast,100,0,0,0
	animation0.pattern1,overlayfast,102,50,0,0
	animation0.pattern2,overlayfast,101,50,0,0
	animation0.pattern3,overlayfast,100,50,0,0
}

// アニメーション用のサーフェス
surface100
{
	element0,base,blink1.png,0,0
}
surface101
{
	element0,base,blink2.png,0,0
}
surface102
{
	element0,base,blink3.png,0,0
}

画像による解説

アニメーションの定義方法は、SERIKOの新定義では以下のようになっている。

animation*.interval,インターバル
animation*.pattern*,描画メソッド,サーフェスID,ウェイト,X座標,Y座標
この二つはワンセット。

インターバルはこのアニメの発生するタイミングを指定する。詳しくはUKADOC。常に再生したり、トークに合わせて再生したりなどができる。
animation*はアニメ番号（さくらスクリプトの\i[番号]などで呼び出せる）。
pattern*はアニメのコマで0から通し番号。小さい順に再生される。
描画メソッドはelementのものと似ているが、より様々な指定方法がある。

そしてサーフェスIDについて、ここが注意点。
見ての通りelementと違って画像ファイル名の指定ではない。
SERIKOによるアニメーションでは、サーフェスに別のサーフェスを重ねる形になるため。
上の例では100番、101番、102番にて画像ファイルのサーフェスを設定しており、
これを順次呼び出してパラパラマンガのように付け替えている。

ウェイトはそのコマを「描画するまで」の待ち時間で、単位はミリ秒。
X座標,Y座標は貼り付ける位置を数値分ずらすことができる。

なお画像による例では全てX座標・Y座標に0を指定しているが、これを行う場合は（画像内に不要な部分が多くても）画像サイズはそのままにしておくのがミソ。
画像の左上から切り取るようにしてもOK。

ようこそ里々wikiへ！
初めての方へ

簡単なシェルの揚げ方