[v3.0] GuiCollisionService - Gui collisions done right

If you are looking for a physics based gui collision system, check this out:
Nature2D - 2D Physics Engine for UI Elements

GuiCollision-removebg-preview (1)


Get GuiCollisionService here: https://www.roblox.com/library/7145661386/GuiCollisionService
Version: v3.0
Documentation: View


Table of Contents

About

GuiCollisionService is an easy to use module that focuses on helping you create collidable Guis and help you detect them using BindableEvents. It is one of the easiest and efficient Gui Collision Detector out there. It helps you to create intuative 2 dimensional physics in your roblox games.

Getting Started

Initializing

Require the module in a LocalScript or a Script using the following code -

local GuiCollisionService = require(game:GetService("ReplicatedStorage").GuiCollisionService)

Examples

Destroying targets when touched

showcase1 ā€ Made with Clipchamp

Changing colors on collision [Video quality issue]

showcase2 ā€ Made with Clipchamp

Solid Colliders

new ā€ Made with Clipchamp

Tweens being stopped by Solid Colliders

Collisions for rotated guis

Games made using this module


ā€“ [ Navigation ] ā€“

Module

Documentation

Github

Bug Reporting

Contributing


Thank you, Hope it helps you out, I would love to see the growth of 2 Dimensional games on roblox, and thats why I am bringing out a tutorial for making 2 dimensional roblox games pretty soon!

Peace!

Check out my other projects on github: jaipack17 Ā· GitHub

Update Log

v1.17 is here!
v1.18 is here!
v1.19 is here!
v2.0 is here!
v2.01 is here!
v3.0 is here!

154 Likes

how does this work with image guis or guis with rounded corners?

It works with image guis as well! For round corners, it depends upon the guiā€™s AbsoluteSize and Size properties.

1 Like

Looks nice, however minor typo in docs:

The example uses removeColliders whereas the definition above is removeCollider. Also I would suggest adding a way to remove collider based on instance using table.find

5 Likes

wait how are image guis possible?
does it detect the border or does it work with the images because I donā€™t see how it could do that with image detection

Oops! making a quick fix. [ahdgahdajdhj]

The module depends on the ImageLabel/Buttonā€™s Size, unfortunately, Collision detections for images is not yet a feature, might be added soon if possible!

only thing I could think of is detecting which part of the GUI has color, other then that I donā€™t know how you could even do it, I donā€™t know too much about gui so idrk

1 Like

I read over the source really quick it doesnā€™t seem to support AnchorPoint, not sure if that will affect usability of this Module but you should check that out.

3 Likes

Correct, as of now it does not support AnchorPoint. v1.17.0 will have these updates in it! I am working on these features currently, new updates will be released soon!

This as well! :wink:

1 Like

you can use this for that :wink:

UI Collision (1).rbxl (255.9 KB)

3 Likes

Amazing thanks! I ll be sure to credit you! If I end up using it :slight_smile:

Great news!

Tomorrow, I will be posting the tutorial about making your first GUI Based 2 dimensional game on Roblox! And this module will be included in the tutorial, so you can check that out as well for some more use cases of the module!

Tutorial is Out: [Flappy Bird] Create your first 2 Dimensional Gui Based Game!

2 Likes

Update v1.16.3

Updated how OnCollisionEnded event is fired. It will not fire unnecessarily when hitters are not in touch with colliders.

2 Likes

Update v1.17.0! :tada:

Added ā€œsolidā€ property to :addCollider(), setting it to true makes it impossible for a hitter to go through a collider! Example:

new ā€ Made with Clipchamp

local GuiCollisionService = require(game.ReplicatedStorage.GuiCollisionService)

local group = GuiCollisionService.createCollisionGroup()
group:addHitter(guiInstanceHitter)
group:addCollider(guiInstanceCollider, true) -- To make it impossible for a hitter to go through the collider

Updated Source code

Updated Documentation


Special thanks to @RuizuKun_Dev without whom, this wouldnā€™t have been possible, after understanding the math, I was able to figure out how easy this was to implement! :wink:

I am working on a 2D RayCasting module to help you cast rays even when the rotation of the gui is not 0 for 2D projectiles. Stay tuned!

There are a few bugs to this, which I have been fixing, thanks!

3 Likes

If you would like to see similar updates to the Module, be sure to reply down below with your ideas!

Currently working on Tween Cancelling when the hitter collides with a Solid collider for some neat 2D physics! Will be out in v1.18 :wink:

This is amazing, I will be using this asset to replicate collisions on the 2D version of my custom particle system :slight_smile:

1 Like

Update v1.18

local addedHitter = group:addHitter(script.Parent.Hitter, { tween, tween2 })

addedHitter.index -- index of the hitter 
addedHitter.instance -- the instance that was marked as the hitter, here: script.Parent.Hitter

Updated Documentation

Updated Module

Updated Source Code

Testing placefile for Update v1.18: v1.18.rbxl (26.9 KB)


If you have any suggestions and ideas, be sure to reply below so that I update this module often!

4 Likes

If you have any questions regarding the update, be sure to ask me!

Does this work with rotated GUIs?