Let’s make a teleport tool!

Hello! In this blogpost I’ll teach you how to make a simple teleport tool in ROBLOX. A teleport tool is very handy when you want to explore a new place like a large landscape / map or even a showcase without having to walk all over the map which is often time consuming! So let’s dive straight into coding this awesome tool.

Prerequisites

Before we start off, we need to learn a few basic concepts about how a ROBLOX game works so that we can make pragmatic decisions while coding this tool. I’ve linked a few articles and web pages down below to help you understand how a ROBLOX game works and also some related concepts that we’ll be touching up on!

These four articles alone should provide you with ample of knowledge to get started with this tutorial!

With that aside, head over to ROBLOX Studio and open a new place, we are going to start off with dropping a Tool object into the StarterPack.

Explorer in ROBLOX Studio

A tool is an object we use to define any kind of a hand held or wearable object (like a skateboard, rocket launcher etc) in ROBLOX. Typically a tool object requires a child named “Handle” which is used to position the tool relative to the player when equipped. Now we don’t really need a handle for this particular tool we’re making so we can go to the properties panel and change the RequiresHandle option to false. This will allow us to activate (as in click / shoot) without ever needing a handle. I have also toggled off the CanBeDropped property of the tool as well because we don’t really want our player to drop this teleport tool as otherwise they’d loose the superpower to teleport!

Next up, we’re gonna add two scripts into our tool. A client-side script or a LocalScript to handle interactions on the client (like mouse click) and a server-side script or simply a Script to handle events from the client on the server.

Now, I’ve renamed the tool and the scripts to make them more easier to approach in the future but this shouldn’t really matter when it comes to implementing our tool.

Now comes the more interesting part of this blogpost. We’ll start off by working on the server side to lay down the foundations for our tool. In our server side script, I have created an instance of RemoteEvent and stored it in ReplicatedStorage. Due to our game being FilteringEnabled, client will not be able to access content on the server side and vice versa. ReplicatedStorage is sort of that exchange point where you can drop in items to be accessed by both server and client and that is the perfect place for us to store our Remote event as it will be accessed by both the client and the server.

Now let’s jump back to our client. I’ve added in a reference to our tool, the current player, the player’s mouse as we’ll be using the mouse click position to teleport our player and finally the teleport tool event from the ReplicatedStorage which we have created using the server side script. We are using WaitForChild as a safety measure incase the event is not yet created by the server.

Next up, we want to be able to get the mouse hit position as soon as the player enables the tool and activates it at a random location in the place.

This is a fairly simple step that can just listens for when the player clicks and lets the server know the mouse hit location. Mouse hit is the 3D point in space where the player’s mouse was when the player clicked the LeftMouseButtton. Now on the server side I take the player’s character and use the PrimaryPart property on the character model to get the HumanoidRootPart, whose position when changed, moves the player accordingly. With that in mind, I just set the HumanoidRootPart’s CFrame to MouseHit and also added an offset of 4 studs so that the player doesn’t teleport into the ground.

With that, our little teleport tool is now finished! Feel free to jump into Play Mode and check it out for yourself!! Importantly don’t forget to share your new creation to the world!!

You can also find the model in my inventory if you’d like to go over it. I hope this tutorial for simple and fun enough to work on!

2 comments

Leave a comment