Nous voulions ajouter une interface utilisateur de carte interactive pour permettre aux utilisateurs de consommer des informations dans la station spatiale qui ressemblait et se sentait comme si elle vivait dans ce monde.Nous avons décidé de construire la carte à l'intérieur de l'espace 3D au lieu d'être sur un écran qui superpose l'expérience.Ce type de visualisation didactique permet une plus grande immersion dans le monde au lieu de se sentir comme une expérience complètement séparée.
Concevoir la carte
Pour concevoir la carte :
Nous avons moqué l'interface utilisateur dans une application externe et nous avons trouvé une idée grossière de la façon dont nous voulions qu'elle soit.
Nous avons exporté les pièces individuelles de la carte en tant que .png et les avons importées dans Studio.
Construire la carte
La construction de la carte à l'intérieur du studio impliquait l'utilisation de Parts et SurfaceGuis .
Pour les éléments non interactifs, tout ce que nous avions à faire était d'ajouter un objet SurfaceGui à la partie.
Pour les éléments interactifs, le SurfaceGui doit également être à l'intérieur du 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 séparées ScreenGui dédiées à trois utilisateurs uniques Parts avec des valeurs de X différentes.
Nous avons ensuite ajouté un effet de luminescence avec la propriété SurfaceGui.LightInfluence.Si vous définissez la valeur de propriété à moins de 1, cela active la propriété SurfaceGui.Brightness .En ajustant la luminosité, vous pouvez augmenter l'éclat émis 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èlisation3D.C'est un moyen facile de permettre l'interaction de l'utilisateur avec les éléments du monde.
Enfin, en utilisant un ModuleScript de UITweenModule à l'intérieur de ReplicatedStorage, nous avons animé la dissimulation et l'affichage de l'interface utilisateur avec TweenService et un peu de logique pour déterminer l'état.En suivant ce que l'utilisateur a cliqué, nous pouvons masquer et afficher des éléments en transférant différentes propriétés comme l'alpha, la position et la taille.
UITweenModule ModuleScriptlocal TweenService = game:GetService("TweenService")local UITween = {}-- pour les images flouesfunction UITween.fadePart(object, amount, time, delay)local tweenAlpha = TweenInfo.new(time, --TempsEnum.EasingStyle.Quad, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay --Temps de retard)local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})tween:Play()endfunction UITween.fade(object, amount, time, delay)local tweenAlpha = TweenInfo.new(time, --TempsEnum.EasingStyle.Quad, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay --Temps de retard)local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})tween:Play()end-- pour les images flouesfunction UITween.fadeBackground(object, amount, time, delay)local tweenAlpha = TweenInfo.new(time, --TempsEnum.EasingStyle.Quad, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay --Temps de retard)local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})tween:Play()end-- pour le texte disparaissantfunction UITween.fadeText(object, amount, time, delay)local tweenAlpha = TweenInfo.new(time, --TempsEnum.EasingStyle.Quad, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay --Temps de retard)local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})tween1:Play()end-- pour déplacer du texte et des imagesfunction UITween.move(object, position, time, delay)task.wait(delay)object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)end-- pour changer de taillefunction UITween.size(object, size, time, delay, override, callback)local tweenSize = TweenInfo.new(time, --TempsEnum.EasingStyle.Quint, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay, --Temps de retardoverride,callback)local tween = TweenService:Create(object, tweenSize, {Size = size})tween:Play()endfunction UITween.rotate(object, rotation, time, delay, override, callback)local tweenSize = TweenInfo.new(time, --TempsEnum.EasingStyle.Quint, --Style d'aisanceEnum.EasingDirection.Out, --Direction d'allègement0, --Compter à nouveaufalse, --Inverse si vraidelay, --Temps de retardoverride,callback)local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})tween:Play()end-- pour flouter la caméra du jeufunction 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 jeufunction 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()endreturn UITweenAppliquer l'interface utilisateur Tween aux objetslocal ReplicatedStorage = game:GetService("ReplicatedStorage")-- Ajouter le module UITweenlocal UITween = require(ReplicatedStorage.UITweenModule)-- Trouver les objets Guis et d'interface utilisateur du joueurlocal playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGuilocal mapUIFrameStroke = screenGuiMapUIFrame.FrameStrokelocal mapUIFrameFill = screenGuiMapUIFrame.FrameFill-- Tailles utilisées pour le tweeninglocal frameSizeStart = UDim2.new(0, 0, 0, 0)local frameSizeMid = UDim2.new(1, 0, 0.05, 0)local frameSizeEnd = UDim2.new(1, 0, 1, 0)-- Tweening d'exempleUITween.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 :