ScrollingBackground

[Zephirox]

Hello everyone !

I'm new to Love2D, but I know a little bit about Lua (because I used roblox studio for nearly 3 years)

I'm trying to make a background that scrolls endlessly but at the moment as I test, it sadly doesn't move
I don't have any error on my script, I just can't figure out how to move the background
I want the miniBackground to move with a speed of 2.5
I also want to move the front background, if someone can tell me if I have to use other variable or not, at a speed of 5

Here is the code:

--background
miniBackground = {}
miniBackground.posX = 0
miniBackground.img = love.graphics.newImage("assets/MiniBackground.png")

frontBackground = love.graphics.newImage("assets/FrontBackground.png")

BlueFront = love.graphics.newImage("assets/BlueFront.png")

BlueBack = love.graphics.newImage("assets/BlueBack.png")

--assets
player = love.graphics.newImage("assets/Fish.png")
Title = love.graphics.newImage("assets/FishyJourneyTitle.png")
PlayButton = love.graphics.newImage("assets/PlayButton.png")
OptionButton = love.graphics.newImage("assets/OptionButton.png")

function love.draw()
love.graphics.draw(miniBackground.img,0,250)
love.graphics.draw(BlueBack)
love.graphics.draw(frontBackground)
love.graphics.draw(BlueFront)
end

function love.update(dt)
miniBackground.posX = miniBackground.posX - (5 * dt)

if miniBackground.posX < -1280 then
miniBackground.posX = miniBackground.posX + 4360
end
end

[BrotSagtMist]

Youre poisoned by the obnoxiousness that is roblox.

X is not a property of your picture, if you draw it, you actually have to tell the draw function to use this value:
love.graphics.draw(miniBackground.img,miniBackground.X ,250)

[darkfrei]

Result:

2023-01-04T15_24_21-Untitled.png (42.28 KiB) Viewed 1100 times

Functions:

Code: Select all

local function newBack (img, vx)
	local bgr = 
		{img = love.graphics.newImage(img),
		x = 0,
		vx = vx}
	bgr.w = bgr.img:getWidth()
	return bgr
end

local function updateBack (bgr, dt)
	bgr.x = bgr.x + dt*bgr.vx
	if bgr.x < -bgr.w then 
		bgr.x = bgr.x + bgr.w
	elseif bgr.x > 0 then 
		bgr.x = bgr.x - bgr.w
	end
end

local function drawBack (bgr)
	local w = love.graphics.getWidth()
	for x = bgr.x, w, bgr.w do
		love.graphics.draw (bgr.img, x, 0)
	end	
end

Call it:

Code: Select all

function love.load()
	bgr1 = newBack ('back-1.png', -20)
	bgr2 = newBack ('back-2.png', -40)
	bgr3 = newBack ('back-3.png', -160)
end

function love.update(dt)
	updateBack (bgr1, dt)
	updateBack (bgr2, dt)
	updateBack (bgr3, dt)
end

function love.draw()
	drawBack (bgr1)
	drawBack (bgr2)
	drawBack (bgr3)
end

[Zephirox]

Ok thanks a lot
It's been now 2hours since I try to figure out how to draw on top these sprites (like placing a playbutton sprite, the player etc)
Sorry for asking a dumb question

here is my code

--Assets
BlueFront = love.graphics.newImage("assets/BlueFront.png")
BlueBack = love.graphics.newImage("assets/BlueBack.png")
player = love.graphics.newImage("assets/Fish.png")
OptionButton = love.graphics.newImage("assets/OptionButton.png")
PlayButton = love.graphics.newImage("assets/PlayButtonWhite.png")

--Sounds
sounds = {}
sounds.menu = love.audio.newSource("Sounds/UnrealChill.mp3", "stream")
sounds.game = love.audio.newSource("Sounds/UnAvenirToutTracé.mp3", "stream")
sounds.menu:play()
sounds.menu:setLooping(true)
sounds.game:setLooping(true)

--Background scrolling
local function newFrontBackground (img, vx)
local bgrb =
{img = love.graphics.newImage("assets/FrontBackGround.png"),
x = 0,
vx = vx}
bgrb.w = bgrb.img:getWidth()
return bgrb
end
local function newMiniBackground (img, vx)
local bgra =
{img = love.graphics.newImage("assets/MiniBackGround.png"),
x = 0,
y = 0,
vx = vx}
bgra.w = bgra.img:getWidth()
return bgra
end
local function updateFrontBackground (bgr, dt)
bgrb.x = bgrb.x + dt*bgrb.vx
if bgrb.x < -bgrb.w then
bgrb.x = bgrb.x + bgr.w
elseif bgrb.x > 0 then
bgrb.x = bgrb.x - bgrb.w
end
end
local function updateMiniBackground (bgr, dt)
bgra.x = bgra.x + dt*bgra.vx
if bgra.x < -bgra.w then
bgra.x = bgra.x + bgra.w
elseif bgra.x > 0 then
bgra.x = bgra.x - bgra.w
end
end
local function drawFrontBackground (bgr)
local w = love.graphics.getWidth()
for x = bgrb.x, w, bgrb.w do
love.graphics.draw (bgrb.img, x, 0)
end
end
local function drawMiniBackground (bgr)
local w = love.graphics.getWidth()
for x = bgra.x, w, bgra.w do
love.graphics.draw (bgra.img, x, 0)
end
end

