Easy Mobile Buttons - ContextActionUtility

[PseudoPerson]

Contents
About
Module
API
Resources
Contact Me

About

The ContextActionUtility is a replacement module for Roblox’s ContextActionService. Its main purpose is for easy, intuitive mobile support. It works interchangeably with Roblox’s ContextActionService.

𝙋𝙧𝙤-𝘾𝙤𝙣 𝘾𝙝𝙖𝙧𝙩

Pros
Automatic button positioning
Works on every device
Intuitive and simple
Customizable
Made by @PseudoPerson

Cons
Button positioning in-game is limited
All buttons are relative to the jump button
Edge cases are untested
Made by @PseudoPerson

𝙁𝙚𝙖𝙩𝙪𝙧𝙚𝙨 𝙖𝙣𝙙 𝙋𝙞𝙘𝙩𝙪𝙧𝙚𝙨

The Example Game has all of these examples and the module in it. Only the color example and cross-platform compatibility example are enabled on the public game. To see the others, grab a copy for yourself and enable them in studio.

Example Game

Cross Platform Compatablity

Automatic Positioning Example

Pictures from an older version

• Any Icon
• SetTitle support
• Supports every device
  
  

---

• Added functionality: SetPressedColor

• Up to 6 buttons with no positioning needed, it’s all automatic!
• More button “slots” can easily be added!
  
  

---

Feature Summary

• Priority-based Automatic Positioning:
  • Buttons automatically fill “slots” in a predetermined order.
  • Slots can be “hogged” by using BindAction() to bind and empty function and removing the image.
  • This automatic positioning system is great for games with lots of actions that aren’t always needed.
• Automatic Creation of Matching Buttons:
  • Buttons are created automatically relative to the jump button. Customizing buttons is easy with SetTitle(), SetImage(), SetPressedColor(), and SetReleasedColor(). Additional customization can be done with GetButton().
  • Unlike the current ContextActionService default buttons, ContextActionUtility buttons match the mobile controls.
• Works Seamlessly with ContextActionService Code:
  • Works with code for the ContextActionService.
  • Adding mobile support only requires coding visual customizations.

Open Source Example Game

Context Action Utility Examples

Module

v.0 Model

Context Action Utility v.0 - Roblox

𝙎𝙤𝙪𝙧𝙘𝙚 𝘾𝙤𝙙𝙚

API

𝙋𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨

bool Archivable

string ClassName

string Name

Instance Parent

𝙁𝙪𝙣𝙘𝙩𝙞𝙤𝙣𝙨

BindAction(string actionName, Function functionToBind, bool createTouchButton, Tuple inputTypes)

BindActionAtPriority(string actionName, Function functionToBind, bool createTouchButton, int priorityLevel, Tuple inputTypes)

UnbindAction(string actionName)

DisableAction(string actionName)

SetTitle(string actionName, string title)

SetImage(string actionName, string image)

SetPressedColor(string actionName, Color3 color)

Sets the color the button is set to when it is pressed.

SetReleasedColor(string actionName, Color3 color)

Sets the color the button is set to when it is released.

GetButton(string actionName)

MakeButtonRound(string actionName, number amount)

Uses a UICorner to make the button’s shape and interaction box rounded. Amount is the degree of the rounding. Amount 0.5 is completely round. Amount 0 is completely square.

MakeButtonSquare(string actionName)

Makes the button and its interaction box square.

𝙀𝙫𝙚𝙣𝙩𝙨

LocalToolEquipped(Instance toolEquipped)

LocalToolUnequipped(Instance toolUnequipped)

Resources

𝘽𝙪𝙩𝙩𝙤𝙣𝙨

Note: Set to Transparency to 0.5 (ContextActionUtility does this automatically)

Note: Asset URLs are in the ContextActionUtility’s comments

Asset URL: rbxassetid://5713982324
Decal URL: Default Button - Roblox

Asset URL: rbxassetid://5754149564
Decal URL: ! Button - Roblox

Asset URL: rbxassetid://5754150372
Decal URL: ? Button - Roblox

Asset URL: rbxassetid://5754151192
Decal URL: ... Button - Roblox

Asset URL: rbxassetid://5754151652
Decal URL: https://www.roblox.com/catalog/5754151685/Cancel-Button

Asset URL: rbxassetid://5754152113
Decal URL: https://www.roblox.com/catalog/5754152138/Minus-Button

Asset URL: rbxassetid://5754152510
Decal URL: https://www.roblox.com/catalog/5754152529/Plus-Button

Asset URL: rbxassetid://5754152998
Decal URL: https://www.roblox.com/catalog/5754153018/Speech-Button

Asset URL: rbxassetid://5754153324
Decal URL: https://www.roblox.com/catalog/5754153337/Star-Button

Asset URL: rbxassetid://5754154247
Decal URL: https://www.roblox.com/catalog/5754154271/Sword-Button

Asset URL: rbxassetid://5743592925
Decal URL: Read Button - Roblox

Asset URL: rbxassetid://5743593320
Decal URL: Attack Button - Roblox

Asset URL: rbxassetid://5743593654
Decal URL: Target Button - Roblox

Asset URL: rbxassetid://5743594013
Decal URL: Hamburger Button - Roblox

Vector Images

Button Vector Images - Google Drive

𝙀𝙭𝙖𝙢𝙥𝙡𝙚

Context Action Utility Examples

Contact Me

