スキンの仕様

05/01/28
基本的には、メモ帳だけで作れます。

概要

「スキン」はプレイヤーの外観を決めるファイルで、拡張子(ファイル名末尾)が xsp です。 メモ帳で開くことができ、その中身は「宣言エリア」「初期化エリア」「イベント処理エリア」「ユーザー定義エリア」に分かれています。宣言エリアについてはこの仕様書で完全に解説してありますが、後ろの三つのエリアを編集するときにはスクリプトの知識が必要になります。(cf. スクリプトの仕様)
.:: 宣言エリア
.SkinScript.ver=40217
.SkinScript.auth=arc@arcis
.SkinScript.titl=basic.
.SkinScript.comm=-
(略)

.:: 初期化エリア
*Initialize
(略)
*end

.:: イベント処理エリア
*MainLoop
(略)
*end
*ChangeFile
(略)
*end
(略)
※一般的なスキン(xspファイル)の中身
基本的には xsp ファイルのみでスキンとしての機能を果たしますが、別途BMP/JPEG画像を用意して読み込んだり、言語ファイルを利用してチップヘルプ文字列やダイアログ内容を変えることも出来ます。

大まかなスキン作成の流れ

「大まかな」流れです。作る過程の詳細は次項以降に書いてあります。

まず、どんな形のスキンにするか考える

作る

宣言エリア

メモ帳を開いて、まず書き込む部分です。ここが無いと、プレイヤーにスキンとして認識されません。必要な宣言を選び、一行に一つ 宣言の種類=宣言の内容 という形で書いて下さい。 宣言中にメイン画面での座標(位置)を指定するものがありますが、それらは全て画面左端(→X座標)及び上端(→Y座標)からの距離で表してください。
宣言宣言の内容(サポート状況)
.SkinScript. verこの仕様書に従うスキンでは 40217ver.402.00〜
authこのスキンを作成した人の名前
titlスキンのタイトル
commコメント
.Window. typeメイン画面の種類。枠付きのウィンドウを使うなら normal 、自由な形の枠無しウィンドウを使うなら region
img前の宣言を region としたときのみ利用可/ウィンドウの形を定義するBMPファイル名。次の宣言をしないと、画像左上の色が透過色と見なされる。
trans.r
trans.g
trans.b
前の宣言をしたときのみ利用可/指定した画像における透過色。 r g b は順に赤、緑、青がどれだけ強いかを示し、0〜255($00〜$FF) の値で指定する。例えば 255 255 255 とすると白、0 0 0 なら黒。
widt
heig
メイン画面の幅および高さ
drag.x
drag.y
drag.widt
drag.heig
メイン画面中でユーザーがドラッグした際にウィンドウを動かす矩形領域。x y で左上座標を、widt heig で幅と高さを指定。
seek.x
seek.y
seek.widt
seek.heig
seek.direct
シークバーが伸びきった状態の矩形領域について x y で左上座標を、widt heig で幅と高さを指定。
再生が進むにつれ左から塗りつぶすか下から塗りつぶすか(⇔シークバーが横向きか縦向きか)を direct で指定。0 にすると横向き、1 にすると縦向き。
(cf. スクリプト 特殊キー %s.seek.*%)
.List. type再生リストをウィンドウ表示にするなら window 、メイン画面にリスト領域を設けるなら normal または scroll 。後者はリスト領域開閉時にウィンドウサイズが段階的に切り替わる。
widt
heig
前の宣言を normal または scroll としたときのみ利用可/「リスト」ボタン(オブジェクト識別子 listarea)が押された時にメイン画面を右に伸ばす(閉じるときは、縮める)幅と下に伸ばす(〃)高さ。
.Var. num
(ID).type
(ID).comm
(ID).list
(ID).list+
(ID).default
スキンに一般のユーザーが編集可能な項目を設けるためにスキン変数を利用するとき必要になる宣言。num はスキン変数の総数、type comm default は該当する変数の種類、説明、初期値。(cf. スクリプト スキン変数)ver.402.00〜

