How can I create a large space background that repeats for an rts game. I want to have complex nebulae and dust fields also, but since the units will have lots of space to explore I can't have a 120000px by 1200000px jpeg, so I want to have the image repeat, but not have change lines between segments.

I'm using this with Babylon framework by Microsoft for web GL canvas

  • 8
    \$\begingroup\$ Did you consider just using a procedural shader instead of any image? A simple web search bring this one up, which looks kind of very impressive: casual-effects.blogspot.com.au/2013/08/starfield-shader.html \$\endgroup\$
    – LeFauve
    Commented Jan 3, 2015 at 10:05
  • \$\begingroup\$ @LeFauve Actually I like this idea alot. Does the game remember the past generated stuff when you travel back on it? How can I manage this in browser memory? \$\endgroup\$ Commented Jan 3, 2015 at 10:50
  • \$\begingroup\$ @SuperUberDuper: There's no need for it to "remember" anything as long as it's generated in a deterministic and local manner. Just regenerate the data whenever it's needed. \$\endgroup\$ Commented Jan 4, 2015 at 19:29
  • \$\begingroup\$ @LeFauve: That should really be an answer. It's much better than the answers given. \$\endgroup\$ Commented Jan 4, 2015 at 19:30
  • \$\begingroup\$ @R.. I agree, would also be nice to have some code for it in webGL ;) \$\endgroup\$ Commented Jan 4, 2015 at 19:42

6 Answers 6

  1. Use parallax scrolling. Have multiple background layers which scroll with different fractions of the speed of the main viewpoint. The lower the layer, the slower it scrolls. This isn't just a great way to provide an illusion of depth, it also makes the backgrounds look less repetitive because the objects on the different layers will appear in different compositions due to the layers not being in sync.

  2. create your backgrounds procedurally. Instead of one huge background graphic, have multiple different smaller elements and place all of them multiple times randomly all over the game world.

And by the way: Don't use JPEG when you can avoid it. It's a lossy format which loses more quality every time you modify and save it, it is heavily optimized for photography and doesn't support transparency. Use a lossless format with alpha channel like PNG. The only good reason would be when your source image is only available in JPEG (NASA published a lot of nice astronomy pictures which are all in the public domain) and you want to do no modification whatsoever on them.


A way to build an infinite background for a 2D game is the following:

  1. Using a graphics editor software (like iDraw for Mac) create an image A that represents a portion of your background. This image should have a limited size.
  2. Duplicate A and mirror it on the Y axis, this is B
  3. Now paste (horizontally) togheter A and B, this is AB.
  4. Finally import the image AB in your game and repeat it horizontally via code as many times as you want.

Hope this helps.

  • 2
    \$\begingroup\$ Limited size, but not too limited. The smaller the tile, the more obvious the repetition will generally be. \$\endgroup\$
    – cHao
    Commented Jan 3, 2015 at 17:37
  • 1
    \$\begingroup\$ Or, instead of mirroring, use the Offset filter in Photoshop and clone stamp over the borders, or just use GIMP's "Make Seamless" filter (Filter → Map → Make Seamless). \$\endgroup\$
    – wchargin
    Commented Jan 4, 2015 at 16:19

Layers work well.

Here's some maths:

Suppose you have a railway track that's been poorly made such that the like __ __ notice the gap between them. When the wheel rolls over them it makes a small notch (tiny notch).

If the track length is l and the wheel has radius r then 2pi r is the circumfrence of the wheel, ration=l/(2pi r) if the ratio is say 10.25 then the wheel will get a notch in it every quarter as it rides a long.

This is the easiest way I can think of to explain covering spaces.

So suppose you have two images, if one has this quarter ratio you'll get a 4-phase pattern, it'll repeat after 4 tiles. Suppose you have 1 main background and 2 overlays, with m and n phases. Then the pattern will repeat after m*n tiles.

