Repeating world with seamless transitions?

Game Mechanics
#1

Hey,

is it somehow possible to create the effect of an infinite world by repeating it with seamless transitions. For example a spaceshooter where you see the spaceship from the bird’s eye view. When the spaceship comes to the left end of the world it starts over from the right end. Like in Asteroids but with a scrolling camera, so that there would be a point where you could see the left and the right end of the world simultaneously (Like flying around the globe but actually having a plain terrain.). If it’s from any relevance: I’m using JMonkeyEngine3.

greetings

#2

In principle, you just need to create a single seamless textures, but if you want a large world, it has to be very big.
You can have several seamless textures that you tile instead and make sure that your left world matches the right world tiles.

You can also do this procedurally with different types of periodic noise.

Here is a noise class that I use for smooth noise, both periodic and not:


public class GradientNoise {
	final static int TAB_SIZE = 512;
	final static int TAB_MASK = TAB_SIZE - 1;

	double[] gradientTab = new double[TAB_SIZE * 3];

	Random rnd;
	double[] valueTab = new double[TAB_SIZE];

	public GradientNoise(long seed) {
		rnd = new Random(seed);
		fillGradientTab();
	}

	public void setSeed(long seed) {
		if (rnd == null) {
			rnd = new Random(seed);
		} else {
			rnd.setSeed(seed);
		}
		fillGradientTab();
	}

	private void fillGradientTab() {
		for (int i = 0; i < TAB_SIZE; i++) {
			double z = getRandom();
			double r = Math.sqrt(1.0 - z * z);
			double theta = 2.0 * Math.PI * rnd.nextDouble();
			gradientTab[3 * i] = r * Math.cos(theta);
			gradientTab[3 * i + 1] = r * Math.sin(theta);
			gradientTab[3 * i + 2] = z;
		}
	}

