Catégories
Jeu vidéo ROBLOX ROBLOX-NIVEAU01

Le défi des blocs

Tu vas créer un petit jeu Roblox dans lequel plusieurs blocs sont placés dans un dossier.

Chaque bloc possède une couleur et peut réagir lorsque le joueur clique dessus.

Au fur et à mesure du tutoriel, tu vas apprendre à :

  • récupérer un objet dans Roblox ;
  • parcourir plusieurs objets ;
  • utiliser des variables ;
  • utiliser des conditions ;
  • réagir à un événement ;
  • modifier un objet ;
  • déplacer un objet ;
  • utiliser un Vector3 ;
  • créer une animation avec TweenService.

Le jeu commencera très simplement, puis tu vas progressivement le transformer.

La règle du jeu

Au départ, il y a trois blocs :

          PART01       PART02       PART03
           ROUGE        VERT         BLEU
             ↓            ↓            ↓
          [    ]       [    ]       [    ]

Le joueur doit cliquer sur les blocs pour les faire bouger.

Mais attention : c’est toi, le programmeur, qui vas décider de leurs règles !

Étape 1 : Comprendre le jeu avant de coder

But

Avant d’écrire une seule ligne de code, observe le jeu.

Tu dois identifier :

  • les objets ;
  • leurs noms ;
  • leurs propriétés ;
  • les actions que le joueur pourra effectuer.

Concepts clés

  • Objet
  • Propriété

Explications

Dans Roblox, presque tout ce que tu vois est un objet.

Une Part est un objet.

Elle possède des propriétés :

Nom
Couleur
Position
Taille
Anchored
...

On peut comparer un objet Roblox à une boîte qui contient des informations.

Par exemple :

Part01
 ├── Name = "Part01"
 ├── Color = rouge
 ├── Size = ...
 ├── Position = ...
 └── Anchored = true

Le programme pourra modifier ces informations.

À toi de jouer !

Ouvre Roblox Studio.

Dans Workspace, crée un dossier nommé :

FolderTest

À l’intérieur, crée trois Part :

FolderTest
│
├── Part01
├── Part02
└── Part03

Place-les à différents endroits dans la scène.

Test

Lance le jeu et vérifie que tu vois bien les trois blocs.

Questions

1. Une Part est-elle un objet Roblox ?

  • a) Oui
  • b) Non

2. Où se trouvent les trois Parts ?

  • a) Dans ServerStorage
  • b) Dans ReplicatedStorage
  • c) Dans Workspace

3. À quoi sert FolderTest ?

a) À ranger les Parts
b) À déplacer les Parts
c) À créer un joueur

Documentation Roblox

Roblox Creator Documentation – Instances

Roblox Creator Documentation – Folder

Roblox Creator Documentation – ClickDetector


Étape 3 : Lire un Folder

But

Tu vas apprendre à récupérer un objet et à utiliser ses propriétés.

Concepts clés

  • Variable
  • WaitForChild()

Explications

Une variable est comme une boîte portant une étiquette.

Nous allons créer une boîte appelée :

folderTest

et y ranger notre dossier Roblox.

Code Lua

Crée un Script dans ServerScriptService.

-- Récupère le dossier FolderKilyan dans Workspace
local folderTest = workspace:WaitForChild("FolderTest")

-- Affiche le nom et le type de l'objet
print("Folder test :", folderTest.Name, folderTest.ClassName)

Que fait le programme ?

Cette ligne :

local folderTest = workspace:WaitForChild("FolderTest")

signifie :

« Cherche FolderTest dans Workspace et place-le dans la variable folderTest. »

Puis :

folderTest.Name

récupère son nom.

Et :

folderTest.ClassName

récupère son type.

À toi de jouer !

Lance le jeu.

Regarde la fenêtre Output (Sortie)

Tu devrais voir quelque chose comme :

Folder test : FolderTest Folder

Modification

Remplace :

print("Folder test :", folderTest.Name, folderTest.ClassName)

par :

