Side-scrolling background image logic

Solar2D General Questions/Discussion
#1

Hello,

let’s say I want to make a horizontal or vertical side-scrolling platform or shmup.

I was always wondering how to handle the moving background.

The background in my example moves side-ways (or vertically), and it is not a seamless repeating image. It is an image containg graphics for a looooong corridor, or a terain for my airplane to fly above, with mountains, rivers, cities.

So, how do I handle this? Do I import an image that is some thousants pixels long and make it move? Is this tactic logical? How do professionals handle this? I’ve been wondering about this since the gameboy era!

Can you enlighten me on this topic?

#2

Hi @fkaktos,

How you solve this may vary, but what you should not do is attempt to load a giant image into memory and try to move it around. Not only would this occupy a vast amount of texture memory, but at a certain size (depending on the device) it would simply fail to appear because it would exceed the max texture size.

I may suggest that you explore the Million Tile Engine…

http://forums.coronalabs.com/forum/603-million-tile-engine/

…or Level Director…

http://www.retrofitproductions.com/level-director/

…or you build your own system in which you place “pieces” of the level together systematically as they’re near to coming on the screen.

Hope this helps,

Brent

#3

I just finished a couple of examples using Level Director that deals with scrolling so you might want to check them out to see if they help you in anyway;

http://bit.ly/Na6NFs  - Simple 4 way scrolling around a large map

http://bit.ly/MNPtpA - Continuous parallax side scrolling 

#4

Thank you both!!
I’m considering purchasing Level Director,cause the free version exports only up to 5 objects.

#5

Hi, just uploaded another example which uses the new scrolling features of the soon to be released Level Director v2.7.

It includes a camera system so you can slide the level to a specific camera located on your map and allows you to track an object.

Screenshot here : http://bit.ly/LX4Lab

Source code from here : http://bit.ly/1c1juv1

Platform Graphics by Kenney Vleugels (www.kenney.nl)

#6

Hi @fkaktos,

How you solve this may vary, but what you should not do is attempt to load a giant image into memory and try to move it around. Not only would this occupy a vast amount of texture memory, but at a certain size (depending on the device) it would simply fail to appear because it would exceed the max texture size.

I may suggest that you explore the Million Tile Engine…

http://forums.coronalabs.com/forum/603-million-tile-engine/

…or Level Director…

http://www.retrofitproductions.com/level-director/

…or you build your own system in which you place “pieces” of the level together systematically as they’re near to coming on the screen.

Hope this helps,

Brent

#7

I just finished a couple of examples using Level Director that deals with scrolling so you might want to check them out to see if they help you in anyway;

http://bit.ly/Na6NFs  - Simple 4 way scrolling around a large map

http://bit.ly/MNPtpA - Continuous parallax side scrolling 

#8

Thank you both!!
I’m considering purchasing Level Director,cause the free version exports only up to 5 objects.

#9

Hi, just uploaded another example which uses the new scrolling features of the soon to be released Level Director v2.7.

It includes a camera system so you can slide the level to a specific camera located on your map and allows you to track an object.

Screenshot here : http://bit.ly/LX4Lab

Source code from here : http://bit.ly/1c1juv1

Platform Graphics by Kenney Vleugels (www.kenney.nl)

#10

Very helpful thread, thank you. Anyone know of a Level Director alternative for OS X? I’m looking to create a endless runner-style scrolling parallax background without absolutely killing texture memory and fps. I think the tile-style RPG creators aren’t quite what I’m looking for.

#11

I think tile maps would work fine for that, it’s just a matter of artwork to make it look right. But scrolling parallax backgrounds can usually be done with 2-3 different images repeated over and over. If they’re background images and the action is happening in the foreground then people won’t be paying too much attention to them anyway.

 Jay

#12

Thanks for the reply, J.A. - I’m working on the game where I do just as you described - I have 2-3 images on top of each other, each moving to the left. The problem is that they’re horizontally quite long to represent the changing experience of the level (but not super long, maybe 1300px long). The performance is just abysmal and I’m wondering if there’s an easy way to cull what’s offscreen, a la Level Director.

Maybe I have a core misunderstanding of how title maps work. Is it possible to just take my existing long background image and divide it up into tiles?

#13

Yes, you can take an image and make it into tiles and sometimes that works, but usually it’s easiest when the image was designed to be tiled from the beginning. Probably worth a shot, though.

#14

Very helpful thread, thank you. Anyone know of a Level Director alternative for OS X? I’m looking to create a endless runner-style scrolling parallax background without absolutely killing texture memory and fps. I think the tile-style RPG creators aren’t quite what I’m looking for.

#15

I think tile maps would work fine for that, it’s just a matter of artwork to make it look right. But scrolling parallax backgrounds can usually be done with 2-3 different images repeated over and over. If they’re background images and the action is happening in the foreground then people won’t be paying too much attention to them anyway.

 Jay

#16

Thanks for the reply, J.A. - I’m working on the game where I do just as you described - I have 2-3 images on top of each other, each moving to the left. The problem is that they’re horizontally quite long to represent the changing experience of the level (but not super long, maybe 1300px long). The performance is just abysmal and I’m wondering if there’s an easy way to cull what’s offscreen, a la Level Director.

Maybe I have a core misunderstanding of how title maps work. Is it possible to just take my existing long background image and divide it up into tiles?

#17

Yes, you can take an image and make it into tiles and sometimes that works, but usually it’s easiest when the image was designed to be tiled from the beginning. Probably worth a shot, though.