7.7　制限時間付き選択肢（その１）

前回で基本的な選択肢が出来たから、今回からは応用編ってことで、 制限時間つき選択肢を作っていくね。
はーい。
今回作るのは、こういうゲージタイプの制限時間表示付きの選択肢。
これって、時間が経つとだんだん赤いゲージが短くなっていくんだよね？
ん、そう。で、赤い部分が無くなったら時間切れなわけね。
こーいうのってどうやって作るの？
トランジションを使うの。
え、これってトランジションで出来るの？
うん。まず、表画面に残り時間が MAX の時の画像を読み込んで、 裏画面に残り時間が 0 の時の画像を読み込むの。
で、あとはこういうルール画像を使ってユニバーサルトランジションを実行すればできるよ。

＜表・裏画面の画像とルール画像＞

こんな感じにね。

＜ユニバーサルトランジションを使った制限時間表示（制限時間１０秒の場合）＞

あ〜、なるほどねー。
確かにこうすれば右から左に向かって裏画面の画像に切り替わってくから、 赤いゲージが短くなっていってるように見えるね。
でしょ。
でもこれルール画像がちっちゃくない？
普通ルール画像って画面とおんなじサイズでしょ？
今回はレイヤ単位のトランジションをやるからこれで OK なの。
レイヤ単位のトランジション？
trans タグに layer っていう属性があるのは知ってるでしょ？
うん、もちろん知ってるよ。
トランジションする時は layer=base って書くよね。
じゃあ、その layer 属性に、例えば layer=0 って指定すると、こんなふうに０番の前景レイヤだけがトランジションするって知ってた？

＜レイヤ単位のトランジション（[trans layer=0 time=...（以下略）] を実行した場合）＞

えっ、そんなコトできるの？
今まで layer 属性は base にした事しかなかったから知らなかった…
まぁ普通は base しか使わないからね。
でも選択肢オブジェクトって表画面にしか作ってなかったでしょ。
あ、そーいえば…
ってことは、普通にトランジションすると表画面の選択肢が見えなくなっちゃうってことだよね？
そ。だから今回は制限時間を表示するレイヤだけをトランジションさせるの。
こうすればわざわざ裏画面用の選択肢を作らなくてすむからね。
なるほどねぇ。
えっと、じゃあ制限時間を表示するレイヤだけがトランジションするから、 ルール画像は制限時間を表示するレイヤと同じサイズでいいってことなのかな？
ん、そういうこと。
それじゃ、制限時間付き選択肢のスクリプトを作っていこっか。
うん！
ちなみに、ButtonLinkLayer クラスはそのまま使えるから、 ButtonLinkPlugin クラスだけ書き換えれば OK だよ。
※ButtonLinkLayer クラスについては §7.2、§7.3、§7.4 参照。
あ、そーなんだ。
ってワケで、ButtonLinkPlugin クラスをベースにして、 制限時間付き選択肢が使える ButtonLinkPluginEx クラスを作っていくね。
まず、これがメンバ変数。

＜ButtonLinkPluginEx クラスのメンバ変数＞

var links = []; // 選択肢オブジェクト(ButtonLinkLayer クラスのオブジェクト)の配列
var foreTimeLayer, backTimeLayer; // 制限時間の画像を表示するレイヤ（表画面用・裏画面用）

foreTimeLayer と backTimeLayer っていう変数が増えてるね。
それぞれ制限時間の画像を表示するレイヤだよ。
foreTimeLayer が表画面用のレイヤで、 backTimeLayer が裏画面用のレイヤ。
ふぅん…
あ、ちょっと思ったんだけど、制限時間の画像を表示するレイヤをメンバ変数にしちゃったら、 trans タグの layer 属性が指定できなくなっちゃうんじゃないの？
うん、できなくなるよ。
えっ…じゃあ、どうやってトランジションするの？
trans タグを使わずに、TJS スクリプトを使ってトランジションを実行するの。
へぇ、そんなコトできるんだ？
ん、ちゃんとトランジションするためのメソッドが用意してあるからね。
で、これが制限時間表示のトランジションを開始するメソッドだよ。

＜制限時間表示のトランジションを開始する start メソッド＞