list,list+ 403.00α1〜
.XmsFile プレイヤーのダイアログや、ボタンなどのチップヘルプ(マウスカーソルをしばらく置いておくとぴょっと出てくるアレ)の口調を決める言語ファイルを指定。このスキンが選択されたとき同時に読み込まれる。なお、チップヘルプ文字列は後述のイベント処理エリアでも指定可能(ver.403.00α1〜)。ver.402.00〜
.ScrollArea. widtスクロール情報表示領域の幅(※)
.Scroll. widtスクロール情報表示位置を更新ごとにずらす幅
何だか凄い量ですが、実際のスキンで使われている宣言の量は案外少なかったりします。
.SkinScript.ver=40217
.SkinScript.auth=arc@arcis
.SkinScript.titl=スカイブルー(mini)
.SkinScript.comm=爽やか系スキン(ミニ)
::: ↑基本情報
.Window.type=region
.Window.widt=270
.Window.heig=30
.Window.img=スカイブルー\mini.bmp
::: ↑ウィンドウの形状
.Window.drag.x=0
.Window.drag.y=0
.Window.drag.widt=18
.Window.drag.heig=30
::: ↑画面左端のドラッグでぐいぐい動く
.XmsFile=初期設定.xms
::: ↑言語ファイルは初期設定
.List.type=window
::: ↑リストは別画面に
.Scroll.widt=6
.ScrollArea.widt=130
::: ↑スクロール情報表示領域幅は130px、情報表示位置は一度に6px動かす
※これは スカイブルー(mini).xsp の宣言エリアにコメントを付加したものです。

初期化エリア

宣言エリアでスキンの情報を指定したら、次に初期化エリアとしてスキンが読み込まれたときはじめに表示される画面を作成する処理をスクリプトで書きます。
このエリアのスクリプトは次項で解説しているイベント処理エリアと違いスキン使用中(またはプレイヤー使用中)に一回しか実行されませんので、オブジェクト(ボタン/再生リスト/チェックボックスなど)は必ずここで設置します。(cf. スクリプト オブジェクト)
なお、初期化エリアと次項で解説するイベント処理エリア、次々項のユーザー定義エリアは *(エリア名) という行で始まりを、 *end で終わりを表します。今は(エリア名)を Initialize としてください。
では、具体例から初期化エリアでのスクリプトの流れを追ってみます。
::: 初期化エリア開始
*Initialize
::: (1) オブジェクトの大きさを指定
objsize=15*10
::: (2) 設置する位置を指定
pos=18*10
::: (3) 設置
objxset=prev
::: 同じ大きさのオブジェクトを設置するときは、
::: 毎回設置前に objsize を実行する必要はない。(※)
pos=33*10
objxset=pause
(略)
::: 各オブジェクトのスタイルを透明=5に設定
objstyl=%o.prev%*5
objstyl=%o.next%*5
objstyl=%o.pause%*5
(略)
::: 以降文字表示に使うフォントを設定
mesfont=MS ゴシック*10
*end
::: 初期化エリアここまで
※これは スカイブルー(mini).xsp の初期化エリアにコメントを付加したものです。
この例ではほとんどオブジェクトの設置しかしていませんが、写真立てスキンのように画像を表示したり、他に挨拶メッセージを表示させてみたりしても良いかもしれません。arx-amp スキンははじめに thank You for using! と出ます。

イベント処理エリア

宣言エリアで基本情報を指定し、初期化エリアで画面を整えるスクリプトを書けば、とりあえずスキンとしては使えるかたちになります。 とは言え、これでは音楽ファイルが読み込まれたときなどに情報を表示されず不便です。イベント処理エリアには、そんな条件付きの「とき」に実行されるスクリプトを書きます。
イベントには次の7種類があります。
エリア名イベントの内容用途(サポート状況)
MainLoop音楽再生中再生位置などの状態を表示するver.402.00〜
ChangeFile音楽読み込み時現在の音楽情報を表示する
ChangeMode再生モード変更時現在の再生モードを表示する
ChangeRepMode再生リスト繰返し再生設定変更時現在の─設定を表示する
ShowListリスト領域を表示する機能実行時リスト領域を表示する
HideListリスト領域を隠す機能実行時リスト領域を隠す
ChangeWinTop最前面表示の設定を表示する?〜ver.402.15
ShowTiphelpチップヘルプ表示時言語ファイルで定義できないなど、特殊な事情のオブジェクトにチップヘルプを付与する(cf. スクリプト 各命令の解説 objhelp)ver.403.00α1〜
※サポート状況が 〜ver.402.15 となっているものは利用する機会が無いことから廃止された仕様です。
現在の最新版では使用できませんのでご注意ください。
これらのイベントについてのスクリプトを書くに当たって分かり辛い点などを以下にまとめてみました。

