簡単なシェルの揚げ方
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*簡単なシェルの揚げ方 [#t8d16a3e]
シェルの作成は里々の領分ではないので、ここでは自力で絵を...
参考情報/2023年11月時点。
----
#contents
----
~
シェルの仕様書は先人の努力の積み重ねもあって高機能だが、...
新機能もどんどん追加されているので、マニュアルがまだ追い...
そこで、以下では現在の主流SSPを前提としたシンプルな手順を...
なにはともあれまずはSSP公式仕様書へ。~
着せ替えなどは解説が膨大になりやすいのでここでは割愛しま...
-[[UKADOC - シェルの作り方>http://ssp.shillest.net/ukadoc...
-[[UKADOC - descript.txt>http://ssp.shillest.net/ukadoc/m...
-[[UKADOC - surfaces.txt>http://ssp.shillest.net/ukadoc/m...
*シェル画像の用意 [#gd1ea871]
ゴースト名\shell\masterフォルダ内に画像を作る。~
(フォルダの構成は[[ファイル構成]]を参照)~
過去の仕様も使えるので色々こんがらがるが、''今は新機能に...
**ベース画像を描こう [#c84ba1fd]
画像形式は''PNG32(32bit-PNG、アルファチャンネル透明度つ...
ファイル名は自分で覚えやすいもので。~
#ref(surface_base.png);
※ここではあくまで例としてAIさんに描いてもらいました。
**差分画像を作ろう [#e8c92da6]
表情などの差分はできるだけ透明部分(元絵の外縁部)を含め...
解像度も変更しないのが吉。
#ref(surface_parts.png);
同じく形式は''PNG32(32bit-PNG、アルファチャンネル透明度...
こちらもファイル名は自分で覚えやすいもので。~
**当たり判定の画像を作ろう [#e2b6633c]
&color(#FF0000){なにそれ!?};…と思った人もいると思うが、...
(当たり判定がいらない場合は下記はスルーして欲しい)~
ゴーストの当たり判定については触った事があると思う。~
従来はsurfaces.txtに書き込む情報なのだが、座標の数字を一...
しかし、現在ではこれを画像で代用できるようになり、絵を描...
具体的には、2値ペンなどを使い、こういうものを作る。~
#ref(surface_region.png);
画像形式はPNG。特に気にせずPNG32でよい。~
ただし、塗った色情報(RGB)はきちんとメモに控えておくこと!~
この画像の例では
||&color(#ff0000){R};|&color(#00ff00){G};|&color(#0000ff)...
|頭(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...
(今のwindowsで新規作成→テキストドキュメントで作った場合...
これが違うと全角文字が化けるので、逆に化けていたなら文字...
*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
}
こんな感じで書いていけばサーフェス番号(0)と(1)と(...
ざっくりな解説
-&color(#ff0000){descriptブレス};~
ここでversion,1を指定しておかないと、以下でふんだんに使っ...
-&color(#ff0000){surface*ブレス};~
これの*で指定した数字が、サーフェス番号に対応する。0番の...
-&color(#ff0000){element*,描画メソッド,ファイル名,X,Y};~
画像ファイルの指定。まんまお絵描きアプリの「レイヤー」。*...
描画メソッドはレイヤーの合成方法。baseはまるごと、overlay...
要するに一番下のレイヤーはbaseで、上に重ねるレイヤーをove...
XYは重ねる座標をpx単位でいじれる。ベースと差分画像の大き...
-&color(#ff0000){collisionex*,当たり判定名,region,ファイ...
画像のどの色を当たり判定にするかの指定。~
さっきメモした色情報を正確に書いていこう。
なお、このままシェルにぶちこんだ場合、SSPに「Surface10が...
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-...
-&color(#ff0000){surface.append*};~
これは*で指定したサーフェス番号に追記する時に使う。こちら...
今回の例では同じベースや当たり判定はsurfaceブレスで一括で...
surface.appendブレスで1番と2番のelement1に差分画像を設定...
なお、一つのサーフェス番号に対してsurfaceブレスは一度しか...
アニメーションの定義の時も省力化に活用できるので覚えてお...
*シェル制作TIPS [#j402e2be]
**差分の組み合わせは何を選べばいい?という話 [#ia04b9d6]
シェルの差分の組み合わせの方法は、大きく分類すると2パター...
ここでは上とは別のAI氏に描いてもらった絵を加工したものを...
***パーツ分割タイプ [#qba50041]
こちらはベースをのっぺらぼうにしておいて、上に目・口とい...
#ref(ex_parts1.png);
-&color(#0000ff){''利点''};~
パーツ毎に分かれているため後から画像の修正が楽。~
surfaces.txtによって多彩な組み合わせができ、色々な表情を...
-&color(#0000ff){''難点''};~
surfaces.txtのテキスト作業量が多い。~
組み合わせが多彩という事は、多彩なパターンを用意する分だ...
***まるごとタイプ [#h15366e5]
こちらは差分画像をパーツ周辺で切り取る、もしくはサーフェ...
#ref(ex_parts2.png);
-&color(#0000ff){''利点''};~
パーツ分割タイプと比べて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*,描画メソッド,サーフ...
この二つはワンセット。
&color(#ff0000){インターバル};はこのアニメの発生するタイ...
&color(#ff0000){animation*};はアニメ番号(さくらスクリプ...
&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。
終了行:
*簡単なシェルの揚げ方 [#t8d16a3e]
シェルの作成は里々の領分ではないので、ここでは自力で絵を...
参考情報/2023年11月時点。
----
#contents
----
~
シェルの仕様書は先人の努力の積み重ねもあって高機能だが、...
新機能もどんどん追加されているので、マニュアルがまだ追い...
そこで、以下では現在の主流SSPを前提としたシンプルな手順を...
なにはともあれまずはSSP公式仕様書へ。~
着せ替えなどは解説が膨大になりやすいのでここでは割愛しま...
-[[UKADOC - シェルの作り方>http://ssp.shillest.net/ukadoc...
-[[UKADOC - descript.txt>http://ssp.shillest.net/ukadoc/m...
-[[UKADOC - surfaces.txt>http://ssp.shillest.net/ukadoc/m...
*シェル画像の用意 [#gd1ea871]
ゴースト名\shell\masterフォルダ内に画像を作る。~
(フォルダの構成は[[ファイル構成]]を参照)~
過去の仕様も使えるので色々こんがらがるが、''今は新機能に...
**ベース画像を描こう [#c84ba1fd]
画像形式は''PNG32(32bit-PNG、アルファチャンネル透明度つ...
ファイル名は自分で覚えやすいもので。~
#ref(surface_base.png);
※ここではあくまで例としてAIさんに描いてもらいました。
**差分画像を作ろう [#e8c92da6]
表情などの差分はできるだけ透明部分(元絵の外縁部)を含め...
解像度も変更しないのが吉。
#ref(surface_parts.png);
同じく形式は''PNG32(32bit-PNG、アルファチャンネル透明度...
こちらもファイル名は自分で覚えやすいもので。~
**当たり判定の画像を作ろう [#e2b6633c]
&color(#FF0000){なにそれ!?};…と思った人もいると思うが、...
(当たり判定がいらない場合は下記はスルーして欲しい)~
ゴーストの当たり判定については触った事があると思う。~
従来はsurfaces.txtに書き込む情報なのだが、座標の数字を一...
しかし、現在ではこれを画像で代用できるようになり、絵を描...
具体的には、2値ペンなどを使い、こういうものを作る。~
#ref(surface_region.png);
画像形式はPNG。特に気にせずPNG32でよい。~
ただし、塗った色情報(RGB)はきちんとメモに控えておくこと!~
この画像の例では
||&color(#ff0000){R};|&color(#00ff00){G};|&color(#0000ff)...
|頭(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...
(今のwindowsで新規作成→テキストドキュメントで作った場合...
これが違うと全角文字が化けるので、逆に化けていたなら文字...
*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
}
こんな感じで書いていけばサーフェス番号(0)と(1)と(...
ざっくりな解説
-&color(#ff0000){descriptブレス};~
ここでversion,1を指定しておかないと、以下でふんだんに使っ...
-&color(#ff0000){surface*ブレス};~
これの*で指定した数字が、サーフェス番号に対応する。0番の...
-&color(#ff0000){element*,描画メソッド,ファイル名,X,Y};~
画像ファイルの指定。まんまお絵描きアプリの「レイヤー」。*...
描画メソッドはレイヤーの合成方法。baseはまるごと、overlay...
要するに一番下のレイヤーはbaseで、上に重ねるレイヤーをove...
XYは重ねる座標をpx単位でいじれる。ベースと差分画像の大き...
-&color(#ff0000){collisionex*,当たり判定名,region,ファイ...
画像のどの色を当たり判定にするかの指定。~
さっきメモした色情報を正確に書いていこう。
なお、このままシェルにぶちこんだ場合、SSPに「Surface10が...
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-...
-&color(#ff0000){surface.append*};~
これは*で指定したサーフェス番号に追記する時に使う。こちら...
今回の例では同じベースや当たり判定はsurfaceブレスで一括で...
surface.appendブレスで1番と2番のelement1に差分画像を設定...
なお、一つのサーフェス番号に対してsurfaceブレスは一度しか...
アニメーションの定義の時も省力化に活用できるので覚えてお...
*シェル制作TIPS [#j402e2be]
**差分の組み合わせは何を選べばいい?という話 [#ia04b9d6]
シェルの差分の組み合わせの方法は、大きく分類すると2パター...
ここでは上とは別のAI氏に描いてもらった絵を加工したものを...
***パーツ分割タイプ [#qba50041]
こちらはベースをのっぺらぼうにしておいて、上に目・口とい...
#ref(ex_parts1.png);
-&color(#0000ff){''利点''};~
パーツ毎に分かれているため後から画像の修正が楽。~
surfaces.txtによって多彩な組み合わせができ、色々な表情を...
-&color(#0000ff){''難点''};~
surfaces.txtのテキスト作業量が多い。~
組み合わせが多彩という事は、多彩なパターンを用意する分だ...
***まるごとタイプ [#h15366e5]
こちらは差分画像をパーツ周辺で切り取る、もしくはサーフェ...
#ref(ex_parts2.png);
-&color(#0000ff){''利点''};~
パーツ分割タイプと比べて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*,描画メソッド,サーフ...
この二つはワンセット。
&color(#ff0000){インターバル};はこのアニメの発生するタイ...
&color(#ff0000){animation*};はアニメ番号(さくらスクリプ...
&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。
ページ名: