Skip to content
This repository has been archived by the owner on May 9, 2023. It is now read-only.

easy to use gui collision module for roblox 2 dimensional game development

License

Notifications You must be signed in to change notification settings

jaipack17/GuiCollisionService

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation


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

5a696aecff47ff4165895e529446fea3ab3f6485

Changing colors on collision [Video quality issue]

4fedc03f47fd67953bb40e363b84eb385fb42a10

Solid Colliding Gui Frames

new ‐ Made with Clipchamp

Game made using this module

https://www.roblox.com/games/7111031857/Flappy-Wings


-- [ Navigation ] --


Documentation

Before diving into the documentation, I would like to tell you, this module works on the basis of the 'hitter n collider' principle

image

The white frame is the collider - It is the frame that is hit by the hitter The green frame is the hitter - It is the frame that collides with the collider

Initializing

.createCollisionGroup()

This function is the first step out of all, in order to create your colliders and hits.

  • parameters: none
  • returns: metatable
local GuiCollisionService = require(game.ReplicatedStorage.GuiCollisionService)

local group = GuiCollisionService.createCollisionGroup()

Raw

.isColliding()

  • parameters: guiObjectHitter: instance, guiObjectCollider: instance
  • returns: boolean
local instance1 = script.Parent.Frame1 -- example
local instance2 = script.Parent.Collider -- example [Frame]

GuiCollisionService.isColliding(instance1, instance2)

.isInCore()

  • parameters: guiObjectHitter: instance, guiObjectCollider: instance
  • returns: boolean

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.

local instance1 = script.Parent.Frame1 -- example
local instance2 = script.Parent.Collider -- example [Frame]

GuiCollisionService.isInCore(instance1, instance2)

setZIndexHierarchy()

  • parameters: shouldCollideAccordingToZIndex: boolean
  • returns: nil

The function is used to determine if the hitter will collide with colliders that have different ZIndex values.

By default it is set to false

group:setZIndexHierarchy(true) -- hitter won't collide with colliders that have different Zindex values than the hitter
group:setZIndexHierarchy(false) -- hitter will collide with colliders that have different Zindex values than the hitter and also the colliders that have the same ZIndex as the hitter

Managing Colliders

addCollider()

  • parameters: guiObjectCollider: instance, solid: boolean
  • returns: { index: number, instance: instance, solid: boolean }

The following function is used to declare a gui instance as a collider. Whenever a hitter collides with this gui instance, an event will be fired.

group:addCollider(script.Parent.Still)
group:addCollider(script.Parent.Frame)
local collider = group:addCollider(script.Parent.Frame2)
group:addCollider(script.Parent.Frame3, true) -- To make it impossible for a hitter to go through the collider

--[[
Colliders are saved as such:
 {
   Still,
   Frame, 
   Frame2,
   Frame3
 }
]]--

updateCollider()

  • parameters: index: number, instance: instance, solid: boolean
  • returns: hitter: { index: number, instance: instance, solid: boolean }

This updates already existing collider's instance and solid property!

group:updateCollider(2, script.Parent.someCollider, false)

getColliders()

  • parameters: none
  • returns: table
print(group:getColliders())

removeCollider()

  • parameters: index: number
  • returns: nil
group:removeCollider(1) -- removes the 1st collider that was added

Managing Hitters

addHitter()

  • parameters: guiObject: instance, tweens: table
  • returns: hitter: { index: number, hitterInstance: instance }
local tween = game:GetService("TweenService"):Create(script.Parent, TweenInfo.new(1, Enum.EasingStyle.Linear), {Position = UDim2.new(1,0,.5,0)})
group:addHitter(script.Parent.HitFrame, { tween })

updateHitter()

  • parameters: index: number, instance: instance, tweens: table
  • returns: hitter: { index: number, hitterInstance: instance }

This updates already existing hitter's instance and tweens!

group:updateHitter(1, script.Parent.SomeFrame, { tween1, tween2, tween3 })

getHitter()

  • parameters: index: number
  • returns: instance
group:getHitter(1) -- returns the first hitter added

getHitters()

  • parameters: none
  • returns: table
group:getHitters()

getHitterTweens()

  • parameters: index: number
  • returns: tweens: table

Returns all the tweens of the hitter

group:getHitterTweens(1) -- returns tweens of the 1st hitter

removeHitter()

  • parameters: index: number
  • returns: nil
group:removeHitter(1) -- removes the first hitter added

Managing Events

CollidersTouched - Event

This event is fired when a hitter touches a collider! If it does, it returns a table of the colliders it is touching with

local hitter = group:getHitter(1) -- first hitter

hitter.CollidersTouched.Event:Connect(function(hits)
   hitter.BackgroundColor3 = Color3.new(255,0,0) -- changes color of hitter to red when it collides.
end)

OnCollisionEnded - Event

This event is fired when a hitter is not in touch with any colliders at all

local hitter = group:getHitter(1) -- first hitter

hitter.OnCollisionEnded.Event:Connect(function(hits)
   hitter.BackgroundColor3 = Color3.new(0,0,0) -- changes color of hitter to white
end)

Example Code

StarterGui:
image

Place a localscript inside ScreenGui:

local GuiCollisionService = require(game.ReplicatedStorage.GuiCollisionService)

local group = GuiCollisionService.createCollisionGroup()

group:addCollider(script.Parent.Still)
group:addCollider(script.Parent.Still2)
group:addCollider(script.Parent.Still3)
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)

Place a localscript inside Move:

local player = game.Players.LocalPlayer
local RS = game:GetService("RunService")

RS.RenderStepped:Connect(function()
	script.Parent.Position = UDim2.new(0, player:GetMouse().X, 0, player:GetMouse().Y)
end)

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!

About

easy to use gui collision module for roblox 2 dimensional game development

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages