7.3　選択肢用レイヤ（その２）

今回は ButtonLinkLayer クラスのコンストラクタで呼び出してる setOptions メソッドを詳しく見ていくね。
setOptions メソッドで選択肢の設定をするんだよね。
そう。
これが選択肢、つまり ButtonLinkLayer クラスのオブジェクトに設定できる項目だよ。

＜設定できる項目＞

要素名設定内容デフォルト値備考
graphic背景に表示する画像なし（※必須の要素）button タグの graphic 属性に相当
graphickey背景に表示する画像のカラーキーカラーキーを指定しないbutton タグの graphickey 属性に相当
left左端位置0image タグの left 属性に相当
top上端位置0image タグの top 属性に相当
text表示するテキストなし−
storageクリックした時ジャンプするシナリオファイル名現在のシナリオファイルbutton/link タグの storage 属性に相当
targetクリックした時ジャンプするラベル名ファイルの先頭button/link タグの target 属性に相当
expクリックした時実行する TJS 式実行しないbutton/link タグの exp 属性に相当
hintマウスカーソルが乗った時表示するツールチップヒント表示しないbutton/link タグの hint 属性に相当
onenterマウスカーソルが乗った時実行する TJS 式実行しないbutton/link タグの onenter 属性に相当
onleaveマウスカーソルが出て行った時実行する TJS 式実行しないbutton/link タグの onleave 属性に相当
countpageジャンプする時に、この場所のラベルを読んだとみなすかtrue（みなす）button/link タグの countpage 属性に相当
clickseクリックした時再生する効果音効果音を再生しないbutton/link タグの clickse 属性に相当
clicksebufクリックした時効果音を再生するのに使う効果音バッファ0button/link タグの clicksebuf 属性に相当
enterseマウスカーソルが乗った時再生する効果音効果音を再生しないbutton/link タグの enterse 属性に相当
entersebufマウスカーソルが乗った時効果音を再生するのに使う効果音バッファ0button/link タグの entersebuf 属性に相当
leaveseマウスカーソルが出て行った時再生する効果音効果音を再生しないbutton/link タグの leavese 属性に相当
leavesebufマウスカーソルが出て行った時効果音を再生するのに使う効果音バッファ0button/link タグの leavesebuf 属性に相当
fontテキストを表示する時に使用するフォント名現在ユーザが選択しているフォント−
fontsizeテキストの文字の大きさデフォルトの文字サイズ−
color通常時のテキストの色0x000000−
oncolorマウスカーソルが乗っている時のテキストの色0xFF0000−
clickcolorクリックしている時のテキストの色0xFF0000−

な、なんかすごいいっぱいあるんだけど…
ん〜、button タグと link タグの属性に合わせて設定項目を作ってるからね。
あと、ButtonLinkLayer クラス独自の設定項目もあるから、ちょっと多くなっちゃったんだ。
ちょっとどころじゃない気もするけど…
まぁでも graphic とか graphickey は button タグの graphic, graphickey 属性と同じ意味だし、 storage とか target とかは button タグや link タグの storage, target 属性と同じ意味だから、 大体はわかるでしょ？
う〜ん…そう言われれば確かに見たことあるのが多いね。
でも text とか font とかは今までに出てこなかったよ？
text, font, fontsize, color, oncolor, clickcolor は ButtonLinkLayer クラス独自の要素だからね。
この６つは全部選択肢のテキスト関係の設定項目なんだ。
text が選択肢に表示するテキストで、 font がテキストのフォントで、 fontsize がテキストの文字の大きさ、っていう感じ？
そう。あと color, oncolor, clickcolor はそれぞれ、 通常時・マウスカーソルが選択肢の上に乗ってる時・選択肢をクリックしてる時のテキストの色だよ。
別にわかりにくい設定項目はないでしょ？
まぁね。
それじゃ次は setOptions メソッドのスクリプトの方を見てくね。
これが setOptions メソッドのスクリプトと、メソッドの中で使ってるメンバ変数だよ。

＜各種設定を行う setOptions メソッド＞

