■ スキンを作る

メモ帳とペイントさえあれば簡単に作れるスキンの仕様を解説しています。

■ 概要/作成に必要なモノ

「スキン」とはプレイヤーの外観を自由に変えられる、スクリプトで記述されたテキストファイルのことです。拡張子は xsp で、メモ帳で開いて簡単に中身を覗いたり編集できます。BMP画像を読み込んで表示する事も出来ます。
作成に必要なモノは以下の三つです。

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

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

■ 宣言エリア

メモ帳を開いて、まず書き込む部分です。ここが無いと、プレイヤーにスキンとして認識されません。
必要な宣言を選び、一行に一つ 宣言の種類=宣言の内容 という形で書いて下さい。
宣言中にメイン画面での座標を指定するものがありますが、それらは全てメイン画面左上を(X,Y)=(0,0)とし、右に行くに従ってXが増え、下に行くに従ってYが増えるように、ピクセル単位で指定して下さい。
作るスキンの種類に拠らず必要な宣言は背景色をつけて示してあります。
宣言の種類宣言の説明
.SkinScript.verまず、一番最初にスキンの書式バージョンを書きます。今現在、この仕様書が出た段階での書式バージョンは 400 ですので、.SkinScript.ver=400 と書くことになります。
.SkinScript.authこのスキンを作成したあなたの名前を書きます。
.SkinScript.titlスキンのタイトルを書きます。
.SkinScript.commスキンへのコメントを書きます。ホームページのアドレス等でも良いかもしれません。
.Window.typeメイン画面に使用するウィンドウの種類を書きます。枠付きで四角形のウィンドウを使う事にした人は normal 、不定形ウィンドウを使う事にした人は region と入れて下さい。 region にした場合は別途↓の宣言も必要になります。
.Window.imgウィンドウの形を定義する為のBMPファイル名を書きます。↓の宣言をしないと、画像左上の色が透過色とみなされます。
.Window.trans.r
.Window.trans.g
.Window.trans.b
この三つの宣言で、.Window.img で指定した画像のどの色を透過させるかを決定します。例えば、r g b を 255 255 255 にすると白、 0 0 0 にすると黒が透過色とされます。255 0 0 は赤、 0 255 0 は緑 e.t.c. です。
.Window.widt
.Window.heig
メイン画面の幅および高さを書きます。
.Window.drag.x
.Window.drag.y
.Window.drag.widt
.Window.drag.heig
メイン画面中でユーザーがドラッグした際にウィンドウを動かす四角形の領域を指定します。x で四角形を描画する位置のX座標を、y でY座標、widt で幅、heig で高さを、それぞれ指定します。
.Window.seek.x
.Window.seek.y
.Window.seek.widt
.Window.seek.heig
.Window.seek.direct
メイン画面中でユーザーがクリックした際に音楽の再生位置を変えるためのシークバーの領域を指定します。x で四角形のX座標を、y でY座標、widt で幅、heig で高さを、それぞれ指定します。実際にシークバーを表示するにはスクリプトの drwboxs を使いますが、この際四角形の領域を左から塗りつぶすか下から塗りつぶすか(要はシークバーが横向きか縦向きか)を direct で選ぶ事ができます。0 にすると横向き、1 にすると縦向きになります。
.Scroll.widtスクリプトの messcrl 命令を使うと、音楽情報をスクロールさせる事が出来ます。スクロールは音楽情報の表示位置を一回の表示ごとに左にずらして行くことで実現しているのですが、この宣言ではその際に一回の表示でずらす幅を指定できます。
.ScrollArea.widt↑と同じく、messcrl 命令関連の宣言です。この宣言では、音楽情報をスクロールさせる全幅を指定します。例えば、メイン画面の右端から左端まで情報をスクロールさせたい場合はメイン画面の幅を書いて下さい。
.List.type「リスト」ボタンを押した際の動作を書きます。再生リストをウィンドウ表示にする人は window にして下さい。ボタンを押されても何もしません。normal 及び scroll は、リスト領域を表示するためにメイン画面のサイズが変わります。scroll はサイズが徐々に変わるのに対し normal は一発で変わります。ここを normal または scroll とした場合に↓の宣言が必要になります。
.List.widt
.List.heig
「リスト」ボタンが押された時にメイン画面を右に伸ばす幅及び下に伸ばす高さを宣言します。これを宣言した場合は、その伸びる部分に再生リストなどのオブジェクトを設置します。そうする事で、「リスト」ボタンを押すと再生リストが出たり引っ込んだりするようになります。
.Var.num
.Var.*.type
.Var.*.default
「イベント処理」で、スキン変数の機能を利用する際に必要になる宣言です。詳しくは後述の スキン変数 の項目をご覧下さい。
.XmsFileプレイヤーのダイアログやボタン等のチップヘルプ(マウスカーソルを暫く置いておくとぴょっと出てくる奴です)の口調を決定する言語ファイルを、スキン読み込み時に読み込ませる事が出来ます。
何だか凄い量ですが、実際のスキンで使われている宣言の量は案外少なかったりします。↓は"スカイ☆ブルー"スキンの場合です。(頭に .:: が付いている行はコメントと見なされます。)
.SkinScript.ver=400
.::	↑スキンの書式バージョンを宣言
.SkinScript.auth=Arc@ARCIS
.SkinScript.titl=スカイブルー(mini)
.SkinScript.comm=爽やか系スキン(ミニ)
.::	↑著作者/タイトル/コメントを書いておく
.Window.type=region
.::	↑不定形ウィンドウ
.Window.widt=270
.Window.heig=30
.::	↑不定形の場合、大きさは↓(.Window.img)で読み込む画像ファイルに合わせる
.Window.drag.x=0
.Window.drag.y=0
.Window.drag.widt=18
.Window.drag.heig=30
.::	↑画面左端をドラッグするとメイン画面がぐいぐい動く
.Window.img=スカイブルー\mini.bmp
.::	↑ウィンドウをこの画像の形にする( .Window.trans.* の指定が無い場合は画像左上の色が透過色になる)
.XmsFile=初期設定.xms
.::	↑言語ファイル名
.List.type=window
.::	↑メイン画面にリストは置かない
.Scroll.widt=6
.::	↑音楽情報を一度に動かす幅
.ScrollArea.widt=130
.::	↑音楽情報をスクロールさせる範囲の横幅
この他、配布されている様々なスキンの宣言をメモ帳で確認して弄ったりしてみて下さい。


