## Horizontal scrolling background

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
benbooth493
Prole
Posts: 5
Joined: Sun Aug 21, 2016 11:16 am

### Horizontal scrolling background

Hi.

I'm new to Love2d and I'm playing around and learning as I go....maybe write a game at some point!
I'm trying to implement a scrolling background, where when my character sprite is walking right or left the sprite stays stationary, but the background scrolls infinitely.

I just can't figure out how to do this! Help please!

Here's what I have so far:

Code: Select all

require('camera')

local anim8 = require('lib/anim8/anim8')
local shine = require('lib/shine')
local player
local vignette
local viewport = {}
local background = {}

-- post-processing
local grain = shine.filmgrain()
grain.opacity = 0.2

vignette = shine.vignette()
vignette.parameters = { radius = 1.0, opacity = 0.7 }

post_effect = vignette:chain(grain)

-- set up some variables
viewport.width = love.graphics.getWidth()
viewport.height = love.graphics.getHeight()
speed = 150

-- set default graphics filter to nearest-neighbour
love.graphics.setDefaultFilter('nearest', 'nearest')

-- background
background.image = love.graphics.newImage('assets/background-1.jpg')
background.x = 0
background.speed = speed

-- define spritesheet
local spritesheet = love.graphics.newImage('assets/sprites/morris-spritesheet.png')
local g = anim8.newGrid(18, 32, spritesheet:getWidth(), spritesheet:getHeight())

-- player object
player = {
spritesheet = spritesheet,
x = viewport.width / 3,
y = 500,
speed = speed,
animations = {
idle_right = anim8.newAnimation(g(1, 1), 0.1),
idle_left = anim8.newAnimation(g(1, 1), 0.1):flipH(dt),
run_right = anim8.newAnimation(g('2-5', 1), 0.1),
run_left = anim8.newAnimation(g('2-5', 1), 0.1):flipH(dt)
},
last_direction = nil,
width = 18 * 5,
height = 32 * 5
}
-- player defaults
player.animation = player.animations.idle_right
player.last_direction = 'right'
end

function love.update(dt)
if love.keyboard.isDown('q') then
love.event.push('quit')
end

if love.keyboard.isDown('left') then
if player.x > 0 then
player.animation = player.animations.run_left
-- cause player to move across viewport
-- player.x = player.x - (player.speed*dt)
player.last_direction = 'left'

-- scroll the background
background.x = background.x + background.speed * dt
if background.x < viewport.width then
background.x = background.x + viewport.width
-- background.x = background.x - viewport.width
end
end

elseif love.keyboard.isDown('right') then
if player.x < (viewport.width - player.width) then
player.animation = player.animations.run_right
-- cause player to move across viewport
-- player.x = player.x + (player.speed*dt)
player.last_direction = 'right'

-- scroll the background
background.x = background.x - background.speed * dt
if background.x > viewport.width then
background.x = background.x - viewport.width
end
end