function start(elm)
{
    if(foreTimeLayer === void)
    {
        // 表画面用のレイヤを作ります
        foreTimeLayer = new KAGLayer(kag, kag.fore.base);
        foreTimeLayer.loadImages(elm.forestorage); // 画像を読み込みます
        foreTimeLayer.setSizeToImageSize(); // レイヤを画像の大きさに合わせます
        foreTimeLayer.setPos(+elm.left, +elm.top); // 表示位置を設定します
        foreTimeLayer.absolute = 2000000-10; // 重ね合わせ順序はメッセージ履歴よりも奥にします
        foreTimeLayer.visible = true; // 表示状態にします
        // 裏画面用のレイヤを作ります
        backTimeLayer = new KAGLayer(kag, kag.back.base);
        backTimeLayer.loadImages(elm.backstorage); // 画像を読み込みます
        backTimeLayer.setSizeToImageSize(); // レイヤを画像の大きさに合わせます
        backTimeLayer.setPos(foreTimeLayer.left, foreTimeLayer.top); // 表画面のレイヤと同じ位置に配置します
        backTimeLayer.absolute = 2000000-10; // 重ね合わせ順序はメッセージ履歴よりも奥にします
        backTimeLayer.visible = true; // 表示状態にします
        // トランジションを開始します
        foreTimeLayer.beginTransition(%["time" => +elm.time, "rule" => elm.rule, "vague" => +elm.vague], backTimeLayer);
    }
}

なんか結構ややこしそーだよね。
まぁこのメソッドで制限時間の画像を表示するレイヤを作ってたりするからね。
引数が elm になってるってことは、これってマクロから呼び出すメソッドなの？
そうだよ。
マクロの定義はちょっと後回しにするとして、start メソッドの引数の辞書配列 elm に設定できる項目はこれだけだよ。

＜start メソッドの引数の辞書配列に設定できる項目＞

要素名設定内容デフォルト値備考
forestorage表画面に表示する制限時間の画像（残り時間 MAX の時の画像）ファイル名なし−
backstorage裏画面に表示する制限時間の画像（残り時間 0 の時の画像）ファイル名なし−
left制限時間の画像を表示するレイヤの左端なし−
top制限時間の画像を表示するレイヤの上端なし−
timeトランジションにかける時間（制限時間）［ミリ秒］なしtrans タグの time 属性に相当
ruleトランジションのルール画像ファイル名なしtrans タグの rule 属性に相当
vagueあいまい領域値0trans タグの vague 属性に相当