print("Mon dossier s'appelle :", folderTest.Name)

Observe le résultat.

Questions

1. Que contient la variable folderTest ?

  • a) Une Part
  • b) Un folder nommé FolderTest
  • c) Le joueur

2. À quoi sert local ?

a) À créer une variable
b) À créer une Part
c) À détecter un clic

Documentation Roblox

Roblox Creator Documentation – WaitForChild


Étape 4 : Lire toutes les Parts du Folder

But

Jusqu’à maintenant, nous savons récupérer un dossier (Folder).

Maintenant, nous voulons parcourir tous les objets qu’il contient.

Concepts clés

  • Boucle for
  • GetChildren()

Explications

Imagine que le programme ouvre la boîte FolderTest et regarde chaque objet l’un après l’autre.

FolderTest
     ↓
  Part01
     ↓
  Part02
     ↓
  Part03

C’est exactement le rôle de la boucle for.

Code Lua

local folderTest = workspace:WaitForChild("FolderTest")

-- Parcourt tous les objets directement contenus dans le Folder
for i, part in ipairs(folderTest:GetChildren()) do
	
	-- Affiche le nom et le type de chaque objet
	print("Part :", part.Name, part.ClassName)
	
end

Explication

Cette partie :

folderTest:GetChildren()

demande :

« Donne-moi tous les enfants de FolderTest. »

La boucle :

for i, part in ipairs(...)

prend ensuite chaque objet un par un.

part représente l’objet actuellement étudié.

À toi de jouer !

Lance le jeu.

Tu dois obtenir :

Part : Part01 Part
Part : Part02 Part
Part : Part03 Part

Expérience

Ajoute une quatrième Part :

Part04

Sans modifier le script.

Relance le jeu.

Que se passe-t-il ?

Le programme doit automatiquement détecter Part04.

C’est la puissance des boucles !

Questions

1. Combien de fois la boucle s’exécute-t-elle avec 3 Parts ?

  • a) 1
  • b) 2
  • c) 3

2. Que contient la variable part pendant la boucle ?

  • a) Le joueur
  • b) L’objet actuellement parcouru
  • c) Le Folder

Documentation Roblox

Roblox Creator Documentation – GetChildren

Roblox Creator Documentation – Lua for loops


Étape 5 : Vérifier que l’objet est bien une Part

But

Tous les objets d’un Folder ne sont pas forcément des Parts.

Nous allons apprendre à vérifier le type d’un objet avant de le modifier.

Concept clé

  • Condition if

Code Lua

local folderTest = workspace:WaitForChild("FolderTest")

for _, part in ipairs(folderTest:GetChildren()) do
	
	-- Vérifie si l'objet est bien une pièce physique
	if part:IsA("BasePart") then
		
		print(part.Name, part.ClassName)
		
		-- Change la couleur de la Part en rouge
		part.Color = Color3.fromRGB(255, 0, 0)
		
	end
	
end

Explications

La condition :

if part:IsA("BasePart") then

signifie :

« Est-ce que cet objet est une Part physique ? »

Si la réponse est oui, le programme exécute le code entre :

then

et

end

À toi de jouer !

Ajoute un objet différent dans le Folder, par exemple un Model.

Lance le jeu.

Le programme ne devrait pas essayer de lui appliquer une couleur.

Modification

Change :

Color3.fromRGB(255, 0, 0)

par :

Color3.fromRGB(0, 255, 0)

Que se passe-t-il ?

Questions

1. À quoi sert if ?

  • a) À répéter
  • b) À poser une question au programme
  • c) À créer une variable

2. Que vérifie IsA() ?

  • a) Le nom
  • b) La couleur
  • c) Le type d’objet

Documentation Roblox

Roblox Creator Documentation – IsA


Étape 6 : Donner une couleur différente à chaque Part

But

Tu vas maintenant utiliser plusieurs conditions.

Concepts clés

  • if
  • elseif
  • else

Code Lua

local folderTest = workspace:WaitForChild("FolderTest")

