Last month, I started researching LibGDX, a game engine mainly targeted for Android. Also, this was the first time I worked with a game engine.

My goal is to develop a platform game like Vector but much simpler. This is also inspired by Temple Run. The main character keeps running and avoid being chased by the NPC. Precisely, I have to say that the main character just stays at one place and the background keeps moving backward.

The first problem that I encounterd was the infinite scrolling background. I have researched through Google with many solutions. However, all of them are too complex to solve that simple task. The code can be up to 100 lines long with tons of complicated mathematical formula to calculate how to scroll the background. Finally, I gave up and decided to come up with my own solution. Amazingly, it took me only less than 15 minutes and about 10 lines of code to achieve it.

The theory is very simple. Assume that you have a background file names bg.jpg, what you have to do now is to draw that background, move and loop it side by side. Let's look at the image below and I'll explain

Let's look at the video of this very simple example (sorry for the bad video quality).

Here is the code which I implemented using LibGdx. For other engine, it would be similar, the same theory, just different implementation. The demo code below is very dirty, so don't use it in the production.

OrthographicCamera camera;
Texture background;
float currentBgX;
long lastTimeBg;

// Init the camera
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480);

// Init the background image
background = new Texture(Gdx.files.internal("bg.jpg"));

// the separator first appear at the position 800 (the edge of the screen, see
// the camera above)
currentBgX = 800;

// set lastTimeBg to current time
lastTimeBg = TimeUtils.nanoTime();

batch.begin();
// draw the first background
batch.draw(background, currentBgX - 800, 0);
// draw the second background
batch.draw(background, currentBgX, 0);
batch.end();

// move the separator each 1s
if(TimeUtils.nanoTime() - lastTimeBg > 100000000){
	// move the separator 50px
	currentBgX -= 50;
	// set the current time to lastTimeBg
	lastTimeBg = TimeUtils.nanoTime();
}

// if the seprator reaches the screen edge, move it back to the first position
if(currentBgX == 0){
	currentBgX = 800;
}