Easy GUI System (日本語)

Easy GUI System (EGS)は Trappingnoobs により制作された簡単に使える GUI システムです。Github ページからダウンロードして利用できます。現在は EGS の保守は行われていませんが、 GitHub での buckle2000 による寄贈により LÖVE の現行版で動作します。 Ashley (アシュリー) は本件に関してライブラリの保守、整備、そして拡張を検討しています。この開発が行われることを期待しているのであれば、 GitHub のページでレポジトリに関する詳しい情報を参照してください。

一般的な手引き

Class.lua

私のクラス・システムを使用するのは信じられないほど簡単です。以下、数点の入門書は基礎を教授します。

クラスの定義

Class "ClassName" {Properties}

ここでは 'ClassName' と呼ばれる基本的なクラスがあります。それにはデフォルト値の空文字列と一緒に "プロパティ"と呼ばれる所有物があります (デフォルト値は何も与えていません)。

複数のプロパティがあるクラスの定義

Class "ClassName" {
	Property1,
	Property2,
}

こちらは別の非常に基本的なクラスです。それは文字通り二つのプロパティがあるクラスを作成します。

デフォルト値を使った複数のプロパティがあるクラスの定義

Class "ClassName" {
	["Property1"] = 7,
	Property2,
}

プロパティにデフォルト値を与えるには、値の代わりにキーを作成してから、上述のように、デフォルト値の値を与えます。デフォルト値は任意型にすることができます。

クラスのインスタンス化

Class "ClassName" {
	["Property1"] = 7,
	Property2,
}

ClassName:new("InstanceName")

print(InstanceName.Property1)
>7

理解できるようするために、返値を得るのではなく、名前を渡すため、したがって上記と、反対のことを行います:

ClassName = Class {
	["Property1"] = 7,
	Property2,
}
InstanceName = ClassName:new()

クラス関数は `getfenv()` 関数を使用することで、環境変数を呼び出しにおいて変数の定義を可能にします。クラスはローカル変数ではなく、グローバル変数です。したがってインスタンスも同様です。

クラスの多重インスタンス作成

Class "ClassName" {
	["Property1"] = 7,
	Property2,
}

ClassName:new("InstanceName")
InstanceName.Property2 = "Hello world"
print("InstanceName1 says: " .. InstanceName.Property2)
ClassName:new("InstanceName2")
print("InstanceName2 says: " .. InstanceName2.Property2)

>InstanceName1 says: Hello world
>InstanceName2 says:

デフォルト値を設定していない場合は、クラスのプロパティは nil ではなく、空文字列をデフォルト値として取得するため、それを連結しようとすればエラーになります。

プロパティの継承

Class "ClassName" {
	["val"] = true,
}

Class "ClassName2" ({
	["Property1"] = 7,
	Property2,
}, {ClassName})

ClassName2:new("InstanceName")
print(tostring(InstanceName.val))
>true

継承をするには、代わりに入力するものは

Class "cName" {Properties}

入力は

Class "cName" ({Properties}, {Which classes to inherit from})

それはテーブルであり複数のクラスから継承することができます。

例えば、両方のクラスにある同じプロパティがある場合は

Class "cName" {["Prop1"] = "val1"}
Class "cName2" ({["Prop1"] = "val2"}, {cName})

このように、同一のプロパティがあるオブジェクトから継承を行うため、第二クラスである class (cName2) の Prop1 はデフォルト値になり、継承された値はオーバーライドされます。

したがって "cName" をインスタンス化した場合、その Prop1 が表示されるため、 val1 を表示しますが、 cName2 に対して同様のことをすると val2 を表示します。この意味は別の物から多数の物を継承してクラスを作成することを可能にしますが、特定ものを変更または完全に破壊してしまうことです。つまり、そういったことができます。

入門書の終わりに

下記用例を理解している場合に限り、当オブジェクトシステムを理解せずに、どうにかやっていくことができます。

GUI ライブラリの使用方法

あなたは既に当クラス・システムに精通しているべきです。

GUI ライブラリのクラスは二つのセクションから構成されています: クラス構造および非クラス構造。

イベント

イベントは [Roblox] で掲載されているものと同じです。

Object.Event:connect(function)

用例:

CheckBox:new("Checkbox1")
Checkbox1.checkStateChanged:connect(function()
	print("Checkbox1's state was changed by the :changeState() function. It fires on mouse click automatically but can be fired manually.")
end)

クラス構造とは？

このライブラリにおいてクラス構造の唯一の用途は他のクラスが継承先とするクラスです。それらはインスタンス化を行うべきではないため、それら全てに関しては完全に解説を行っていません。

非クラス構造とは？

非クラス構造は チェックボックス といったものです。それらはインスタンス化可能であり、それらは主に GUI アイテムです。

