ウィンドウ作成の基本

SAクライアントのウィンドウは二つのコンポーネントで構成されています。一つは .xml もう一つは .lua です。

XMLで定義するのは、ウィンドウの形や大きさです。また、コードの見地からどのボタンがどの名前と機能に対応しているかをゲームに伝える役割も持っています。具体的には、各コンポーネントのタイプ（例： ボタン、ラベル、画像など）、各コンポーネントの位置、ユーザーがそのコンポーネントと相互に作用する時に起こるイベント（例：マウスカーソルを重ねた時に起こるイベント）などを定義します。

Luaで定義するのは、XMLから呼び出す関数です。ウィンドウが最初に初期化される時、ゲームが読み込まれる時に発生すべきこと、プレイヤーがボタンをクリックした時に発生すべきことなどを定義します。

まず最初に、ウィンドウの定義を含んだXMLファイルと、XMLファイルが参照する関数を含んだLuaファイルを作成する必要があります。

”\UserInterface\Default\Source” フォルダの中に、”SampleWindow.lua” と “SampleWindow.xml” の2つのファイルを作成してください。 これらのファイルに記述するコードについては後ほど説明します。

次に、ゲーム開始時に初期化を試みるウインドウのリストに、これらのファイルを追加しましょう。これは、”\UserInterface\Default” 内の ”Interface.lua” と ”Interface.xml” を編集することで実現できます。

次の定義を、Interface.xml の長いXML Includeリストの最後に追加してください。

<Include file="Source/SampleWindow.xml" />

Interface.lua の、CreateWindowを呼び出すリストの最後にも定義を追加してください。

CreateWindow( "SampleWindow", false )

2つ目のパラメータがfalseになっているのは、ゲーム開始時にウィンドウが表示されないようにするためです。

次の2つのセクションでは、シンプルな空白のウィンドウを表示する方法について説明します。

以下のコードをコピーして、空のまま作成した SampleWindow.xml に貼りつけてください。このコードは全ての基本タイプのウィンドウを作成する際に骨組みとして使えます。

<Interface xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Interface.xsd">
  <Scripts>
    <Script file="Source/SampleWindow.lua"/>
  </Scripts>
  <Windows>

    <!-- MAIN WINDOW DEFINITION -->
    <Window name="SampleWindow" movable="true" layer="secondary">
      <Size>
        <AbsPoint x="800" y="600"/>
      </Size>
      <Anchors>
        <Anchor point="topleft" relativePoint="topleft" relativeTo="">
          <AbsPoint x="16" y="400"/>
        </Anchor>
      </Anchors>
      <EventHandlers>
        <EventHandler event="OnInitialize" function="SampleWindow.Initialize"/>
        <EventHandler event="OnShutdown" function="SampleWindow.Shutdown"/>
      </EventHandlers>

      <Windows>
        <!-- General Window Settings -->
        <FullResizeImage name="$parentBackground" inherits="UO_Default_Black_Background">
          <Anchors>
            <Anchor point="topleft" relativePoint="topleft" relativeTo=""/>
            <Anchor point="bottomright" relativePoint="bottomright" relativeTo=""/>
          </Anchors>
        </FullResizeImage>

        <!-- Title Bar -->
        <!-- Title bar -->
        <HorizontalResizeImage name="$parentTitleBar" inherits="UO_Default_Title_Bar" handleinput="true">
          <Anchors>
            <Anchor point="topleft" relativePoint="topleft" />
            <Anchor point="topright" relativePoint="topright" />
          </Anchors>
          <EventHandlers>
            <EventHandler event="OnRButtonUp" function="SampleWindow.Hide" />
          </EventHandlers>
        </HorizontalResizeImage>

        <!-- Close Button -->
        <Button name="$parentClose" inherits="UO_Default_Close_Button">
          <Anchors>
            <Anchor point="topright" relativePoint="topright" relativeTo="$parentTitleBar"/>
          </Anchors>
          <EventHandlers>
            <EventHandler event="OnLButtonUp" function="SampleWindow.Hide"/>
          </EventHandlers>
        </Button>

        <!-- Bottom Window Bar -->
        <HorizontalResizeImage name="$parentBottomFrame" inherits="UO_Default_Title_Bar">
          <Anchors>
            <Anchor point="bottomleft" relativePoint="bottomleft" relativeTo="$parent">
              <AbsPoint x="0" y="0"/>
            </Anchor>
            <Anchor point="bottomright" relativePoint="bottomright" relativeTo="$parent">
              <AbsPoint x="0" y="0"/>
            </Anchor>
          </Anchors>
        </HorizontalResizeImage>

      </Windows>
    </Window>
  </Windows>
