I recently came up with an idea: make PONG, in roblox, using GUI elements. So, I decided to do it. Click the image to go to it, or open it in a new tab:
It’s uncopylocked, so feel free to take a look at its source code. I made it only using GUIs, and the scripts are organised into modules. Feel free to ask any questions about it in the reply section.
Player Movement
I scripted the ball and player movement using TweenService (rather than moving them every Heartbeat) for a smoother experience. I do the same for the ball.
I make sure that the player moves at a constant velocity by making the tween take longer if the distance is longer, by multiplying the distance by a fixed VELOCITY constant. This is based on the fact that Velocity = Distance / Time, and so Time = Distance / Velocity.
I do the same thing for the ball’s movement, except I use the pythagorean theorem to calculate the distance it will travel, because, unlike the player, it will move along 2 axis rather than one.
Collisions
For collisions between elements/objects (Player hitting the ball), I have no other choice but to check for collisions between elements every single frame. I loop through 6 elements in total each frame.
The method I use to check for element overlaps/collisions is quite simple (Click for the pastebin):
First, I need to get the absolute position of the element. The AbsolutePosition is the position of the top left corner of the element, but we want to get the centre, so we add half of the size onto the AbsolutePosition to get the absolute position of the middle. Then, to get the closest distance the elements can be, we add their sizes and divide by 2.
We then get the distance between the 2 elements by subtracting their positions, and we compare the distance to the minimum distance.
Of course, with this running 6 times, every frame, I became worried about performance, and as weird as it sounds, I made an object-oriented alternative that ran twice as fast! It’s faster, because rather than recalculating the minimum distance each time collisions are checked, I store the minimum distance as a property of the object and I fetch the minimum distance in a function called IsColliding:
If you have any feedback, it’d be greatly appreciated!
I’ll be answering any questions, too.