	public double noise(double x, double y, double z) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);

		int iy = MathUtils.floorInt(y);
		double fy0 = y - iy;
		double fy1 = fy0 - 1.0;
		double wy = MathUtils.smoothStep(fy0);

		int iz = MathUtils.floorInt(z);
		double fz0 = z - iz;
		double fz1 = fz0 - 1.0;
		double wz = MathUtils.smoothStep(fz0);

		double vx0 = latticeValue(ix, iy, iz, fx0, fy0, fz0);
		double vx1 = latticeValue(ix + 1, iy, iz, fx1, fy0, fz0);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = latticeValue(ix, iy + 1, iz, fx0, fy1, fz0);
		vx1 = latticeValue(ix + 1, iy + 1, iz, fx1, fy1, fz0);
		double vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz0 = MathUtils.lerp(wy, vy0, vy1);

		vx0 = latticeValue(ix, iy, iz + 1, fx0, fy0, fz1);
		vx1 = latticeValue(ix + 1, iy, iz + 1, fx1, fy0, fz1);
		vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = latticeValue(ix, iy + 1, iz + 1, fx0, fy1, fz1);
		vx1 = latticeValue(ix + 1, iy + 1, iz + 1, fx1, fy1, fz1);

		vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz1 = MathUtils.lerp(wy, vy0, vy1);

		return 2.0 * MathUtils.lerp(wz, vz0, vz1);
	}

	public double periodicNoise(double x, double y, double z, int periodX,
			int periodY, int periodZ) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);

		int iy = MathUtils.floorInt(y);
		double fy0 = y - iy;
		double fy1 = fy0 - 1.0;
		double wy = MathUtils.smoothStep(fy0);

		int iz = MathUtils.floorInt(z);
		double fz0 = z - iz;
		double fz1 = fz0 - 1.0;
		double wz = MathUtils.smoothStep(fz0);

		double vx0 = periodicLatticeValue(ix, iy, iz, fx0, fy0, fz0, periodX,
				periodY, periodZ);
		double vx1 = periodicLatticeValue(ix + 1, iy, iz, fx1, fy0, fz0,
				periodX, periodY, periodZ);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = periodicLatticeValue(ix, iy + 1, iz, fx0, fy1, fz0, periodX,
				periodY, periodZ);
		vx1 = periodicLatticeValue(ix + 1, iy + 1, iz, fx1, fy1, fz0, periodX,
				periodY, periodZ);
		double vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz0 = MathUtils.lerp(wy, vy0, vy1);

		vx0 = periodicLatticeValue(ix, iy, iz + 1, fx0, fy0, fz1, periodX,
				periodY, periodZ);
		vx1 = periodicLatticeValue(ix + 1, iy, iz + 1, fx1, fy0, fz1, periodX,
				periodY, periodZ);
		vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = periodicLatticeValue(ix, iy + 1, iz + 1, fx0, fy1, fz1, periodX,
				periodY, periodZ);
		vx1 = periodicLatticeValue(ix + 1, iy + 1, iz + 1, fx1, fy1, fz1,
				periodX, periodY, periodZ);

		vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz1 = MathUtils.lerp(wy, vy0, vy1);

		return 2.0 * MathUtils.lerp(wz, vz0, vz1);
	}

	public double noise1D(double x) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);

		double vx0 = latticeValue(ix, fx0);
		double vx1 = latticeValue(ix + 1, fx1);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);

		return 2.0 * vy0;
	}

	public double periodicNoise1D(double x, int periodX) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);
		
		double vx0 = periodicLatticeValue(ix, fx0, periodX);
		double vx1 = periodicLatticeValue(ix + 1, fx1, periodX);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);
		return 2.0 * vy0;
	}
	
	
	public double noise2D(double x, double y) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);

		int iy = MathUtils.floorInt(y);
		double fy0 = y - iy;
		double fy1 = fy0 - 1.0;
		double wy = MathUtils.smoothStep(fy0);

		double vx0 = latticeValue(ix, iy, fx0, fy0);
		double vx1 = latticeValue(ix + 1, iy, fx1, fy0);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = latticeValue(ix, iy + 1, fx0, fy1);
		vx1 = latticeValue(ix + 1, iy + 1, fx1, fy1);
		double vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz0 = MathUtils.lerp(wy, vy0, vy1);

		return 2.0 * vz0;
	}

	public double periodicNoise2D(double x, double y, int periodX, int periodY) {
		int ix = MathUtils.floorInt(x);
		double fx0 = x - ix;
		double fx1 = fx0 - 1.0;
		double wx = MathUtils.smoothStep(fx0);

		int iy = MathUtils.floorInt(y);
		double fy0 = y - iy;
		double fy1 = fy0 - 1.0;
		double wy = MathUtils.smoothStep(fy0);

		double vx0 = periodicLatticeValue(ix, iy, fx0, fy0, periodX, periodY);
		double vx1 = periodicLatticeValue(ix + 1, iy, fx1, fy0, periodX,
				periodY);
		double vy0 = MathUtils.lerp(wx, vx0, vx1);

		vx0 = periodicLatticeValue(ix, iy + 1, fx0, fy1, periodX, periodY);
		vx1 = periodicLatticeValue(ix + 1, iy + 1, fx1, fy1, periodX, periodY);
		double vy1 = MathUtils.lerp(wx, vx0, vx1);
		double vz0 = MathUtils.lerp(wy, vy0, vy1);

		return 2.0 * vz0;
	}

	public double noise(double x, double y) {
		return noise(x, y, 0.0);
	}

	double latticeValue(int ix, int iy, int iz, double fx, double fy, double fz) {
		int tabIndex = index(ix, iy, iz) * 3;
		return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy
				+ gradientTab[tabIndex + 2] * fz;
	}

	double periodicLatticeValue(int ix, int iy, int iz, double fx, double fy,
			double fz, int periodX, int periodY, int periodZ) {
		int tabIndex = index(MathUtils.positiveMod(ix, periodX), MathUtils
				.positiveMod(iy, periodY), MathUtils.positiveMod(iz, periodZ)) * 3;
		return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy
				+ gradientTab[tabIndex + 2] * fz;
	}

	double latticeValue(int ix, int iy, double fx, double fy) {
		int tabIndex = index(ix, iy) * 2;
		return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy;
	}

	double periodicLatticeValue(int ix, int iy, double fx, double fy,
			int periodX, int periodY) {
		int tabIndex = index(MathUtils.positiveMod(ix, periodX), MathUtils
				.positiveMod(iy, periodY)) * 2;
		return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy;
	}

	double latticeValue(int ix, double fx) {
		int tabIndex = index(ix);
		return gradientTab[tabIndex] * fx;
	}

	double periodicLatticeValue(int ix, double fx,
			int periodX) {
		int tabIndex = index(MathUtils.positiveMod(ix, periodX));
		return gradientTab[tabIndex] * fx;
	}

	
	int index(int ix) {
		return MathUtils.hash(ix) & TAB_MASK;
	}

	int index(int ix, int iy) {
		return MathUtils.hash(iy + MathUtils.hash(ix)) & TAB_MASK;
	}

	int index(int ix, int iy, int iz) {
		return MathUtils.hash(iz + MathUtils.hash(iy + MathUtils.hash(ix)))
				& TAB_MASK;
	}

	// Returns a value between -1 and 1
	double getRandom() {
		return 1.0 - 2.0 * rnd.nextDouble();
	}

}