for _, part in ipairs(folderTest:GetChildren()) do
	
	-- Vérifie que l'objet est bien une Part
	if part:IsA("BasePart") then
		
		-- Part01 devient rouge
		if part.Name == "Part01" then
			part.Color = Color3.fromRGB(255, 0, 0)
		
		-- Part02 devient verte
		elseif part.Name == "Part02" then
			part.Color = Color3.fromRGB(0, 255, 0)
		
		-- Toutes les autres Parts deviennent bleues
		else
			part.Color = Color3.fromRGB(0, 0, 255)
		end
		
	end
end

Explications

Le programme pose plusieurs questions :

Est-ce Part01 ?
     ↓
    oui → rouge

    non
     ↓
Est-ce Part02 ?
     ↓
    oui → vert

    non
     ↓
    bleu

Le else signifie :

« Si aucune des conditions précédentes n’est vraie. »

À toi de jouer !

Lance le jeu.

Tu dois obtenir :

Part01 → ROUGE

Part02 → VERT

Part03 → BLEU

Expérience

Ajoute :

Part04
Part05

Elles doivent automatiquement devenir bleues.

Puis crée une condition pour Part04.

Quelle couleur veux-tu lui donner ?

Questions

Si part.Name vaut "Part01", quelle condition est vraie ?

  • a) part.Name == "Part02"
  • b) part.Name == "Part01"
  • c) part.Name == "Part03"

Documentation Roblox

Roblox Creator Documentation – Conditional statements


Étape 7 : Réagir au clic du joueur

But

Jusqu’à maintenant, le programme s’exécute automatiquement.

Nous allons maintenant attendre une action du joueur.

Concepts clés

  • Événement
  • Fonction

Explications

Un événement signifie :

« Quelque chose vient de se produire. »

Par exemple :

Le joueur clique
       ↓
événement MouseClick
       ↓
le programme réagit

Nous allons utiliser le ClickDetector.

Rajoute un ClickDetector à chaque part

Code Lua

local folderTest = workspace:WaitForChild("FolderKTest")

for _, part in ipairs(folderTest:GetChildren()) do
	
	if part:IsA("BasePart") then
		
		-- Recherche le ClickDetector placé dans la Part
		local clickDetector = part:FindFirstChildOfClass("ClickDetector")
		
		if clickDetector then
			
			-- Attend que le joueur clique sur la Part
			clickDetector.MouseClick:Connect(function(player)
				
				-- Affiche le nom du joueur et de la Part
				print(player.Name .. " a cliqué sur " .. part.Name)
				
			end)
		end
	end
end

Explication de function

Cette partie :

function(player)

crée une petite fonction.

Elle sera exécutée plus tard, lorsque le joueur cliquera.

C’est comme dire :

« Quand le clic arrivera, fais ce qui se trouve dans cette fonction. »

À toi de jouer !

Lance le jeu.

Clique sur les Parts.

Dans Output, tu dois voir :

Patrick a cliqué sur Part01
Patrick a cliqué sur Part02

Le nom dépend évidemment du joueur.

Modification

Ajoute :

print("Bravo !")

dans la fonction.

Question

Quand la fonction est-elle exécutée ?

  • a) Au lancement du jeu
  • b) Quand le joueur clique
  • c) Quand le joueur quitte

Documentation Roblox

Roblox Creator Documentation – Events

Roblox Creator Documentation – ClickDetector.MouseClick


Étape 8 : Faire bouger une Part avec un vecteur

But

Tu vas maintenant faire agir la Part lorsqu’elle est cliquée.

C’est ici que nous faisons le lien avec les mathématiques.

Concepts clés

  • Vector3
  • Vitesse

Explications

Un Vector3 contient trois valeurs :

X
Y
Z

Par exemple :

Vector3.new(50, 0, 0)

signifie :

X = 50
Y = 0
Z = 0

On demande donc à la Part de se déplacer selon l’axe X.

Code Lua

local folderTest = workspace:WaitForChild("FolderTest")

