Interface utilisateur

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

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 :

  1. 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.

    UI Mock
  2. Nous avons exporté les pièces individuelles de la carte en tant que .png et les avons importées dans Studio.

    UI Elements Exported

Construire la carte

La construction de la carte à l'intérieur du studio impliquait l'utilisation de Parts et SurfaceGuis .

  1. Pour les éléments non interactifs, tout ce que nous avions à faire était d'ajouter un objet SurfaceGui à la partie.

  2. 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.

  3. 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.

    Parallax Example
  4. 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.

  5. 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.

    Proximity Prompt in Explorer
  6. 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.

    PUI Tween Module in Explorer
    UITweenModule ModuleScript

    local TweenService = game:GetService("TweenService")
    local UITween = {}
    -- pour les images floues
    function UITween.fadePart(object, amount, time, delay)
    local tweenAlpha = TweenInfo.new(
    time, --Temps
    Enum.EasingStyle.Quad, --Style d'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    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'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    false, --Inverse si vrai
    delay --Temps de retard
    )
    local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
    tween:Play()
    end
    -- pour les images floues
    function UITween.fadeBackground(object, amount, time, delay)
    local tweenAlpha = TweenInfo.new(
    time, --Temps
    Enum.EasingStyle.Quad, --Style d'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    false, --Inverse si vrai
    delay --Temps de retard
    )
    local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
    tween:Play()
    end
    -- pour le texte disparaissant
    function UITween.fadeText(object, amount, time, delay)
    local tweenAlpha = TweenInfo.new(
    time, --Temps
    Enum.EasingStyle.Quad, --Style d'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    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 de taille
    function UITween.size(object, size, time, delay, override, callback)
    local tweenSize = TweenInfo.new(
    time, --Temps
    Enum.EasingStyle.Quint, --Style d'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    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'aisance
    Enum.EasingDirection.Out, --Direction d'allègement
    0, --Compter à nouveau
    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
    Appliquer l'interface utilisateur Tween aux objets

    local ReplicatedStorage = game:GetService("ReplicatedStorage")
    -- Ajouter le module UITween
    local UITween = require(ReplicatedStorage.UITweenModule)
    -- Trouver les objets Guis et d'interface utilisateur 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)
    -- Tweening d'exemple
    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 :