</Interface>

解説

1.  まず最初に、SAクライアントにこのコードがUIのコンポーネントであることを知らせるために、 Interface タグでコード内の全ての要素を囲んでいます。

2.  Scripts タグの部分では、このXMLファイルが内部関数を呼び出す際に、どのLuaファイルを使用するかを宣言しています。

3.  最初の Windows タグの直後に、このタグの内側に一連のウィンドウを含むつもりだということを簡潔にコメントしています。

4.  最初の Window タグには、ウィンドウの名前、大きさ（今回は800x600）、親ウィンドウとの位置関係などのSampleWindowに関する全ての情報を定義しています。（※ SAクライアントの最大ウィンドウサイズは 1600x1200 です。そのため、800x600 は、画面の半分ぐらいの大きさになります）

5.  その下の EventHandlers タグでは、ウィンドウが初期化された時（ OnInitialize ）とシャットダウンされた時（ OnShutdown ）に呼び出すLua関数をそれぞれ宣言しています。

6.  二番目の Windows タグ以降では、SampleWindowの様々なサブコンポーネントを設定しています。最初の FullResizeImage では、背景画像を （CoreWindowTemplates.xml で定義されている） UO_Default_Black_Background から継承するように設定しています。

7.  Anchors タグの部分では、ウィンドウの表示位置を設定しています。ここでは、背景の左上角が親ウィンドウの左上角と一致するよう指定しています（relativeTo = “” はデフォルトで親ウィンドウにアンカーしていることを意味します）。そして右下角は、親ウィンドウの右下角と一致するよう指定しています。このケースにおける親ウィンドウは、XMLツリーの一段階上に行くことで発見することができ、SampleWindowに対してだけ作用します。

8.  次にタイトルバー、「閉じる」ボタン、ウインドウ最下部に表示されるバーの定義が来ます。 これらは絶対に必要なものではありません。定義されていなかったとしても、ウインドウはきちんと読み込まれるされるでしょう。ただ、あればとても便利です。

以下のコードをコピーして、空のまま作成した SampleWindow.lua に貼りつけてください。

SampleWindow = {}

function SampleWindow.Initialize()
    WindowUtils.RestoreWindowPosition("SampleWindow")
end

function SampleWindow.Hide()
    WindowSetShowing("SampleWindow", false )
end

function SampleWindow.Shutdown()
    WindowUtils.SaveWindowPosition("SampleWindow")
end

このコードでは、最初にウィンドウと同じ名前のLuaテーブルを作成します。SAクライアントは存在しているウィンドウ毎にこうしたテーブルを必要とします。次に、3つの基本機能を定義します。Initialize, Hide, Shutdownです。

• SampleWindow.Initialize() 関数は、EventHandler の OnInitialize イベントにより、ウィンドウが作成された時に最初に呼び出されます （※ ウィンドウが表示されるよりも早く呼び出されます）。
• SampleWindow.Hide() 関数は、EventHandler の OnLButtonUp イベントにより、ウィンドウ右上の「閉じる」ボタンが押された時に呼び出されます。
• SampleWindow.Shutdown() 関数は、EventHandler の OnShutdown イベントにより、ウィンドウが適切に閉じられた時に呼び出されます。

ゲームにログインし、変更を加えたカスタムUIに切り替えてから、チャットボックスに次の一文を入力してください。

/script WindowSetShowing("SampleWindow", true)

全ての設定が正しく行われていれば、次のような空白のウィンドウが表示されるはずです：

インターフェースのコンポーネントをテストする際には、デバッグウィンドウを開いたままにしておくことをお勧めします。

デバッグウィンドウを開くには、チャットボックスに /debugwindow と入力してください。

• デバッグウィンドウの”Logs (Off)”ボタンを押すことで、ログ機能が有効になります。
• ログ機能が有効になっていると、エラーが起きた時に問題箇所についての情報がデバッグウィンドウに表示されます。
• ”Options”ボタンを押すとフィルタメニューが表示され、エラーメッセージの種類をより細かく指定できます。
• ”Reload UI”ボタンを押すとコンポーネントが即座に再読込されます。これはUIを細かく調整する際にとても便利です。