for _, part in ipairs(folderTest:GetChildren()) do
	
	if part:IsA("BasePart") then
		
		-- Recherche le ClickDetector
		local clickDetector = part:FindFirstChildOfClass("ClickDetector")
		
		if clickDetector then
			
			-- Action réalisée lorsque le joueur clique
			clickDetector.MouseClick:Connect(function(player)
				
				print(player.Name .. " a cliqué sur " .. part.Name)
				
				-- Autorise la Part à être déplacée par la physique
				part.Anchored = false
				
				-- Crée un vecteur de vitesse
				local velocityVector = Vector3.new(50, 0, 0)
				
				-- Applique le vecteur à la Part
				part.AssemblyLinearVelocity = velocityVector
				
			end)
		end
	end
end

Que représente le vecteur ?

Vector3.new(50, 0, 0)

On peut le représenter mathématiquement :v=(50;0;0)\vec{v}=(50;0;0)

La Part part dans la direction positive de X.

À toi de jouer !

Clique sur une Part.

Elle doit partir vers la droite.

Expériences

Essaie successivement :

Vector3.new(-50, 0, 0)

Puis :

Vector3.new(0, 50, 0)

Puis :

Vector3.new(0, 0, 50)

Observe les directions.

Puis essaie :

Vector3.new(30, 0, 40)

Que se passe-t-il ?

Tu viens de créer un déplacement oblique.

Question

Que signifie :

Vector3.new(0, 50, 0)
  • a) Aller vers X
  • b) Aller vers Y
  • c) Aller vers Z

Pour aller plus loin

Demande-toi :

Pourquoi Vector3 est-il intéressant pour représenter un vecteur mathématique ?

Tu peux maintenant commencer à introduire :

Vecteur mathématique
        ↓
Direction
Sens
Longueur

        ↓

Vector3 Roblox
(X, Y, Z)

Documentation Roblox

Roblox Creator Documentation – Vector3

Roblox Creator Documentation – AssemblyLinearVelocity


Étape 9 : Faire monter la Part avec TweenService

But

Jusqu’à maintenant, la Part était lancée avec une vitesse.

Maintenant, nous allons créer une animation contrôlée.

Concepts clés

  • Service
  • Tween

Explications

TweenService permet de modifier progressivement une propriété.

Par exemple :

Position initiale
       ↓
       ↓
       ↓
Position finale

Au lieu de déplacer brutalement la Part, Roblox crée une animation.

Code Lua

local folderTest = workspace:WaitForChild("FolderKilyan")

-- Récupère le service qui permet de créer des animations
local tweenService = game:GetService("TweenService")

-- Définit la durée et le type de l'animation
local tweenInfo = TweenInfo.new(
	1,
	Enum.EasingStyle.Linear,
	Enum.EasingDirection.Out,
	0,
	false,
	0
)

for _, part in ipairs(folderTest:GetChildren()) do
	
	if part:IsA("BasePart") then
		
		-- Recherche le ClickDetector
		local clickDetector = part:FindFirstChildOfClass("ClickDetector")
		
		if clickDetector then
			
			clickDetector.MouseClick:Connect(function(player)
				
				print(player.Name .. " a cliqué sur " .. part.Name)
				
				-- Vecteur de déplacement
				local moveVector = CFrame.new(0, 10, 0)
				
				-- Création de l'animation
				local tween = tweenService:Create(
					part,
					tweenInfo,
					{
						CFrame = part.CFrame * moveVector
					}
				)
				
				-- Lance l'animation
				tween:Play()
				
			end)
		end
	end
end

Que signifie le déplacement ?

CFrame.new(0, 10, 0)

correspond à :

X = 0
Y = 10
Z = 0

La Part monte donc de 10 studs.

À toi de jouer !

Clique sur une Part.

Elle doit monter progressivement.

Modification 1

Essaie :

CFrame.new(10, 0, 0)

La Part se déplace horizontalement.

Modification 2

Essaie :

CFrame.new(10, 10, 0)

