画像スクロールバー付きメッセージ履歴画面の作成法

1.ファイルの準備

 以下のファイルをプロジェクトフォルダ内の適当な場所に置いてください。

 背景画像のクリック可能領域を表す画像以外の各画像ファイルは button タグで使用するグラフィカルボタンと同じ形式で作成してください。

スライダー画像について

 スライダーは履歴メッセージの量に応じて長さが変化しますので、 「上端部(縦書き表示の場合は右端部)」「中央部」「下端部(縦書き表示の場合は左端部)」の3つの部分に分割して作成します。 各部分は以下のようになります。

<スライダーの各部>

 「上端部(または右端部)」と「下端部(または左端部)」は常に画像全体が表示されますが、 「中央部」の長さは履歴メッセージの量によって変化します(履歴メッセージの量が多いと短くなり、少ないと長くなります)。

 画像を作成する時に、各部の画像の長さは適当に設定して構いませんが、 メッセージ履歴がどんなに長くなっても、 上端部(右端部)と下端部(左端部)は全体が表示されます。つまり、スライダーの長さは、 少なくとも上端部(右端部)と下端部(左端部)を足した長さ以上になりますので、 これらの画像は短めに作ることをお勧めします。
 また、中央部は長めに作ることをお勧めします(短く作ってもスライダーを表示することはできます)。

背景画像のクリック可能領域を表す画像について

 通常、以下のようにスライダーの背景部分をクリックすると、 メッセージ履歴を1ページ分スクロールすることができます。

<スライダー背景のクリック可能領域>

 ただ、これだと背景の黒色の部分をクリックしてもスクロールしてしまいますので、 以下のように、背景の赤色の部分をクリックした時だけスクロールするようにしたいという事があるかもしれません。

<スライダー背景のクリック可能/不可能領域>

 そのような場合は、背景画像のクリック可能領域を表す画像を作成することで、 クリック可能な領域とクリック不可能な領域を設定することができます。

 背景画像のクリック可能領域を設定する場合は、以下の画像のように、 クリック不可能な領域完全な黒色(0x000000)クリック可能な領域完全な黒色以外の色(完全な黒色以外なら何色でも OK です)にした画像を作成してください。

<背景画像のクリック可能領域を表す画像(黒色の部分がクリック不可能領域、白色の部分がクリック可能領域)>

 また、背景画像のクリック可能領域を表す画像は、 必ず背景画像と同じ幅、高さにしてください。
 なお、この画像は透明部分を設定するためのマスク画像(メイン画像のファイル名に _m をつけた名前を持つ画像)とは意味が異なりますので注意してください。

2.設定

 メッセージ履歴画面の設定は同梱の Override.tjs 内で行います。 スクロールバー以外の設定は、§10.2 に掲載しているメッセージ履歴画面の設定と同じですので、 そちらを参照してください。

 スクロールバーの設定部(Override.tjs 内の「◆ スクロールバーの画像」と記述している部分)に、 以下の設定を記述してください。

 なお、scrollBarLeft(スクロールバーの左端位置)と scrollBarTop(スクロールバーの右端位置)は §10.2 に掲載しているメッセージ履歴画面の設定と同じ意味です。

 また、scrollBarBaseRectHit, scrollBarUpButtonRectHit, scrollBarDownButtonRectHit, scrollBarSliderRectHit はそれぞれスクロールバーの背景画像、 上側(右側)のボタン画像、下側(左側)のボタン画像、スライダー上端(右端)・中央部・下端(左端)の当たり判定の設定で、 button タグの recthit 属性と同様に設定できます。