love2d-chapter5-moving a rectangle

love2d-chapter5-moving a rectangle

十月 11, 2020

第五章-动起来!

现在我们可以开始有趣的部分了。我们将要让东西动起来。
让我们从三个主回调函数开始。

1
2
3
4
5
6
7
8
9
10
11
function love.load()

end

function love.update()

end

function love.draw()

end

现在,我们来绘制一个矩形。

1
2
3
function love.draw()
love.graphics.rectangle("line", 100, 50, 200, 150)
end

这个函数的第二个和第三个参数是x和y位置。
x是屏幕上的水平位置。0是屏幕的左侧。
y是屏幕上的垂直位置,0是屏幕右侧。

现在我们希望让矩形动起来。是时候像一个程序员一样思考了。到底要做什么才能让矩形移动到右边?x坐标需要增加,100,101,102······但是我们不能让100变成101,100就是100。我们需要一个能够随时变成任何数字的东西···对了,变量!
love.load()中,创建一个新的变量x,然后把love.graphics.rectangle()中的100换成x

1
2
3
4
5
6
7
function love.load()
x = 100
end

function love.draw()
love.graphics.rectangle("line", x, 50, 200, 150)
end

这样矩形的x坐标就是变量x的值了。
注意”x”只是一个变量名。我们可以用fuck或是ass或者随便什么来代替它。函数不关心变量名,它只在意变量的值。
现在我们要让矩形动起来。我们在love.update()里实现。每次更新(update)我们让x增加5。换言之,x需要被赋予x+5的值。

1
2
3
function love.update()
x = x + 5
end

这样一来,x会不断增加5。运行游戏,矩形应该动起来了。

Delta time

我们已经让一个矩形动起来了,但是还有一个小问题。当你在不同的设备上运行你的游戏,矩形移动的速读可能不同,因为不同的设备不太可能以同样的频率执行love.update()
举个例子:假设计算机A以100fps运行,而计算机B以200fps运行。
100 x 5 = 500
200 x 5 = 1000
所以在1秒内,x在计算机A上将增加500,而在B上将增加1000。
(这里可能不是很容易理解。还记得第四章里有关love的工作方式的描述吗?首先love会调用love.load(),然后进入一个love.update() -> love.draw()的循环。love每调用一次love.draw(),画面就会更新一次,也就是1帧。如果现在有一台很慢的古董电脑,这台电脑一秒钟只能完成一次love.update() -> love.draw()的循环,那么每秒钟x将只增加5。与之对应的是一台超级计算机,每秒钟可以完成上亿次这样的循环···显然,超级计算机上的矩形将会跑得飞快,而古董老爷机上的矩形慢吞吞。)
好在,有一个办法可以解决这个问题——delta time。
当love调用love.update()时,你可以传给它一个参数——dt。我们来试着输出dt的值:

1
2
3
4
function love.update(dt)
print(dt)
x = x + 5
end

dt的值是从上次调用love.update()到这次调用的时间,以秒为单位。所以在100fps的计算机A上,dt的值是0.01,而在200fps的计算机B上,dt的值为0.005。
所以在1秒钟内,计算机A更新了100次,我们让x每次更新时增加5*0.01;计算机B更新了200次,我们让x每次增加5*0.005。
100 x 5 * 0.01 = 5
200 x 5 * 0.005 = 5
这样,通过dt,我们让矩形在所有的计算机上跑得一样快。

1
2
function love.update(dt)
x = x + 5 * dt

现在矩形每秒种将会移动5个像素,而且在所有计算机上都是如此。你可以试着把5改成100,让矩形跑得更快。

总结

我们通过在每次更新(love.update())时改变矩形的座标使矩形移动。dt是一个变量,它的值等于是从上次调用love.update()到这次调用的时间。我们用dt让矩形的移动速度在不同的设备上保持一致。