用例

ボタン

ボタンの上に重なったときに現れる TextLabel の作成

TextLabel は 'mouseEntered' および 'mouseExited' ではなく、 'mouseClicked', 'mousePressed', および 'mouseReleased' イベントのみ失いますが、同一結果となる二種類の TextLabels でこれを行うことができることに注意してください。しかしながら、TextLabels は機能性としては非推奨であるため作成されません。

最初に TextLabel および TextButton が必要です。 これらの行を love.load へ記述してください:

TextButton:new("HoverButton")
TextLabel:new("Display")

それらが今あるので変数をいくつか定義することができます。さらに love.load にて下記の行を配置します:

HoverButton.text = "Hover me to see the TextLabel."
HoverButton.autoSize = false
HoverButton.size = {100,20}
HoverButton:centerText()-- X および Y 軸の中央へテキストを揃えます。
HoverButton.hasBorder = false
Display.text = ":o"
Display.visible = false
Display.size = {100,20}
Display:centerText()
Display.position = {0,20}
Display.hasBorder = false

さて イベントが必要です。これらは関しては love.load にあります。

HoverButton.mouseEntered:connect(function()
	Display.visible = true
end)
HoverButton.mouseExited:connect(function()
	Display.visible = false
end)

いま実行すると、それはこの用例のように機能します！

それは EGS が簡単になるように制作されたからであり、カスタマイズ可能な範囲を維持している間は、これが達成されます。例えば、ボタンの上にカーソル重なった時の陰影を消去したい場合は、下記を追加します:

HoverButton.hasShading = false

重なったときに応答するボタンの作成

この教本ではボタンに重なったときに応答する方法について解説します。目的としてGUI 要素における多数のプロパティを探求します。例えば三種類の配色プロパティ (textColor, borderColor, backgroundColor) は三つの値からなる {R, G, B} のテーブルであり、例えば {255, 0, 0} は純粋な赤色を表します。

この教本ではウィンドウの背景色を白色に設定することを推奨します！ (love.graphic.setBackgroundColor(255,255,255))

最初にボタンを作成および一部の値を初期化します:

TextButton:new("TB")
TB.text = "Hover me!"
TB.autoSize = false
TB.size = {100,20}
TB.position = {10,10}
TB.backgroundColor = {0,200,255}
-- X および Y 軸の中央へテキストを揃えます。
TB:centerText()

ちょっと付き合ってみましょう。

TB.hasShading = false -- 陰影の除去。
TB.borderWidth = 1 -- 薄い境界の作成。
TB.mouseEntered:connect(function()
	TB.borderWidth = 2
end)
TB.mouseExited:connect(function()
	TB.borderWidth = 1
end)

それにより薄い境界は更に素敵に見えますよ！ さて、配色を少し変更します。それら二つのイベントをこれで置き換えてみましょう:

TB.mouseEntered:connect(function()
	TB.borderWidth = 2
	TB.backgroundColor = {0,150,255} -- ちょっとした緑色！
end)
TB.mouseExited:connect(function()
	TB.borderWidth = 1
	TB.backgroundColor = {0,200,255} -- 空色に戻します。
end)

良くなりましたが、まだ完璧ではありません。 borderColor および textColors を変更するとどうでしょうか？

TB.mouseEntered:connect(function()
	TB.borderWidth = 2
	TB.backgroundColor = {0,150,255} -- ちょっとした緑色！
	TB.textColor = {50,100,50}
	TB.borderColor = TB.textColor
end)
TB.mouseExited:connect(function()
	TB.borderWidth = 1
	TB.backgroundColor = {0,200,255} -- 空色に戻します。
	TB.textColor = {0,0,0}
	TB.borderColor = TB.textColor
end)

重なったときにメッセージにて TextLabel を作成

これを達成するのは簡単です。この機能は全ての GUIElements にあり、それは Caption と呼ばれています。

TextLabel:new("TL")
TL.text = "Hover me!"
TL.autoSize = false
TL.size = {100,20}
TL.position = {10,10}
TL.backgroundColor = {0,200,255}
TL:centerText()
TL.hasShading = false 
TL.borderWidth = 1

教本の最後にて作成した良い作法から離れるつもりはありません。しかし、キャプションに関して数点の変数が必要です。これを追加してください:

TL.hasCaption = true
TL.caption = "This is a caption!"

それを実行してから、バンザイをしましょう

キャプションが迅速または愚鈍に到着することを望むのであれば、そのための綺麗な関数があり、これを下記に追加します。TL.caption = "This is a caption!":

-- キャプションを表示するためにマウスが重なるのを三秒待ちます。
TL:setSecondsForCaption(3)

そのほかの言語

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info