Section 5.7 ボタン用レイヤのカスタマイズ(その2)

前回はボタン画像の方をやったから、 今回は効果音を再生できるようにしていくね。
効果音って、§3.11 でやったみたいに WaveSoundBuffer クラスを使って再生するの?
ん〜、それでもいいんだけど、今回は KAG の効果音バッファを使おうと思うんだ。
KAG の効果音バッファって、playse タグとかで効果音を再生する時に使うののことだよね?
そうそう、それ。
プラグインからも使えるの? KAG の効果音バッファって。
うん、使えるよ。
kag.se っていうのが KAG の効果音バッファの配列になってて、 例えば 0 番のバッファを使って効果音を再生したい時は、kag.se[0]play メソッドを呼び出せば OK。
えっと、確か WaveSoundBuffer クラスの時は、 再生する前に open メソッドを呼び出して、再生するファイルを開いてたよね?
うん、WaveSoundBuffer クラスの時はね。
でも KAG の効果音バッファは play メソッドだけで効果音が再生できるんだ。
そうなの?
KAG の効果音バッファは WaveSoundBuffer クラスを継承して作られてる SESoundBuffer っていうクラスのオブジェクトになってて、 play メソッドがオーバーライドされてるからね。
ふぅん、そうなんだ。
あ、じゃあ storage 属性とか loop 属性が指定できるようになってるの?
うん。属性は引数に辞書配列の形で指定するの。
例えば、kag.se[0].play(%["storage" => "se.wav", "loop" => false]); みたいな感じにね。
なるほどね。
それじゃ、ボタンを押した時に効果音を再生できるようにしてみるね。
ボタンを押した時に効果音を再生できるようにするってことは、 onClick メソッドをオーバーライドするってこと?
それでもいいんだけど、SystemButtonLayer クラスでは onMouseUp メソッドが呼び出されるとボタンが押されたことになるから、 今回は onMouseUp メソッドで効果音を再生することにするね。
りょ〜かい。
onMouseUp メソッドをオーバーライドする前に、 効果音を再生するのに使うメンバ変数を追加しとくね。
それってどんなメンバ変数なの?
追加するのはこの6つのメンバ変数だよ。

<追加するメンバ変数>

var clickse, clicksebuf;
var enterse, entersebuf;
var leavese, leavesebuf;

それぞれのメンバ変数の意味は、変数の名前を見れば解るよね?
う〜ん… button タグの属性と同じ名前になってるみたいだから…

<各メンバ変数の意味>
メンバ変数変数の値の意味
clickseクリックされたときに再生する効果音のファイル名
clicksebufclickse で指定した効果音を鳴らす効果音バッファの番号
enterseボタンの上にマウスカーソルが乗った時に再生する効果音のファイル名
entersebufenterse で指定した効果音を鳴らす効果音バッファの番号
leaveseボタンの上からマウスカーソルが出て行った時に再生する効果音のファイル名
leavesebufleavese で指定した効果音を鳴らす効果音バッファの番号

こういう意味?
ん、そう。
ちなみにバッファの番号は 0 以上 kag.numSEBuffers 未満にしなくちゃいけないから注意してね。
numSEBuffers って、Config.tjs で指定する効果音バッファの数、だよね?

numSEBuffers の設定(Config.tjs より抜粋)>

// ◆ 利用可能な効果音バッファの数
// 利用可能な効果音バッファの最大値を指定します。つまり、ここで指定した数の
// 分だけ効果音を同時に再生できます。効果音を使用しない場合は 0 を指定して
// かまいません。
;numSEBuffers = 3;

ん、そうだよ。
デフォルトだとこんなふうに 3 になってるから、 指定できるバッファの番号は 012 ってことね。
それって button タグの clicksebuf 属性とかに指定できる値と同じってことだよね。
そういうこと。
あと clicksebuf 属性とかはデフォルトが 0 になってるから、 コンストラクタでメンバ変数をこう初期化しとくね。

<コンストラクタ>

function ExSystemButtonLayer(window, parent, func)
{
    super.SystemButtonLayer(window, parent, func);

    // デフォルトのバッファ番号を 0 に設定します
    clicksebuf = 0;
    entersebuf = 0;
    leavesebuf = 0;
}

それぞれの効果音を再生するバッファ番号を 0 にしとくんだね。
そ。で、onMouseUp メソッドはこんな感じ。

ExSystemButtonLayer クラスの onMouseUp メソッド>

function onMouseUp(x, y, button, shift)
{
    // clickse が指定されていれば効果音を再生します
    if(clickse !== void)
        window.se[clicksebuf].play(%["storage" => clickse, "loop" => false]);

    // スーパークラス(SystemButtonLayer クラス)の onMouseUp メソッドを呼び出します
    super.onMouseUp(...);
}