While it wont matter much the pattern will look best if the numbers are co-prime, that is the greatest common divisor is 1. For example suppose we have something of phase 6 and something of phase 4, every other phase these will "line up" in a sense.

You can use this technique (especially with particles and stuff) to create a lot of "unique" stuff with very little effort.

Back to the train wheel, if the ratio is irrational, then the notches will cover the the wheel! But this doesn't really matter.


Here is another idea which seems to be missing:

In case of long distance backgrounds, like sky boxes, Parallax layers doesn't really feel good. Think of the stars for example, when walking on earth, or even better through out the night, all the stars move together, though we know they are hundreds or thoughts light year away from each other. The thing is they are way too far away for us to notice their distances. All that said we still want a very big texture (say 120k*120k), to be drawn with our limited computational power (which can handle 8k*8k at most). Like using multiple parallax layers, you should create different textures, each with different kinds of details. For example one represents galaxies, another one is a bunch of stars, etc. But this time instead of moving them with different speeds, they should differ in their sizes. Here is an example: Consider using 3 textures, one is 2048*2048, another one is 729*729 and the third one is 625*625. Since these numbers are coprime with each other, When combining these 3 textures in 3 layers, one should move lcm(2048,729,625) = 764M pixels from the origin to see same thing being drawn, which kinda feels like infinity. In fact you can add other layers or change size of each texture and you'll always end up with a result as big as least common multiple of texture sizes.

  • 2
    \$\begingroup\$ This and @AlecTeal's answer describes a technique called the Cicada Principle. It's an easy way to create non random, very large non repeating background with very little resources. \$\endgroup\$
    – Lie Ryan
    Commented Jan 3, 2015 at 7:05

This seems to be a job for a procedural pixel shader.

The advantages over using an image are:

  • You don't need to provide huge bitmaps
  • It is procedural, so it doesn't have to repeat a fixed image (it can vary infinitely)
  • If you want a paralax effect, you can simulate thousands of planes, which would be impractical using images
  • You can do very advance effects, like dynamic lighting
  • Most of the processing is made by your GPU, leaving the CPU free for other parts of your game

A simple web search bring this shader up http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html which looks like what you're looking for.

I'm not an expert on WebGL, but according to this page, it looks like it uses the regular GLSL language (this is the C-Like language used by graphic cards to program shaders). This means you will probably have little to no changes to do to make it work.

You may however try to start with a more basic shader to understand how it works.

This blog page lists all the steps to implement a shader in WebGL. That seems a good place to start.

Another good place to find wonderful shader examples is https://www.shadertoy.com/

  • \$\begingroup\$ Great one thanks!!! I now have hard time picking an answer! \$\endgroup\$ Commented Jan 5, 2015 at 9:58
  • 2
    \$\begingroup\$ Well, if you have a chance to give a try to shaders, that's definitely something that will be useful on the long term if you want to do nice looking games. The first step is a little high (it took me 2 weeks to have my first shader looking the way I wanted it) but it worth it on the long run. \$\endgroup\$
    – LeFauve
    Commented Jan 5, 2015 at 12:41

You can cut your big jpeg in a small segments and place them (visible part) , you don't even need store it in a memory all the time.

And like a old games some 'tiles' can repeat. Thats was common solution for NES console, thats was even supported by hardware.

  • 1
    \$\begingroup\$ It's extremely hard, if not impossible, to cut a JPEG into smaller JPEGs that will stitch without visual glitches because of the lossly compression. If you go for tiles, you'll have to use a lossless compression file format, like PNG. \$\endgroup\$
    – LeFauve
    Commented Jan 10, 2015 at 10:05
  • 1
    \$\begingroup\$ I agree that PNG may be better, in other hand, JPEG textures are common in 3d graphics , and more important JPEG use 16x16 blocks for coding en.wikipedia.org/wiki/Macroblock right cut can be not noticed if not do coding in lowest rate. \$\endgroup\$ Commented Jan 10, 2015 at 17:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .