libs/textsでテキストを表示する[FF11]

f:id:yyoshisaur:20190526021647p:plain

Windowerのアドオンでは、画面上にテキストで情報を表示させているものがあります。
テキストの表示方法が気になり、すこし調べたので、
今回は備忘録としてテキストの表示方法をまとめてみます。


まず、テキストを表示させる方法には、

の2つがあるようです。
windower.textは、ドキュメントにも記述されているように
単純にテキストを表示するだけでテキストの更新やプロパティの保存、テキストオブジェクトのドラッグでの移動などができません。
そのような機能を追加し、windower.textを拡張したものがlibs/textsで、こちらを使用することが多いようです。
libs/textsをラインエディタから使用できるようにしたアドオンTextもあります。
Text :: Windower Documentation

libs/texts

libs/textsを使ってみます。

読み込み

何はともあれ、ライブラリを読み込みます。

local texts = require('texts')
テキストオブジェクトの作成
text_box = texts.new('hoge')
表示
text_box:show()

画面に'hoge'という文字列が表示されます。

文字列の変更
text_box:text('piyo')

文字列'piyo'に変更されます。

設定

文字列の色、フォントなど設定ができます。
テキストオブジェクトを作成する際に設定します。
また、libs/configでアドオンの設定を保持している場合、
libs/configで作成した設定をlibs/textsに渡すことができ、
libs/textsで文字列の設定を変更した際にlibs/configにもその設定を反映させることができます。

-- textsの設定項目(値は何も指定していなかった場合のデフォルト値)
local texts_settings = {}
-- テキストの表示位置
texts_settings.pos = {}
texts_settings.pos.x = 0
texts_settings.pos.y = 0

-- 背景色
texts_settings.bg = {}
texts_settings.bg.alpha = 255
texts_settings.bg.red = 0
texts_settings.bg.green = 0
texts_settings.bg.blue = 0
texts_settings.bg.visible = true -- 背景表示の有無

-- 文字列の表示形式
texts_settings.flags = {}
texts_settings.flags.right = false
texts_settings.flags.bottom = false
texts_settings.flags.bold = false
texts_settings.flags.draggable = true -- マウスでの移動
texts_settings.flags.italic = false

-- 文字と背景との余白
texts_settings.padding = 0

-- 文字列
texts_settings.text = {}
texts_settings.text.size = 12
texts_settings.text.font = 'Arial' -- 日本語を表示させる場合は、日本語が表示可能なフォントを設定する必要あり
texts_settings.text.fonts = {}
texts_settings.text.alpha = 255 -- 透過
texts_settings.text.red = 255
texts_settings.text.green = 255
texts_settings.text.blue = 255

-- 文字列の縁取り
texts_settings.text.stroke = {}
texts_settings.text.stroke.width = 0
texts_settings.text.stroke.alpha = 255
texts_settings.text.stroke.red = 0
texts_settings.text.stroke.green = 0
texts_settings.text.stroke.blue = 0

local default = {
    -- something_setting = addon_setting libs/texts以外のアドオン設定
    texts = texts_settings
}
settings = config.load(default) -- アドオン全体の設定
text_box = texts.new('hoge', settings.texts, settings)

各設定にはsetterがあるので、設定の変更ができます。
文字サイズを変更する。

text_box:size(12)

文字色を変更する。

-- color(red, green, blue)
text_box:color(255, 0, 0)
テンプレート文字列

texts.newに渡す文字列にはテンプレート文字列を使用できます。
フォーマットは${name|default|format}です。
戻り値のテキストオブジェクトにnameプロパティが追加され、nameを変更することでテキストオブジェクトの文字列を変更することができます。
defaultはnameがnilの場合に表示される文字列です。
formatは'%s',%x'などのフォーマット指定子を設定します。
default, formatとも省略可能です。

text_box = texts.new('${name}は、${race|ミスラ}です。')
text_box:show()
text_box.name = 'Piyo'
text_box.race = 'タルタル'

f:id:yyoshisaur:20190526020237p:plain

update()を使用すると一括で変更することもできます。

text_box = texts.new('${name}は、${race|ミスラ}です。')
text_box:show()
mob = {name='Hoge', race='ヒューム'}
text_box:update(mob)

f:id:yyoshisaur:20190526020254p:plain

nilの場合は、defaultに指定した文字列が設定されます。

text_box = texts.new('${name}は、${race|ミスラ}です。')
text_box:show()
text_box.name = 'Nyan'
text_box.race = nil

f:id:yyoshisaur:20190526020307p:plain

表示/非表示

表示、非表示を切り替えます。

text_box:visible(false) -- 非表示
text_box:visible(true) -- 表示
local is_visible = text_box:visible() -- 表示/非表示の状態を取得

text_box:hide() -- 非表示 visible(false)と同じ
文字の色を色々に

前述した文字の色を変更する方法では、文字は単一色になりますが、
\\cs(red,green,blue)という文字列を挿入することで後に続く文字列の色を変更することができます。
\\crは、\\csでの変更をリセットします。
この記述方法はWindower独自のものなのか、なにかの既存の記述方法を採用しているのか調べてみましたが、わかりませんでした。
シェルの場合、'\e[31m'などのエスケープシーケンスで文字に色を付けますが、それと似たような感じでしょうか。

text_box = texts.new('白タルタル\n\\cs(255,0,0)赤\\crタルタル\n\\cs(0,0,255)青\\crタルタル\\cs(255,255,0)黄\\crタルタル')

f:id:yyoshisaur:20190528143904p:plain

テキストオブジェクトの破棄

テキストオブジェクトを削除します。

text_box:destroy()

少し使ってみる

GearSwapのユーザースクリプトに組み込んで、使ってみます。
(GearSwapは装備変更のアドオンなので、そこで画面表示を行うのはおかしい気がしますが。。)
学者の"机上演習"の実行をよく忘れるので、机上演習の状態を画面上に表示させてみます。
(私の場合、学者は武器をよく持ち替えるので、MP回復のために机上演習の維持は必要です。)
机上演習はバフの時間を特に気にしないので、シンプルに実装できそうです。
その他にも忘れがちな狩人のベロシティショットなど、
スタンス切り替え系のアビリティの状態を画面に表示しておくと忘れることがなくていいかなと思います。
あまり色々な情報を画面上に表示させると見づらくなってしまうので、程々がいいかもですね。

local texts = require('texts')
sublimation_box = texts.new('${state}',{text={font='MS ゴシック', size=12}, padding = 5})
sublimation_box:show()

-- GearSwapのbuff_changeで机上演習のバフ変化を検知し、テキストを変更する
function buff_change(name, gain, buff_details)
    if name == '机上演習:蓄積中' then
        if gain then 
            sublimation_box.state = name
        else
            if not buffactive['机上演習:蓄積完了'] then
                sublimation_box.state = '机上演習なし'
            end
        end
    elseif name == '机上演習:蓄積完了' then
        if gain then 
            sublimation_box.state = name
        else
            sublimation_box.state = '机上演習なし'
        end
    end
end

function file_unload(file_name)
    sublimation_box:destroy()
end

f:id:yyoshisaur:20190528013800p:plainf:id:yyoshisaur:20190528013816p:plainf:id:yyoshisaur:20190528013828p:plain

状態に合せて、文字色や背景色を変えて視認しやすくするなど工夫できそうです。