あの if って何をチェックしてるの?
clickse が設定されてるかどうかをチェックしてるの。 これが設定されてないと効果音が再生できないからね。
clicksebuf にはデフォルト値を設定してるけど、 clickse には設定してないでしょ。
じゃ設定されてないと clicksevoid になるってこと?
clickse はコンストラクタで初期化したりしてないでしょ。
あ、そういえばそうだね。
え〜っと、clickse が設定されてたら play メソッドを呼び出すようになってるけど… window っていうのは?
このレイヤが所属してるウィンドウを表すプロパティだよ。§3.7 で出てきたよね。
あ、そうだったっけ。
このレイヤが所属してるウィンドウってことは…これって結局 kag ってことなんじゃ?
そ。だから kag.se って書いてもいいんだけどね。 ま、こういう書き方もできるってことで。
あとは解るよね?
うん、おっけーだよ。
それじゃ、ボタンの上にマウスカーソルが乗った時に効果音を再生する機能を追加してみて。
えっと、onMouseEnter メソッドをオーバーライドすればいいんだよね?
ん、そう。
やり方は onMouseUp メソッド の時と基本的に同じだから。
う〜ん、それなら…

ExSystemButtonLayer クラスの onMouseEnter メソッド>

function onMouseEnter()
{
    // enterse が指定されていれば効果音を再生します
    if(enterse !== void)
        window.se[entersebuf].play(%["storage" => enterse, "loop" => false]);

    // スーパークラス(SystemButtonLayer クラス)の onMouseEnter メソッドを呼び出します
    super.onMouseEnter(...);
}

こんな感じだよね?
そうそう、これで OK。
じゃついでにボタンの上からマウスカーソルが出て行った時に効果音を再生する方もやってみて。
今度は onMouseLeave メソッドだよね?
ん。
え〜っと、こっちは…

ExSystemButtonLayer クラスの onMouseLeave メソッド>

function onMouseLeave()
{
    // leavese が指定されていれば効果音を再生します
    if(leavese !== void)
        window.se[leavesebuf].play(%["storage" => leavese, "loop" => false]);

    // スーパークラス(SystemButtonLayer クラス)の onMouseLeave メソッドを呼び出します
    super.onMouseLeave(...);
}

こうだよね?
うん、OK。
これで完成だね。
すごい複雑になるかと思ったけど、意外とシンプルにできたね。
でしょ。
それじゃ、実際にボタンを作ってみよっか。
は〜い!
じゃあ、このスクリプトを実行してみて。
必要なファイルはこれなんだけど、 効果音のファイル(click.wav, enter.wav, leave.wav)は入ってないから適当なファイルを用意してね。

<ボタンを作るスクリプト(first.ks)>

[call storage="exsystembutton.ks"]

[iscript]

// ボタンを作ります(クリックすると enabled が false になります)
var button = new ExSystemButtonLayer(kag, kag.fore.base, function(){button.enabled=false;});

// ボタンを kag オブジェクトに管理してもらいます
kag.add(button);

// ボタン画像を読み込みます
button.loadImages("button_test2");

// ボタンを押した時に再生する効果音を設定します(効果音:click.wav,バッファ番号:1)
button.clickse = "click.wav";
button.clicksebuf = 1;

// ボタンの上にマウスカーソルが乗った時に再生する効果音を設定します(効果音:enter.wav,バッファ番号:0(デフォルト))
button.enterse = "enter.wav";

// ボタンの上からマウスカーソルが出て行った時に再生する効果音を設定します(効果音:leave.wav,バッファ番号:0(デフォルト))
button.leavese = "leave.wav";

[endscript]

じゃあ、実行してみるね。
うん。

<実行結果>

実行直後の状態

ボタンを押すとボタン用レイヤの enabledfalse になるようにしてるから、ちょっと押してみて。
わかった。

<ボタンを押した後(enabledfalse)の状態>

ボタンを押した後の状態

あっ、×がついてる画像になったね。
ん、ちゃんと画像が切り替わったね。
あと、効果音もちゃんと再生されてるでしょ?
うん。
…って言っても見た目にはわかんないけどね。
ま、まぁその辺は実際にやってみて確認してみてね、ってことで。
とりあえずこれでボタン用レイヤのカスタマイズができたから、次回からはプラグインの方を作っていくね。
それって SystemButtonPlugin クラスのことだよね?
そうだよ。
あれってそのまま使えるんじゃないの?
デフォルトで実装されてるのはセーブとロードの機能だけだから、機能を追加しないとね。
他にもちょっと変えたい部分もあるしね。
ふぅん、そうなんだ。
ってワケで、今回はここまで。
それじゃ、また次回ね!


前へ | TOP | 次へ