如何在love2d中创建文本框

Question

我一直试图为用户创建一个框,一旦用户单击该框,就可以输入数据.这是我到目前为止,但单击该框不会导致文本输入添加到它.问题在哪里？

function love.load ()
    txt1 = ""

    columnx = { 50, 160, 260, 375, 495, 600, 710 }
    columny = { 130, 230, 330, 440, 540, 640 }


     if show1 == true then
        function love.textinput(t)
            txt1 = t
        end
    end
end

function love.mousepressed (x, y)
    if
        x >= columnx[4] and
        x <= 435 and
        y >= columny[1] and
        y >= 145 then
        show1 = true
    end
end

function love.draw ()
    love.graphics.print(txt1, columnx[4], columny[1])
end

Answer 1

你已经开始了,但我会给你一些关于如何创建基本文本框的技巧.

首先,将概念文本框视为单个表,其中包含需要了解的有关正确更新和呈现的所有内容.对自我包含的东西进行推理要容易得多.

文本框需要知道它的位置,大小,是否处于活动状态以及它包含的文本.我们可以将它压缩成一个如下所示的表.

local textbox = {
    x = 40,
    y = 40,
    width = 400,
    height = 200,
    text = '',
    active = false,
    colors = {
        background = { 255, 255, 255, 255 },
        text = { 40, 40, 40, 255 }
    }
}

(我们还存储了一些颜色信息.)

之后love.textinput,正如您所见,添加文本的简单方法就是通过.在您的代码中,我们只检查文本框是否处于活动状态一次,love.load当然不是,因为我们可能尚未接受任何用户输入.我们只是检查处理程序中文本框是否处于活动状态,而不是尝试重载函数,并相应地继续.

function love.textinput (text)
    if textbox.active then
        textbox.text = textbox.text .. text
    end
end

我们已经介绍了如何检查用户是否在问题的矩形区域内点击了:Love2d光标位置.如果文本框当前处于活动状态且用户在其空间外单击,我们希望停用该文本框.

function love.mousepressed (x, y)
    if
        x >= textbox.x and
        x <= textbox.x + textbox.width and
        y >= textbox.y and 
        y <= textbox.y + textbox.height 
    then
        textbox.active = true
    elseif textbox.active then
        textbox.active = false
    end
end

最后我们需要渲染我们的文本框.我们unpack用来扩展我们的颜色表,并love.graphics.printf确保我们的文本包含在文本框的空间中.

function love.draw ()
    love.graphics.setColor(unpack(textbox.colors.background))
    love.graphics.rectangle('fill',
        textbox.x, textbox.y,
        textbox.width, textbox.height)

    love.graphics.setColor(unpack(textbox.colors.text))
    love.graphics.printf(textbox.text,
        textbox.x, textbox.y,
        textbox.width, 'left')
end

这些是创建非常粗糙的文本框的基本思想.这不完美.请注意,您需要考虑当文本在高度上比我们最初设置文本框的高度更长时会发生什么,因为这两者只是松散相关.

为了使您的程序更易于阅读和更容易扩展,您在上面看到的所有内容都应该放在他们自己的处理文本框表的函数中,而不是love使用公共代码使处理程序混乱.看一下Lua编程的第16章,其中介绍了面向对象的编程 - 这是游戏开发的一个重要主题.

请参阅love.textinput有关如何处理退格的页面,以删除字符.

一些额外的事情要考虑:

• 我们如何区分活动文本框和非活动文本框？
• 我们如何创建一个文本框列表,这样我们可以在屏幕上有多个(但只有一个活动)？