How can I make arrow key navigation?

Help and Feedback Scripting Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    Hello, so for my game, I want to make it so the player can navigate the save slots up and down with arrow keys.
  2. What is the issue? Include screenshots / videos if possible!
    I don’t want to have the default backslash"/" navigation. I wish to create my own through scripting. Is this possible?
  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I have tried using GuiService.SelectedObject, but that didn’t seem to work.

Edit: I am awaiting an answer…

2 Likes
#2 
local gs = Game:GetService("GuiService")

-- connect a function to trigger 
gs:Select(script.parent) -- parent from what needs to be navigated

Setup: set the first selectable child on -1 Selection order
I recommend to lock the parents selection group so it doesn’t navigate out of the parent

2 Likes
#3

Do I connect this to a ContextActionService?

#4

No just connect to a event to Trigger it

1 Like
#5

So like this? (sorry for the late response :confused: )

			UserInputService.InputBegan:Connect(function(Input, gameProcessedEvent)
				if gameProcessedEvent then return end
				if Input.UserInputType == Enum.UserInputType.Keyboard then
					if Input.KeyCode == Enum.KeyCode.Down then
						GuiService:Select(child)
					end
				end
			end)
#6

Okay. So I set my SelectionOrders on my buttons to 1, 2, 3, 4, and 5. Can you please explain in more detail how to make an arrow key navigation on a UI like in this game?

skip to 0:45

#7

Ye and if a button is clicked with mouseclick1 you need to set it to script or something so player can freely move without Stuck in the ui also always if it should be key down it enabled the selection so I should check first if the main ui is enabled before run that function

I think not 1 2 is needed just set the one where to set on -1 selection order

Make all in a selection group and lock all and manually set the next button etc

Or just not locked but make sure the last button only have to the previous unlocked so it don’t go to the other guis

It used a defould box around the current selection button you can customise it by add a image to a folder inv background etc and set its size to 0.1,0 0.1,0 and size 0,0 0,0 then on the properties of button above set the Selection image to that image

I have used this for console support on my game

1 Like
#8

I just did this:

task.spawn(function()
	local selectedKeys = 0
	
	UserInputService.InputBegan:Connect(function(Input, gameProcessedEvent)
		if gameProcessedEvent then return end
		if Input.UserInputType == Enum.UserInputType.Keyboard then
			local toAdd = if Input.KeyCode == Enum.KeyCode.Down then 1
				elseif Input.KeyCode == Enum.KeyCode.Up then -1 else nil

			if not toAdd then return nil end
			selectedKeys = math.clamp(selectedKeys + toAdd, 1, #SaveSlotsList)

			GuiService:Select(SaveSlotsList[selectedKeys])

			local StartHighlight = TweenService:Create(
				SaveSlotsList[selectedKeys],
				TweenInfo.new(0.25),
				{BackgroundColor3 = Color3.fromRGB(255, 255, 0)}
			)

			local EndHighlight = TweenService:Create(
				SaveSlotsList[selectedKeys],
				TweenInfo.new(0.25),
				{BackgroundColor3 = Color3.fromRGB(25, 25, 25)}
			)

			StartHighlight:Play()
			StartHighlight.Completed:Wait()
			EndHighlight:Play()
			EndHighlight.Completed:Wait()
		elseif Input.UserInputType == Enum.UserInputType.Gamepad1 then
			
		end
	end)
end)

So basically what this does is it has a variable, that either increases or decreases when you use your arrow key up or down. Then the value is clamped to the minimum being 1, because if it’s anything below that it will error and say attempt to index nil. The maximum is 5 (the number of buttons you have)

Since the number is always increasing or decreasing, it will go back or forward, depending on your input.

By saying:

GuiService:Select(SaveSlotsList[selectedKeys])

This can be used for DPadUp and DPadDown, as well as the arrow keys. Not sure about R3/joysticks.

2 Likes