履歴レイヤについて

吉里吉里/KAGにおいて、プレイヤの目につく部分でありながら、KAGシステム自体に組み込まれているため、もっともカスタマイズするのが難しいであろう履歴レイヤ。(メッセージレイヤや右クリック時の動作、メニューバーなどは比較的カスタマイズは可能。)

それに関する個人的なメモです。

まずは、KAGWindow@MainWindow.tjsからどうやって呼び出されるか。

0007: class KAGWindow extends Window
0008: {
0078:   var historyLayer; // メッセージ履歴レイヤ
0263:   function KAGWindow(ismain = true, width = 0, height = 0)
0264:   {
0362:     // メッセージ履歴レイヤの作成
0363:     historyLayer = new HistoryLayer(this, fore.base);
0364:     add(historyLayer);
0467:   }
 
0745:   function onShowHistoryMenuItemClick(sender)
0746:   {
0767:     if(historyLayer.visible) hideHistory(); else showHistory();
0768:   }
 
1188:   function internalStoreFlags(f)
1189:   {
1190:     // f に現在の状態を記録する
1286:     // メッセージ履歴
1287:     if(historyLayer.storeState)
1288:     {
1289:       f.historyData = historyLayer.save();
1290:     }
1304:   }
 
1316:   function internalRestoreFlags(f, clear = true, elm = void)
1317:   {
1318:     // f から情報を読み出す
1319:     // clear が true ならばメッセージレイヤをクリアする
1412:     if(clear)
1413:     {
1419:       if(historyLayer.storeState)
1420:       {
1421:         historyLayer.load(f.historyData);
1422:       }
1423:       else
1424:       {
1425:         if(historyWriteEnabled)
1426:         {
1427:           if(historyLayer.everypage)
1428:             historyLayer.repage();
1429:           else
1430:             historyLayer.reline(), historyLayer.reline();
1431:         }
1432:         historyLayer.clearAction();
1433:       }
1434:     }
1488:   }
 
2338:   function showHistory()
2339:   {
2340:     // メッセージ履歴レイヤを表示する
2341:     historyLayer.parent = fore.base; // メッセージ履歴レイヤの親も再設定
2342:     historyLayer.absolute = 2000000;
2343:     historyLayer.dispInit();
2344:     historyShowing = true;
2345:     if(typeof this.showHistoryMenuItem != "undefined")
2346:       showHistoryMenuItem.checked = true;
2347:     setMenuAccessibleAll();
2348:   }
 
2350:   function hideHistory()
2351:   {
2352:     // メッセージ履歴レイヤを非表示にする
2353:     historyLayer.dispUninit();
2354:     historyShowing = false;
2355:     if(typeof this.showHistoryMenuItem != "undefined")
2356:       showHistoryMenuItem.checked = false;
2357:     setMenuAccessibleAll();
2358:     lastHistoryHiddenTick = System.getTickCount();
2359:     conductor.trigger('history'); // 'history' を送る
2360:   }
 
2362:   function setHistoryOptions(elm)
2363:   {
2364:     // elm からメッセージ履歴レイヤのオプションを設定する
2365:     historyWriteEnabled = +elm.output if elm.output !== void;
2366:     historyEnabled = +elm.enabled if elm.enabled !== void;
2367:     if(elm.enabled !== void && !historyEnabled)
2368:       historyLayer.clearAction();
2369:     historyLayer.setOptions(elm); // その他のオプション
2370:     setMenuAccessibleAll();
2371:   }
 
2373:   function showHistoryByScenario(elm)
2374:   {
2375:     // メッセージ履歴をシナリオ中から表示させる
2376:     showHistory();
2377:     conductor.wait(%[ // コンダクタを待ちに
2378:       history : function
2379:       {
2380:         // やることなし
2381:       } incontextof this
2382:       ]);
2383:     return -2; // break
2384:   }
 
3968:   function onMouseWheel(shift, delta, x, y)
3969:   {
3970:     // ホイールが回転した
3971:     super.onMouseWheel(...);
3972:         // メッセージ窓のホイール処理
3973:         if (inSleep && current.hasWheel()) {
3974:             current.processWheel(shift, delta, x, y);
3975:             return;
3976:         }
3977:     if(!historyLayer.visible)
3978:     {
3979:       if(delta > 0)
3980:         showHistoryByKey(); // メッセージ履歴を表示
3981:       else if(System.getTickCount() - lastHistoryHiddenTick > 150) 
3982:           onPrimaryClick(); // クリックをエミュレート
3983:       // ↑ tick を比較しているのは、メッセージ履歴を隠す操作とホイールを
3984:       // 手前に回す操作が連続した場合に勝手に読み進むのをある程度防ぐ仕掛け
3985:     }
3986:     else
3987:     {
3988:       // メッセージ履歴にイベントを垂れ流す
3989:       historyLayer.windowMouseWheel(shift, delta, x, y);
3990:     }
3991:   }
 
4657:   function getHandlers()
4658:   {
4659:     return %[ // 辞書配列オブジェクト
 
4675:   ch : function(elm)
4676:   {
4677:     // 文字表示
4683:     var text = elm.text;
4689:     if(historyWriteEnabled) historyLayer.store(text);
4699:     return acs;
4700:   } incontextof this,
        // graphとhchおおまかに同上
 
4738:   r : function(elm)
4739:   {
4740:     // 改行
4741:     if(historyWriteEnabled) historyLayer.reline();
4753:     return actualChSpeed;
4754:   } incontextof this,
 
4907:    p : function(elm)
4908:   {
4909:     // ページクリック待ち
4910:     if(historyWriteEnabled) historyLayer.reline();
4911:     return showPageBreak(elm);
4912:   } incontextof this,
 
4928:   ct : function(elm)
4929:   {
4930:     // メッセージレイヤのリセット(すべてのメッセージレイヤのクリアと
4931:     // current のリセット)
4932:     if(historyWriteEnabled) historyLayer.repage();
4934:     return 0;
4935:   } incontextof this,
        // cmとerおおまかに同上
 
5117:   history : function(elm)
5118:   {
5119:     // メッセージ履歴レイヤの設定
5120:     setHistoryOptions(elm);
5121:     return 0;
5122:   } incontextof this,
 
5124:   showhistory : function(elm)
5125:   {
5126:     // メッセージ履歴レイヤの表示
5127:     return showHistoryByScenario(elm);
5128:   } incontextof this,
 
5130:   hr : function(elm)
5131:   {
5132:     // メッセージ履歴レイヤに改行を出力
5133:     if(historyWriteEnabled)
5134:     {
5135:       if(elm.repage !== void && +elm.repage)
5136:         historyLayer.repage();
5137:       else
5138:         historyLayer.reline();
5139:     }
5140:     return 0;
5141:   } incontextof this,
 
5143:   hact : function(elm)
5144:   {
5145:     // メッセージ履歴にアクションを設定
5146:     if(historyWriteEnabled)
5147:       historyLayer.setNewAction(elm.exp);
5148:     return 0;
5149:   } incontextof this,
 
5151:   endhact : function(elm)
5152:   {
5153:     // メッセージ履歴のアクションをクリア
5154:     if(historyWriteEnabled)
5155:       historyLayer.clearAction();
5156:     return 0;
5157:   } incontextof this,
 
5821:   }
5822: }

簡単にいえば、HistoryLayer クラスのインスタンス historyLayer を作成し、文字がメッセージレイヤに描画されるのと同じタイミングで historyLayer.store(text) します。同様に改行のときは reline() を、クリアのときには repage() しています。

また、実際に履歴レイヤが表示するときには dispInit() が、消去するときには dispUninit() が呼び出されています。

このように、改行など含め文字描画のときに、何を履歴として描画すればいいのかといった情報を historyLayer に送り、実際に表示される際にはその情報をもとに履歴を描画します。詳しい仕組みは次項。

未稿...