Drop Charge Scrolling Twitches - Seen in many other scrolling projects too

Scrolling the background with large images 2048x1536px makes the scrolling twitch at first. When the background
images has looped once, the background scroll is smooth and stays smooth.

To see this better, set the space hero initial jump boost to a very low number
because otherwise the looping of the background images occurs fast and when the images has looped once
the twitching don’t occur anymore, it’s just in the beginning of background scrolling.

I’ve seen this behaviour in other Swift projects too and I’ve tried to split the background
to smaller pieces and that makes the twitch occur less frequent, on some tests the twitch doesn’t
occur at all. The downside with smaller pieces is that I get several hundreds
of nodes in my project if I have several different background looping, like in the Jetpack
Joyride game.

Im using Xcode 8.3.3 Swift 3 and testing on an iPad Air (1 gen) with showsphysics turned off
and also tested with node count and frame count turned off, I also disabled all print log output.

Does anyone know how to make the background scroll without the initial twitches that
occur before all bg images has been looped once?

Hi @arrow

This happens because the app needs some time to load sprites from disk to memory (after that, they are cached). I would suggest to preload images before showing the actual game level to user. In SpriteKit, for example, you can implement preloading like this: https://stackoverflow.com/questions/38818210/preloading-textures-in-spritekit

Nikita

1 Like

Thanks Nikita.

I’ve already tried Sanf0rd’s solution in the link you suggested but Xcode gives me an error
saying the files are too big to fit in the Atlas
The reason that I was trying Sanf0rd’s solution over appzYourLife’s solution was that
Sanf0rd says “I tried to implement appzYourLife answer but it increased the time to load every texture.”
I will try appzYourLife’s solution and I will get back with an answer when I’ve tried it out.

Thanks again for your answer.

Well I tried to load sixteen 2048x1536 images to a BGScrollImages.atlas but I get error:
“Generate SpriteKit Texture Atlas Error Group”:
“TextureAtlas: cannot fit input texture into a maximum supported dimension of 2048 x 2048.”

I’m totally stuck now. I’ve Googled and found som Stack Overflow posts about this issue but none which
have a working solution. How can a game like Jetpack Joyride be made without the scroll twitch in the beginning of the scroll? The game has many different backgrounds scrolling and also parallax scrolling and there is no lag.
Link here to the game:

Hi @arrow, that’s because 16 2048x1536 images are bigger than max atlas size of 2048 x 2048. So you can just create 16 atlases for each background image, and then preload those atlases separately.

Nikita

Thank you for your answer Nikita. I tried that yesterday but I got the same error then.
Today it worked, maybe my Xcode needed a restart.

This is one way to get it to work. However, I’m thinking of a real game
that has 20 or more levels with different scroll images on each level.
If each level has 64 (or more) 2048x1536 scroll images then I would have to create
1280 atlases. I’m thinking that there must be a better way to make a real scrolling
game with several different looking levels.

I really appreciate and thank you for your answer.

I will continue to “research” this, I’m preparing a Stack Overflow post
with 2 attached SpriteKit projects so that my problem can easily be seen.

Thanks again.

@arrow - in that video it appeared to me that the background was made up of smaller tiles rather than 2048x1536 images.

1 Like

In the case that you described - 20 levels, 64 atlases per level, you game size would be extremely large.
I would suggest you to separate common elements from your background images (trees, bushes, mountains etc.) and design your backgrounds with it programmatically or in the scene editor. So this way you will reduce number of atlases.

All I want to do is to get the scrolling to scroll smoothly from the beginning
and right now I cannot get that to work att all, se more below. I must do something
wrong, maybe the images are just to big kb-wise?

Nikita, I tried your solution with 8 atlases that holds only 16 2048x1536 images (no other assets at the moment)
and each image I use for testing is approx. 150 kb in size. I preload the 8 SKTexturAtlases
but the scrolling still twitches in the beginning until all images has been looped. After
that everything runs smooth even at a very, very high scroll speed.

Caroline, thanks for your answer. Yes, smaller pieces works better (but also twitches sometimes) but that increases the node count.

I will not give up on this until it works, so, soon I’m posting my issue on Stack Overflow to see if someone has a good solution for this. Meanwhile I will keep on trying to solve this but I’m also working on another project alongside my scrolling project, that takes up a bit of time.

Thanks for your help Caroline and Nikita.

I posted this on Stack Overflow now, there’s a link in the post to my testproject if anyone wants to run
the project on a physical device.