forestorage と backstorage と rule っていうのがこの３つの画像のことなんだよね？
そうそう。
あと、left と top が画像を表示する位置で、 time と rule と vague は、 ユニバーサルトランジションする時の trans タグの属性と同じ意味ってこと？
ん、そういうこと。
それじゃ改めて start メソッドのスクリプトを見ていくね。
うん。
まず最初の if だけど…
これって何やってるの？
foreTimeLayer が void の時、 つまり制限時間の画像を表示するレイヤがまだ作られてない時だけ、 レイヤを作ってトランジションするようにするためのチェックだよ。
そのチェックって必要なの？
ん〜、まぁ start メソッドを呼び出す時は foreTimeLayer が void になってるハズだから、 別になくても大丈夫だとは思うけど、念のためにね。
ふぅん。
じゃ次は if ブロックの中身ね。
表画面用のレイヤ（foreTimeLayer）が KAGLayer っていうクラスのオブジェクトになってるみたいだけど、 これってやっぱり名前の通り KAG で使われてるレイヤなの？
ん、そうだよ。
背景レイヤとか前景レイヤとかメッセージレイヤとかは全部 KAGLayer クラスを継承して作られてるんだ。
だから KAGLayer クラスは KAG で使われてるレイヤの基礎になってるクラスってことだね。
※ KAGLayer クラスは system フォルダの中の KAGLayer.tjs 内で定義されています。KAGLayer.tjs 内には KAG で使用されているレイヤ関連のクラスがどのように作られているかを表す、レイヤのクラス階層構造が記述されています。
へぇ、そうなんだ。
えっと、ここで Layer クラスじゃなくって KAGLayer クラスを使ってるのにはやっぱり何か理由があるんだよね？
KAGLayer クラスのオブジェクトにすると kag オブジェクトにトランジションを管理してもらえるからね。
それってどういうこと？
トランジションが終わるのを待つのには wt タグを使うでしょ。
うん、trans タグの後に wt タグを書いとくと、 トランジションが終わってから wt タグの次に書いてあるスクリプトが実行されるよね。
詳しい説明は省略させてもらうけど、KAGLayer クラスのオブジェクトを使ってトランジションすると kag オブジェクトがトランジションを管理してくれるから、 trans タグを使わずに TJS スクリプトでトランジションを実行しても wt タグでトランジションが終わるのを待てるんだ。
でも、Layer クラスのオブジェクトだと kag オブジェクトにトランジションを管理してもらえないから、wt タグは使えないの。
えっと、じゃあトランジションするのには trans タグは使わないけど、 トランジションが終わるのを待つのには wt タグを使うってこと？
そういうこと。
トランジションを実行するのは TJS スクリプトで簡単にできるんだけど、 トランジションが終わるのを待つのは wt タグを使った方が便利だからね。
あ、そうなんだ。
じゃスクリプトの方に戻るね。
KAGLayer クラスのコンストラクタの引数は Layer クラスと同じだから大丈夫だよね？
所属するウィンドウは kag オブジェクトで、 あと foreTimeLayer の方は表画面用のレイヤだから、親レイヤが表画面の背景レイヤ(kag.fore.base)になってて、 backTimeLayer の方は裏画面用のレイヤだから、親レイヤが裏画面の背景レイヤ(kag.back.base)になってるんだよね。
ん、そうそう。
次の loadImages メソッドと setSizeToImageSize メソッドも Layer クラスと基本的に使い方は同じだからわかるよね？
※Layer クラスの loadImages メソッド、setSizeToImageSize メソッドについては §3.3 参照。
表画面のレイヤには elm.forestorage に指定されてる画像ファイルを読み込んで、 裏画面のレイヤには elm.backstorage に指定されてる画像ファイルを読み込んでるね。
それから setSizeToImageSize メソッドで、レイヤの表示サイズを読み込んだ画像のサイズに合わせてるんだよね。
そうだね。
それじゃ次は setPos メソッドね。
表画面のレイヤの方は、左端と上端の位置がそれぞれ elm.left と elm.top に指定されてる値にセットされてて、 裏画面のレイヤの方は、foreTimeLayer.left と foreTimeLayer.top だから…表画面のレイヤと同じ位置にしてる、ってことかな？
そ。次の absolute プロパティと visible プロパティの設定は OK だよね？
absolute プロパティは選択肢用のレイヤ(ButtonLinkLayer)とおんなじ値にしてて、 visible プロパティは true だから、 表示状態にしてるってことだね。
ん。じゃあと残ってるのは、最後の beginTransition メソッドだね。
これがトランジションするメソッドなの？
そうだよ。
第１引数にトランジションのオプションをセットした辞書配列を指定して、 第２引数にトランジションの相手になるレイヤを指定するんだ。
第１引数に指定されてる辞書配列に time と rule と vague っていう要素があるけど、これって trans タグの属性とおんなじ意味なの？
ん、それぞれ time 属性、rule 属性、 vague 属性と指定の仕方はおんなじだよ。
今回はユニバーサルトランジションだから指定してるのはこの３つだけなんだけど、 他にも children, method, from, stay が trans タグの属性と同じように指定できるよ。
そーなんだ。
えっと、あと第２引数の「トランジションの相手になるレイヤ」ってどーいう意味？
例えば、表画面の背景レイヤにとって、トランジションの相手になるレイヤは裏画面の背景レイヤで、 表画面の０番の前景レイヤにとって、トランジションの相手になるレイヤは裏画面の０番の前景レイヤって感じだね。
ってことは…foreTimeLayer にとって、トランジションの相手になるレイヤは backTimeLayer になるのかな？
第２引数は backTimeLayer になってるし。
そういうこと。トランジションの相手を backTimeLayer にすると、 トランジション中に foreTimeLayer の画像がだんだん backTimeLayer の画像に切り替わっていくわけね。
あ、なるほどね。
じゃこれで start メソッドは一通りチェックできたから、 今回はこれくらいにしとこっか。
まだまだ先は長いの？
んーん、そーでもないよ。
あと新しく作ったり書き換えたりしなきゃいけないメソッドは何個かあるけど、 そんなに複雑じゃないから、制限時間付き選択肢のプラグインは次回で完成させるつもりだよ。
あ、そーなんだ。
それじゃ、また次回ね！


前へ | TOP | 次へ