Hello all! If you find anything you want me to change in this article or in the module please contact me through discord, dev forums dm, or the comment section. It really helps to have other people proof read my code and is greatly appreciated! Thanks for reading everyone!

- PseudoPerson

ᴄᴏɴᴛᴀᴄᴛ ᴍᴇ ᴛʜʀᴏᴜɢʜ:

Discord: PseudoPerson#3347
Roblox: Roblox Profile
Dev Forums: Developer Forum Profile

[AstroCode (Ella)]

Disregarding the module, this is a high effort post. You love to see it.

I’ve used CAS in the past and hated it, so this is great to see. I like your idea to automatically position multiple buttons, and the example game looks damn good on my phone. I’m bookmarking this for later use. Thanks for your contribution!

[PseudoPerson]

Oops! Looks like I forgot to uncopylock the example game! It should be uncopylocked now.

[nonraymonable (raymond)]

I am totally going to use this, thank you!!

[good_evening]

I would recommend hosting the source code on a public repository instead, such as GitHub. It would make the code much easier to access and those that have forked the code can easily send you pull requests to proposed changes that they would like to make with your codebase.

This module is pretty gnarly though! Keep up the good work. It’s very well thought out.

It’s a module that we’ve never asked for, but we all needed it.

[thebrickplanetboy (zBrick20)]

OMG Finally this module is so useful to rescale these mobile button tysm!

[rektforeverhd123 (FahrenheitSuc123)]

Hi im new to scripting, would someone teach me how to bind this? because im so confused.

[Zik_isi (Zik)]

Great thanks for that module you made for fellow users of roblox studio, you are a legend.

[0xzMq (Mystery)]

Sorry to bring this topic up again, but I have a question. As you can see in this image, the buttons are arranged from the bottom left and they go clockwise to the top. Is it possible to arrange the buttons the other way around, so the first button is the third button, etc.?

[solvuntur (kwijt)]

can’t you just switch the order of how you add the buttons

[0xzMq (Mystery)]

Sorry for not changing my post, i already found out the positions in the module and changed the positions! Thanks for your reply tho!

[Remingling]

How do you change the position of a button?

[Minimarshoo (Mini)]

The module has no way for you to change the position of the buttons, but you can easily add a function to the module which does that. Something like this would do the trick:

function ContextActionUtility:SetPosition(actionName, position: UDim2)
	local data = Buttons[actionName]
	if not data then return end
	data.Button.Position = position
end

[ph33sh]

this is great- i just created a module for myself to do something similar, wish i woulda found this first!

[ExoticProto (ExoticButters)]

Is there a way to stop it from firing the binded function when releasing the button on mobile? Great stuff btw.

[Goldthyr]

Hi, I’d like to share a tweaked version of this module, it doesnt include any tutorial or anything since i made it for my needs and likings, I’ve removed one feature i think, that i dont need which is “disable action” function but i’m sure you could easily add it back in with some tweaks, so here it is:
ContextActionUtility.lua (7.8 KB)

[MarkoSumisu (Marko)]

Hello, I seem to have stumbled on to some weird behavior with this module:

Situation:
I’ve bound a guard action to one of my mobile button so while holding it your player will guard and when released they should stop guarding. This issue seems to be with the mobile buttons themselves. While the guard button is being pressed seemingly all mobile UI elements are rendered invisible until the player releases the guard button.

Here is a snippet of the relevant code for the guard action:

function CAUBlock(actionName, inputState, inputObject)
    if inputState == Enum.UserInputState.Begin then
        Inputs:FireServer("Block", {...})
    elseif inputState == Enum.UserInputState.End then
        Inputs:FireServer("Block", {...})
    end
    print("[CAU]: Block ")
    print(inputState)
end

---- Mobile Buttons
ContextActionUtility:BindAction("Block", CAUBlock, true)
ContextActionUtility:SetImage("Block", "rbxassetid://13595135265")
ContextActionUtility:SetReleasedColor("Block", Color3.fromRGB(255, 255, 255))

There is also similar unwanted behavior occurring with the attack button specifically after the attack string is complete:

Here is a snippet of the relevant code for the attack action:

local function CAUMeleeAttack(actionName, inputState, inputObject)
    if inputState == Enum.UserInputState.Begin then
        Inputs:FireServer("LMB", {...})
    end
end

---- Mobile Buttons

ContextActionUtility:BindAction("LightAttack", CAUMeleeAttack, true)
ContextActionUtility:SetImage("LightAttack", "rbxassetid://5754154247")
ContextActionUtility:SetReleasedColor("LightAttack", Color3.fromRGB(255, 255, 255))

Yeah I’m kinda stumped on why this is happening. If anyone has any ideas I’d love to hear 'em.

Addendum:
Due to all the context buttons being parented to the jump button, whenever the player’s jump power / jump height is equal to 0 the jump button and all of its descendants will become invisible. Workarounds for this would include:

• Set jump power / jump height to an infinitesimal value like 0.001 instead of 0
• Altering the core ContextActionUtility module to have your custom button be parent outside of the jump button

[spaceconsole (dontmindme)]

An old post, but to fix this you have to edit the Roblox control scripts. Look for ‘Thumbstick’/‘TouchJump’ then an ‘updateEnabled’ function in that script. Remove all of the code inside that function - no need for any hacky solutions

[Heiguy23 (bittersweet)]

oh it was in the touchjump module kk thanks!

[WinnersTakesAll (Winnerz)]

Will you be adding this to GitHub so we can use it as a submodule and get automatic dependency updates?