Love2d从青铜到王者第十六篇:Love2d之动画（Animation）

Posted 2022-05-19 森明帮大于黑虎帮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Love2d从青铜到王者第十六篇:Love2d之动画（Animation）相关的知识，希望对你有一定的参考价值。

系列文章目录

文章目录

系列文章目录
前言
🍇一、Love2d动画（Animation）
🍋总结

前言

🍇一、Love2d动画（Animation）

1️⃣.框架

我们来做一个动画形象。
首先，你需要一些图片:
你也可以下载它们的压缩文件这里
加载图像并将它们放入表格中。

function love.load()
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
end

function love.update()
end

function love.draw()
    love.graphics.draw(frame[1],100,100)
end

等等，我们可以做得更有效率。

function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]

    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end
end

function love.update()
end

function love.draw()
    love.graphics.draw(frame[1],100,100)
end

那更好！现在我们需要创建一个动画。我们将如何做到这一点？
不。for循环可以让我们同时绘制所有的帧，但是我们希望每秒绘制不同的帧。我们需要一个每秒增加1的变量。这很简单！
现在我们有了变量currentFrame每秒增加1，让我们用这个变量来画帧。

function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]

    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end

    --我使用了一个长名字，以避免与变量frame混淆
    currentFrame=1
end

function love.update(dt)
    currentFrame=currentFrame+dt
end

function love.draw()
    love.graphics.draw(frame[currentFrame],100,100)
end

如果你运行这个游戏，你会得到一个错误:“draw”的错误参数#1(应为Drawable，但为nil)
这是因为我们的变量currentFrame有小数。第一次更新后currentFrame类似于1.016，虽然我们的表在位置1和2上有一些东西，但在位置1.016上没有。可以把这个小数print出来看下。

function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]

    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end

    --我使用了一个长名字，以避免与变量frame混淆
    currentFrame=1
end

function love.update(dt)
    currentFrame=currentFrame+dt
end

function love.draw()
    love.graphics.draw(frame[1],100,100)
    love.graphics.print(currentFrame,200,200)
end

为了解决这个问题，我们将数字向下舍入为math.floor。所以1.016会变成1。

function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]

    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end

    --我使用了一个长名字，以避免与变量frame混淆
    currentFrame=1
end

function love.update(dt)
    currentFrame=currentFrame+dt
end

function love.draw()
    love.graphics.draw(frame[math.floor(currentFrame)],100,100)
    love.graphics.print(currentFrame,200,200)
end

运行游戏，你会看到我们的动画工作，但你最终会得到一个错误。这是因为currentFrame变得高于(或等于)6。而我们只有5帧。为了解决这个问题，我们重置currentFrame如果它高于(或等于)6。当我们在做的时候，让我们加速我们的动画。

function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]

    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end

    --我使用了一个长名字，以避免与变量frame混淆
    currentFrame=1
end

function love.update(dt)
    currentFrame=currentFrame+10*dt
    if currentFrame>=6
    then
        currentFrame=1
    end
end

function love.draw()
    love.graphics.draw(frame[math.floor(currentFrame)],100,100)
    love.graphics.print(currentFrame,200,200)
end

看他走了！

2️⃣.四角型（Quads）

这是可行的，但效率不是很高。对于大型动画，我们需要大量的图像。如果我们把所有的帧放入一个图像中，然后画出图像的一部分会怎么样。我们可以用四头肌来做。
首先，下载这张图片:
我们将重新设计功能love. load(你可以保留love.update和love.draw就是这么回事)。

function  love.load()
    image=love.graphics.newImage("jump.png")
end

function love.update(dt)
end

function  love.draw()
    love.graphics.draw(image,100,100)
end

想象四边形就像一个我们从图像中切掉的矩形。我们告诉游戏“我们想要这部分图像”。我们将制作第一帧的四边形。你可以用love.graphics.newQuad (维基)。
第一个参数是四边形的x和y位置。因为我们想要第一帧，我们取图像的左上角，所以0,0。
再说一遍，四边形就像切一张纸。我们最终将在哪里绘制图像与四边形无关。
接下来的两个参数是四边形的宽度和高度。在我们的图像中，一帧的宽度是117，高度是233。最后两个参数是完整图像的宽度和高度。我们可以得到这些image:getWidth()和image:getHeight()。

