[v3.0] GuiCollisionService - Gui collisions done right

Resources Community Resources
#20

Does this work with rotated GUIs?

#21

Unfortunately, this doesn’t always work with Rotated Guis, I am planning to implement that in the upcoming version, thanks!

#22

Update v1.19

  • Minor Bug fixes
  • Code cleanup
  • Added :updateCollider() function to update already existing collider’s instance and solid property. View Docs
  • :addCollider() and :updateCollider() functions now return the collider that has been added:
local collider = group:addCollider(someInstance, true)

print(collider) -- {index: number, instance: instance, solid: boolean}

Updated Module

Updated Documentation

Updated Source Code

1 Like
#23

I have also been playing around with Gui Collisions when the guis are rotated, next update will consist of gui collisions even if the guis are rotated. :wink:

as suggested by @hboogy101

I wish to make 2D game development on roblox 10x times easier for you guys!

2 Likes
#25

this is pretty great, good job! will have to use this to make my game’s GUI’s

#26

Update v2.0

  • Added :setZIndexHierarchy(boolean). The function is used to determine if the hitter will collide with colliders that have different ZIndex values. Setting it to true, will make the hitter not detect collisions with colliders that have different ZIndex value than the hitter. Setting it to false, will make the hitter collide with colliders no matter what their ZIndexes are. By default this is set to false. View Docs

  • This feature can be used to create Slopes in 2D Games, slanting roads, caves, objects you can’t go through but can go behind and in front of them, by changing the hitter’s ZIndex. For example:

Updated Module

Updated Documentation

Updated Source code

1 Like
#27

Update v2.01

  • Added .isInCore() function. This function is used to determine if a gui object is completely inside of the area of another gui. This function returns true if a gui is completely inside of another, else it returns false. If guiHitter’s size is smaller than that of guiCollider, the function returns false. View docs

Video Examples:


(ignore the “too” misspell)

This works with tweens as well!

Example Code:

local GuiCollisionService = require(game.ReplicatedStorage.GuiCollisionService)

print(GuiCollisionService.isInCore(someHitterInstance, someCollider)) -- prints true if hitter is completely inside the area of the collider, else false

Use Cases

This function can be used to create Rhythm game scoring mechanics. For example a “Perfect hit” or a “Miss”

Like that of fnf or robeats:

Updated Module

Updated Documentation

Updated Source code

1 Like
#28

Minor update to .isInCore(). It now works for rotated hitters as well!

1 Like
#29

Update v3.0

After a fairly long wait. The update you all have been waiting for is finally out! (sorry for the long wait)

  • This module now perfectly detects collisions for rotated Guis! How? Its fairly simple! With the concept of ray casting. Each point casts a ray on the x axis, if the ray intersects with any of the edges of the gui and if the point lies inside the gui object, both guis intersect! No matter what the rotation of the guis are!
Example Code for the video 
local GuiCollisionService = require(game.ReplicatedStorage.GuiCollisionService)
local group = GuiCollisionService.createCollisionGroup()

--GuiCollisionService.

group:addCollider(script.Parent.Still, false)
group:addCollider(script.Parent.Still2, false)
group:addCollider(script.Parent.Still3, false)
group:addHitter(script.Parent.Move, {})

group:getHitter(1).CollidersTouched.Event:Connect(function(hits)
     group:getHitter(1).BackgroundColor3 = Color3.new(0.333333, 1, 0)
end)

group:getHitter(1).OnCollisionEnded.Event:Connect(function()
     group:getHitter(1).BackgroundColor3 = Color3.new(255,255,255)
end)

Currently this does not work with solid colliders as expected. But works perfectly otherwise! Will be added to solid colliders soon!

Updated Module

Updated Source Code

Hope this update helped a few! Alongside this, I am currently working on a 2D RayCast module for you all! Thanks!

(cc: @hboogy101)

4 Likes
#30

Really good module! Keep up the good work! Hopefully, I’m gonna use this for future project!

1 Like
#31

Holy cow, I tried to figure this out a while ago and I am happy someone finally made it :stuck_out_tongue: Great work!

2 Likes
#32

I’m sorry to bump, but this is insane, and I love it.

I’ve made something similar to this before, but with support for UICorner frames. That was a nightmare; never again.

Few slight modifications I might suggest:

Make collision groups “destroyable” (This could be useful if you wish to do some minor optimization i.e removing “game” state groups in a start menu.)
This could be accomplished by using BindToRenderStepped to make the RenderStepped connections removable, since as far as I can see right now, they are just connected with no references.

Use Attributes instead of Value objects
Pretty self-explanatory

And that’s pretty much all that I can immediately suggest.

Once again, sorry to bump this; but I had to since I thought to suggest these changes after reviewing the source.

Pretty cool module you got here!

print(string.format("Cheers,\n\t%s\t[%s]", "IDoLua", "CantBeBothered"))
>>Cheers,
>>  IDoLua  [CantBeBothered]
1 Like
#33

this is what i needed, all what i needed is .iscolliding() this service is E P I C

1 Like
#34

Hello. I’m a dev who is learning how to script and trying to make a game. Sorry for my english by the way. My goal is to make gui collision and I do have your module script. I put it in ServerScriptService. I’m here to ask how to use the functions in your module script. I really want to finish my game and collision are really imortant. Thank for reading and answering. Have a nice day. If someone else can help I would like to receive any tips.

#35

Please check the documentation https://github.com/jaipack17/GuiCollisionService/blob/main/README.md#documentation

1 Like
#36

It could be manually set, say asking the user what shape it is out of a list (square, rhombus, circle, etc) then specifying the edge radius. For more complex shapes, I have no clue… Maybe a plugin that lets the user create a bounding box and store the points in values inside the image.

#37

Thank you so much !! I’ll check it out right now !

#38

If I put .isInCore by exemple, then how to active my function ?

#39

Amazing feature! Would it be possible to have accurate UI image detection (where the image is not a square)?

#40

That SOUNDS impossible I’d say. You could make some square hitboxes and offset it to the imagelabel.