Interface utilisateur | Documentation

Nous voulions ajouter une interface utilisateur de carte interactive pour permettre aux utilisateurs de consommer des informations dans la station spatiale, qui paraissait et semblait appartenir à cet univers. Nous avons décidé de construire la carte dans l'espace 3D au lieu sur un écran qui superpose l'expérience. Ce type de visualisation diégétique permet une immersion plus importante dans le monde, au lieu de donner l'impression d'une expérience totalement séparée.

Concevoir la carte

Pour concevoir la carte :

Nous avons maqué l'interface dans une application externe et avons eu une idée générale de son apparence.
Nous avons exporté les pièces individuelles de la carte au format .png et les avons importées dans Studio.

Construire la carte

Construire la carte dans Studio impliquait d'utiliser Parts et SurfaceGuis.

Pour les éléments non interactifs, il suffisait d'ajouter un objet SurfaceGui à la pièce.
Pour les éléments interactifs, le SurfaceGui doit également être à l'intérieur du conteneur StarterGui, avec la propriété Adornee liée à la pièce 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 séparées de ScreenGui attribuées à trois Parts uniques avec différentes valeurs X.
Nous avons ensuite ajouté un effet de lueur avec la propriété SurfaceGui.LightInfluence. Si vous réglez la valeur de propriété à moins de 1, cela active la propriété SurfaceGui.Brightness. En ajustant la luminosité, vous pouvez augmenter la lueur émise par l'image.
Pour permettre aux utilisateurs de basculer l'affichage de la carte, nous avons utilisé un ProximityPrompt que nous avons attaché à un modèle 3D. C'est un moyen facile de permettre l'interaction des utilisateurs avec les éléments du monde.

Enfin, en utilisant un Script Module UITweenModule à l'intérieur de ReplicatedStorage, nous avons animé l'affichage et la masquage de l'UI avec TweenService et un peu de logique pour déterminer l'état. En suivant ce sur quoi l'utilisateur a cliqué, nous pouvions masquer et afficher des éléments en tweenant diverses propriétés telles que l'alpha, la position et la taille.

ModuleScript UITweenModule
local TweenService = game:GetService("TweenService")
local UITween = {}

-- pour fondu des images
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay --Temps de retard
	)

	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'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay --Temps de retard
	)

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

-- pour fondu des images
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay --Temps de retard
	)

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

-- pour fondu du texte
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Temps
		Enum.EasingStyle.Quad, --Style d'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay --Temps de retard
	)

	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'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay, --Temps de retard
		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'assouplissement
		Enum.EasingDirection.Out, --Direction d'assouplissement
		0, --Compter les répétitions
		false, --Inverse si vrai
		delay, --Temps de retard
		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

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

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

-- Trouver les Guis et objets 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 :