ユーザーインターフェイス

ユーザーがこの世界に住んでいるように感じられる宇宙ステーションで情報を消費できるインタラクティブマップ UI を追加したいと考えました。我々は、経験をオーバーレイする画面ではなく、3D 空間内にマップを構築することを決めました。この種類のディジタル視覚化は、世界に完全に分離した経験のように感じるのではなく、より多くの没入を可能にします。

マップを設計する

マップを設計するには：

外部アプリケーションで UI を嘲笑し、どのように見せたいかの粗略なアイデアを出しました。
マップの個々の部品を .png としてエクスポートし、Studio にインポートしました。

マップを作成する

Studio 内のマップを構築するには、Parts と SurfaceGuis を使用しました。

非対話要素の場合、私たちが行う必要があったのは、パーツに SurfaceGui オブジェクトを追加することだけでした。
インタラクティブ要素の場合、も 3D ワークスペースの適切な部分にリンクされたプロパティを持つ必要があり、コンテナ内に配置する必要があります。そうすると、ボタンイベントを追加できます。
パララックス効果を達成するために、3つの異なる ScreenGui インスタンスに割り当てられた 3つのユニークな Parts に異なる X 値を割り当てました。
それから、SurfaceGui.LightInfluence プロパティで輝き効果を追加しました。プロパティ値を 1未満に設定すると、SurfaceGui.Brightness プロパティが有効になります。明るさを調整することで、画像から放出される輝きを増やすことができます。
ユーザーがマップの表示を切り替えることができるようにするには、3D モデルに付属した ProximityPrompt を使用しました。これは、ワールド要素とのユーザーの相互作用を許可する簡単な方法です。

最後に、ReplicatedStorage 内の UITweenModule モジュールスクリプトを使用して、UI を隠し、TweenService と状態を判断するための少しのロジックでアニメーション化しました。ユーザーがクリックしたものを追跡することで、アルファ、位置、サイズなどの異なるプロパティを介して要素を隠し、表示できました。

UITweenModule モジュールスクリプト
local TweenService = game:GetService("TweenService")
local UITween = {}

-- フェードイメージ用
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quad, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay --遅延時間
	)

	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
	tween:Play()
end

function UITween.fade(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quad, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay --遅延時間
	)

	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
	tween:Play()
end

-- フェードイメージ用
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quad, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay --遅延時間
	)

	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
	tween:Play()
end

-- フェードするテキスト用
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quad, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay --遅延時間
	)

	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
	tween1:Play()
end

-- テキストと画像の移動用
function UITween.move(object, position, time, delay)

	task.wait(delay)
	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
end

-- サイズを変更するため
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quint, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay, --遅延時間
		override,
		callback
	)

	local tween = TweenService:Create(object, tweenSize, {Size = size})
	tween:Play()
end

function UITween.rotate(object, rotation, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --時刻
		Enum.EasingStyle.Quint, --緩和スタイル
		Enum.EasingDirection.Out, --緩和方向
		0, --繰り返しカウント
		false, --真になると逆になります
		delay, --遅延時間
		override,
		callback
	)

	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
	tween:Play()
end

-- ゲームカメラをぼかすため
function UITween.blur(object, amount, time)

	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
	local tween = TweenService:Create(object, tweenInfo, {Size = amount})
	tween:Play()
end

-- ゲームカメラをぼかすため
function UITween.turnOn(object, amount, time)

	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
	local tween = TweenService:Create(object, tweenInfo, {Brightness = amount})
	tween:Play()
end

return UITween

オブジェクトに UI ツイーンを適用する
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- UITween モジュールを追加
local UITween = require(ReplicatedStorage.UITweenModule)

-- プレイヤーのGUIとUIオブジェクトを見つける
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- tweening に使用されるサイズ
local frameSizeStart = UDim2.new(0, 0, 0, 0)
local frameSizeMid = UDim2.new(1, 0, 0.05, 0)
local frameSizeEnd = UDim2.new(1, 0, 1, 0)

-- 例のティーニング
UITween.fade(mapUIFrameStroke, 0, 2, 0)
UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
UITween.fade(mapUIFrameFill, 0, 2, 0.5)
UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)
task.wait(0.25)
UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
UITween.size(mapUIFrameFill, frameSizeMid, 0.4, 0.25)
task.wait(0.25)
UITween.size(mapUIFrameStroke, frameSizeEnd, 0.4, 0)
UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)

ここがインタラクティブマップの最終結果です：

マップを設計する

マップを作成する

ページ内容