function love.load()
bgra = newMiniBackground ('back-1.png', -60)
bgrb = newFrontBackground ('back-1.png', -120)
end

function love.update(dt)
updateMiniBackground (bgra, dt)
updateFrontBackground (bgrb, dt)
end

function love.draw()
drawMiniBackground (bgra)
drawFrontBackground (bgrb)
end

function love.keypressed(key)
if key == "t" then
sounds.menu:stop()
sounds.game:play()
end
end

[darkfrei]

The buttons example without libs:
(the button needs normal, hovered and pressed textures)

2023-01-05.png (43.77 KiB) Viewed 1001 times

Code: Select all

local function newButton (imgN, imgH, imgP, x,y, func, text)
	local normal = love.graphics.newImage(imgN)
	local hovered = love.graphics.newImage(imgH)
	local pressed = love.graphics.newImage(imgP)
	local w, h = normal:getDimensions()
	local font = love.graphics.newFont(0.4*h)
	local button = {
		x=x, y=y, w=w, h=h,
		images = {
			normal=normal,
			hovered=hovered,
			pressed=pressed
		},
		img = normal,
		pressed=false,
		hovered=false,
		text=text,
		textColor = {0,0,0},
		textShiftY = 0.5*h-0.5*font:getHeight(),
		font = font,
		func = func
	}
	button.tx=0
	button.ty=0
	return button
end

local function updateButton (button, pressed, released)
	local mx,my = love.mouse.getPosition()
	local x,y,w,h=button.x, button.y, button.w, button.h
	
	if mx>x and mx<(x+w) and my>y and my<y+h then
		-- mouse in the button area
		if not button.hovered then
			button.hovered = true
			-- event for hovered button here
		end
		if pressed then 
			-- the button was pressed right now
			button.pressed = true
			-- event for pressed (not released) button
		elseif button.pressed and released then
			-- the button was released right now
			button.pressed = false
			-- event to call button function here
			-- for example:
			button.func()
		end
	elseif released then -- not pressed anymore
		button.pressed = false
		-- event for released button here
	elseif button.hovered then -- not hovered anymore
		button.hovered = false
		-- event for unhovered button here
	end
	
	-- graphical preparations:
	if button.hovered and button.pressed then
		button.img = button.images.pressed
		button.tx, button.ty = 2, 2
	elseif button.hovered then
		button.img = button.images.hovered
		button.tx, button.ty = 0, 0
	else
		button.img = button.images.normal
		button.tx, button.ty = 0, 0
	end
	
	-- returns true if the mouse was on this button
	return button.hovered 
end

local function drawButton (button)
	love.graphics.setColor(1,1,1)
	love.graphics.draw(button.img, button.x, button.y)
	
	love.graphics.setFont(button.font)
	love.graphics.setColor(button.textColor)
	local x = math.floor(button.x+button.tx)
	local y = math.floor(button.y+button.ty+button.textShiftY)
	love.graphics.printf( button.text, x, y, button.w, "center")
end

Calling it:

Code: Select all

function love.load()
	bgr1 = newBack ('back-1.png', -20)
	bgr2 = newBack ('back-2.png', -40)
	bgr3 = newBack ('back-3.png', -160)
	
	local imgN = 'button-normal.png'
	local imgH = 'button-hovered.png'
	local imgP = 'button-pressed.png'
	local funcExit = love.event.quit
	
	button=newButton (imgN, imgH, imgP, 600,480, funcExit, "Exit")
	
	local reverseDirection = function ()
		bgr1.vx = -bgr1.vx
		bgr2.vx = -bgr2.vx
		bgr3.vx = -bgr3.vx
	end
	button2=newButton (imgN, imgH, imgP, 400,480, reverseDirection, "Reverse")
end

function love.update(dt)
	if dt > 0.1 then dt = 0.1 end
	updateBack (bgr1, dt)
	updateBack (bgr2, dt)
	updateBack (bgr3, dt)
end

function love.draw()
	drawBack (bgr1)
	drawBack (bgr2)
	drawBack (bgr3)
	
	-- drawing later means drawing higher
	drawButton (button)
	drawButton (button2)
end

function love.mousepressed( x, y, mb, istouch, presses )
	if mb == 1 then -- left mouse button
		updateButton (button, true, false) -- button, pressed, released
		updateButton (button2, true, false) -- button, pressed, released
	elseif mb == 2 then -- right mouse button
	end
end

function love.mousemoved( x, y, dx, dy, istouch )
	updateButton (button, false, false) -- button, pressed, released
	updateButton (button2, false, false) -- button, pressed, released
end

function love.mousereleased( x, y, mb, istouch, presses )
	if mb == 1 then -- left mouse button
		updateButton (button, false, true) -- button, pressed, released
		updateButton (button2, false, true) -- button, pressed, released
	elseif mb == 2 then -- right mouse button
		
	end
end