How to make scrolling background?

Ask and answer questions about making games and related topics. Unrelated topics go in that other forum.

Moderators: marionline, SDHawk

Post Reply
User avatar
marionline
Metal Slime
Posts: 673
Joined: Sat Feb 26, 2011 9:23 pm

How to make scrolling background?

Post by marionline »

In some games made with the OHR I saw something that looked like a scrolling background.

How is such a scrolling background made?
I know one can move/pan the camera to scroll over a map, the wiki talks about it here: http://rpg.hamsterrepublic.com/ohrrpgce ... _scroll%3F. How does it work with images?
It it possible to import larger tile sets than 320x200?
User avatar
Taco Bot
Meat, Cheese, and Silicon
Posts: 484
Joined: Fri Jul 18, 2014 12:15 am
Location: Santa Cruz
Contact:

Post by Taco Bot »

Tilesets are always 320x200. You could combine more than one tileset using slices if you wanted, but that could be a bit messy.

Either way, for panning over an image, slices are probably your best bet.
Sent from my iPhone
User avatar
Bob the Hamster
Lord of the Slimes
Posts: 7660
Joined: Tue Oct 16, 2007 2:34 pm
Location: Hamster Republic (Ontario Enclave)
Contact:

Post by Bob the Hamster »

You can also use plotscripting to make one map layer scroll separately from the others.
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Post by TMC »

That scrolling effect is called parallax. Some day hopefully it will be built into the engine, but in the meantime you can use a script which manipulates the map layer slices to create that effect, available on the wiki here. (It's called "Fake Parallax" because it's not a builtin feature).

That script will need to be modified if you want to adjust the amount of parallax, and which map and which map layer is affected, but those are simple changes.
Last edited by TMC on Tue Dec 20, 2016 10:15 am, edited 1 time in total.
User avatar
marionline
Metal Slime
Posts: 673
Joined: Sat Feb 26, 2011 9:23 pm

Post by marionline »

Thanks for all the answers. :)

The prallax scrolling is good for backgrounds. I think, I saw that in 'Wandering Hamster'.
Could one also use screens for that effect? Like place a screen behind a tilemap?

The non-background-scrolling, seems like a cool effect on game start, credits or cutscenes.
And it's really simple, just using different layers for one large image. :o
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Post by TMC »