Here are also the functions in MathUtils that I use:



	// A magic hash
	public static int hash(int a) {
		a = (a + 0x7ed55d16) + (a << 12);
		a = (a ^ 0xc761c23c) ^ (a >> 19);
		a = (a + 0x165667b1) + (a << 5);
		a = (a + 0xd3a2646c) ^ (a << 9);
		a = (a + 0xfd7046c5) + (a << 3);
		a = (a ^ 0xb55a4f09) ^ (a >> 16);
		return a;
	}

	// b must be positive
	public static int positiveMod(int a, int b) {
		int result;
		if (a >= 0) {
			result = a % b;
		} else {
			result = (b + a % b) % b;
		}
		return result;
	}

	public static double lerp(double t, double x0, double x1) {
		return x0 + t * (x1 - x0);
	}


	public static double smoothStep(double x) {
		if (x < 0.0) {
			return 0.0;
		}
		if (x >= 1.0) {
			return 1.0;
		}
		return (x * x * (3.0 - 2.0 * x));
	}

	public static int floorInt(double x) {
		return (int) Math.floor(x);
	}
#3

Hey thanks,

but it’s actually not about repeating textures (I don’t use any) or very big levels. It’s more about small levels, but the player should not notice. I thought it might be possible to program something like that:

https://rex19.flatbooster.com/horde/gollem/view.php?actionID=view_file&type=png&file=Untitled.png&dir=%2Ffiles&driver=ftp

#4

How player see the movement at your game? If there is some backrgoung repeting player will allway notice that. So define your problem better.

#5
#6

This is going to take some time to explain… :yawn:
Luckily, there is a chapter in Killer Games Programming in Java about this, that I can link you to! :smiley:


This is a draft of the chapter describing a side-scroller, found in KGP (from the author).

On page 14 -> 21 there is something about the problem you’re describing.
In the draft the ever-scrolling backgrounds are called Ribbons.

The source code is also found there - this is the ribbons class:




// Ribbon.java
// Andrew Davison, April 2005, ad@fivedots.coe.psu.ac.th

/* A ribbon manages an image which is wider than the game panel's
   width: width >= pWidth

   When a sprite is instructed to move left or right, the 
   sprite doesn't actually move, instead the ribbon moves in
   the _opposite_direction (right or left). The amount of movement 
   is specified in moveSize.

   The image is wrapped around the panel, so at a given moment
   the tail of the image, followed by its head may be visible 
   in the panel.

   A collection of ribbons are managed by a RibbonsManager object.
*/

import java.awt.*;
import javax.swing.*;
import java.awt.image.*;



public class Ribbon
{
  private BufferedImage im;
  private int width;      // the width of the image (>= pWidth)
  private int pWidth, pHeight;    // dimensions of display panel

  private int moveSize;       // size of the image move (in pixels)
  private boolean isMovingRight;  // movement flags
  private boolean isMovingLeft;

