How would I go about making a image gui move with WASD?

Help and Feedback Art Design Support
,
#1

I’m trying to create a 2D game with GUIs and create a character with a GUI too. I’m not sure how to go about this when it comes to moving the new ‘character’, because I need it to go up down left and right. Any things I could try out? Also if someone could suggest how to remove the top Roblox GUI that pops up when you start the game that would be AWESOME.

If there are any other suggestions as to how I would go about this in a better manner that would be cool too? Like if there’s a more efficient way than using GUIs. But remember I’m creating an entirely new 2D character.

#2

I would recommend using ContextActionService if the control are going to be used a lot (such as movement).
https://developer.roblox.com/en-us/api-reference/class/ContextActionService

1 Like
#3

mouse.Keydown:connect(function(key) and udim and adding values should be enough. If you’re asking about collisions too, you would have to go in a complex code which I can’t send rn. Cuz I’m in mobile .

#4

How would I add values to the udim or position?

1 Like
#5

Hey, not to be rude in all. But do you have scripting knowledge? If you don’t I think you shouldn’t jump onto a big project with Ui. Try learning the basics. Because if you don’t know the basics you most likely won’t know what each script does and could discourage you from scripting in general(thats what happened to me back in 2018/2019). No offence.

#6

Udim2.new. values are the udim.

#7

It’s quite straightforward.

  • Have some variables for the current location and velocity of the image.
  • Every frame, change the current location variables based on the velocity variables, and move the actual GUI image.
  • When you press WASD, change the velocity.

There are a lot of tutorials for this in Javascript, where a common exercise is to make a square move on a canvas.

actual code, since I actually went and wrote it again 
local RunService = game:GetService("RunService")
local UserInputService = game:GetService("UserInputService")

local posX = 0
local posY = 0
local velocityX = 0
local velocityY = 0

local mover = script.Parent.ImageLabel -- assuming all this is in a LocalScript beside an ImageLabel
local speed = 100 -- pixels per second

-- this will run every time the screen is about to be redrawn
RunService.RenderStepped:Connect(function(dt)
	-- pixels = frame * seconds/frame * pixels/second
	posX = posX + velocityX * dt * speed
	posY = posY + velocityY * dt * speed
	mover.Position = UDim2.new(
		0, posX,
		0, posY
	)
	-- you cannot do mover.Position = mover.Position + UDim2.new(whatever)
	-- because a lot of the time, the increase will be smaller than 1 pixel per frame
	-- and so the position does not change at all
end)

UserInputService.InputBegan:Connect(function(input, processed)
	if processed then return end -- do nothing if you're chatting or something
	if input.UserInputType == Enum.UserInputType.Keyboard then
		local key = input.KeyCode
		-- if both this key and the opposite key are held, stay still, else move
		if     key == Enum.KeyCode.W then velocityY = (if UserInputService:IsKeyDown(Enum.KeyCode.S) then 0 else -1)
		elseif key == Enum.KeyCode.A then velocityX = (if UserInputService:IsKeyDown(Enum.KeyCode.D) then 0 else -1)
		elseif key == Enum.KeyCode.S then velocityY = (if UserInputService:IsKeyDown(Enum.KeyCode.W) then 0 else  1)
		elseif key == Enum.KeyCode.D then velocityX = (if UserInputService:IsKeyDown(Enum.KeyCode.A) then 0 else  1)
		end
	end
end)

UserInputService.InputEnded:Connect(function(input, processed)
	if processed then return end
	if input.UserInputType == Enum.UserInputType.Keyboard then
		local key = input.KeyCode
		-- if neither this key nor the opposite key are held, stay still, else move
		if     key == Enum.KeyCode.W then velocityY = (if UserInputService:IsKeyDown(Enum.KeyCode.S) then  1 else 0)
		elseif key == Enum.KeyCode.A then velocityX = (if UserInputService:IsKeyDown(Enum.KeyCode.D) then  1 else 0)
		elseif key == Enum.KeyCode.S then velocityY = (if UserInputService:IsKeyDown(Enum.KeyCode.W) then -1 else 0)
		elseif key == Enum.KeyCode.D then velocityX = (if UserInputService:IsKeyDown(Enum.KeyCode.A) then -1 else 0)
		end
	end
end)
2 Likes