*MainLoop

まず、音楽再生中にスクロール情報を表示する方法を具体的に書いておきます。
1.                 abcdefghijkl
2.               abcdefghijkl
            …
3.         abcdefghijkl 
               ←→(.Scroll.widt)
4.       abcdefghijkl   
            …
(実際の表示開始位置(5.))
    ↓
5.   abcdefghijkl       
6. abcdefghijkl         
        ↑←──────┬→
        └(表示基準位置)└(.ScrollArea.widt)
※以降のスクリプトの説明では適宜上図を参照して下さい。
仮に表示基準位置を(X,Y)=(5,10)とすると
*MainLoop
pos=5*10
pos=%s.scrl.pos%
mes=%p.scrl%
*end
とするだけで、表示開始位置は1.〜6.を繰り返すようになります。 %s.scrl.pos% は、前の行の pos で指定された表示基準位置とスクロール情報の幅、.ScrollArea.widt.Scroll.widt、現在の画面表示更新回数などの条件を併せて、今実際にスクロール情報を表示すべき位置はどこかを算出します。例えば5.にあたる時点では %s.scrl.pos%(実際の表示開始位置(5.)) の座標で置換されます。
ただし、実際にこのスクリプトを書いたスキンを使ってみると分かりますがこれではスクロール情報がどんどん重なって表示されてしまいます。そこで、前回イベントが実行されたときの表示を消す処理をはじめに挿入することになります。この、前回イベントが実行されたときの表示を消す処理は MainLoop に限らず全てのイベント処理エリアで書く必要がありますので覚えておいてください。
*MainLoop
::: 白でスクロール領域の古い表示を消去
col=255*255*255
::: 	※ .ScrollArea.widt=100 と宣言しており、
:::	  表示フォントが MS ゴシック*12 の場合を想定
::: →(5,10)(105,22)を端点とする矩形領域を塗り潰し
drwboxf=5*10*105*22
::: 黒で情報表示
col=0*0*0
pos=5*10
pos=%s.scrl.pos%
mes=%p.scrl%
*end
今度はどうでしょうか。スクロール領域(冒頭の図における灰色囲み)は確かに毎回表示が更新されていますが、その両脇は相変わらず文字がどんどん重なって表示されてゆきます。それを後から消す処理も加える必要があります。
*MainLoop
::: スクロール領域の古い表示を消去
col=255*255*255
drwboxf=5*10*105*22
::: 黒で情報表示
col=0*0*0
pos=5*10
pos=%s.scrl.pos%
mes=%p.scrl%
::: スクロール領域をはみ出た表示を消去
col=255*255*255
drwboxf=0*10*5*22
::: 	※ .Window.widt=110 の場合を想定
drwboxf=105*10*110*22
*end
シークバーについてはスクリプト 特殊キー %s.seek.*%の補足説明に詳しく書いてあります。

今のところ具体的なまとめはこれだけです。
掲示板で質問を受けたりした際に随時追加するつもりでいます。お気軽にどうぞ。

ユーザー定義エリア

ユーザー定義ボタンが押されたとき実行するスクリプトを書きます。
エリア名イベントの内容用途(サポート状況)
UserDef1
UserDef2
UserDef3
UserDef4
UserDef5
ユーザー定義ボタンが押された自由ver.402.00〜
例えば
objxset=userdef1*スキンのバージョン情報
と設置したボタンがクリックされると、対応する定義エリアのスクリプトが実行されます。
ユーザー定義エリアには次のようなスクリプトを書いておきます。
*UserDef1
::: スキンのバージョン情報を表示してみる
pos=5*5
mes=version: 402.17 by arc@arcis
*end
色々なことができるぶん扱いが難しいかも知れません。
ファリス★スキン にユーザー定義エリアが多用されています。

更新履歴