Yes, you can use backdrop slices instead of map layers to create the parallax effect. An easy way to do that is to just parent one or more backdrop slices to a map layer, then you can just use the Fake Parallax script normally. (It's also possible to parent them directly to the Map Root slice, then you can exceed the limit of 8 map layers.)

I don't know what you mean by "non-background-scrolling".

I think I've seen at least one game where the maps were hand-drawn and were actually backdrops.
Last edited by TMC on Wed Dec 21, 2016 8:25 am, edited 1 time in total.
User avatar
marionline
Metal Slime
Posts: 673
Joined: Sat Feb 26, 2011 9:23 pm

Post by marionline »

Oh, sorry. :o
I should have said the non parallax scrollong background.
Both versions are scrolling.

Here's an image:
Image
The backround image (light blue + green) does not move. But the camera pans alomng the image.
(If the deadline allows it, I will inculde something like this in my game.)
User avatar
Bob the Hamster
Lord of the Slimes
Posts: 7660
Joined: Tue Oct 16, 2007 2:34 pm
Location: Hamster Republic (Ontario Enclave)
Contact:

Post by Bob the Hamster »

Make the scene out of two or more Backdrop slices with a single container slice parent in the slice collection editor.

Load the slice collection

Get a handle to the container, and move it left. It will look as if the camera is panning right.
User avatar
marionline
Metal Slime
Posts: 673
Joined: Sat Feb 26, 2011 9:23 pm

Post by marionline »

What of these slices here http://rpg.hamsterrepublic.com/ohrrpgce ... lice_types is a backdrop slice?
I've never used slices. You make it sound really easy, that is a good thing. Otherwise I would never have looked into the slice menu of the editor. But the wiki is just making Slices look way less easy.
I also found BMR's Slice Tutorial, but I don't think it is talking about backdrop slices.

Is there a getting started with Slices somewhere? With pictures of how these slices are handles in the Editor?
There's a nearly nothing in the help files in the editor.

Oh and maybe it's easier if I just stick with tilesetslayers?
I'm fine with that. :)
User avatar
Bob the Hamster
Lord of the Slimes
Posts: 7660
Joined: Tue Oct 16, 2007 2:34 pm
Location: Hamster Republic (Ontario Enclave)
Contact:

Post by Bob the Hamster »

The tile layer method will not be easier, and still requires slice handles

Backdrop slice is a sub-type of sprite slice

I can write an example script later, but right now I am on my phone
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Post by TMC »

OK, now I understand. I thought you were talking about the parallax effect on Troll Mountain in Wandering Hamster, but you meant the introduction.

Creating a backdrop slice is easy:

Code: Select all

variable (handle)
handle := load backdrop slice (5) # backdrop 5
Backdrop slices are just like other sprite slices; all the same commands can be used on them. And most slice commands will work on all types of slices.

Since you have multiple backdrops that will all be moving together, I would put them all in a container and move the container. You create this container and backdrops in the slice editor. Because the backdrops will together be much larger than the screen, you can press F6 to move them around to check that they join together correctly. Or you can create the slices with a script, as below

For example:

Code: Select all

variable (container, sl)

# Create and position the slices:
container := create container
sl := load backdrop slice (1)
set parent (sl, container)
put slice (sl, 0, 0)  # put at x=0, y=0  (this line does nothing, since that's the default location)
sl := load backdrop slice (2)
set parent (sl, container)
put slice (sl, 320, 0)  # put at x=320, y=0

# Pan to the left by 320 pixels in 100 ticks, so the second backdrop will be on-screen:
move slice to (container, -320, 0, 100)
wait for slice (container)

# Delete it
free slice (container)
User avatar
marionline
Metal Slime
Posts: 673
Joined: Sat Feb 26, 2011 9:23 pm

Post by marionline »

Thanks a lot! :D
That script is very helpful.
User avatar
Willy Elektrix
Liquid Metal Slime
Posts: 910
Joined: Sun Aug 15, 2010 11:30 pm

Post by Willy Elektrix »

I want to having a scrolling parallax background for my game Ultra Frontier QQYYZZ.

Each level is the game is 10 tiles high by at least 340 tiles wide. The player sprite scrolls automatically through the levels to the right (usually at a velocity of 5). I want to make a parallax background scroll slowly behind the player.

I sort of figured something out (see below), but the backdrop appears "over" the other graphics, not behind them. Also, is there anyway to make it go slower than -1?

Code: Select all

backdropcontainer := create container 
parallaxslice := load backdrop sprite (3)
put slice (parallaxslice, 0, 0) 
set parent (parallaxslice, backdropcontainer)
parallaxslice := load backdrop sprite (3)
put slice (parallaxslice, 320, 0) 
set parent (parallaxslice, backdropcontainer)
parallaxslice := load backdrop sprite (3)
put slice (parallaxslice, 640, 0) 
set parent (parallaxslice, backdropcontainer)

set slice velocity(backdropcontainer, -1, 0)
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Post by TMC »

To make it appear behind the map, create a new blank map layer 0. Either you can parent backdropcontainer to layer 0, in which case you then have to compensate for the map layer itself moving, or you can hide map layer 0 with "set slice visible(lookup slice(sl:map layer 0), false)" and then put the backdrops behind the map, with "move slice below(backdropcontainer, lookup slice(sl:map root))".

To move at less than 1 pixel/tick, use "move slice by" instead. Remember to stop the movement if the player dies or reaches the end. (To avoid having to do that, you could calculate the position according to the camera position, like in the parallax script).
Last edited by TMC on Sun Mar 19, 2017 11:31 pm, edited 1 time in total.
User avatar
Willy Elektrix
Liquid Metal Slime
Posts: 910
Joined: Sun Aug 15, 2010 11:30 pm

Post by Willy Elektrix »

TMC wrote:To make it appear behind the map, create a new blank map layer 0. Either you can parent backdropcontainer to layer 0, in which case you then have to compensate for the map layer itself moving, or you can hide map layer 0 with "set slice visible(lookup slice(sl:map layer 0), false)" and then put the backdrops behind the map, with "move slice below(backdropcontainer, lookup slice(sl:map root))".

To move at less than 1 pixel/tick, use "move slice by" instead. Remember to stop the movement if the player dies or reaches the end. (To avoid having to do that, you could calculate the position according to the camera position, like in the parallax script).
This parallax background adds a LOT to Ultra Frontier.
Post Reply