// メンバ変数
var storage, target; // クリックした時にジャンプするシナリオファイル名とラベル名
var exp; // クリックされた時に実行する TJS 式
var onenter, onleave; // マウスカーソルが乗った時・出て行った時に実行する TJS 式
var countpage; // ジャンプする時に、この場所のラベルを読んだとみなすか
var clickse, clicksebuf; // クリックした時の効果音と使用するバッファ番号
var enterse, entersebuf; // マウスカーソルが乗った時の効果音と使用するバッファ番号
var leavese, leavesebuf; // マウスカーソルが出て行った時の効果音と使用するバッファ番号
var text; // 表示するテキスト
var textcolor = []; // テキストの色[通常時, クリックしている時, マウスカーソルが乗っている時]
// その他のメンバ変数の宣言は省略します

function setOptions(elm)
{
    // ボタン関係の設定
    loadImages(elm.graphic, elm.graphickey);
    left = +elm.left if elm.left !== void;
    top = +elm.top if elm.top !== void;
    hint = elm.hint if elm.hint !== void;
    storage = elm.storage;
    target = elm.target;
    exp = elm.exp;
    onenter = elm.onenter;
    onleave = elm.onleave;
    countpage = elm.countpage === void || +elm.countpage;
    clickse = elm.clickse;
    clicksebuf = elm.clicksebuf !== void ? +elm.clicksebuf : 0;
    enterse = elm.enterse;
    entersebuf = elm.entersebuf !== void ? +elm.entersebuf : 0;
    leavese = elm.leavese;
    leavesebuf = elm.leavesebuf !== void ? +elm.leavesebuf : 0;

    // テキスト関係の設定
    text = elm.text;
    textLayer.setImageSize(width, height);
    textLayer.setSizeToImageSize();
    textLayer.font.face = elm.font !== void ? elm.font : kag.fore.messages[0].userFace;
    textLayer.font.height = elm.fontsize !== void ? +elm.fontsize : kag.fore.messages[0].defaultFontSize;
    textcolor[0] = elm.color !== void ? +elm.color : 0x000000;
    textcolor[1] = elm.clickcolor !== void ? +elm.clickcolor : 0xFF0000;
    textcolor[2] = elm.oncolor !== void ? +elm.oncolor : 0xFF0000;
}

