Boîte de dialogue

Voici une explication simple et étape par étape pour créer un module Lua sur Roblox qui affiche une boîte de dialogue au-dessus de la tête des joueurs. C’est comme une bulle de BD qui apparaît quand un personnage parle !

Ce module permet d’afficher un texte (comme « Bonjour ! ») au-dessus de la tête d’un personnage dans Roblox, avec un design personnalisable (couleurs, taille, durée d’affichage, etc.).
Idéal pour :

• Des quêtes ou dialogues dans ton jeu.
• Des messages temporaires (ex : « Bravo ! »).
• Des indications pour les joueurs.

Créer un module pour générer les boîtes de dialogue

Un module, c’est comme un générateur unique pour créer tes boîtes de dialogue :

• Tu gagnes du temps (pas besoin de tout réécrire).
• Tu évites les erreurs (tout est centralisé).
• Tu peux améliorer ton jeu facilement (ajouter des animations, des sons, etc.).

« Un bon développeur est un développeur fainéant : il écrit le code une fois et le réutilise 1000 fois ! »

Où placer le ModuleScript pour la génération des boîtes de dialogue

Emplacement	Usage
ReplicatedStorage	Accessible côté client et serveur recommandé
ServerScriptService	Serveur uniquement
StarterPlayerScripts	Client uniquement

ReplicatedStorage est le meilleur choix pour une utilisation coté client et serveur. Placer un module dans ReplicatedStorage dans Roblox peut être pratique dans ce cas, mais cela comporte aussi des risques importants à connaître, surtout si ton module contient des fonctions sensibles ou des données critiques. Tout ce qui est dans ReplicatedStorage est téléchargé et exécutable côté client (par les joueurs).
Un joueur malveillant peut :

• Exploiter des failles si ton module contient des appels non sécurisés
• Lire tout le code de ton module (même si tu le caches, il peut être extrait avec des outils comme Roblox Studio ou des exploits).
• Modifier localement le comportement du module (en utilisant des exploits ou des scripts clients).

Crée un ModuleScript :

local DialogueModule = {}
local TweenService = game:GetService("TweenService")

-- CONFIGURATION
DialogueModule.CONFIG = {
	largeur = 250,
	hauteur = 80,
	offsetY = 3,
	couleurFond = Color3.fromRGB(0, 0, 0),
	transparenceFond = 0.4,
	couleurTexte = Color3.fromRGB(255, 255, 255),
	couleurBordure = Color3.fromRGB(255, 255, 255),
	taillePolicee = 16,
	dureAffichage = 4,
}

function DialogueModule.creerDialogue(personnage, texte)
	local CONFIG = DialogueModule.CONFIG
	local head = personnage:WaitForChild("Head", 5)
	if not head then return end

	-- Supprimer l'ancienne boîte
	local ancien = head:FindFirstChild("DialogueGui")
	if ancien then ancien:Destroy() end

	-- Créer le BillboardGui
	local billboard = Instance.new("BillboardGui")
	billboard.Name = "DialogueGui"
	billboard.Adornee = head
	billboard.Size = UDim2.new(0, CONFIG.largeur, 0, CONFIG.hauteur)
        
        -- Pour le rebond
	billboard.StudsOffset = Vector3.new(0, CONFIG.offsetY - 2, 0) 
	billboard.AlwaysOnTop = true
	billboard.ResetOnSpawn = false
	billboard.Parent = head

	-- Fond
	local fond = Instance.new("Frame")
	fond.Size = UDim2.new(1, 0, 1, 0)
	fond.BackgroundColor3 = CONFIG.couleurFond
	fond.BackgroundTransparency = 1  -- Commence invisible
	fond.BorderSizePixel = 0
	fond.Parent = billboard

	-- Coins arrondis
	local coin = Instance.new("UICorner")
	coin.CornerRadius = UDim.new(0, 10)
	coin.Parent = fond

	-- Bordure
	local bordure = Instance.new("UIStroke")
	bordure.Color = CONFIG.couleurBordure
	bordure.Thickness = 1.5
	bordure.Transparency = 0.5
	bordure.Parent = fond

	-- Texte
	local label = Instance.new("TextLabel")
	label.Size = UDim2.new(1, -16, 1, -10)
	label.Position = UDim2.new(0, 8, 0, 5)
	label.BackgroundTransparency = 1
	label.TextColor3 = CONFIG.couleurTexte
	label.TextSize = CONFIG.taillePolicee
	label.Font = Enum.Font.GothamMedium
	label.Text = texte
	label.TextWrapped = true
	label.TextXAlignment = Enum.TextXAlignment.Center
	label.Parent = fond

	-- Flèche
	local fleche = Instance.new("Frame")
	fleche.Size = UDim2.new(0, 14, 0, 14)
	fleche.Position = UDim2.new(0.5, -7, 1, -7)
	fleche.BackgroundColor3 = CONFIG.couleurFond
	fleche.BackgroundTransparency = CONFIG.transparenceFond
	fleche.BorderSizePixel = 0
	fleche.Rotation = 45
	fleche.Parent = fond

	-- Suppression après délai
	if CONFIG.dureAffichage > 0 then
		task.delay(CONFIG.dureAffichage, function()
			if billboard and billboard.Parent then
				billboard:Destroy()
			end
		end)
	end

	return billboard
end

return DialogueModule

Génère la boîte de dialogue soit dans un localScript :

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()

local DialogueModule = require(game.ReplicatedStorage.DialogueModule)

-- Afficher
local character = game.Players.LocalPlayer.Character
DialogueModule.creerDialogue(character, "Bonjour !")

Ou dans un script sur le serveur par exemple lors d’une collision avec un part :

local part = script.Parent
local Players = game:GetService("Players")	
local DialogueModule = require(game.ReplicatedStorage.DialogueModule)

part.Touched:Connect(function(hit)
	local player = Players:GetPlayerFromCharacter(hit.Parent)
	if player then
		-- Afficher
		local character = player.Character
		DialogueModule.creerDialogue(character, "Bonjour !")
	end
end)

Comment modifier les paramètres de la boîte de dialogue :

-- Modifier la config si besoin
DialogueModule.CONFIG.dureAffichage = 6
DialogueModule.CONFIG.couleurFond = Color3.fromRGB(30, 30, 80)

Rajoute dans ton code une animation de rebonds avant la suppression :

	-- 1. Rebond de la boîte
	local tweenRebond = TweenService:Create(
		billboard,
		TweenInfo.new(0.3, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out),
		{StudsOffset = Vector3.new(0, CONFIG.offsetY, 0)}
	)
	tweenRebond:Play()

Animation transparence du fond :

	-- 2. Fondu du fond
	local tweenFondu = TweenService:Create(
		fond,
		TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
		{BackgroundTransparency = CONFIG.transparenceFond}
	)
	tweenFondu:Play()

Animer le texte :

	-- 3. Texte qui pulse
	local tweenPulse = TweenService:Create(
		label,
		TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true),
		{TextSize = CONFIG.taillePolicee + 5}
	)
	tweenPulse:Play()

Bouger la flèche :

	-- 4. Flèche qui bouge
	local tweenFleche = TweenService:Create(
		fleche,
		TweenInfo.new(0.8, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut, -1, true),
		{Position = UDim2.new(0.5, -7, 1.2, -14)}
	)
	tweenFleche:Play()