function  love.load()
    image=love.graphics.newImage("jump.png")

    frame=
    width=image:getWidth()
    height=image:getHeight()

    table.insert(frame,love.graphics.newQuad(0,0,width/5,height,width,height))
    currentFrame=1
end

function love.update(dt)
end

function  love.draw()
    love.graphics.draw(image,100,100)
    love.graphics.print(width,200,200)
    love.graphics.print(height,300,300)
end

在让我们通过绘制来测试我们的四边形。通过将它作为第二个参数传入love.graphics.draw.。

function  love.load()
    image=love.graphics.newImage("jump.png")

    frame=
    width=image:getWidth()
    height=image:getHeight()

    table.insert(frame,love.graphics.newQuad(0,0,width/5,height,width,height))
    currentFrame=1
end

function love.update(dt)
end

function  love.draw()
    love.graphics.draw(image,frame[1],100,100)
    love.graphics.print(width,200,200)
    love.graphics.print(height,300,300)
end

如你所见，它正在绘制我们的第一帧。很好，现在让我们做第二个四边形。
要绘制第二个框架，我们需要做的就是将矩形向右移动。因为每一帧的宽度是117，我们需要做的就是把x向右移动117。

--[[
function love.load()
    --[[
    frame=
    table.insert(frame,love.graphics.newImage("jump1.png"))
    table.insert(frame,love.graphics.newImage("jump2.png"))
    table.insert(frame,love.graphics.newImage("jump3.png"))
    table.insert(frame,love.graphics.newImage("jump4.png"))
    table.insert(frame,love.graphics.newImage("jump5.png"))
    --]]
--[[
    frame=
    for i=1,5
    do
        table.insert(frame,love.graphics.newImage("jump"..i..".png"))
    end

    --我使用了一个长名字，以避免与变量frame混淆
    currentFrame=1
end

function love.update(dt)
    currentFrame=currentFrame+10*dt
    if currentFrame>=6 
    then
        currentFrame=1
    end
end

function love.draw()
    love.graphics.draw(frame[math.floor(currentFrame)],100,100)
    love.graphics.print(currentFrame,200,200)
end
--]]

function  love.load()
    image=love.graphics.newImage("jump.png")

    frame=
    width=image:getWidth()
    height=image:getHeight()

    table.insert(frame,love.graphics.newQuad(0,0,width/5,height,width,height))
    table.insert(frame,love.graphics.newQuad(width/5,0,width/5,height,width,height))
    currentFrame=1
end

function love.update(dt)
end

function  love.draw()
    love.graphics.draw(image,frame[2],100,100)
    love.graphics.print(width,200,200)
    love.graphics.print(height,300,300)
end

我们可以对第三个四边形做同样的事情。

function  love.load()
    image=love.graphics.newImage("jump.png")

    frame=
    width=image:getWidth()
    height=image:getHeight()

    table.insert(frame,love.graphics.newQuad(0,0,width/5,height,width,height))
    table.insert(frame,love.graphics.newQuad(width/5,0,width/5,height,width,height))
    table.insert(frame,love.graphics.newQuad(width/5*2,0,width/5,height,width,height))
    currentFrame=1
end

function love.update(dt)
end

function  love.draw()
    love.graphics.draw(image,frame[3],100,100)
    love.graphics.print(width,200,200)
    love.graphics.print(height,300,300)
end

等等，我们在重复同样的动作吗？我们没有什么可以治的吗？
for循环！此外，我们可以通过将值存储在变量中来防止多次调用image:getWidth()和image:getHeight()。
请注意，我们是如何从0开始 for循环，并在4结束，而不是从1到5。这是因为我们的第一个四边形在位置0，0 * 177等于0。
现在剩下要做的就是使用以上是关于Love2d从青铜到王者第十六篇:Love2d之动画（Animation）的主要内容，如果未能解决你的问题，请参考以下文章

Love2d从青铜到王者第十三篇:Love2d之游戏:射击敌人（Game: Shoot the enemy）

Love2d从青铜到王者第十五篇:Love2d之角度和距离（Angles and distance）

Love2d从青铜到王者第十一篇:Love2d之图像（Images）

Love2d从青铜到王者第十二篇:Love2d之碰撞检测(Detecting collision)

Love2d从青铜到王者第十篇:Love2d之类和类的继承（Classes And Inheritance）

Love2d从青铜到王者第十四篇:Love2d之分享你的游戏（Distributing your game）