■ 初期化エリア

初期化エリアには、ユーザーが「スキン変更」した後すぐに表示される画面を作成する処理をスクリプトを使って書き込みます。
このエリアの処理はスキン内で一回しか実行されませんので、オブジェクト(ボタン/再生リスト/チェックボックス)は必ずここで設置する事になります。他の文字表示や図形描画等と違って、オブジェクトは設置数制限(64個まで)があるので、何度も実行される可能性のあるイベント処理エリアにオブジェクト設置命令を書き込むと、ユーザーがプレイヤーを操作しているうちにエラーになるためです。
初期化エリアの最初には必ず「*Initialize」という行を入れてください。これで「ここから先が初期化エリアだ」とプレイヤーが認識してくれます。 また、初期化エリアの最後には「*end」という行を入れてください。これで「ここまでが初期化エリアだ」とプレイヤーが認識してくれます。 このように「*」で始まる一行でエリアの最初と最後をプレイヤーに知らせる方法は次の「イベント処理エリア」でも使われますので、覚えておいて下さい。

命令の文法は xmp_script.html を、個々の命令の解説は xmp_script_ref.html をご覧下さい。 オブジェクトを設置する基本的な流れは以下の通りです。
pos=設置するX座標*設置するY座標
objsize=オブジェクト横幅*オブジェクト高さ
.:: まず pos 命令と objsize 命令でオブジェクトを設置する位置と大きさを決めてから、
objxset=設置するオブジェクトの種類*オブジェクトに表示させる文字列
.:: objxset 命令で設置したいオブジェクトとオブジェクトの表面に表示させる文字列を指定します。
.:: オブジェクトの種類に何があるかについては xmp_script_ref.html の objxset 命令の項をご覧下さい。

.:: オブジェクトには設置した順に0から63までの「ID」が付けられているので、
objstyl=スタイルを設定するオブジェクトのID*スタイル
.:: スタイルを変えたい(ボタンを透明にしたい、等)場合はスタイルと共にその「ID」を指定してやります。

.:: ※ IDを指定するのが面倒な場合は、パラメータに %o.オブジェクトの種類% と入れれば、
.::   プレイヤーがその種類のオブジェクトのIDを調べてくれます。xmp_script.html の下の方もご覧下さい。
この作業を、設置したいオブジェクトの数だけ繰り返して下さい。


■ イベント処理エリア

初期化エリアでオブジェクトを設置し、画面を整えたらとりあえずプレイヤーとしては使える形になります。 ただ、スキンの機能はこれだけじゃありません。むしろこれからが本番です(笑
プレイヤー側で何かのイベントが起こったとき、例えば再生するファイルが変わったり再生モードが変わったり… そんな条件付の「とき」に実行されるスクリプトを書く事が出来るのです。 具体的には、以下のイベント処理を設定できます。 メモ帳ではイベント処理の冒頭に「*」で始まる行(↑括弧内の文字列)を書き、その処理が終わるところには「*end」と記述するのが決まりになっています。
また、これらの処理で重要になるのが、最初に「前回その処理が実行された際に表示された部分を消す」事です。そうしないと、文字が次々にかぶさって何も読めなくなります。
例えばウィンドウ横幅320で、再生中ファイル変更時(イベント識別子*ChangeFile)に画面左上に再生中のファイルの名前を表示する時のスクリプトはこんな感じです。
*ChangeFile
col=255*255*255
drwboxf=0*0*320*14
.:: まず白い四角形を描画して前回表示したファイル名を消してから
col=0*0*0
pos=0*0
mes=%p.file%
*end
.:: ファイル名を表示。パラメータの %p.file% については xmp_script.html の下の方をご覧下さい。
この要領で色々なイベントを使いこなしてみて下さい。

■ ユーザー定義エリア NEW!! v.402.02〜

ver.402.02からスキンの処理の自由度を更に上げる目的でサポートされました。「ユーザー定義エリア」に書いたスクリプトは、プレイヤーのユーザーが特定のボタンを押した時に実行されるようになります。
例えばウィンドウ横幅320、縦240で、ボタンが押された際にスキンの著作権情報を表示するならば、まずイベント処理エリアと同じ要領で↓のようなエリアを作ります。
*UserDef1
col=255*255*255
drwboxf=0*0*320*240
.:: まず白い四角形を描画して画面全体をクリアしてから
col=0*0*0
pos=5*5
mes=このスキンはarc@arcisが作成しました。*box*310
*end
.:: スキンの著作権情報を表示
そして、初期化エリア内でオブジェクトの種類を userdef1 として
objxset=userdef1*スキンの著作権情報
↑のようにボタンを設置すると、このボタンがクリックされた際に *UserDef1 の中身が実行されます。

(→開発者用ページのトップに戻る)
(→公式サイトに戻る)