  private int xImHead;   
     /* The x-coord in the panel where the start of the image
        (its head) should be drawn. 
        It can range between -width to width (exclusive), so can
        have a value beyond the confines of the panel (0-pWidth).

        As xImHead varies, the on-screen ribbon will usually
        be a combination of its tail followed by its head.
     */
 

  public Ribbon(int w, int h, BufferedImage im, int moveSz)
  {
    pWidth = w; pHeight = h;
    
    this.im = im;
    width = im.getWidth();    // no need to store the height
    if (width < pWidth) 
      System.out.println("Ribbon width < panel width");

    moveSize = moveSz;
    isMovingRight = false;   // no movement at start
    isMovingLeft = false;
    xImHead = 0;
  }  // end of Ribbon()



  public void moveRight()
  // move the ribbon image to the right on the next update
  { isMovingRight = true;
    isMovingLeft = false;
  }


  public void moveLeft()
  // move the ribbon image to the left on the next update
  { isMovingRight = false;
    isMovingLeft = true;
  }

  public void stayStill()
  // don't move the ribbon image on the next update
  { isMovingRight = false;
    isMovingLeft = false;
  }

  
  public void update()
  /* Increment the xImHead value depending on the movement flags.
     It can range between -width to width (exclusive), which is
     the width of the image.
  */
  { if (isMovingRight)
      xImHead = (xImHead + moveSize) % width;
    else if (isMovingLeft)
      xImHead = (xImHead - moveSize) % width;

    // System.out.println("xImHead is " + xImHead);
  } // end of update()


  public void display(Graphics g)
  /* Consider 5 cases: 
       when xImHead == 0, draw only the im head
       when xImHead > 0, draw the im tail and im head, or only the im tail.
       when xImHead < 0, draw the im tail, or the im tail and im head

     xImHead can range between -width to width (exclusive)
  */
  {
    if (xImHead == 0)   // draw im head at (0,0)
      draw(g, im, 0, pWidth, 0, pWidth);
    else if ((xImHead > 0) && (xImHead < pWidth)) {  
       // draw im tail at (0,0) and im head at (xImHead,0) 
      draw(g, im, 0, xImHead, width-xImHead, width);   // im tail
      draw(g, im, xImHead, pWidth, 0, pWidth-xImHead);  // im head
    }
    else if (xImHead >= pWidth)   // only draw im tail at (0,0)
      draw(g, im, 0, pWidth, 
                  width-xImHead, width-xImHead+pWidth);  // im tail
    else if ((xImHead < 0) && (xImHead >= pWidth-width))
      draw(g, im, 0, pWidth, -xImHead, pWidth-xImHead);  // im body
    else if (xImHead < pWidth-width) {
       // draw im tail at (0,0) and im head at (width+xImHead,0)
      draw(g, im, 0, width+xImHead, -xImHead, width);  // im tail
      draw(g, im, width+xImHead, pWidth, 
                  0, pWidth-width-xImHead);  // im head
    }
  } // end of display()


  private void draw(Graphics g, BufferedImage im, 
                        int scrX1, int scrX2, int imX1, int imX2)
  /* The y-coords of the image always starts at 0 and ends at
     pHeight (the height of the panel), so are hardwired. */
  { g.drawImage(im, scrX1, 0, scrX2, pHeight, 
                     imX1, 0,  imX2, pHeight, null);
  }

}  // end of Ribbon
#7

It doesn’t really matter if it is repeating textures or level data, it is basically the same problem on different scales, unless I got your question all wrong :slight_smile:

BTW, the image link is broken.

#8

I think you meant this link instead:
http://img856.imageshack.us/img856/6064/unledjqp.png

#9

These are not helping. Movement is allways relative. So ship is moving relative to? And how player is seeing that. Imagine full black space without any fixed point so how you could know that you are really moving?

#10

say a letter represents each world.W is the world you are currently in.

D
FWA
G

say your ship enters world G. delete worlds F,A, and D. add worlds where there are spaces. you now end up with

W
IGL
P

just make sure change which worlds are rendered BEFORE you can see the world you are about to enter.