Can someone help me with this piece of code?

[DjKniteX]

Hello guys! New to Love2D; somewhat familiar with Lua (used Pico8 for last year's Game Off). I'm using Love2D this year for Game Of 2020 and I'm pretty excited to use a language/framework I'm somewhat familiar with.

I'm going through the documentation right now and I'm having some trouble. I followed the animation one and I got it work and I found the basic platformer one for basic movement and I kinda got that working.

The problem is all the sprites from the spritesheet shows when I try to just load as it is; (also when I reference the animation variable I get a draw error so I have to use the static image which gives me the whole sheet).

Is there a way I can just load the first pic from the sprite sheet? Also follow-up question; How do I make the animation work with movement?

Current code I have;

Code: Select all

platform = {}
player = {}

function love.load()
    animation = newAnimation(love.graphics.newImage("assets/linus.png"), 32, 32, 0.8)
    animation1 = newAnimation(love.graphics.newImage("assets/city.png"), 8, 8, 0.8)

    platform.width = love.graphics.getWidth()
	platform.height = love.graphics.getHeight()
 
	platform.x = 0
	platform.y = platform.height / 2
 
	player.x = love.graphics.getWidth() / 2
	player.y = love.graphics.getHeight() / 2
 
	player.speed = 200
 
	player.img = love.graphics.newImage("assets/linus.png")
 
	player.ground = player.y
 
	player.y_velocity = 0
 
	player.jump_height = -300
	player.gravity = -500
end

function love.update(dt)
    keys(dt)
end


function love.draw()
    -- local spriteNum = math.floor(animation.currentTime / animation.duration * #animation.quads) + 1
    -- love.graphics.draw(animation.spriteSheet, animation.quads[spriteNum], 0, 10, 0, 4)
    love.graphics.setColor(1, 1, 1)
	love.graphics.rectangle('fill', platform.x, platform.y, platform.width, platform.height)
 
	love.graphics.draw(player.img, player.x, player.y, 0, 1, 1, 0, 32)
end

function newAnimation(image, width, height, duration)
    local animation = {}
    animation.spriteSheet = image;
    animation.quads = {};

    for y = 0, image:getHeight() - height, height do
        for x = 0, image:getWidth() - width, width do
            table.insert(animation.quads, love.graphics.newQuad(x, y, width, height, image:getDimensions()))
        end
    end
    animation.duration = duration or 1
    animation.currentTime = 0
    return animation 
end 

function keys(dt)
	if love.keyboard.isDown('d') then
		if player.x < (love.graphics.getWidth() - player.img:getWidth()) then
			player.x = player.x + (player.speed * dt)
		end
	elseif love.keyboard.isDown('a') then
		if player.x > 0 then 
			player.x = player.x - (player.speed * dt)
		end
	end
 
	if love.keyboard.isDown('space') then
		if player.y_velocity == 0 then
			player.y_velocity = player.jump_height
		end
	end
 
	if player.y_velocity ~= 0 then
		player.y = player.y + player.y_velocity * dt
		player.y_velocity = player.y_velocity - player.gravity * dt
	end
 
	if player.y > player.ground then
		player.y_velocity = 0
    	player.y = player.ground
	end
end

[nikneym]

Hi, welcome to the forums! It seems you missed to update your animation frame by frame. Try this:

Code: Select all

--load spritesheet.
local imgsheet = love.graphics.newImage("sample.png")

--frames variable to hold frames, currentFrame to hold our current frame.
local frames = {}
local currentFrame = 1

--crop frames from spritesheet and add them to "frames" table.
for y = 1, 4 do
	for x = 1, 7 do
		table.insert(frames, love.graphics.newQuad(76 * x - 76, 87 * y - 87, 73, 87, imgsheet:getDimensions()))
	end
end

--create time variables.
local time = 0
local maxTime = 0.016

function love.update(dt)
	--update our time event each frame.
	time = time + dt

	--when time becomes equal or bigger than maximum time;
	if time >= maxTime then
		--reset it
		time = 0

		--and update our current frame.
		currentFrame = currentFrame + 1

		--if current frame becomes bigger than length of the frames,
		if currentFrame > #frames then

			--reset it to first frame, and loop restarts.
			currentFrame = 1
		end
	end
end

function love.draw()
	--we have to define our current frame in the second parameter of love.graphics.draw().
	love.graphics.draw(imgsheet, frames[currentFrame], 10, 10)

	--if you want to see just 1 frame, you have to specify it like frames[9].
	love.graphics.draw(imgsheet, frames[9], 100, 10)
end

In the second parameter of the love.graphics.draw(), we have to tell which quad we want. Give it a variable like frames[currentFrame] and update currentFrame each frame, you get an animation.

[darkfrei]

Your spritesheet is not smooth.

Made with https://ezgif.com/sprite-cutter:
https://ezgif.com/sprite-cutter/ezgif-5 ... 448fd0.png

[darkfrei]

With this preset is much better:


So, your spritesheet cannot be right cropped, it's too small. Also, you can make the 9x3 tiles, not 7x4-1.

[DjKniteX]

Hi, welcome to the forums! It seems you missed to update your animation frame by frame. Try this:

Code: Select all

--load spritesheet.
local imgsheet = love.graphics.newImage("sample.png")

--frames variable to hold frames, currentFrame to hold our current frame.
local frames = {}
local currentFrame = 1

--crop frames from spritesheet and add them to "frames" table.
for y = 1, 4 do
	for x = 1, 7 do
		table.insert(frames, love.graphics.newQuad(76 * x - 76, 87 * y - 87, 73, 87, imgsheet:getDimensions()))
	end
end

--create time variables.
local time = 0
local maxTime = 0.016

function love.update(dt)
	--update our time event each frame.
	time = time + dt

	--when time becomes equal or bigger than maximum time;
	if time >= maxTime then
		--reset it
		time = 0

		--and update our current frame.
		currentFrame = currentFrame + 1

		--if current frame becomes bigger than length of the frames,
		if currentFrame > #frames then

			--reset it to first frame, and loop restarts.
			currentFrame = 1
		end
	end
end

function love.draw()
	--we have to define our current frame in the second parameter of love.graphics.draw().
	love.graphics.draw(imgsheet, frames[currentFrame], 10, 10)

	--if you want to see just 1 frame, you have to specify it like frames[9].
	love.graphics.draw(imgsheet, frames[9], 100, 10)
end

In the second parameter of the love.graphics.draw(), we have to tell which quad we want. Give it a variable like frames[currentFrame] and update currentFrame each frame, you get an animation.

I'll have to mess around with the numbers; but it does't seem to show one sprite then animate like in this tutorial: https://www.love2d.org/wiki/Tutorial:Animation and it seems to be going really fast lol. I'll mess around with it more after work.

thanks!