やっぱり設定項目が多いから長いねぇ。
でもそんな難しいコトはやってないから、ざっと見ていくことにするね。
うん、りょーかい。
まず最初にやってるのが画像の読み込み。
loadImages メソッドだね。
画像は graphic 属性で指定して、 画像のカラーキーは graphickey 属性で指定するから、 引数が elm.graphic と elm.graphickey になってるんだよね。
※ButtonLayer クラス（ButtonLinkLayer クラスのスーパークラス）の loadImages メソッドについては §5.3、 Layer クラスの loadImages メソッドについては §3.3 参照。
ん、だから graphic 属性の指定は必須ってことになるね。
graphickey 属性は指定しなくてもいいの？
loadImages メソッドの第２引数は、 省略すると「カラーキーを使わない」ってことになるから、graphickey 属性は指定しなくても大丈夫だよ。
そーなんだ。
じゃ次は３つまとめて見ていくね。
left, top, hint 属性は、 指定されてたら設定することにしてるんだ。
じゃあ指定されてなかったら？
指定されてなかったらデフォルトの設定が使われるから、 left と top はどっちも 0 で、 ヒントは表示しないってことになるよ。
なるほどね。
あと、あの if って確か前にも出てきたような気がするんだけど…
普通の if とちょっと違うんだったっけ？
if 演算子だね。
確かに if 演算子は普通の if とは違うんだけど、 今回は単純に使ってるから、スクリプトがどうなってるかはわかるでしょ？
※ if 演算子については §5.9 参照。
elm.left が void じゃなかったら、 left = +elm.left を実行するってこと？
※単項 + 演算子については §1.6 参照。
ん、そーいうこと。
だから left と top と hint は、 それぞれの属性が void じゃない時、つまり属性が指定されてる時だけ設定するってことだね。
だね。
んじゃ次は６つまとめて見てくね。
…って言っても、この６つは単にメンバ変数に設定値を代入してるだけ。
じゃあ storage と target と exp と onenter と onleave と countpage って他のメソッドで使うの？
そうだよ。
だから詳しくはまた後で説明することにするね。
うん、わかった。
一応聞いとくけど、countpage のとこがどうなってるかはわかる？
え？　え〜っと、elm.countpage === void || +elm.countpage だから、 countpage 属性が指定されてなかったり、 countpage 属性の値が真だったら、 メンバ変数の countpage が真になるってことだよね？
※厳密には countpage 属性が指定されていないか、または countpage 属性の値を数値に変換した時に 0 以外の値になる場合に メンバ変数 countpage が真になります。
ん、だからデフォルト値は true ってことになるね。
次の clickse とか clicksebuf はシステムボタンの時にも出てきたからわかるよね？
※§5.7 参照。
うん、だいじょぶだよ。
clicksebuf を設定してるとこも大丈夫？
んー、clicksebuf 属性が指定されてたら、それを数値に変換した値をメンバ変数の clicksebuf に代入してて、指定されてなかったら 0 を代入してるから、 デフォルトは 0 番の効果音バッファを使うってことでしょ？
そうそう。じゃ次いくね。
次は選択肢に表示するテキスト関係の設定だよ。
text っていうのが選択肢に表示するテキストを記録しとくメンバ変数なの？
そだよ。これも他のメソッドで使うから後で説明することにするね。
その次の setImageSize メソッドと setSizeToImageSize メソッドは何してるかわかる？
えっと、setImageSize メソッドって今までに使ったことなかったと思うんだけど？
あ、そーだったかな。
setImageSize メソッドは、imageWidth プロパティと imageHeight プロパティの値を、 それぞれ第１引数と第２引数に指定した値に設定するメソッドだよ。
imageWidth と imageHeight って、 確かレイヤが持ってる画像の幅と高さだったよね？
そうだよ。
※imageWidth プロパティと imageHeight プロパティについては §3.3 参照。
じゃあ、setImageSize メソッドの第１引数が width で、 第２引数が height になってるってことは、テキストを表示するレイヤの画像サイズを、 画像を表示するレイヤの表示サイズと同じにしてるってことかな？
そ。
setSizeToImageSize メソッドは前にも使ったことあるよね。
※§3.3 参照。
んーと、setSizeToImageSize メソッドを呼び出すと、 テキストを表示するレイヤの表示サイズが画像サイズと同じになるんだったかな？
ん、そうそう。
次はフォントの設定だけど、これはわかる？
face プロパティでフォント名を設定して、 height プロパティで文字の大きさを設定するんだったっけ？
そうだよ。
Font クラスのプロパティは §3.5 で確認したよね。
えっと、じゃあフォント名の方は、font 属性が指定されてたらその値をそのまま face プロパティに設定してて、指定されてなかったら kag.fore.messages[0].userFace っていう値に設定してるんだね。
でもこれってどんな値なの？
名前の通り、ユーザが選んだフォント名だよ。
それと 0 番のメッセージレイヤは必ずあるから、0 番のメッセージレイヤの設定を使うことにしてるの。
あ、そーなんだ。
あと、文字の大きさの方は、fontsize 属性が指定されてたらその値を数値に変換した値を height プロパティに設定してて、指定されてなかったら kag.fore.messages[0].defaultFontSize っていう値に設定してるね。
これって名前からするとデフォルトの文字の大きさみたいだけど？
うん、deffont タグの size 属性とかで設定できる値だよ。
じゃ最後は文字の色を設定してる部分ね。
textcolor っていう配列に文字色の値を代入してるね。
textcolor は他のメソッドで使うから詳しくは後で説明するけど、 配列にしといた方が使いやすいんだ。
ふぅん、そうなんだ。
で、0 番目、1 番目、2 番目の要素に、 それぞれ通常時・クリックしてる時・マウスカーソルが乗ってる時の文字の色をセットしてるの。
属性値が指定されてたら、それを数値に変換した値を設定してて、 指定されてなかったら、通常時は 0x000000 だから黒色で、 それ以外の時は 0xFF0000 だから赤色だね。
ん、そうだね。
今回はとりあえずデフォルトの値をこう設定してるけど、適当に決めてるだけだから他の値にしても OK だよ。
そーなんだ。
まぁ特にテキストの色とかは使う画像によって結構違ってくるからね。
そっか。画像が黒っぽかったりしたら、テキストが黒色だと見えにくくなっちゃうもんね。
さて、じゃ今回はこれくらいにしとこっか。
はーい。
あと残りのメソッドは次回見ていくことにするね。
じゃあ次回で ButtonLinkLayer クラスは完成？
ん、そのつもりだよ。
それじゃ、また次回ね！


前へ | TOP | 次へ