Interface utilisateur | Documentation

Nous avons voulu ajouter une interface utilisateur de carte interactive pour permettre aux utilisateurs de consommer des informations dans la station spatiale qui ressemblent et se sentent comme s'ils vivaient dans ce monde. Nous avons décidé de construire la carte à l'intérieur de l'espace 3D au lieu d'une écran qui superpose l'expérience. Cette type de visualisation diegétique permet plus d'immersion avec le monde comme si c'était une expérience séparée complètement.

Concevoir la carte

Pour concevoir la carte :

Nous avons simulé l'interface utilisateur dans une application externe et avons inventé une idée générale de la façon dont nous voulions qu'elle ait l'air.
Nous avons exporté les pièces individuelles de la carte en tant que .png et les avons importées dans Studio.

Construction de la carte

Construction de la carte à l'intérieur de Studio impliquant l'utilisation de Parts et SurfaceGuis.

Pour les éléments non interactifs, tout ce que nous avons besoin de faire est d'ajouter un SurfaceGui objet à la partie.
Pour les éléments interactifs, le SurfaceGui doit également être dans le conteneur StarterGui, avec la propriété Adornee liée à la partie appropriée dans l'espace de travail 3D. Cela vous permet d'ajouter des événements de bouton.
Pour obtenir un effet de parallaxe, nous avons utilisé trois instances ScreenGui séparées attribuées à trois Parts avec différents X valeurs.
Nous avons ensuite ajouté un effet de lumière avec la propriété SurfaceGui.LightInfluence. Si vous avez réglé la valeur de la propriété sur n'importe quelle valeur inférieure à 1, cela active la propriété SurfaceGui.Brightness. En ajustant la luminosité, vous pouvez augmenter la lumière émise de l'image.
Pour permettre aux utilisateurs de basculer la présentation de la carte, nous avons utilisé un ProximityPrompt que nous avons attaché à un modèlisation3D. C'est une façon simple d'autoriser l'interaction des utilisateurs avec les éléments du monde.

Enfin, en utilisant un UITweenModuleModuleScript à l'intérieur de ReplicatedStorage, nous avons animé le cachage et le montage de l'interface avec TweenService et un peu de logique pour déterminer l'état. En suivant ce que l'utilisateur a cliqué, nous pouvions cacher et montrer les éléments en tweenant diverses propriétés comme l'Alpha, la position et la taille.

Script de module UITweet
local TweenService = game:GetService("TweenService")
local UITween = {}

-- pour les images qui disparaissent
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay --Temps de retardement
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay --Temps de retardement
	)

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

-- pour les images qui disparaissent
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay --Temps de retardement
	)

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

-- pour le texte de l'évanouissement
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay --Temps de retardement
	)

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

-- pour déplacer du texte et des images
function UITween.move(object, position, time, delay)

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

-- pour changer la taille
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quint, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay, --Temps de retardement
		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, --Temps
		Enum.EasingStyle.Quint, --Style d'aération
		Enum.EasingDirection.Out, --Direction de l'aération
		0, --Répéter le compte
		false, --Inverse si oui
		delay, --Temps de retardement
		override,
		callback
	)

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

-- pour flouter la caméra du jeu
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

-- pour flouter la caméra du jeu
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

Appliquer Tween UI aux objets
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Ajouter un module UITweet
local UITween = require(ReplicatedStorage.UITweenModule)

-- Trouver les objets Guis et UI du joueur
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Tailles utilisées pour le 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)

-- Exemple de Tweening
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)

Voici le résultat final de la carte interactive :