Dans le dernier tutoriel, nous avons couvert la création d'un pack de santé dans Roblox. Dans ce didacticiel, nous aborderons l'obtention des entrées du joueur et la personnalisation des commandes des personnages. Pour ce faire, nous allons créer un système de caméra et de contrôle simple pour un jeu de plateforme 2D.
Contenu
- 1 instances requises
- 2 Tutoriel
- 3 Appareil photo
- Configuration 3.1
- 3.2 Déplacer la caméra
- 4 Commandes
- Conclusion 5
Instances requises
Espace de travail
photo
votre nom
joueurs
votre nom
StarterPlayer
StarterPlayerScripts
CameraScript- Script de contrôle
ContextActionService- Exécuter le service
Tutorial
Avant d'entrer dans le code réel du jeu de plateforme, il est important de comprendre comment les jeux Roblox sont structurés. Lorsqu'un jeu Roblox démarre, un serveur Roblox lance une copie du jeu. Cette copie du jeu s'appelle le Serveur. Ce serveur est responsable du suivi de toutes les parties et des joueurs du jeu. Lorsqu'un joueur rejoint le jeu, il en lance également une copie sur sa machine locale ; La version du monde du jeu du joueur s'appelle le CLIENT.
A chaque fois qu'une modification est apportée sur le Serveur, telle qu'une pièce en mouvement, cette information est envoyée automatiquement à tous les Clients. Les Scripts nous avons utilisé jusqu'à présent exclusivement sur le serveur. Cela fonctionne lorsque nous devons exécuter du code qui affecte le serveur, mais qu'en est-il de la caméra et de l'entrée ? Ce sont des choses qui affectent les joueurs individuels mais pas le serveur. Afin d'écrire du code pour les joueurs individuels, nous devons utiliser un Script local. Il s'agit d'un type spécial de script qui s'exécute sur la machine cliente, pas sur le serveur.
photoIl existe plusieurs styles de caméras pour les jeux 2D, mais celle que nous utiliserons est très simple : si le joueur se déplace trop à droite de la caméra, alors la caméra se déplacera vers la droite. Sinon, la caméra reste immobile.
installation
La première chose à configurer sera la caméra elle-même. Nous devons écraser le script de caméra par défaut de Roblox afin d'écrire le nôtre. Pour ce faire, insérez un Script local dans StarterPlayerScripts et renommez-le CameraScript.
Nous devons maintenant initialiser le point de départ de la caméra.
local cameraHeight = 12 local cameraZOffset = 20 local camera = game.Workspace.CurrentCamera local player = game.Players.LocalPlayer fonction locale setupCamera() camera.CFrame = CFrame.new(Vector3.new(0,cameraHeight,cameraZOffset), Vector3. new(0,cameraHeight,0)) end setupCamera() player.CharacterAdded:connect(setupCamera)
Nous avons d'abord mis en place des variables pour la hauteur de la caméra ainsi que la distance à laquelle nous voulons qu'elle soit par rapport à l'avion le long duquel le joueur marche. Nous plaçons ces variables en haut pour les rendre faciles à trouver, au cas où nous aurions besoin de les ajuster plus tard.
On obtient alors des variables pour la caméra et le lecteur. Dans un LocalScript, game.Workspace.CurrentCamera renvoie la caméra du joueur local, et game.Players.LocalPlayer obtient le joueur local.
Ensuite, nous créons une fonction pour définir la position initiale de la caméra. Nous en aurons besoin lorsque le joueur entrera dans le jeu pour la première fois ainsi qu'à chaque fois que son personnage réapparaîtra. Dans cette fonction, nous définissons simplement le CFrame de la caméra.
Un CFrame (abréviation de CoordinateFrame) stocke à la fois la position d'un objet et son orientation. Vous les voyez souvent utilisés pour manipuler des parties, mais la caméra d'un joueur a également une CFrame. Bien qu'il existe plusieurs façons de créer un CFrame, nous utiliserons la fonction .new de CFrame qui prend deux Vector3 comme arguments. Le premier Vector3 détermine la position de la CFrame. Le deuxième Vector3 définit l'endroit où le CFrame pointe.
Nous appelons notre fonction immédiatement après l'avoir déclarée afin que la caméra soit placée dans la bonne position dès que le joueur se joint. Nous lions également notre fonction à l'événement CharacterAdded du joueur afin qu'elle soit appelée chaque fois que le personnage du joueur réapparaît.
Déplacer la caméra
Maintenant, nous devons déplacer la caméra lorsque le personnage du joueur se déplace vers la droite. Lorsqu'il s'agit de caméras en mouvement, il est important de comprendre comment fonctionne le rendu dans Roblox. La caméra définit où exactement dans la scène 3D nous voulons que le joueur voit, ce qui détermine ensuite ce qui s'affiche à l'écran. Le moteur Roblox actualise ce rendu environ tous les 1/60 de seconde ; Le rendu rapide signifie que le spectateur voit une transition en douceur entre les images. Pour nous assurer que la caméra se déplace en douceur, nous devons nous assurer que la position de la caméra est mise à jour à chaque fois que cette actualisation de rendu se produit. Heureusement, c'est très facile avec une fonction appelée BindToRenderStep.
local cameraHeight = 12 local cameraZOffset = 20 local cameraXChase = 10 local cameraSpeed = .25 local camera = game.Workspace.CurrentCamera local player = game.Players.LocalPlayer local RunService = game:GetService('RunService') fonction locale setupCamera() camera .CFrame = CFrame.new(Vector3.new(0,cameraHeight,cameraZOffset), Vector3.new(0,cameraHeight,0)) end setupCamera() player.CharacterAdded:connect(setupCamera) fonction locale onUpdate() si player.Character et player.Character:FindFirstChild('Torso') then local playerX = player.Character.Torso.Position.X local cameraX = camera.CFrame.pX if cameraX - cameraXChase < playerX then camera.CFrame = camera.CFrame + Vector3.new (cameraSpeed, 0, 0) end end end RunService:BindToRenderStep('Camera', Enum.RenderPriority.Camera.Value, onUpdate)
Nous faisons quelques choses ici, alors examinons-les une à la fois. Nous déclarons d'abord quelques variables supplémentaires. Le premier, cameraXChase représente à quelle distance le joueur peut être de la caméra dans la dimension X avant que la caméra ne commence à se déplacer. cameraSpeed est la distance à laquelle la caméra se déplacera à chaque étape de rendu pour essayer de rattraper le joueur.
La prochaine variable que nous déclarons est pour Exécuter le service dont nous n'avons besoin que pour son LierAuRenderÉtape fonction. En sautant à la fin du script, notez que nous appelons BindToRenderStep avec trois valeurs. Le premier est un nom pour cette liaison, le second est quand pendant l'étape de rendu à exécuter, et enfin la fonction que nous voulons lier - dans ce cas notre fonction personnalisée, onUpdate.
onUpdate fait plusieurs choses. Tout d'abord, il vérifie si le joueur a un modèle de personnage et si ce modèle a une partie appelée Torso. S'il n'avait pas ces éléments, le joueur apparaîtra probablement ou quittera la partie. Dans l'un ou l'autre de ces cas, nous n'avons pas vraiment besoin de la caméra pour faire quoi que ce soit. Mais si le joueur a un personnage, alors nous obtenons la position X du personnage et la position X de la caméra. Nous vérifions ensuite à quelle distance le personnage se trouve de la caméra. Si le personnage est trop proche de la caméra, nous mettons à jour le CFrame de la caméra vers la droite.
Dans ce cas, la caméra ne doit pas bouger.
Dans ce cas, la caméra doit bouger.
CONTRÔLESMaintenant que la caméra est verrouillée sur la vue latérale, ajoutons des commandes personnalisées pour déplacer le personnage uniquement dans le plan XY. Ce code traitera de l'entrée, il devra donc entrer dans un Script local. Insérez un autre LocalScript dans StarterPlayerScripts et renommez-le en ControlScript. Tout comme l'insertion d'un script local appelé CameraScript écrase les commandes de caméra par défaut, ControlScript écrasera les commandes de caractères par défaut.
Contrôles de liaison
Dans notre LocalScript, nous devrons créer plusieurs fonctions et les lier à l'entrée du joueur. Il y a plusieurs façons de le faire, mais l'une des plus pratiques est d'utiliser ContextActionService. Ce service vous permet de lier plusieurs sources d'entrée à une seule fonction. C'est très pratique si vous voulez que votre jeu gère les différents périphériques d'entrée pris en charge par Roblox (clavier, écran tactile, manette de jeu, etc.).
Avant d'écrire le code qui déplace réellement le personnage du joueur, commençons par configurer les liaisons de contrôle. Dans notre nouveau LocalScript, ajoutez les éléments suivants :
local player = game.Players.LocalPlayer local RunService = game:GetService('RunService') local ContextActionService = game:GetService('ContextActionService') fonction locale onLeft(actionName, inputState) end local function onRight(actionName, inputState) end local function onJump(actionName, inputState) end local function onUpdate() end RunService:BindToRenderStep('Control', Enum.RenderPriority.Input.Value, onUpdate) ContextActionService:BindAction('Left', onLeft, true, 'a', Enum.KeyCode .Left, Enum.KeyCode.DPadLeft) ContextActionService:BindAction('Right', onRight, true, 'd', Enum.KeyCode.Right, Enum.KeyCode.DPadRight) ContextActionService:BindAction('Jump', onJump, true, ' w', Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)
Tout comme dans notre CameraScript, nous créons des variables pour le lecteur et pour RunService. Nous avons également besoin d'une variable pour ContextActionService. Nous créons ensuite une fonction pour chaque action que le joueur peut effectuer dans notre jeu : onLeft, onRight et onJump. Ces fonctions prennent deux arguments : le nom de l'action et l'état de l'entrée qui a appelé la fonction.
fonction locale test1(a, b) print(b) end local function test2(b) print(b) end test1("chien", "chat") test2("chien", "chat") Si nous voulons la fonction qui affiche cat dans ce cas, nous aurions besoin d'utiliser test1 car cat est passé en tant que deuxième paramètre.
Comme dans CameraScript, nous créons également une fonction de mise à jour que nous lions à RenderStepped. Cette fonction effectuera en fait le déplacement du caractère après que nous ayons traité l'entrée. Assurez-vous que la priorité de la liaison est définie sur Input (nous avons utilisé Camera auparavant).
Ensuite, nous lions nos trois fonctions d'entrée en utilisant Action de liaison. BindAction prend plusieurs arguments. Le premier est le nom de l'action. La seconde est la fonction que vous souhaitez lier. Le troisième argument est de savoir si vous souhaitez créer automatiquement un bouton pour cette action sur les appareils tactiles tels que les téléphones et les tablettes. Enfin, vous pouvez inclure une liste d'entrées pour lesquelles vous souhaitez déclencher l'action. Si l'entrée n'est qu'une touche de lettre sur le clavier, vous pouvez l'inclure sous forme de chaîne entourée de guillemets (""). Sinon tu peux utiliser Enum.KeyCode pour spécifier des touches et des boutons spéciaux.
Déplacer le personnage
Ajoutons maintenant le code pour déplacer le personnage. Encore une fois, nous allons effectuer le déplacement réel dans la fonction onUpdate. Toutes les fonctions d'entrée définiront des variables qu'onUpdate utilisera pour déterminer comment déplacer le caractère.
local player = game.Players.LocalPlayer local RunService = game:GetService('RunService') local ContextActionService = game:GetService('ContextActionService') local jumping = false local leftValue, rightValue = 0, 0 fonction locale onLeft(actionName, inputState) if inputState == Enum.UserInputState.Begin then leftValue = 1 elseif inputState == Enum.UserInputState.End then leftValue = 0 end end local function onRight(actionName, inputState) if inputState == Enum.UserInputState.Begin then rightValue = 1 elseif inputState == Enum.UserInputState.End then rightValue = 0 end end fonction locale onJump(actionName, inputState) if inputState == Enum.UserInputState.Begin then jumping = true elseif inputState == Enum.UserInputState.End then jumping = false end end fonction locale onUpdate() si player.Character et player.Character:FindFirstChild('Humanoid') alors si sautant alors player.Character.Humanoid.Jump = true end local moveDirection = rightValue - leftValue player.Character.Humanoid:Move(Vector 3.new(moveDirection,0,0), false) end end RunService:BindToRenderStep('Control', Enum.RenderPriority.Input.Value, onUpdate) ContextActionService:BindAction('Left', onLeft, true, 'a', Enum .KeyCode.Left, Enum.KeyCode.DPadLeft) ContextActionService:BindAction('Right', onRight, true, 'd', Enum.KeyCode.Right, Enum.KeyCode.DPadRight) ContextActionService:BindAction('Jump', onJump, true , 'w', Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)
Nous avons d'abord configuré trois nouvelles variables : jumping, leftValue et rightValue. sauter est juste un booléen : le joueur va sauter ou il ne le fera pas. La gauche et la droite sont un peu plus compliquées cependant. Lorsque le joueur tient à gauche, le personnage doit évidemment se déplacer vers la gauche, mais lorsque le joueur appuie à droite tandis que la gauche est maintenue enfoncée, le personnage doit s'arrêter. Si le joueur relâche à gauche ou à droite, alors le personnage doit se déplacer dans la direction de la touche qui est toujours maintenue. Faire une variable pour chaque direction sera utile comme vous le verrez dans la fonction onUpdate.
local leftValue, rightValue = 0, 0
pourrait tout aussi bien s'écrire
local leftValue = 0 local rightValue = 0
Dans chacune des fonctions d'entrée, nous vérifions le inputState, qui indique simplement quel type d'événement d'entrée a déclenché la fonction. Dans ce cas, nous ne nous soucions que du moment où le joueur appuie sur une touche (Enum.UserInputState.Begin) et lorsqu'ils relâchent la touche (Enum.UserInputState.End). Dans onLeft et onRight, si la touche correspondante est enfoncée, nous définissons la variable correspondante sur 1. Si la touche a été relâchée, la valeur est définie sur 0. Dans onJump, nous définissons la variable de saut sur true lorsque l'entrée de saut démarre, et sur false lorsque l'entrée se termine.
Dans onUpdate, nous vérifions d'abord si le personnage du joueur existe et s'il est Humanoïde est intact. Si c'est le cas, nous vérifions si la variable de saut a été définie sur true. Si c'est le cas, nous définissons le Sauter propriété de l'humanoïde du joueur à true.
onUpdate détermine ensuite dans quelle direction déplacer le caractère en soustrayant leftValue de rightValue. N'oubliez pas que ces variables peuvent être définies individuellement. Si les deux sont maintenus enfoncés, le résultat sera 0, ce qui signifie que le personnage ne bougera pas. Si l'une des touches est maintenue enfoncée, l'une des valeurs sera 1 et la différence sera soit 1 soit -1. On appelle alors le Move fonction sur l'humanoïde du personnage, en passant la différence que nous venons de calculer. Cette fonction forcera un personnage à se déplacer dans la direction que nous fournissons. Étant donné que nous ne définissons qu'une valeur dans la dimension X, le personnage ne pourra se déplacer que le long de cet axe.
Avec la combinaison de scripts de caméra et de contrôle, nous pouvons maintenant configurer notre jeu Roblox pour qu'il fonctionne comme un jeu de plateforme 2D. Si vous souhaitez ajouter ou étendre le système que nous avons configuré ici, faites attention lorsque vous utilisez des scripts et des scripts locaux. N'oubliez pas que s'il existe un mécanisme de jeu qui affectera tous les joueurs (comme un piège, des plates-formes mobiles, etc.), il doit être implémenté dans un script. Si vous ajoutez de nouvelles commandes ou des commentaires spécifiques au joueur (comme un mouvement de tiret, un double saut, des effets de fondu de caméra), ceux-ci doivent être insérés dans un script local.