--[[     elseif love.keyboard.isDown('up') the
[             player.animation = player.animations.run_right
[             player.y = player.y - (player.speed*dt)
[             player.last_direction = 'right'
[
[     elseif love.keyboard.isDown('down') then
[             player.animation = player.animations.run_right
[             player.y = player.y + (player.speed*dt)
[             player.last_direction = 'right' ]]

elseif player.last_direction == 'right' then
player.animation = player.animations.idle_right

elseif player.last_direction == 'left' then
player.animation = player.animations.idle_left
end

player.animation:update(dt)
end

function love.draw(dt)
-- post_effect:draw(function()

local sx = love.graphics:getWidth() / background.image:getWidth()       -- scale background
local sy = love.graphics:getHeight() / background.image:getHeight()     -- scale background

love.graphics.draw(background.image, 0, 0, 0, sx, sy)
-- love.graphics.draw(background.image, background.x + background.image:getWidth(), 0, 0, 10, 10)

love.graphics.print("x: "..tostring(player.x), 5, 5)
love.graphics.print("y: "..tostring(player.y), 5, 20)
love.graphics.print("player.width: "..tostring(player.width), 5, 35)
love.graphics.print("background.x: "..tostring(background.x), 5, 55)
love.graphics.print("viewport.width: "..tostring(viewport.width), 5, 70 )
love.graphics.print(tostring(love.graphics:getWidth()), 5, 85)
love.graphics.print(tostring(love.graphics:getHeight()), 5, 100)

player.animation:draw(player.spritesheet, player.x, player.y, 0, 5, 5)

-- end)
end

jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

### Re: Horizontal scrolling background

if you just want to scroll a static image forever, this thread might help.

viewtopic.php?f=4&t=83763&p=211275&hili ... ge#p211275

As a mental note for myself, I want to see if this image wrapping function works.

http://www.love2d.org/wiki/%28Image%29:setWrap

Maybe that helps?

zorg
Party member
Posts: 2913
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: Horizontal scrolling background

If you wanted to go the "background isn't affected by camera position but still scrolls" way, you could use a mesh the size of the window (or screen if fullscreen), use the background image as texture, and by having the wrapping mode set to the repeating one, as jojmickymack linked, messing with the UV coordinates of the mesh will do the infinitely moving background trick; downside is, (mostly) only works for a static image.

Otherwise, You could have the camera affect everything, then just make sure to draw the background as many times on a grid the size of the background image, as it's needed to fill the current screen, although only draw those that are actually on-screen.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

benbooth493
Prole
Posts: 5
Joined: Sun Aug 21, 2016 11:16 am

### Re: Horizontal scrolling background

Excellent!
I know have this working although I need to scale the Quad/QuadTexture to fit the viewport.
When I try to add the scale factor for x,y it just appears to move the texture rather than scale it:

Code: Select all

local sx, sy = background.quad:getTextureDimensions()
sx = love.graphics:getWidth() / sx
sy = love.graphics:getHeight() / sy

love.graphics.draw(background.image, background.quad, 0, 0, 0, sx, sy)
Any ideas?

jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

### Re: Horizontal scrolling background

see if you can incorporate this into your project - use the Image:setWrap('repeat') for the background and draw it using a quad. The quad's x position (first param) is what scrolls the image.

note - setting setWrap('repeat', 'clampzero') is what's needed for this - 'repeat', 'repeat' would wrap both horizontally and vertically, maybe better for a top down adventure game or something.
Attachments
scrolling_street2.love
Last edited by jojomickymack on Wed Feb 07, 2018 2:34 am, edited 1 time in total.

benbooth493
Prole
Posts: 5
Joined: Sun Aug 21, 2016 11:16 am

### Re: Horizontal scrolling background

That kind of works but I need it to scroll based on character walking direction.
I have the scrolling working nicely, it's just that the image is larger than the screen dimensions, and I need to scale the image to fit a quad that has the same dimensions as the screen.

jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

### Re: Horizontal scrolling background

I'm not sure why the scaling isn't working for you there, I updated my love file in the last post using scaling.

note - you probably don't want to scale according to width if you're doing a long horizontal strip.

let me know if we're getting closer to the desired effect.

benbooth493
Prole
Posts: 5
Joined: Sun Aug 21, 2016 11:16 am

### Re: Horizontal scrolling background

Ok got it working....even built a player and background class.
Code much tidier.

jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

### Re: Horizontal scrolling background

Sweet! I hadn't thought of setting up a game in this way until now - I can imaging with some obstacles in the way and some other gameplay mechanics this could really be a simple way to make a side scroller.

One idea I was thinking about is a 2 layered background - maybe a bright sunny day background and a spooky stormy background at alpha 0 - maybe it could be a dr jeyckl/mr hyde type of thing - as you walk along, the 2nd background gets a higher alpha and the things get creepier....

That would be pretty easy and would probably be kinda interesting for the player. Maybe the music could fade in some more hardcore elements as the background got darker?

I think the filmgrain thing you're doing there made me think about that - getting scarier as you play...

### Who is online

Users browsing this forum: kicknbritt and 30 guests