![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-12-02T09:01:31+09:00","default:post","post") #author("2023-12-02T22:37:44+09:00","default:post","post") *簡単なシェルの揚げ方 [#t8d16a3e] シェルの作成は里々の領分ではないので、ここでは自力で絵を描ける・編集できる人向けのサクッと作る手順を紹介。~ 参考情報／2023年11月時点。 ---- #contents ---- ~ シェルの仕様書は先人の努力の積み重ねもあって高機能だが、そのぶん複雑にもなっている。~ 新機能もどんどん追加されているので、マニュアルがまだ追い付いていないことも多い。~ そこで、以下では現在の主流SSPを前提としたシンプルな手順を紹介。~ なにはともあれまずはSSP公式仕様書へ。~ 着せ替えなどは解説が膨大になりやすいのでここでは割愛します。 -[[UKADOC - シェルの作り方>http://ssp.shillest.net/ukadoc/manual/dev_shell.html]] -[[UKADOC - descript.txt>http://ssp.shillest.net/ukadoc/manual/descript_shell.html]] -[[UKADOC - surfaces.txt>http://ssp.shillest.net/ukadoc/manual/descript_shell_surfaces.html]] *シェル画像の用意 [#gd1ea871] ゴースト名\shell\masterフォルダ内に画像を作る。~ （フォルダの構成は[[ファイル構成]]を参照）~ 過去の仕様も使えるので色々こんがらがるが、''今は新機能によってpnaを用意したり背景を原色にする等は必要なくなった''。~ **ベース画像を描こう [#c84ba1fd] 画像形式は''PNG32（32bit-PNG、アルファチャンネル透明度つきPNG）''で保存しよう。~ ファイル名は自分で覚えやすいもので。~ #ref(surface_base.png); ※ここではあくまで例としてAIさんに描いてもらいました。 **差分画像を作ろう [#e8c92da6] 表情などの差分はできるだけ透明部分（元絵の外縁部）を含めないように切り取るのがポイント。~ 解像度も変更しないのが吉。 #ref(surface_parts.png); 同じく形式は''PNG32（32bit-PNG、アルファチャンネル透明度つきPNG）''で保存しよう。~ こちらもファイル名は自分で覚えやすいもので。~ **当たり判定の画像を作ろう [#e2b6633c] &color(#FF0000){なにそれ！？};…と思った人もいると思うが、これを使うとかなり手間を省ける。~ （当たり判定がいらない場合は下記はスルーして欲しい）~ ゴーストの当たり判定については触った事があると思う。~ 従来はsurfaces.txtに書き込む情報なのだが、座標の数字を一つ一つ入力しなければならなかったため、これがまた非常に手間がかかるものだった。~ しかし、現在ではこれを画像で代用できるようになり、絵を描けるなら''この手間を省略できるようになった''。~ 具体的には、2値ペンなどを使い、こういうものを作る。~ #ref(surface_region.png); 画像形式はPNG。特に気にせずPNG32でよい。~ ただし、塗った色情報(RGB)はきちんとメモに控えておくこと！~ この画像の例では ||&color(#ff0000){R};|&color(#00ff00){G};|&color(#0000ff){B};|h |頭(Head)が赤|255|0|0| |顔(Face)が緑|0|255|0| |胸(Bust)が紫|255|0|255| という色の情報をメモしておこう。~ 作るときは下図のようなイメージで。~ 使っているお絵描きツールで上から新規レイヤーで塗っていくとやりやすい。~ #ref(surface_region2.png); *descript.txtを作る [#fc4afd70] ここからはテキスト編集作業。~ メモ帳でもいいけど、なんかよさげなテキストエディタを選ぶと捗るはず。~ 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を作る [#j1fe34ad] これさえ終わればシェルの最低限の体裁は整う。頑張って。 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 } こんな感じで書いていけばサーフェス番号（０）と（１）と（２）が完成！~ ざっくりな解説 -&color(#ff0000){descriptブレス};~ ここでversion,1を指定しておかないと、以下でふんだんに使っている新仕様が機能しない。必須。 -&color(#ff0000){surface*ブレス};~ これの*で指定した数字が、サーフェス番号に対応する。0番のサーフェスにはsurface0{}という風に。 -&color(#ff0000){element*,描画メソッド,ファイル名,X,Y};~ 画像ファイルの指定。まんまお絵描きアプリの「レイヤー」。elementは数字の大きい方が上になる。~ 画像ファイルの指定。まんまお絵描きアプリの「レイヤー」。*の数字が大きい方が上のレイヤーになる。~ 描画メソッドはレイヤーの合成方法。baseはまるごと、overlayfastは透明部分以外を重ねるみたいな。~ 要するに一番下のレイヤーはbaseで、上に重ねるレイヤーをoverlayfastにすればいい。~ XYは重ねる座標をpx単位でいじれる。ベースと差分画像の大きさが一緒なら0,0でいいから楽！ -&color(#ff0000){collisionex*,当たり判定名,region,ファイル名,R,G,B};~ 画像のどの色を当たり判定にするかの指定。~ さっきメモした色情報を正確に書いていこう。 なお、このままシェルにぶちこんだ場合、SSPが「Surface10が存在しないよ！」とエラーを言ってくるが、これは伺かが伝統的に0番と10番を最初のデフォルト立ち絵として呼び出すため（メインが0、相方が10）なので、10番を定義すれば解消するし、surface10.pngという名前の画像ファイルを用意する事でも解決する。~ なお、このままシェルにぶちこんだ場合、SSPに「Surface10が存在しないよ！」とエラーを言われるが、これは伺かが伝統的に0番と10番を最初のデフォルト立ち絵として呼び出すため（メインが0、相方が10）なので、10番を定義すれば解消するし、surface10.pngという名前の画像ファイルを用意する事でも解決する。~ surface10.pngを用意する場合は1ドットの画像にしておくとよい。強制的に透明になる。~ いずれにせよ致命的なエラーではないので安心しよう。~ **もっと記述量を減らしたい！ [#w507b105] いちいち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 } -&color(#ff0000){surface*};~ ここでのsurfaceブレスの*は「0-2」と書いてある。~ これは0番1番2番を意味しており、この全てにベース画像と当たり判定を設定するという意味になる。~ 指定方法には「0-99」や「0,2,4」といったやり方もあり、「0-9,20-29」といった組み合わせも可能。~ -&color(#ff0000){surface.append*};~ これは*で指定したサーフェス番号に追記する時に使う。こちらも*に「0-2」とか「0,2,4」といった指定可。~ 今回の例では同じベースや当たり判定はsurfaceブレスで一括で指定しておいて、~ surface.appendブレスで1番と2番のelement1に差分画像を設定するやり方。 なお、一つのサーフェス番号に対してsurfaceブレスは一度しか使えず、surface.appendブレスは何度でも使える仕様。~ アニメーションの定義の時も省力化に活用できるので覚えておくと便利。 *シェル制作TIPS [#j402e2be] **差分の組み合わせは何を選べばいい？という話 [#ia04b9d6] シェルの差分の組み合わせの方法は、大きく分類すると2パターンある。~ ここでは上とは別のAI氏に描いてもらった絵を加工したものを例に解説。 ***パーツ分割タイプ [#qba50041] こちらはベースをのっぺらぼうにしておいて、上に目・口といった差分パーツを重ねていく方法。 こちらはベースをのっぺらぼうにしておいて、上に目・口といった差分パーツを組み合わせる方法。 #ref(ex_parts1.png); -&color(#0000ff){''利点''};~ パーツを一通り出力するだけで済む。~ また、この例では眉をちょっと修正したくなった…なんて時もそのパーツだけ直せばいいので修正が楽。~ パーツ単位で分解されているのでsurfaces.txtによって組み合わせの数が多彩。色々な表情を作れる。~ 汗や怒りマークなどの有無も一行追加するだけで済むので手間がかからない。 パーツ毎に分かれているため後から画像の修正が楽。~ surfaces.txtによって多彩な組み合わせができ、色々な表情を作れる。 -&color(#0000ff){''難点''};~ surfaces.txtのテキスト編集作業が多い。~ 組み合わせが多彩という事は、多彩なパターンを用意する分だけ作業量も膨大になるということ。~ パーツが少ない内はまだしも多様性と作業量はトレードオフ…。 surfaces.txtのテキスト作業量が多い。~ 組み合わせが多彩という事は、多彩なパターンを用意する分だけ作業量も膨大になるということ。 ***まるごとタイプ [#h15366e5] こちらは差分画像をパーツ周辺で切り取る、もしくはサーフェス毎にまるごと一枚絵にする方法。 #ref(ex_parts2.png); -&color(#0000ff){''利点''};~ パーツ分割タイプと比べ、surfaces.txtのテキスト作業量が極めて少ない。~ 作業の大半を画像出力で賄う上、レイヤー調整しながら視覚的にサーフェスを作れるのでほとんどsurfaces.txtを意識せずに済む。 パーツ分割タイプと比べてsurfaces.txtのテキスト作業量が極めて少ない。~ レイヤーで調整しながら視覚的にサーフェスを作れる。 -&color(#0000ff){''難点''};~ 絵の細部を修正したくなった場合、そのレイヤーを使っている全てのサーフェスを出力し直す必要がある。~ 特に線画のフチ・はみ出ている部分など、実際に使ってみてから細部に気付くケースは多い。後から全部出力し直しとなると…。~ 表情の数だけ画像を出力する必要がある。つまりサーフェス数が増えるほど作業量が膨大になる。~ 線画のフチ・はみ出ている部分など、後で絵の修正を行おうとすると関連サーフェスが全て出力し直しになる。 *アニメーション [#ed6c90ac] シェル（と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 } -画像による解説 #ref(animation.gif); アニメーションの定義方法は、SERIKOの新定義では以下のようになっている。~ -&color(#ff0000){animation*.interval,インターバル};~ -&color(#ff0000){animation*.pattern*,描画メソッド,サーフェスID,ウェイト,X座標,Y座標};~ この二つはワンセット。 &color(#ff0000){インターバル};はこのアニメの発生するタイミングを指定する。詳しくはUKADOC。常に再生したり、トークに合わせて再生したりなどができる。~ &color(#ff0000){animation*};はアニメ番号（さくらスクリプトの\i[番号]などで呼び出せる）。~ &color(#ff0000){pattern*};はアニメのコマで0から通し番号。小さい順に再生される。~ &color(#ff0000){描画メソッド};はelementのものと似ているが、より様々な指定方法がある。 そして&color(#ff0000){サーフェスID};について、ここが注意点。~ 見ての通り''elementと違って画像ファイル名の指定ではない''。~ SERIKOによるアニメーションでは、サーフェスに別のサーフェスを重ねる形になるため。~ 上の例では100番、101番、102番にて画像ファイルのサーフェスを設定しており、~ これを順次呼び出してパラパラマンガのように付け替えている。 &color(#ff0000){ウェイト};はそのコマを「描画するまで」の待ち時間で、単位はミリ秒。~ &color(#ff0000){X座標,Y座標};は貼り付ける位置を数値分ずらすことができる。 なお画像による例では全てX座標・Y座標に0を指定しているが、これを行う場合は（画像内に不要な部分が多くても）画像サイズはそのままにしておくのがミソ。~ 画像の左上から切り取るようにしてもOK。