La Part se déplace à la fois :

  • sur X ;
  • sur Y.

Tu viens de construire un déplacement composé de deux directions.

Question

Quelle instruction démarre réellement l’animation ?

  • a) tweenInfo
  • b) tween:Play()
  • c) CFrame.new()

Documentation Roblox

Roblox Creator Documentation – TweenService

Roblox Creator Documentation – TweenInfo


Étape 10 : Construire la règle du jeu

Nous avons maintenant suffisamment de programmation pour créer une vraie règle.

But

Tu vas combiner plusieurs concepts.

Règle proposée

Chaque couleur correspond à une action :

ROUGE → se déplace à droite

VERT → monte

BLEU → se déplace en diagonale

Code

local folderTest = workspace:WaitForChild("FolderKilyan")

for _, part in ipairs(folderTest:GetChildren()) do
	
	if part:IsA("BasePart") then
		
		-- Détermine la couleur de la Part
		if part.Name == "Part01" then
			part.Color = Color3.fromRGB(255, 0, 0)
			
		elseif part.Name == "Part02" then
			part.Color = Color3.fromRGB(0, 255, 0)
			
		else
			part.Color = Color3.fromRGB(0, 0, 255)
		end
		
		-- Recherche le ClickDetector
		local clickDetector = part:FindFirstChildOfClass("ClickDetector")
		
		if clickDetector then
			
			clickDetector.MouseClick:Connect(function(player)
				
				print(player.Name .. " a cliqué sur " .. part.Name)
				
				-- Part rouge
				if part.Name == "Part01" then
					
					part.Anchored = false
					part.AssemblyLinearVelocity = Vector3.new(50, 0, 0)
				
				-- Part verte
				elseif part.Name == "Part02" then
					
					part.Anchored = false
					part.AssemblyLinearVelocity = Vector3.new(0, 50, 0)
				
				-- Part bleue
				else
					
					part.Anchored = false
					part.AssemblyLinearVelocity = Vector3.new(30, 0, 40)
					
				end
				
			end)
		end
	end
end

Le jeu possède maintenant une règle

                JOUEUR
                   |
                 clique
                   ↓
              Quelle Part ?
              /     |     \
          ROUGE    VERT    BLEU
            ↓        ↓       ↓
          → X       ↑ Y    ↗ X+Z

Étape 11 : Défi mathématique — prédire le déplacement

Maintenant, c’est à ton tour de réfléchir avant d’exécuter le programme.

Le code indique :

local moveVector = Vector3.new(20, 0, 30)

Demande-toi :

Dans quelle direction la Part va-t-elle partir ?

Dessine le vecteur sur une feuille.

Puis teste dans Roblox.

Défi 1

Quel vecteur faut-il utiliser pour aller :

10 à droite et 20 vers l’avant ?

Réponse :

Vector3.new(10, 0, 20)

Défi 2

Quel vecteur faut-il utiliser pour aller :

20 à gauche ?

Vector3.new(-20, 0, 0)

Défi 3

Quel vecteur permet de monter de 15 studs ?

Vector3.new(0, 15, 0)

Défi 4

Construis un déplacement :

X = -20
Y = 10
Z = 30

Solution :

Vector3.new(-20, 10, 30)

Tu viens de manipuler un vecteur dans l’espace.


Étape 12 : Le défi final

Maintenant, tu deviens le programmeur du jeu.

Tu dois créer tes propres règles.

Défi 1 : Ajouter une quatrième Part

Ajoute :

Part04

Quelle action doit-elle réaliser ?

Par exemple :

Vector3.new(-50, 20, 0)

Défi 2 : Ajouter une nouvelle couleur

Modifie :

elseif part.Name == "Part02" then

pour créer une nouvelle règle.

Défi 3 : Créer une zone d’arrivée

Construis une zone appelée :

Goal

Le joueur doit réussir à faire arriver une Part dans cette zone.

Tu vas alors pouvoir introduire une nouvelle notion :

Position
+
Distance
+
Collision
+
Condition de victoire

