Forums » Help » Smooth sideScrolling of game?

So i was wondering if there is a best approach for doing side scrolling?
I built a game that scrolls the level from right to left.
With collision layers and art layers.

See this demo:
http://goo.gl/UQGoh

Then i have the player centered on the screen animated in a walking pattern.
I want the rest of the level to scroll but it gets choppy.
Its for iPhone.

I think its the garbage collection jumping in, producing smooth movement at first then with a little choppy pause every 5 seconds or so.

How can i prevent this lag from happening?
Everything works fine but the stuttering that appears.

Should i load my layers as images instead of layers in weistmeister.
In weistmeister i have 2 backgrounds
each 320x320 with a dimension of 1x3 thats on repeat as it scrolls. with a distance of 2 and 3 to the rest of the artwork and collision.

Im binding this with iOSimpact and Ejecta same result, some secounds of chop then it go back to speed.

Is there a way?

	update: function() {

		this.parent();
		this.screen.x += 8;

	},

I'm sorry I can't help you with your problem, but just popping in to say that demo looks awesome! I love the layering (I wonder if it would be even cooler if the cloud/sky layer's distance was even higher, to make it scroll even slower than that background hill layer)

Thanks Lazer!
Happy you like it, i shifted it further back now.

I have made a lot of does level designs ready, And I have 4-5 parallaxing background per lvl.
the original tree level have 4 layers. moves ok, but the choppiness isn't going away.

Have it semi ready on my iphone right now :-)
its noticeable sometimes but its absolutely playable.
But i want to make it better then just good enough.
Casual gamer won't care. but the pro gamer will.

It feels like not an restriction to maybe impact.js but with how js works.
Or did i miss something?

Added some extra layers of content just to show that it doesn't really affect the lag i'm talking about.
This new stuff only create a brief increase in latency but it will then go over to regular.

this.screen.x += 6;

And yeah. it's "moose-signs" in there.

I do see some stuttering in Firefox/Mac, but not in Chrome or Firefox/Win7. I don't think there's much you can do about it at the moment.

Also:

Quote from mimik
this.screen.x += 6;

If you want to move the screen at a constant speed (i.e. X pixels per second), you have to factor in the tick value, otherwise the screen will move slower on slower machines.

// If you get a perfect 60fps, 6px per frame = 360px per second.
// To have constant 360px, regardless of the frame rate, do this:
this.screen.x += 360 * ig.system.tick;

I did notice a few things that may help.

Pre Render is not turned on (on the demo posted) turn it on for all the background layers.

Do not draw stuff you can not see, I would say about 50% of the background layer is allways covered so dont draw it.

If you have a solid colour sky remove it from your images, again this can save on a lot of draw calls. Then change the canvas clear color to your sky color. Add your clouds back in on a new layer.

The tip above from Dominic is very important to keep everything smooth.

You will still end up with some glitch but once you have your player and other entities your focus will come away from the background.

Using .preRender is not always a good idea. It only makes sense for background layers with small tiles that are mostly or completely filled. For games like Biolab Disaster, it reduces the number draw calls from over 400 to 3 or 4 - try enabling it in the Debug Console.

For this game however, I suspect .preRender would make things worse.

The background graphics are already fairly big (960x320); rendering them into 512px chunks wouldn't make any difference at all.

The foreground layer with the houses and signs is mostly empty. Drawing a few small tiles is probably faster than drawing 1 or 2 big ass chunks. Also, this level is quite big - using preRender for the foreground layer will need a huge amount of RAM and loading time to generate the chunks.

Lets do some math: The foreground layer is 2000 tiles wide, 16px for each tile = 32000px. You'd need 63 512px chunks for pre render it. One 512px chunk needs exactly 1mb in RAM (512px * 512px * 4bpp), so you'd end up with 63mb of RAM for the chunks.

yeah missed the size of the background graphics.

Hi guys
Thanks for all the help

i tried adding prerender to the background layers in weistmeister and at the load level function.

It works mutch better.
Even tried it with a entity running i got better performance with Ejecta.
It Seams to do the trick actually.

this.screen.x += 360 * ig.system.tick;

Help a lot, first it was kinda studdering in firefox. but with preRender it was all good.
Is there away to just not prerender the platform tiles? Think i just did that? :-)

I end up with 15-25 drawcalls:

http://kimgunnarsson.com/projects/spring/

	loadLevel: function( data ) {
	    this.parent( data );
	    
	    for( var i = 0; i < this.backgroundMaps.length; i++ ) {
	        this.backgroundMaps[i].chunkSize = 320;
	        this.backgroundMaps[i].preRender = true;
	    }
	},
	init: function() {
		// Initialize your game here; bind keys etc.
		this.loadLevel( LevelLvl1 );
	},
	
	update: function() {

		this.parent();
		this.screen.x += 360 * ig.system.tick;

	},

What i can see for now this runs fine in Ejecta.
Don't know if its a good approach to make does chunks.

Can i turn of .prerender thingy for just some layers?

Yes, Just do not check them in the editor, dont forget to apply the changes I always forget when changing the pre render falg.

If you have the debug panel open you can see all the background layers and then click the pre render boxes to turn them on and off may help find the whcih ones are best pre rendered if any. Also good way to check that the ones you want pre rendered are set on when the game starts, just in case you forgot the apply :).

By the way!
Thanks for all the help guys.
And especially Dominic, know your busy :-)

Got really good results from:
Changing to ig.system.tick;
Cleaned up code and logic, adding different GameStates.
Changed Background Parallax from five layers to two/three.
Shortened levels and removed empty spaces.
Rebuilt assets and spritesheets.
Cleaned up some more code.
Some perfomance boost from iosImpact to Ejecta.
Switched to mp3.

Optimizing code and reducing lvl assets did the most part.
Can still see some minor lagg in Firefox but this will be for iPhone at first.
Fastest without sound is currently IE9.

1 decade ago by mimik