LÖVE

Posted: **Tue Apr 10, 2012 12:28 am**

Is there a way to make a textbox input in love?

Posted: **Tue Apr 10, 2012 1:49 am**

CDCosma wrote:Is there a way to make a textbox input in love?

I don't have experience with this, But i can think of a way to do it..So you'd probably have a variable assigned to the text in the textbox. Then on love.keypressed() you'd add whichever key was pressed to that string..something like this:

Code: Select all

function love.load()
	str = ""
end

function love.draw()
	love.graphics.print(str, 10, 10)
end

function love.keypressed(key)
	str = str..key
end

That should give you an idea on how to do it, But of course that won't quite do the trick since it just adds the name of the key you pressed to the end of the string. So if the string is already "something" and you press lshift, then it would turn into "somethinglshift". Hope that helps at least a little. lol

Posted: **Tue Apr 10, 2012 3:25 am**

You probably should read the code inside a GUI lib first, but if you're determined to make your own, the second parameter to love.keypressed is the unicode codepoint representing the key that was pressed. So, veethree was partially right. The wiki page gives an example: https://love2d.org/wiki/love.keypressed

Posted: **Tue Apr 10, 2012 2:04 pm**

Its not that hard really, you'd have to create a Textbox class and some basic methods other than update and draw. You'd have something more or less like this:

Code: Select all

Textbox = {}
Textbox.__index = Textbox

function Textbox.create(x, y, max)
	
	local temp = {}
	setmetatable(temp, Textbox)	
	
	temp.hover = false	
	temp.selected = false
	temp.text = "" 
	temp.max = max
	temp.width = font["default"]:getWidth("a") * 16
	temp.height = font["default"]:getHeight()
	temp.color = color["text"]
	temp.x = x
	temp.y = y	
	
	return temp
	
end

Here we have the create method that inits all our vars. If you're not familiar with lua's metamethods, i suggest reading about it, since you will not be using lua's full functionalities without this info.

Code: Select all

function Textbox:draw()	
	
	love.graphics.setColor(self.color)
	
	if self.selected then
		love.graphics.setColor(unpack(color["hover"]))	
	end
	
	love.graphics.quad("line", self.x, self.y, self.x + self.width, self.y, self.x + self.width, self.y + self.height, self.x, self.y + self.height)
	love.graphics.setFont(font["default"])	
	love.graphics.setColor(self.color)
	love.graphics.print(self.text, self.x, self.y)	
	
end

Then the draw function, which just prints the text in a quad and sets the quad to "hover" color if the textbox is selected.

Code: Select all

function Textbox:update(dt)	
	
	local x = love.mouse.getX()
	local y = love.mouse.getY()	
	
	if x > self.x
		and x < self.x + self.width
		and y < self.y + self.height
		and y > self.y then
		self.hover = true
	else
		self.hover = false
	end
	
end

Then update that just checks if mouse is over textbox.

Code: Select all

function Textbox:mousepressed(x, y, button)	
	
	if self.hover then 
		self.selected = true		 
	else
		self.selected = false		
	end
	
end

function Textbox:keypressed(key)	

	if string.len(self:getText()) < self.max then
	
		if self.selected then
			
			if key == "backspace" then 
	
				local str = self:getText()
						
				self:setText(string.sub(str, 1, string.len(str) - 1))			
				
			elseif key:match("[A-Za-z0-9]") and not in_table(key_disable, key) then				
				
				local str = self:getText()				
				local newKey = key
				
				if love.keyboard.isDown("shift") then newKey = string.upper(key) end
				
				str = str .. newKey
				self:setText(str)			
				
			end
		
		end
		
	end
	
end

Mousepressed is pretty self-explanatory. Keypress checks if keys being pressed are valid. You can create a table of keys you want to disable (key_disable). I found this table somewhere in the forum a long time ago, so to make it easier, here you go:

Code: Select all

key_disable = { 
	"up","down","left","right","home","end","pageup","pagedown",								--Navigation keys
	"insert","tab","clear","delete",															--Editing keys
	"f1","f2","f3","f4","f5","f6","f7","f8","f9","f10","f11","f12","f13","f14","f15",			--Function keys
	"numlock","scrollock","ralt","lalt","rmeta","lmeta","lsuper","rsuper","mode","compose", "lshift", "rshift", "lctrl", "rctrl", "capslock",		--Modifier keys
	"pause","escape","help","print","sysreq","break","menu","power","euro","undo"				--Miscellaneous keys
}

Then you just have to make getters and setters, mainly for "text" var.

I suggest you don't copy this, since I just made this real quick and I'm not sure its 100% correct. Plus, doing it yourself gives you more experience

Cheers.

Posted: **Tue Apr 10, 2012 2:28 pm**

I'm actually working on a multiline editbox today, its very basic so far but I can share my code if you want.

Posted: **Tue Apr 10, 2012 11:07 pm**

Here's what I've come up with so far today, it includes syntax highlighting but unfortunately its built on top of a quite heavy GUI lib.

Posted: **Wed Apr 11, 2012 8:38 am**

There are a couple of ways to do it, the best in my opinion is using love.keypressed and checking for a specific range of unicode characters that you need. It's a bit complex, and there's no support for things like cursor positioning and copy/paste without quite a bit of extra code and creativity. Unfortunately there's no simple solution that doesn't break cross-platform compatibility with LOVE itself so there's no provided means of doing what you ask.

If you are new to LOVE I highly suggest starting with a few tutorials on the wiki and save some of the more complex stuff for later.

LÖVE

Any way to make textbox inputs?

Any way to make textbox inputs?

Re: Any way to make textbox inputs?

Re: Any way to make textbox inputs?

Re: Any way to make textbox inputs?

Re: Any way to make textbox inputs?

Re: Any way to make textbox inputs?

Re: Any way to make textbox inputs?