Script final

Voici une version propre regroupant les principaux éléments étudiés :

--==================================================
-- LE DEFI DES BLOCS
--==================================================

-- Récupère le dossier qui contient toutes les Parts
local folderTest = workspace:WaitForChild("FolderKilyan")


--==================================================
-- PARCOURS DES PARTS
--==================================================

for _, part in ipairs(folderTest:GetChildren()) do
	
	-- Vérifie que l'objet est bien une pièce physique
	if part:IsA("BasePart") then
		
		
		--==================================================
		-- ATTRIBUTION DES COULEURS
		--==================================================
		
		if part.Name == "Part01" then
			
			part.Color = Color3.fromRGB(255, 0, 0)
			
		elseif part.Name == "Part02" then
			
			part.Color = Color3.fromRGB(0, 255, 0)
			
		else
			
			part.Color = Color3.fromRGB(0, 0, 255)
			
		end
		
		
		--==================================================
		-- RECHERCHE DU CLICKDETECTOR
		--==================================================
		
		local clickDetector = part:FindFirstChildOfClass("ClickDetector")
		
		
		-- Vérifie qu'un ClickDetector existe
		if clickDetector then
			
			
			--==================================================
			-- EVENEMENT : LE JOUEUR CLIQUE
			--==================================================
			
			clickDetector.MouseClick:Connect(function(player)
				
				print(player.Name .. " a cliqué sur " .. part.Name)
				
				
				--==================================================
				-- REGLES DU JEU
				--==================================================
				
				if part.Name == "Part01" then
					
					-- Part01 part vers la droite
					part.Anchored = false
					part.AssemblyLinearVelocity =
						Vector3.new(50, 0, 0)
					
					
				elseif part.Name == "Part02" then
					
					-- Part02 part vers le haut
					part.Anchored = false
					part.AssemblyLinearVelocity =
						Vector3.new(0, 50, 0)
					
					
				else
					
					-- Les autres Parts partent en diagonale
					part.Anchored = false
					part.AssemblyLinearVelocity =
						Vector3.new(30, 0, 40)
					
				end
				
			end)
		end
	end
end

Ce que tu as appris

À la fin du tutoriel, tu as utilisé de nombreuses notions fondamentales :

NotionExemple dans le jeu
VariablefolderTest
Objetpart
Propriétépart.Color
Conditionif part.Name == ...
elseautre Part
Bouclefor _, part
Fonctionfunction(player)
ÉvénementMouseClick
ServiceGetService()
Vector3Vector3.new(50,0,0)
PhysiqueAssemblyLinearVelocity
AnimationTweenService
OrganisationFolder

Et surtout, tu as découvert une idée importante :

PROGRAMME

        ↓

OBSERVER
        ↓
DÉCIDER
        ↓
AGIR

C’est cette structure qui permet de transformer progressivement quelques lignes de Lua en un véritable jeu.


Pour aller beaucoup plus loin

Maintenant, mets-toi à la place du joueur.

Au début, tu ne connais pas le jeu :

« Je clique sur une Part. Que va-t-il se passer ? »

Puis tu deviens joueur expérimenté :

« La Part rouge part dans la direction X. »

Puis programmeur :

« Si je remplace Vector3.new(50,0,0) par Vector3.new(20,0,40), je change la direction du déplacement. »

Puis concepteur de jeu :

« Je vais créer une zone d’arrivée et donner des points lorsque la Part atteint sa cible. »

Tu peux alors faire évoluer le projet avec :

  1. un score ;
  2. des vies ;
  3. plusieurs niveaux ;
  4. des obstacles ;
  5. des zones interdites ;
  6. des portes ;
  7. des téléporteurs ;
  8. des vecteurs à calculer ;
  9. des angles à déterminer ;
  10. un véritable défi de géométrie dans l’espace.

Cela permettrait de faire évoluer le même projet de la sixième à la troisième, en introduisant progressivement programmation, coordonnées, déplacements, vecteurs, angles, distances et géométrie 3D.