Forums » Help » Continuously scroll a background layer?

Hey Dom,

I have 3 background layers in my game and i need the last layer (the clouds) to continuously scroll even when the player comes to a stop.

Is there an easy way i can do this?

Here is the link again: http://gamedev.arcadehype.com/wfmobile/

Thanks.

The position for all maps in the Game's .backgroundMaps array is set immediately before drawing, according to the Game's .screen.x/y. So to have an independent background map, don't put in in .backgroundMaps array and draw it yourself.

You could also erase the first map from the array, after the level is loaded. Something like this:

clearColor: null, // disable screen clearing

loadLevel: function( data ) {
	this.parent( data );

	this.cloudMap = this.backgroundMaps[0];
	this.backgroundMaps.erase( this.cloudMap );
},

update: function() {
	this.cloudMap.setScreenPos( x, y );

	this.parent();
},

draw: function() {
	this.cloudMap.draw();

	this.parent();
}

So basically im redrawing the clouds layer manually from the array? I followed your setup and now the clouds layer doesnt move at all, its just static. How can i set it to scroll horizontally and reloop itself?

Thanks.

In my example the cloud layer is erased from the backgroundMaps array, so it's only drawn once - by your own call to this.cloudMap.draw().

You can scroll it by calling this.cloudMap.setScreenPos( x, y ). E.g.:

cloudScroll: 0,
update: function() {
    this.cloudScroll += ig.system.tick * 100; // 100px per second
    this.cloudMap.setScreenPos( this.cloudScroll, 0 );

    this.parent();
},

If .repeat is set for the cloudMap (can be set in Weltmeister), it will automatically wrap around.

ok cool, works perfectly. I wasn't clear on how the setScreenPosition worked.

Thanks for clearing this up and again appreciate the help.

Cheers!

Hey Dom,

I ran into another issue. When i get to Level 2 the scrolling effect stops working and im not sure why.

Any ideas?

Thanks.

It's drawn but does not scroll? How do you load your levels? Does the new level also have the cloud layer?

Yes each level has the clouds layer - i created all my levels in Weltmeister. So the cloud layer is being drawn on each level but it stops scrolling after level 1.

Also im loading my levels with loadLevelDeferred

Dom, im not sure whats going on but i disabled the cloudMap.draw from my code and when i play the game the clouds map on level 1 doesnt get drawn but when i get to level 2 it does get drawn...the heck is going on?

So... you did this in your game's init():

this.loadLevel(this.levels[this.level]);
...
this.cloudMap = this.backgroundMaps[0];
this.backgroundMaps.erase( this.cloudMap );

Your game's init() is executed once at game start. It loads the level, then erases the first map from the .backgroundMaps array. That's all fine and dandy.

When the second level is loaded however, the old .backgroundMaps array is thrown away and re-created with all maps from the second level. This of course means that the first map from this second level is still in the .backgroundMaps array. It's not erased from the .backgroundMaps array like for your first level, because you only do this in your init().

Hence, in my example I overwrote the .loadLevel() method, so that each time a level is loaded, the first map from the .backgroundMaps is erased.

loadLevel: function( data ) {
    this.parent( data );

    this.cloudMap = this.backgroundMaps[0];
    this.backgroundMaps.erase( this.cloudMap );
},

Some related remarks: if some example code posted here doesn't work, please first check if you followed it closely. If you did and it still doesn't work, it's quite likely that there's a error in the code. Nobody has the source to your game and is able to try the code they post, but it still may gives viable pointers on how to implement something. Try to understand what the code does and why it may fail in your case.

Get familiar with Firebug or Chrome's Dev Tools or whatever else you use. These tools allow you to inspect your game at runtime. You can place break points and manipulate the game.

In this case for instance, your level has 4 background layers. If one layer is erased (the cloud layer) your ig.game.backgroundMaps.length should report 3. This is true for the first level, but not for the second - why not? Why didn't the cloud layer didn't get erased? Place a breakpoint at the .erase() method and observe if it is called when you think it should be.

Also, if you have a problem, try to make it as easy as possible for everyone else to understand and respond to it. That means:
1) Tell us what you want to achieve
2) Tell us what you did try already and how it failed
3) Maybe post some code and tell us exactly where you're stuck

There's also an excellent article called How To Ask Questions The Smart Way - it's quite long and somewhat over the top, but it's well worth skimming through.

i think my questions are pretty straightforward and i overlooked the loadLevel function you outlined.

excuse me if my questions sound dumb but i paid for this software so i expect to have my questions answered.

maybe you should read the article "Learn how to speak to people with respect"...it's well worth skimming through.

I implemented the loadLevel function and everything works correctly now so thanks for the help.

On a side note, if you feel people are asking dumb questions on these forums just point it out and don't insult anyone's intelligence...its not professional. Treat your paying customers with more respect.

Thanks again for the help.

I'm sorry, I didn't want to sound insulting. I'm just saying it's sometimes difficult to help because we don't have all the info about the game that you have. I wanted to point out ways to approach this problem.

However, I have to disagree that you can "expect" your questions to be answered. You bought a $99 software that comes without any support agreement. This forum is not intended as a platform to ask questions to me, but to the community. I understand myself as a part of this community and actively participate in the forums whenever I can.

No problem, no insult taken. I really don't care who answers my questions but since you're the creator of this framework i would value your opinion more over anyone else's...but that's just me.

I will probably have more questions down the road since im still new to your framework so any assistance you can continue to provide is appreciated.

Thanks.