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

私たちは、ユーザーがこの世界に住んでいるかのように感じる宇宙ステーション内の情報を消費するために、インタラクティブなマップ UI を追加したいと思いました。私たちは、世界をこの世界に追加することを決めました、その代わり画面がエクスペリエンスを重複しないようにするために 3D 空間内にマップを構��

マップのデザイン

マップを設計するには：

1. 私たちは外部のアプリケーションで UI をモックし、どのように見たいかについての概要を作成しました。

   

2. マップの個々の部品を .png としてエクスポートし、Studio にインポートしました。

   

マップを構築する

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

1. 非交互要素の場合、私たちはパーツに SurfaceGui オブジェクトを追加するだけです。

2. インタラクティブ要素の場合、SurfaceGui は、StarterGui コンテナの中にある必要があり、Adornee プロパティが 3D ワークスペースの適切な部分にリンクされています。これにより、ボタンイベントを追加できます。

3. パララックス効果を実現するには、3つの異なる ScreenGui インスタンス、そして 3つのユニークな Parts に割り当てられた 3つの異なる X 値を使用しています。

   

4. その後、SurfaceGui.LightInfluence プロパティで輝き効果を追加しました。プロパティ値を 1 以下に設定すると、SurfaceGui.Brightness プロパティがオンになります。輝きを調整することで、画像から輝きを増加させることができます。

5. ユーザーがマップの表示を切り替えることを許可するには、ProximityPrompt を使用しました。これは、世界の要素とユーザーのインタラクションを簡単に許可する方法です。

   

6. 最後に、ReplicatedStorage の中の UITweenModuleModuleScript のモジュールスクリプトを使用して、UI を TweenService と少しのロジックで隠し表示し、状態を決定するために TweenService といくつかのロジックを追跡しました。ユーザーがクリックした内容を追跡することで、さまざまなプロパティの減少、位置、サイズなどを含むロジックを減少できます。

   

   UITweenModule モジュールスクリプト
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- フェイディング画像の場合
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quad, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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")
   
   -- UIツインモジュールを追加
   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
   
   -- サイズ変更のために使用される
   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)

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